김도현

updated at 2026-09

4년간 B2B 제품과 사내 운영 도구를 개발해 온 프론트엔드 엔지니어입니다.

신규 모빌리티 플랫폼의 프론트엔드 공통 구조를 설계하고 앱 내 WebView 개발을 전담했으며, 7개 서비스에서 사용하는 공용 UI 컴포넌트와 API 타입 자동화를 구축했습니다.

운영 데이터 분석을 위한 Text-to-SQL 챗봇 구축 및 Electron 기반 Native Bridge 구현 등 프론트엔드 밖의 문제도 해결해 왔습니다.

Contact

서비스개발팀

2024년 07월 ~ 현재

피플카(투루카)의 신규 B2B 플랫폼과 공용 프론트엔드 기반, 운영 백오피스 앱 개발을 담당하고 있습니다.

Next.js (App Router) Vite Electron Tailwind CSS TanStack Query

2024년 10월 ~ 2025년 05월 구축·출시 / 이후 유지보수 및 기능 확장

FE 개발자 4인으로 B2B Web·Admin·WebView를 신규 구축해 2025년 05월 출시했습니다.
- 폴더 구조, query·mutation 처리 흐름, 로딩·에러 fallback 등 프론트엔드 공통 구조 설계
- 회원 가입, 로그인 및 토큰 관리, 권한 처리 구현
- 앱 내 WebView의 프론트엔드 개발 전반을 담당, Web·Admin은 일부 페이지를 담당
차량 관제 지도에서 수천 대 마커가 몰려도 조작 가능한 성능을 확보했습니다.
- Chrome DevTools FPS Meter와 4x throttling 환경에서 프레임 드롭/프리징을 재현하고, 기획자와 필요한 마커 밀도를 협의
- 클러스터링, 이동 중 마커 렌더 debounce, 이미지 기반 마커를 조합해 고밀도 지역에서도 60fps 수준 유지
모바일 WebView 환경에서 BLE 차량 제어, 카메라, GPS 등 Native API 를 활용한 기능을 구현했습니다.
Next.js 앱의 로그 수집 방법을 표준화하고, Server Action 기반 logger와 Slack 알림 전송, AWS Logs Insights 조회 흐름을 구축했습니다.
- Client Runtime Error, API 호출 lifecycle, Server Error를 각 Runtime의 진입점에서 수집
- Next.js에서 자동화된 로깅 구조 만들기
백엔드 파트에서 구축한 OpenAPI 제공을 위한 개발자센터 사이트를 구축하였습니다.
- OpenAPI YAML 을 파싱하여 표시하는 구조

2024년 07월 ~ 현재

6개 웹앱과 1개 WebView에서 사용하는 Radix UI 기반 공용 컴포넌트 50개 이상과 라이트·다크 테마 구조를 구축했습니다.
- 공용 컴포넌트는 단일 UI 역할만 수행하고, 화면에서 조합해 사용하도록 구성
- AI 코드 생성 시 사내 컴포넌트 사용 가이드를 따를 수 있도록 Storybook 문서를 Agent Skills 형태로 전환
OpenAPI YAML 기반 .d.ts 생성 스크립트를 구현하여 request·response 타입의 수기 작성과 변경 누락을 줄였습니다.
자체 DatePicker 및 Table·ColorPicker·Markdown 입력을 지원하는 Rich Text Editor 컴포넌트를 구현하였습니다.
- Rich Text Editor HTML 결과를 gzip 압축해 DB 저장 크기 평균 70~80% 감소

2026년 03월 ~ 현재

Electron TanStack Router

TanStack Router 기반의 브라우저 탭 형태 라우팅을 구현해 화면 전환 후에도 Page Keep-Alive 되도록 구현하였습니다.
Electron 기본 API만으로 확인하기 어려운 OS 알림 권한과 Focus/DND 상태를 조회할 수 있도록 Rust + napi-rs 기반 macOS·Windows Native Bridge를 구현했습니다.
Fetch 응답 스트림으로 다운로드 진행률을 표시하고, 진행 현황이 항상 노출되는 Overlay UI를 구현했습니다.

2025년 11월 ~ 2025년 12월 구축 / 이후 유지보수

개발자에게 반복적으로 요청하던 데이터 추출 과정을 자연어 기반 Query 생성 후 Next.js Server Side 에서 RDB 를 조회하는 챗봇 앱을 구축하였습니다.
현업 도메인 용어와 DB 컬럼명간 매칭을 위한 스키마 사전 embedding Postgres pgvector 환경을 구성하였습니다.
개인정보성 테이블 제외, 금지 SQL 키워드 검증, TOP N 기본 주입을 적용한 MSSQL SELECT query 생성·실행 Prompt 를 작성하였습니다.

기술연구소 - 제품기술팀

2022년 03월 ~ 2024년 03월

ERP 솔루션의 프론트엔드 개발과 기술지원을 담당했으며, 첫 1년은 Java·React를 병행하고 이후 1년은 프론트엔드 전담으로 근무했습니다. 고객사별 커스텀 화면을 구현하고 온프로미스 환경에 솔루션을 배포·유지보수했습니다.

TypeScript Next.js Tailwind CSS TanStack Query

실시간 차트 API 응답 크기를 10MB에서 1MB 이내로 줄여 90% 이상 감소
- 차트별 마지막 Timestamp 이후 데이터만 조회하도록 API를 개선해 전체 데이터를 반복 수신하던 문제 해결
오픈소스 모니터링 솔루션을 분석하고 Apache ECharts 기반 대시보드의 기획·설계·기술스택 선정·개발을 담당
Vanilla JS 기반의 사내 디자인 시스템을 React로 마이그레이션
- UI 컴포넌트, Modal(Dialog, Drawer, Tooltip) 등을 React로 재구성
React Query, Suspense, Error Boundary를 통해 API 캐싱 및 예외 처리 로직 구현

프론트엔드 개발 경험과 기술적 의사결정을 기록하는 개인 블로그입니다.

2021년 07월 ~ 2022년 01월

Java, Spring, Oracle DB, JavaScript 기반 웹 애플리케이션 개발 과정 수료

병역 2019년 07월 ~ 2021년 04월

IT미디어 정보통신과 전문학사

2017년 03월 ~ 2019년 02월