김도현

updated at 2025-12-19

새로운 기술을 적극적으로 도입하고 팀에 전파하는 프론트엔드 개발자입니다.

4년차 프론트엔드 개발자로서, React/TypeScript 기반의 서비스 개발 및 디자인 시스템 구축 경험을 보유하고 있습니다.

Next.js App Router, Server Components, Server Actions 등 최신 스택을 사내 프로젝트에 선제적으로 도입하여 개발 생산성을 향상시켰습니다.

또한, 23년 5월 Github Copilot의 등장 초기부터 구매하여 AI 활용 개발을 시작했으며, 이직 후에는 Cursor AI 에이전트를 활용한 개발 문화를 팀에 정착시키는 데 기여했습니다.

Contact

• bandal2dev@gmail.com

Experience

(주)피플카

서비스개발팀

2024년 07월 ~ 현재

TypeScript React Next.js Vite TailwindCSS SCSS vitest

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

1인 풀스택 개발 | RAG 아키텍처 | pgvector

자연어 질문으로 투루카 통계 데이터 인사이트를 제공하는 챗봇

• "이번 달 강남 지역 예약 증가율은?" → 자동 SQL 생성/실행 → 비즈니스 인사이트 답변

도메인 용어 매핑

• 비즈니스 용어와 DB 스키마를 구조화하여 임베딩 벡터로 변환 (OpenAI Embedding)
• PostgreSQL + pgvector에 저장 후 유사도 검색으로 관련 테이블/컬럼 자동 추출
• 예: "예약" → reservations, "강남구" → region='Gangnam'

자동 SQL 생성 및 실행

• 검색된 스키마 정보를 동적으로 Prompt에 조합
• LLM API를 통해 SQL 쿼리 자동 생성
• Next.js RSC에서 투루카 DB 쿼리 실행

비즈니스 인사이트 제공

• 쿼리 결과 + "카셰어링 비즈니스 전문가" 페르소나 Prompt
• Vercel AI SDK 기반 스트리밍 응답 구현
• 세션별 채팅 이력 관리 및 공유 기능

신규 프로젝트 "카플랫"의 웹, 웹뷰 개발

• 디자인 시스템 컴포넌트를 적용한 신규 프로젝트 개발 환경 구축 및 개발
  • 페이지 작성, 인증 토큰 관리, 권한 처리 등 다양한 기능 구현
• OpenAPI 3.0 yaml -> TypeScript 타입 자동 생성 스크립트 구축 및 Full Type Safe한 Fetch SDK 구현
• AWS CloudWatch + RUM 기반 로그 모니터링 환경 구축
  • Next.js의 다양한 실행 환경의 모든 에러를 자동 수집
• 웹뷰 환경에서 framer-motion, View Transition API를 활용한 앱 수준의 인터랙션 구현
• 모바일 환경에서 촬영한 이미지의 최적 해상도, 용량으로 압축 스크립트 구현

B2B 개발자센터 구축

1인 프론트엔드 개발

• OpenAPI 3.0 yaml 파싱 구조 개발 및 API 문서 자동 생성
• Endpoint, Parameter, 에러코드 등 통합 검색 기능 구현
• 카플랫 도메인 온보딩 가이드 및 연동 문서 작성

디자인 시스템 컴포넌트 구축 및 유지보수

기본 컴포넌트 40개 외 복잡한 컴포넌트 직접 구현

React Aria 기반 공통 컴포넌트

• Storybook 문서화로 개발자, 디자이너, 기획자에게 가이드 공유
• Figma variables → CSS variables/TailwindCSS 자동 변환
• 사내 Cursor AI 활용을 위한 Cursor Rules 구성
• 디자인 시스템 구축 회고

turu-calendar

React Aria의 Date 컴포넌트가 좋지않은 DX, UX로 자체 구현한 Date UI 시스템입니다.

• useDateValidation: 날짜 계산, 유효성 검사를 위한 공통 Hook
• Calendar: 날짜 선택 UI
• DateInput: 키보드 네비게이션, 다양한 포맷 파싱
• TimeWheelPicker: iOS 네이티브처럼 동작하는 휠 피커
• 조합: DatePicker, DateRangePicker, DateTimeRangePicker
• React-Hook-Form 유효성 검사 연동

Lexical 기반 Rich Text Editor

• 디자인 토큰, 컴포넌트 통합
• 모든 기능 지원: 글자스타일, Table, ColorPicker, Markdown 등등
• gzip 압축: 평균 70-80% 용량 감소

(주)이노룰스

기술연구소 - 제품기술팀

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

aora

React-Natvie(Expo) 학습을 위해 구현한 프로젝트입니다.

Tech Stack

• React-Native, Expo, TypeScript
• Nativewind(TailwindCSS)
• React-Hook-Form, Zod
• Appwrite
• 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을 이용한 프로젝트 구현