김도현

updated at 2026-04-04

더 좋은 제품이 더 많은 사용자를 만든다고 믿는 프론트엔드 엔지니어입니다.

기능을 구현하는 것보다 "더 나은 UX가 있는가"를 먼저 고민합니다. 스프린트마다 기획자, 디자이너와 UX를 논의하고, 더 나은 방향이 있으면 가감없이 의견을 전합니다. 이 과정에서 개발자 관점의 UX 피드백이 팀의 자산이 된다고 믿습니다.

코드도 같은 기준으로 봅니다. 읽기 좋은 코드인지, 각 함수의 역할이 뚜렷한지, 하나의 모듈이 두 개 이상의 도메인을 담당하진 않는지를 매번 검토합니다.

디자인 시스템 구축과 API 자동화 같은 플랫폼 작업도 결국 팀 전체가 더 빠르게, 더 좋은 제품을 만들 수 있도록 하는 수단이라는 생각으로 해왔습니다.

Contact

• bandal2dev@gmail.com

Experience

(주)피플카

서비스개발팀

2024년 07월 ~ 현재

TypeScript React Next.js Vite TailwindCSS SCSS vitest

Frontend Platform & DX

• 사내 디자인 시스템 구축 및 운영
  • Radix UI 기반 기본 컴포넌트 40개 및 복잡한 공용 컴포넌트 직접 설계 및 구현
  • 전 프로젝트에서 디자인 시스템을 100% 적용하여 공통 컴포넌트를 별도로 다시 개발하는 과정 제거
  • Storybook으로 문서화해 개발자, 디자이너, 기획자 가 함께 참조할 수 있는 협업 기준 마련
  • Storybook 문서를 Skills.md로 추출하여 AI 기반 코드 생성 시 사내 라이브러리 작성 정확도 개선
  • Figma variables 디자인 토큰 기반 CSS Variable, Tailwind Utility 자동 생성 스크립트 구현
  • 디자인 시스템 구축 회고
• OpenAPI YAML 기반 TypeScript 자동 생성 환경 구축

  • API 연동 시 타입 작성 과정을 제거하고, Full Type Safe 구조로 표준화

UI Architecture

• Date UI 시스템 자체 구현
  • useDateValidation, Calendar, DateInput, TimeWheelPicker primitive 설계
  • DatePicker, DateRangePicker, DateTimeRangePicker로 조합 가능한 구조 설계
  • React-Hook-Form 유효성 검사와 연동해 실사용 가능한 입력 흐름 제공
• Lexical 기반 Rich Text Editor 구축
  • 디자인 토큰 및 공용 컴포넌트와 통합
  • 글자 스타일, Table, ColorPicker, Markdown 등 지원
  • 입력 결과를 html로 추출하여 정확도 유지, gzip 압축으로 html 크기 평균 70-80% 감소

Product Development

• 신규 프로젝트 "카플랫"의 웹, 웹뷰 개발 환경 구축 및 디자인 시스템 컴포넌트를 적용한 제품 개발 진행
• 웹뷰 환경에서 framer-motion, View Transition API를 활용해 앱 수준의 인터랙션 구현
• 웹뷰 환경에서 촬영 이미지의 해상도와 용량을 최적화하는 압축 스크립트 구현
  • 10~30MB 촬영 사진을 1MB 이내로 압축하며 차량의 상태를 명확히 확인할 수 있도록 품질 유지
• B2B 개발자센터를 기획, 디자인 포함 1인 프론트엔드로 구축
  • OpenAPI 파싱 기반 API 문서 자동 생성, Endpoint/Parameter/에러코드 통합 검색, 카플랫 도메인 온보딩 문서 제공

Observability / 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을 이용한 프로젝트 구현