김도현

updated at 2026-05-11

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

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

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

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

Contact

• bandal2dev@gmail.com

Experience

(주)피플카

서비스개발팀

2024년 07월 ~ 현재

TypeScript React Next.js Vite TailwindCSS SCSS vitest

Product Development

• 신규 B2B 미들웨어 카플랫 Web Admin 초기 구축

  • Next.js App Router 기반 개발 환경 구성
  • 사내 공용 컴포넌트/유틸리티를 제품 전반에 적용해 UI 구현 기준 표준화
  • 목록, 상세, 검색, 필터, Form 중심의 운영 백오피스 UI 패턴 구현
  • Kakao Map 클러스터링을 활용해 n,000대 차량 위치 노드 렌더링 부하 최적화

• 카플랫 APP(WebView) native 기능을 활용한 사용 흐름 구현

  • 촬영 이미지 다중 업로드 및 API 제출 흐름 구현
  • Native Bridge API와 WEB API fallback을 조합한 차량 제어 흐름 구현
  • 화면 전환, Bottom Sheet 인터랙션, 이미지 압축 등 모바일 웹뷰 UX 개선

• B2B 개발자센터 구축

  • https://developers.carplat.co.kr
  • 기획, 디자인 포함 1인 프론트엔드로 구축
  • OpenAPI YAML 파싱 기반 API 문서 자동 생성
  • Endpoint, Parameter, 에러코드 통합 검색 제공

• 투루카 홈페이지 FE 리뉴얼

  • https://turucar.com/
  • 신규 사내 공용 컴포넌트/유틸리티 적용
  • SEO 개선을 위한 메타데이터, 시맨틱 마크업, 렌더링 구조 정비

Frontend Platform / DX

• 사내 디자인 시스템 구축 및 운영

  • Radix UI 기반 기본 컴포넌트 40개 및 복합 공용 컴포넌트 설계
  • 전 프로젝트에서 디자인 시스템을 100% 적용하여 공통 컴포넌트를 별도로 다시 개발하는 과정 제거
  • Storybook으로 문서화해 개발자, 디자이너, 기획자가 함께 참조할 수 있는 협업 기준 마련
  • Figma Variables 기반 CSS Variable, Tailwind Utility 자동 생성
  • Storybook 문서를 AI Skills로 변환해 AI 코드 생성 시 사내 컴포넌트 사용 정확도 개선

• OpenAPI 기반 타입/SDK 자동화

  • OpenAPI YAML 기반 TypeScript 타입 및 Fetch SDK 자동 생성
  • 요청/응답 타입 안정성 확보 및 API 연동 반복 작업 감소

UI Architecture

• Date UI 시스템 자체 구현

  • Calendar, DateInput, TimeWheelPicker, useDateValidation primitive 설계
  • DatePicker, DateRangePicker, DateTimeRangePicker 조합 구조 구성
  • React Hook Form 기반 날짜 입력/검증 흐름 연동

• Lexical 기반 Rich Text Editor 구축

  • 디자인 토큰/공용 컴포넌트와 통합
  • Table, ColorPicker, Markdown 입력 지원
  • HTML 결과 gzip 압축으로 크기 평균 70~80% 감소

AI / Observability

• AI 기반 사내 데이터 분석 챗봇 개발

  • 기존 백오피스 앱의 고정 쿼리 방식을 넘어, 비즈니스 사용자가 원하는 데이터를 직접 쿼리할 수 있도록 개선
  • PostgreSQL + pgvector 기반 DB 스키마 유사도 검색
  • 검색된 스키마를 Prompt에 조합해 SQL 생성
  • Vercel AI SDK 기반 스트리밍 응답, 채팅 이력, 공유 기능 제공

• Next.js 운영 로그 수집 환경 구축

  • AWS CloudWatch + RUM 기반 에러 모니터링 구성
  • Node / Edge / Browser 실행 환경별 에러 수집

• @ban-dal/os-bridge npm 패키지 개발

  • Electron/Node.js에서 macOS, Windows 알림 권한 및 Focus/DND 상태 조회
  • Codex를 활용해 네이티브 API 조사, 구현, 패키징 검증

(주)이노룰스

기술연구소 - 제품기술팀

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

@ban-dal/os-bridge

napi-rs 기반 Electron / Node.js를 위한 타입 지원 네이티브 OS API

github
npm

• Electron/Node.js 환경에서 macOS, Windows 알림 권한 및 Focus/DND 상태를 조회하기 위한 native bridge npm 패키지를 개발했습니다.
• Electron 기반 설치형 백오피스 앱의 알림 기능 구현 중 기존 방식의 크래시/유지보수 중단 문제를 확인하고, Codex를 활용해 네이티브 API 조사, 구현, 패키징을 진행했습니다.

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