김도현

updated at 2026-06

제품 UX와 개발 생산성의 병목을 구조로 풀어내는 프론트엔드 엔지니어입니다.

기능 구현에 머무르지 않고, 사용 흐름과 팀의 개발 방식이 함께 좋아지는 지점을 찾습니다. 기획자, 디자이너와 제품 흐름을 논의하고, 개발자 관점의 UX 피드백이 팀의 공통 기준으로 남도록 일합니다.

디자인 시스템, API 자동화, AI 기반 운영 도구처럼 제품을 더 잘 만들기 위해 필요한 문제라면 프론트엔드 경계 밖까지 파고듭니다.

Contact

Experience

(주)피플카

서비스개발팀

2024년 07월 ~ 현재

피플카(투루카)의 신규 B2B 플랫폼 프로젝트의 0부터 1을 개발하였습니다. 기술 스택 선택 및 디자인 시스템 구축, B2B Web/Admin, WebView, 대외 홈페이지 개선까지 전반적인 프론트엔드 영역을 담당하였습니다.

Next.js(app) Vite TailwindCSS Tanstack Query

신규 B2B 플랫폼을 0부터 만들며 여러 웹앱이 같은 방식으로 확장되는 기반을 설계했습니다.

  • 3개 웹과 1개 WebView가 같은 방식으로 확장되는 개발 기반을 마련했습니다.
    • 화면마다 달라지던 데이터 조회, 변경, UI 조립 방식을 page → container → components, 공통 SDK, Server Action 패턴으로 정리
    • 서비스 종류, 예약 상태, 관리자 권한에 따라 달라지는 섹션/액션 노출 기준을 Boundary 컴포넌트로 분리해 변경 범위를 줄임
  • 차량 관제 지도에서 수천 대 마커가 몰려도 조작 가능한 성능을 확보했습니다.
    • Chrome DevTools FPS Meter와 4x throttling 환경에서 프레임 드랍/프리징을 재현하고, 기획자와 필요한 정보 밀도를 먼저 재정의
    • 클러스터링, 이동 중 업데이트 debounce, 이미지 기반 마커를 조합해 고밀도 지역에서도 60fps 수준 유지
  • WebView와 Native 경계에서 흔들리던 입력 흐름과 상태 동기화를 안정화했습니다.
    • 페이지를 오가며 입력하는 복잡한 폼의 입력값은 내부 페이지 간 유지하고, 상위 페이지 진입 시 초기화되도록 zustand 상태 흐름 설계
    • iOS/AOS 키보드, safe area, Native BLE 상태 차이로 발생하던 CTA 위치 불안정과 불필요한 Web API fallback을 공통 기준으로 정리
  • Runtime별로 흩어지던 로그 수집 방식을 하나의 운영 관점으로 묶었습니다.
    • Edge Runtime, Server, Client의 로그 수집 지점을 표준화하고, Server Action 기반 logger로 AWS CloudWatch Logs Insights 조회 흐름 구축
    • Client Runtime Error, API 호출 성공/실패, Server Error를 각각 error 이벤트, SDK lifecycle, instrumentation.ts에서 수집하도록 표준화
    • Next.js에서 자동화된 로깅 구조 만들기
  • B2B 파트너가 API를 직접 이해하고 연동할 수 있는 개발자센터를 구축했습니다.

반복 구현과 변경 누락을 줄이는 개발 기반을 만들었습니다.

  • 6개 웹앱과 1개 WebView가 함께 쓰는 UI 기준을 정리했습니다.
    • Radix UI 기반 50+ 공용 컴포넌트, variant-color 토큰, data-theme 기반 라이트/다크 테마 구조 설계
    • AI 코드 생성이 사내 컴포넌트 사용 기준을 벗어나지 않도록 Storybook 문서를 Agent Skills 형태로 전환
  • API 연동에서 반복되던 수기 타입 작성과 변경 누락을 자동화했습니다.
    • 팀의 파일 구조와 IDE 탐색 방식에 맞춰 OpenAPI YAML을 파싱하는 .d.ts 생성 스크립트를 직접 구현
    • JSDoc hover 문서, 타입 정의 이동, 공통 SDK 기반 request/response 추론으로 API 탐색과 연동 흐름 개선

복잡한 입력 경험을 제품 요구사항에 맞게 직접 설계했습니다.

  • 브라우저 기본 입력으로 해결하기 어려운 Date Picker UI 시스템과 Rich Text Editor를 구축했습니다.
    • 브라우저 기본 date input으로 대응하기 어려운 복합 날짜 입력 UX를 위해 Calendar, DateInput, TimeWheelPicker 기반 Date Picker UI 시스템 구현
    • 사내 디자인 시스템과 DB 저장 요구사항에 맞춰 Table, ColorPicker, Markdown 입력을 지원하는 Rich Text Editor 구축
    • Rich Text Editor HTML 결과를 gzip 압축해 DB 저장 크기 평균 70~80% 감소

프론트엔드 요구사항을 풀기 위해 필요한 영역까지 확장했습니다.

  • 운영자가 필요한 데이터를 직접 찾을 수 있도록 RAG 기반 사내 데이터 분석 챗봇을 만들었습니다.
    • 개발자에게 반복적으로 데이터 추출을 요청하던 병목을 자연어 기반 운영 데이터 탐색 흐름으로 전환
    • 스키마 사전 embedding, 개인정보성 테이블 제외, 금지 SQL 키워드 검증, TOP N 기본 주입을 적용한 MSSQL SELECT query 생성/실행 구조 구현
  • 유지보수가 중단된 Electron 알림 상태 조회 문제를 native bridge로 해결했습니다.
    • Rust/napi-rs 기반으로 macOS/Windows 알림 권한 및 Focus/DND 상태를 Electron/Node.js 환경에서 조회할 수 있는 npm 패키지 개발

(주)이노룰스

기술연구소 - 제품기술팀

2022년 03월 ~ 2024년 03월

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

Typescript Next.js TailwindCSS Tanstack Query

Java 기반 백엔드 성능 모니터링 웹 앱

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

JAVA 기반 솔루션 어드민 페이지 웹 앱

  • 사내 솔루션 제품 설정 방법을 분석하여 화면 설계
  • 고객사별 온프로미스 환경에서 필요한 커스텀 설정 화면을 구현하고 유지보수

Side Projects

bandal.dev

개인 블로그로, 프론트엔드 개발자로서의 경험을 공유하고 있습니다.

Tech Stack

2022년부터 2023년 중반까지는 Java, JS 개발을 함께 다뤘고, 이후 React 중심으로 방향을 옮겼습니다.
당시 작성한 백엔드 중심 글은 이전 블로그에 남겨두었습니다.

Education

쌍용교육센터

2021년 07월 ~ 2022년 01월

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

병역 2019년 07월 ~ 2021년 04월

신구대학교

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

2017년 03월 ~ 2019년 02월