김민규

기능 개발

• 유저별 접근 권한에 따라 Lazy Loading으로 동적으로 라우터를 생성하고, 라우팅별로 액션에 따른 권한 관리 기능을 개발했습니다.
• CSV를 파싱하고 zod를 활용하여 실시간으로 유효하지 않은 값 수정 및 일괄 업로드가 가능한 테이블을 구현했습니다.
• 역할 기반 접근 제어(RBAC) 방식의 권한 관리 UI를 구현하고, 기능별 권한 설정 및 적용 기능을 구현하여 계정별로 접근 가능한 기능을 제한하였습니다.
• 글로벌 및 미국 내 지역별 서비스를 위한 어플리케이션 내 전역 Timezone 변환 기능을 개발했습니다.
tiptap 기반 커스텀 WYSIWYG 에디터를 개발하여 스토리지 이미지 일괄 업로드 기능을 구현하였습니다.
쿼리스트링 기반 다중 필터 검색 기능과 Collapsible Sidebar를 구현했습니다.
recharts를 활용한 매출 및 사용량 시각화를 구현했습니다.

성능 최적화

• 기존에 수 천개 가량의 Row 렌더링 과정에서도 초 단위의 렌더링 병목이 발생하는 문제를 범용적으로 사용 가능한 리스트 가상화 테이블 컴포넌트를 구현하여 최대 수 만개의 데이터(약 100mb의 메모리 점유)를 다루는 패킷 로그, 충전 이력 내역에서도 렌더링 병목이 생기지 않도록 최적화 하였습니다.
• 검색 옵션에 따라 최대 20번의 순차 호출이 이뤄지는 공통코드 호출을 병렬 요청으로 전환하여 요청 시간을 90%(200ms → 20ms) 까지 감소시켜 네트워크 워터폴 현상을 최적화했습니다.
• vite-bundle-visualizer를 활용하여 미사용 모듈을 Lazy Loading으로 코드 스플리팅을 통해 엔트리 청크의 파일 크기를 약 60% 감소시켰습니다.(gzip 미적용 기준)
하루 중 특정 시각에 작업을 실행하는 useDailyTask 커스텀 훅을 구현하여 비용이 많이 소모되는 일/월별 통계 요청을 캐싱하여 네트워크 요청 횟수를 최소화하였습니다.

코드 품질 개선

• 국가별 현지화를 위한 모노레포 레이어 아키텍쳐를 구축하여 공통적으로 사용되는 UI, 커스텀 훅, 인터페이스 등을 패키지로 분리하고 로컬라이징이 필요한 비즈니스 로직 및 UI를 필요한 레이어에서 의존하도록 배치하여 국가별 모듈 관리 편의성을 개선했습니다.관련 발표
도메인 엔티티별로 인터페이스, 네트워크 요청 함수, Query Key Factory를 분리하여 관리했습니다.

사용자 경험 개선

• 기존에 모든 월/시간을 기준으로 부하를 기입해야 하는 방식으로 기획된 한전 부하 시간대 관리 Form을 계절과 시간대로 분리한 후 부하별로 시각적 차이를 두어 12(월) x 24(시간) = 288개의 입력 요소를 3(계절) x 24 = 72개로 간소화하여 사용자의 UI 직관성을 개선했습니다.
반복적으로 사용되는 도메인 용어들을 인터페이스의 구현체 상수 객체로 분리 후, 관계별로 참조하도록 매핑하여 빌드 시 선택된 언어로 오버라이딩을 통해 주입해 용어의 일관성 문제를 방지하도록 구성했습니다.
Form의 변경사항을 감지하여 beforeunload Event를 통한 페이지 탈출 방지를 구현했습니다.

DX 개선 및 협업 환경 구축

• 기존에 모노레포 내의 모든 패키지를 설치 후 전체 파일을 온프레미스 개발 서버로 전송하던 젠킨스 파이프라인을 turbo prune을 사용하고 빌드 결과물만을 전송하도록 개선하여 CI/CD 소요시간을 10분 → 2분으로 개선했습니다.
전시회 및 홈페이지에서 사용할 데모 프로젝트를 구축해달라는 요구사항에서 데모용 서버 및 DB를 별도로 구축하지 않고 MSW를 활용한 Mock API 기반 데모 프로젝트를 구축하여 비용 및 작업 공수를 단축하였습니다.

기능 개발

• Expo Module을 활용하여 Kotlin, Swift로 구현한 Naver Map API(국내향)와 Google Map API(해외향)로 실시간 가격, 사용 가능 여부 등 동적 요소 및 애니메이션이 적용되는 마커와 이동 간 최적 충전 경로를 제공하는 지도 서비스를 개발하고 있습니다.
• Native-Web 브릿지를 구성하고 Next.js Streaming SSR로 모바일 최적화 웹뷰 환경을 구축했습니다.
Stripe SDK를 활용한 해외 카드 및 Apple Pay Billing 등록 및 결제 기능을 구현했습니다.
Firebase Cloud Messaging을 활용하여 푸시 알림 기능을 구현했습니다.
Google, Apple, Kakao, Naver 로그인 기능을 구현했습니다.

성능 최적화

• 커뮤니티에서 관리하는 React Native Naver Map 라이브러리로는 동적인 데이터가 포함된 애니메이션 마커가 View 변환 오버헤드로 인해 10개의 마커를 렌더링 하는 경우에도 프레임이 10fps까지 떨어지는 문제가 있었습니다. Expo Module로 OS별 네이티브 레이어에서 개발 가능한 환경을 구성하고 node-canvas를 활용한 이미지 서버를 구현하여 1,000개 이상의 애니메이션이 포함된 동적 데이터 마커를 렌더링하는 과정에서도 60fps를 유지하는 성능을 보장하도록 해결했습니다.

기능 개발

• 스마트로 결제 API를 활용한 결제 모듈 연동 개발을 진행했습니다.

코드 품질 개선

• Kafka 전송 실패, Database 에러, 결제 중 유저 탈출 등 실패 케이스에 대한 에러 코드를 정의하여 사용자의 문제 인식 과정을 개선했고, 케이스별 에러 코드를 문서화했습니다.

기능 개발

• next-intl 라이브러리를 활용하여 한국어, 영어, 독일어를 지원하는 다국어 페이지를 개발했습니다.
• framer-motion 라이브러리를 활용해 스크롤 동작에 반응하는 인터랙션 애니메이션을 개발하여 사용자 경험을 향상시켰습니다.
Mailgun SDK를 사용하여 문의와 제보를 사내 슬랙 채널 및 인트라넷 메일로 발송하는 기능을 개발했습니다.

SEO 최적화

• 다국어를 지원하며 이미지와 동영상 같은 미디어 콘텐츠를 포함하는 Sitemap Generator를 개발하여 SEO를 개선하였습니다.
• Sitemap indexing를 통해 사이트맵을 Product, News, Blog로 분리하여 사이트맵 관리 편의성을 개선했습니다.
Semrush를 사용해 SEO 취약점을 분석하고 개선하여 검색 엔진 최적화를 진행했습니다.
SEO를 위해 구조화 데이터(JSON-LD) 마크업 설계 및 적용하였습니다.

DX 개선 및 협업 환경 구축

• i18n-scanner를 활용하여 i18n JSON 파일과 스프레드시트를 자동으로 동기화하는 스크립트를 구축하여 번역팀과 개발자 간의 커뮤니케이션 효율을 개선하였습니다.
마케터가 브랜딩 리소스를 직접 관리할 수 있는 페이지를 개발하여 운영 효율성을 개선하였습니다.