김도현

updated at 2026-03-07

디자인 시스템, 컴포넌트 아키텍처, API SDK 자동화, AI 기반 개발 워크플로우 개선을 중심으로 팀 생산성을 높여온 4년차 프론트엔드 엔지니어입니다.
React + TypeScript + Next.js 기반의 B2C, B2B 서비스 운영 경험이 있으며, Next.js App Router, Server Components, Server Actions를 실제 서비스에 도입했습니다.
사내 디자인 시스템 구축, OpenAPI 기반 타입/SDK 자동화, 개발자센터 구축, AI 도구 활용 문화 정착 등 제품 개발을 넘어 프론트엔드 플랫폼 영역까지 주도해 왔습니다.

Contact

• bandal2dev@gmail.com

Experience

(주)피플카

서비스개발팀

2024년 07월 ~ 현재

TypeScript React Next.js Vite TailwindCSS SCSS vitest

Frontend Platform & DX

• 사내 디자인 시스템 구축 및 운영
  • 기본 컴포넌트 40개 및 복잡한 공용 컴포넌트 직접 설계 및 구현
  • 제품 개발 시 공통 UI 기반으로 활용되는 표준 컴포넌트 체계 정립
  • react-aria 기반 공통 컴포넌트를 Storybook으로 문서화해 개발자, 디자이너, 기획자가 함께 참조할 수 있는 협업 기준 마련
  • Figma variables 기반 디자인 토큰 자동화 파이프라인에서 JSON 토큰을 Tailwind utilities와 CSS variables로 변환하는 코드 생성 스크립트 구현
• OpenAPI 3.0 YAML 기반 TypeScript 타입 및 Fetch SDK 자동 생성 환경 구축
  • API 연동 시 타입 작성 과정을 제거하고, Full Type Safe 구조로 표준화
• Storybook(MDX Docs) 기반 문서를 참조하는 AI Skills를 확장해 AI 코드 생성 정확도 개선
• 디자인 시스템 구축 회고

UI Architecture

• React Aria Date 컴포넌트의 DX, UX 한계로 인해 Date UI 시스템 자체 구현
  • useDateValidation, Calendar, DateInput, TimeWheelPicker primitive 설계
  • DatePicker, DateRangePicker, DateTimeRangePicker로 조합 가능한 구조 설계
  • React-Hook-Form 유효성 검사와 연동해 실사용 가능한 입력 흐름 제공
• 부분적 자체 구현과 라이브러리 혼용 상태를 정리하기 위해 Radix UI로 전면 전환
• Lexical 기반 Rich Text Editor를 구축하고 디자인 토큰 및 공용 컴포넌트와 통합
  • 글자 스타일, Table, ColorPicker, Markdown 등을 지원하고 gzip 압축으로 평균 70-80% 용량 감소

Product Delivery

• 신규 프로젝트 "카플랫"의 웹, 웹뷰 개발 환경 구축 및 디자인 시스템 컴포넌트를 적용한 제품 개발 진행
• 페이지 작성, 인증 토큰 관리, 권한 처리 등 핵심 제품 기능 구현
• 웹뷰 환경에서 framer-motion, View Transition API를 활용해 앱 수준의 인터랙션 구현
• 모바일 환경에서 촬영 이미지의 해상도와 용량을 최적화하는 압축 스크립트 구현
• B2B 개발자센터를 1인 프론트엔드로 구축하며 OpenAPI 파싱 기반 API 문서 자동 생성, Endpoint/Parameter/에러코드 통합 검색, 카플랫 도메인 온보딩 문서 제공

Observability / Reliability / AI

• AWS CloudWatch + RUM 기반 로그 모니터링 환경을 구축해 Next.js의 다양한 실행 환경(Node / Edge / Browser)에서 에러를 수집할 수 있는 운영 기반 마련
  • Next.js의 다양한 실행 환경의 모든 에러를 자동 수집
• AI 기반 사내 데이터 분석 챗봇을 1인 풀스택으로 개발
  • 비즈니스 용어와 DB 스키마를 구조화해 임베딩 벡터로 변환하고 PostgreSQL + pgvector 유사도 검색으로 관련 테이블과 컬럼을 자동 추출
  • 검색된 스키마 정보를 동적으로 Prompt에 조합해 SQL을 생성하고 Next.js RSC에서 투루카 DB 쿼리를 실행하는 RAG 구조 구현
  • 쿼리 결과를 바탕으로 Vercel AI SDK 스트리밍 응답, 세션별 채팅 이력 관리, 공유 기능 제공

(주)이노룰스

기술연구소 - 제품기술팀

2022년 03월 ~ 2024년 03월

TypeScript React Next.js TailwindCSS React-Query Recoil

• 신규 솔루션 웹 애플리케이션 프론트엔드 개발
• 백오피스 웹 프론트엔드 신규 기능 개발
• 기존 솔루션 기술지원

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

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

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

• 사내 솔루션 제품 설정 방법을 분석하여 화면 설계
• React 기반 컴포넌트 계층 구성 및 UI 구현
• StoryBook 기반의 컴포넌트 개발
• SWR, Jotai를 사용하여 전역 상태 관리

Side Projects

bandal.dev

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

Tech Stack

• Next.js + App Router
• Tailwind
• website
• github

Education

자바기반 AWS 활용 Full-Stack

쌍용교육센터

2021년 07월 ~ 2022년 01월

• 자바에 대해 기본부터 심화과정까지 학습하여 웹을 직접 구현해보는 교육과정
• 팀별 웹앱 개발 프로젝트를 진행하여 협업 경험
• B/E : Spring Boot, Mybatis, MySQL, JSP
• F/E : JavaScript, jQuery

병역 2019년 07월 ~ 2021년 04월

신구대학교 정보통신과

신구대학교

2017년 03월 ~ 2019년 02월

• 네트워크 TCP/UDP, OSI 7Layer, Network Protocol에 대한 이해
• Java 기반의 FullStack 교육으로, JDBC, Swing을 이용한 프로젝트 구현