김민규
Kim Min Gyu
Frontend Developer
10초의 로딩을 500ms로, 끊기던 화면을 60FPS로. React, React Native, Electron을 활용해 웹·앱·데스크톱을 아우르는 크로스플랫폼 프론트엔드를 개발하며, 사용자 경험의 병목을 수치로 진단하고 해소해왔습니다. 프론트엔드를 넘어, 메이커의 시선에서 설계·구현·인프라까지 제품 전체의 품질을 높이는 데 기여하고 있습니다.
CERTIFICATIONS
SKILLS
TypescriptReactNext.jsReact NativeElectronHono.jsAWSCloudflare
VIEW ON THE WEB
Work Experience
총 개발 경력 1년 9개월충전기개발부문 SW팀 / 프론트엔드 개발자
WONIK PNE
2024.07 – Present · 1년 9개월
전기차 충전기 및 충전소 인프라 제공에 필요한 기술들을 웹과 모바일 등 여러 방법을 활용하여 문제를 해결하고 있습니다.
프로젝트의 초기 구축부터, 배포, 설계 고도화까지의 전 과정에 참여했으며, 프론트엔드 파트를 전담하고 있습니다.
Devportal
전기차 충전기 펌웨어와 소프트웨어 간 바이너리 통신을 위한 터미널 어플리케이션을 크로스 플랫폼으로 개발했습니다.
터미널 이외에도 실시간 3D 테스트 및 부품 진단 프로그램과 사내 칸반 기반 프로젝트 일정 관리 소프트웨어를 개발하고 데이터 구조를 설계하였습니다.
ReactElectronReact NativeMQTTWebSocketWeb Serial APIDND KitThree.jsReact Three FiberTurborepolingUI
전기차 충전기 시리얼 통신 터미널 어플리케이션 개발
기존 시뮬레이터는 Windows에서만 사용 가능하며 프로토콜이 소스코드에 하드코딩되어 스펙마다 추가 개발·빌드가 필요했습니다. 포맷을 JSON 직렬화 가능한 구조로 정의하고 DB로 관리하도록 전환하여 커스터마이징 가능한 Server Driven UI 구조의 터미널로 개선했습니다.
브라우저에서의 시리얼 통신을 위해 Web Serial API를 선택했습니다. 하지만 OS 보안 정책으로 가상 시리얼 포트이 노출이 안되고 모바일 디바이스에서 API가 지원하지 않는 문제가 발생하여
React Native/Electron에서 동시에 사용 가능한 브릿지 패키지를 구현해 브라우저/데스크탑/안드로이드 크로스 플랫폼 구축 및 핵심 코드는 React에서 한 번만 작성하는 구조로 개발 공수를 절감했습니다.RS-232 외 WebSocket, MQTT 등 다양한 통신 방식 대응이 필요해져, 통신 레이어를 어댑터 패턴으로 추상화하여 신규 구현 시 메세징 구현체만 작성하면 되는 확장 구조를 확보했습니다.
MQTT 원격 통신의 경우 IoT USIM 계약에 따른 아웃바운드 트래픽 제약이 존재했습니다.
Deflate 방식으로 패킷을 압축하여 200ms마다 발송되는 패킷 용량을 건당 140Byte → 15Byte로 90% 절감하고 현장에 나가지 않고도 충전기를 점검 가능한 환경을 구축했습니다.스펙 변경 시 개발자 개입이 필수적인 병목을 해소하기 위해 사용자 친화적인 DND Kit 기반 Drag & Drop 편집기를 구현하여 개발팀 의존도를 제거했습니다.
기존에는 통신 디버깅 시 바이너리 로그를 수동 해석해야 하는 불편함이 있었습니다. 송수신 데이터를 해석하여 타임라인으로 리플레이할 수 있는 히스토리 트래커 컴포넌트를 개발하여 장애 시 디버깅 시간을 단축했습니다.
JSON 포맷을 바이너리로 변환하거나 파싱할 때, 데이터 타입에 따라 동적으로 변환하는 기능을 구현했습니다. 변환 코드를 효과적으로 관리하기 위해 타입별 Encoder, Decoder 클래스를 분리하고
ProtocolBuilder 에서 적절한 변환기를 호출하도록 구현하여 변환 로직의 확장성과 가독성을 개선했습니다.기존에는 펌웨어만 시뮬레이션 가능하여 펌웨어 개발자가 소프트웨어 측 시뮬레이션을 할 수 없었습니다. 데이터를 양방향 관리 구조로 변경하여 소프트웨어 시뮬레이션이 가능해지고, 개발자에게 집중되던 요청 부담을 분산했습니다.
기존 시뮬레이터에서 전환하는 사용자의 러닝커브를 줄이기 위해 프로토콜을 기존 사내 문서 스타일의 Excel 파일로 변환하는 기능과, AI 활용을 위한 Markdown 변환 기능을 개발하여 툴 전환시에 발생하는 러닝커브를 감소시켰습니다.
AI Driven 생산성 및 DX 개선 환경 구축
백엔드 스웨거의 경우, 응답 스키마가 존재하지 않아
Orval 등 OpenAPI 자동화에 어려움이 존재했습니다. 서버 레포지토리 기반으로 zod 스키마, Http 통신, 쿼리 팩토리를 자동 생성하는 Claude Skill을 구축하여 API 연동 작업 시간을 단축하고 백엔드 변경에 대한 프론트엔드 의존성을 해소했습니다.변경된 파일의 미번역 콘텐츠를
lingui로 자동 래핑·추출·번역하는 Claude Skill을 구축하고 CI에서 번역 커버리지를 측정하여 번역 누락을 사전 차단하고 수동 번역 작업을 자동화했습니다.티켓 ID 기반으로 체크아웃, 개발 서버 실행, IDE 워크스페이스 오픈을 자동화하는 Claude Skill을 통해 Claude Squad로 독립된 워크트리에서 복수 태스크를 병렬 처리 가능한 환경을 구축, 컨텍스트 스위칭 비용을 제거했습니다.
3D 전기차 충전기 테스트 진단 프로그램 개발
터미널을 통해 수동 조작하여 부품을 고장 진단하는 방식은 케이스 재현과 정확도, 비개발자의 사용성에 한계가 있었습니다. 조작 시나리오를
Command/Wait/Expect로 구조화한 자동 테스트 러너를 구축하여 진단 과정을 자동화하고 테스트 재현성을 확보했습니다.3D 모델 위에 부품 위치를 매핑하여 실시간으로 테스트 진행 상태와 통과 여부를 3D 모델 위에 포인터로 시각화하여, 점검 시 고장 원인 파악을 용이하게 하였습니다.
대용량 3D 모델의 S3 아웃바운드 비용과 레이턴시를 해결하기 위해 Origin Private File System API 기반 로컬 캐싱을 구현하여 로딩 시간을 10초 → 500ms로 95% 단축하고 S3 비용을 절감했습니다.
칸반 기반 프로젝트 일정 관리 소프트웨어 설계 및 개발
Jira, Asana 등 외부 솔루션이 사내 요구사항과 맞지 않아, 인하우스 칸반 기반 프로젝트 관리 소프트웨어를 설계·개발하여 외부 SaaS 구독 비용을 제거하고 사내 워크플로우에 최적화된 환경을 구축했습니다.
리스트/칸반/캘린더 뷰를 제공하고, 필터 상태를 URL Query String으로 관리하여 팀원 간 작업 현황 공유 및 북마크가 가능하도록 협업 효율을 개선했습니다.
viveEV APP (개발 중)
국내 및 북미 전기차 운전자들에게 자사의 충전소 인프라를 제공하는 어플리케이션을 React Native로 개발하고 있습니다.
기존에 Flutter 기반 외주로 개발한 앱을 React Native로 마이그레이션 중입니다.
React NativeReactExpoTanstack QueryTurborepoS3CloudFrontPulumi
React 기반 웹뷰 실행 환경 및 배포 인프라 구축
초기 설계시 저성능 환경을 대비해
Next.js를 고려했지만 인프라 관리 비용과 디바이스에 따른 실제 성능에 대한 추가적인 고려가 필요했습니다. 슬로우 쿼리를 포함한 Mocking API, Amplify, S3/CloudFront 데모 클라이언트를 리전별로 배포 후 Catchpoint를 통해 리전/디바이스/네트워크에 따른 퍼포먼스 테스트를 진행해 총 16개의 퍼포먼스 데이터를 수집했습니다. 분석결과 SSR Amplify/Nextjs의 지표가 1.5배 가량 낮았고, 유저 인터랙션 중심의 어플리케이션 성향을 고려하여 S3/CloudFront를 최종 선정하였습니다.국가별로 분산된 AWS 리소스(S3, CloudFront 등)의 수작업 구성에서 불필요한 반복 작업과 오류 가능성이 존재했습니다. 이를 해결하기 위해
Terraform 대비 러닝커브가 낮고 Typescript 기반으로 확장과 유지보수가 용이한 Pulumi기반 IaC 환경을 도입했습니다. 인프라를 코드로 표준화하고 재사용성을 확보함으로써 배포 자동화, 일관성, 안정성을 강화했습니다.웹뷰의 빠른 배포 주기와 롤백의 장점을 활용하기 위해
AWS SDK 기반 배포 CLI를 구축하여 환경·국가별 배포 및 롤백을 커맨드 한 줄로 수행 가능하도록 운영 편의성을 개선했습니다.브릿지 인터페이스가 변경될 경우 버전 불일치 문제가 발생할 수 있었습니다. Upload CLI로 웹뷰 아티팩트 업로드시
Cloudfront KeyValueStore로 웹뷰 아티팩트 버전과 브릿지 버전을 매핑하고, Serve CLI에서 브릿지 버전별로 제공할 웹뷰 버전을 지정 가능하게 했습니다. 네이티브에서 웹뷰 요청시 쿠키에 브릿지 버전을 담아 Cloudfront Functions에서 해당 브릿지에 따라 적절한 아티팩트를 서빙하도록 구현하여 안정적인 브릿지 인터페이스를 보장하는 배포 환경을 구축했습니다.Changeset 기반 버전 관리와 Preview 자동 배포 파이프라인을 구축하여 PR 단위로 즉시 QA가 가능한 환경을 확보, 피드백 사이클을 단축했습니다.스타일링 마크업 코드를 Typescript 객체로 관리하고,
StyleSheet와 vanilla-extract가 참조하도록 해 크로스플랫폼 UI 컴포넌트 라이브러리를 구축하여 앱/웹 간 UI 불일치를 제거하고 동일한 사용성을 제공하도록 개선했습니다.지도 기반 전기차 충전소 위치 제공 기능 개발
국내향은 유저 선호도와 API 비용을 고려하여
Naver Maps API를, 북미향은 호출 비용 최소화를 위해 Google Maps를 네이티브 레이어에서 사용하고 iOS는 빌트인 Apple Maps를 선택하여 리전별 비용과 사용성을 동시에 최적화했습니다.Google Maps의 경우 커스텀 마커 렌더링 및 애니메이션으로 인해 프레임 드랍이 발생했습니다. React Native 전용 라이브러리 대신 Expo Module API로 마커 렌더링 및 애니메이션을 네이티브에서 직접 수행하도록 전환하여 다량의 커스텀 마커 렌더링에도 60FPS를 안정적으로 보장했습니다.
Naver Maps JS API의 React 통합 편의성을 위해 선언적으로 지도 리소스를 관리 가능한 React Naver Maps Kit 오픈소스 라이브러리를 직접 개발하여 선언적 React 코드 패턴과 일치하는 방식으로 지도 기능을 개발했습니다.
어플리케이션 컨텍스트 분리 환경 구축
Dev/Prod 환경의 앱 식별자가 동일하여 스토리지 등 어플리케이션 컨텍스트가 오염되는 문제가 있었습니다. Prebuild시 환경별 네이티브 컨텍스트를 주입해 하나의 디바이스에 Dev/Prod 동시 설치 가능, 환경 간 데이터 오염을 차단했습니다.B2B SaaS 백오피스 CSMS (Charging Station Management System)
자사 충전소 인프라 관리 및 고객사의 충전소 관리를 위한 전기차 충전소 B2B SaaS 백오피스의 프론트엔드를 개발했습니다.
ReactJenkinsTurborepotiptaplingUI
모노레포 레이어 아키텍쳐 설계 및 로컬라이징
국가별 별도 프로젝트 대신 단일 코드베이스를 선택하고, 공통 레이어와 국가별 오버라이드 레이어를 분리하는 구조를
Turborepo로 설계하여 빌드 설정만으로 한국/북미 등 다국가 서비스를 배포 가능하도록 구축했습니다."충전소"/"Station" 등 국가별로 상이한 비즈니스 용어를 도메인 인터페이스의 구현체로 정의하여 하나의 코드베이스에서 국가별 용어를 일관되게 관리할 수 있도록 했습니다.
성능 최적화
수만 건의 충전 내역 목록 렌더링 시 프레임 드랍 문제를
@tanstack/virtualizer 리스트 가상화 테이블 컴포넌트를 구현하여 해결했습니다.검색 조건별 API의 순차 호출로 인한 Waterfall을 병렬 요청으로 전환하여 응답 시간을 90% 단축(200ms → 20ms)했습니다.
XLSX 등 대용량 모듈의 코드 스플리팅과 React.lazy 동적 임포트로 엔트리 청크 크기를 60% 감소시켰습니다.CI/CD 및 인프라 개선
기존 Jenkins가 전체 소스를 온프레미스 서버로 전송 후 빌드하여 배포에 약 10분이 소요되었습니다.
turbo prune으로 CI에서 빌드를 완료하고 아티팩트만 전송하는 구조로 전환하여 10분 → 1분으로 90% 단축했습니다.viveEV 비회원 결제 웹앱
선불 결제 후 사용량에 따른 부분 취소 방식의 충전기 결제 웹앱의 프론트엔드 및 백엔드를 개발했습니다.
ReactNext.js
결제 모듈 연동 및 에러 핸들링
스마트로 결제 API 연동부터 예치금 충전, 정산까지 전체 결제 플로우를 FE/BE 단독으로 설계·구현했습니다.
Kafka 전송 실패, DB 에러, PG사 결제 실패 등 실패 시나리오별 에러 코드를 체계적으로 정의하고 사용자에게 원인과 대처 방법을 안내하여 결제 관련 CS 문의를 감소시키고 사용자 셀프 해결율을 향상시켰습니다.viveEV 및 피앤이시스템즈 홈페이지
반응형 디자인과 다국어 지원, SEO 최적화, 리소스 매니징 작업.
Next.jsnext-intlmotion
다국어 지원 및 인터랙션 개발
next-intl로 한국어/영어/독일어 다국어 페이지를 개발하여 신규 시장 진출 시 별도 사이트 구축 없이 즉시 현지화 대응이 가능하도록 했습니다. URL 경로 기반 로케일 라우팅과 hreflang 태그 자동 생성으로 각 언어 페이지의 글로벌 검색 노출을 확보했습니다.motion 라이브러리로 스크롤 반응 인터랙션 애니메이션을 개발하여 제품 소개 페이지의 몰입감을 높였습니다.
SEO 최적화
기존 텍스트 기반 사이트맵에서 미디어 콘텐츠가 검색 엔진에 노출되지 않는 문제가 있었습니다. 이미지·동영상을 포함하는 Sitemap Generator를 개발하고 Sitemap indexing으로 Product/News/Blog를 분리하여 미디어 콘텐츠의 검색 가시성을 확보하고 크롤링 효율을 개선했습니다.
DX 개선 및 협업 환경 구축
번역 작업 시 개발자가 JSON을 직접 수정하고 기획자와 수동 동기화하는 비효율이 있었습니다.
i18n-scanner로 JSON과 스프레드시트를 자동 동기화하여 담당자가 스프레드시트에서 수정하면 스크립트 한 번으로 코드에 반영 가능하도록 하여 번역 관련 커뮤니케이션 비용을 대폭 절감했습니다.대한민국 육군
2021.01 – 2022 · 1년 6개월
VIP 인원 수송 및 산불 진화, 전술강하 등 임무 수행
한국지역난방공사
2019.07 – 2023 · 4년 1개월
중앙제어실 Distributed Control Operator
Side Project
k3s 멀티 노드 홈서버
온프레미스 인프라 및 네트워크 이해도 향상을 위해 베어메탈 x86 서버 3대로 구성된 (Master 1, Worker 2) 홈 서버를 경량 Kubernetes 배포판인 k3s를 사용하여 클러스터를 구축 및 운영하며 블로그, 웹 이력서, 기타 개인 프로젝트들을 셀프호스팅하고 있습니다.
k3sDockerCloudflare TunnelArgoCDTailscale
Cloudflare Tunnel을 통해 퍼블릭 IP 노출 및 인바운드 포트 개방 없이 외부에서 안전하게 접속 가능한 환경을 구성했습니다.ArgoCD를 활용하여 Git 레포지토리 기반의 GitOps CD 파이프라인을 구축했습니다.Tailscale 기반 VPN을 구축하여 외부 네트워크에서도 클러스터 내부 서비스에 직접 접근 가능한 환경을 마련했습니다.Activities
SIPE 4기
- SIPE 네 번째 사담콘 -우리들의 인사이프- 발표
｢지구 반대편을 대응하는 어플리케이션을 위해｣
[Nextstep] TDD, 클린 코드 with JavaScript 5기
- 객체 지향 프로그래밍을 기반으로한 Node, 웹 어플리케이션 설계 및 구현
- jest를 활용한 테스트 주도 개발 방법론 학습
- 라이브러리 없이 웹 어플리케이션을 구현하며 프론트엔드에서의 객체지향 도입 설계
Education
수도전기공업고등학교에너지기계과
2017.03 - 2020.02현재 상태로 다운로드