본문으로 바로가기
bandal.dev

김도현

updated at 2026-10

4년간 B2B 제품과 사내 운영 도구를 개발해 온 프론트엔드 엔지니어입니다.

신규 모빌리티 플랫폼의 프론트엔드 공통 구조를 설계하고 앱 내 WebView 개발을 전담했습니다.

OpenAPI 기반 타입 자동화로 API 스펙 오용 오류를 없앴습니다. 7개 서비스의 공용 UI 컴포넌트를 구축하고 Agent Skills로 문서화해 AI 코딩 환경의 기반으로 활용하고 있습니다.

운영 데이터 분석을 위한 Text-to-SQL 챗봇 구축 및 Rust 기반 Native Bridge 구현 등 프론트엔드 밖의 문제도 해결해 왔습니다.

Contact

Experience

(주)피플카

서비스개발팀

2024년 07월 ~ 현재

피플카(투루카)의 신규 B2B 플랫폼과 공용 프론트엔드 기반, 운영 백오피스 앱 개발을 담당하고 있습니다.

TypeScript React TanStack Query

B2B 모빌리티 플랫폼 신규 구축 및 확장

2024년 10월 ~ 현재 (2025년 05월 출시)

Next.js (App Router) Tailwind CSS React Hook Form Kakao Maps SDK

  • FE 개발자 4인으로 B2B Web·Admin·WebView를 신규 구축해 2025년 05월 출시했으며, 세 프로젝트에 적용하는 프론트엔드 공통 구조를 설계했습니다.
    • 비즈니스 도메인별로 컴포넌트·훅·유틸을 응집하고, RSC 진입점과 Client Component의 역할을 구분한 폴더 구조 설계
    • 조회는 RSC, 변경은 Server Actions를 중심으로 구성해 백엔드 API 주소와 키를 클라이언트에 노출하지 않도록 처리
    • proxy.ts에서 JWT 갱신·만료 처리와 페이지 접근 권한 검증을 공통화해 RSC 렌더링 전 접근 제어
    • Streaming·Suspense를 적용해 페이지 전체 로딩 대신 데이터가 준비된 영역부터 점진적으로 렌더링
  • 차량 관제 지도에서 수천 대 마커가 몰려도 조작 가능한 성능을 확보했습니다.
    • 4x CPU throttling 환경에서 지도 이동 시 15fps 이하 프레임 드롭과 프리징 재현, 기획자와 필요한 마커 밀도 협의
    • 클러스터링, 이동 중 마커 렌더 debounce, 이미지 기반 마커를 조합해 같은 환경의 고밀도 지역에서도 15fps 이하 → 60fps 유지
  • 앱 내 WebView의 프론트엔드 개발을 전담하고, Web·Admin은 일부 페이지를 담당했습니다.
    • 스토어 심사 반려에 대응해 블루투스·카메라·위치 권한을 각 기능 사용 흐름에 진입할 때 Native Bridge로 요청하도록 변경
    • BLE 제어는 처리됐지만 응답만 늦는 경우가 있어 요청과 응답을 분리하고, 4초 내 미응답 시 API 제어로 전환
    • 상시 BLE 스캔·GPS 폴링으로 인한 발열과 배터리 소모를 줄이기 위해, BLE는 스마트키 화면에서만 스캔하고 GPS는 제어·배달/회수 완료 시점에만 1회 조회
    • 휴대폰으로 촬영한 차량 사진을 WebP로 변환하고 1MB 이내로 압축해 S3 저장 용량과 조회 시 전송량 감소
  • Next.js 앱의 로그를 구조화된 JSON으로 표준화해, 에러를 즉시 인지하고 바로 추적할 수 있는 흐름을 구축했습니다.
    • Client Error, API Error, RSC Error를 각 Runtime의 진입점에서 수집해 Server Action 기반 logger로 전송
    • 에러 발생 시 Slack Webhook으로 에러 요약을 전송하고, 버튼 클릭 시 해당 에러를 조회하는 CloudWatch Logs Insights 쿼리가 입력된 화면으로 바로 이동
    • Next.js에서 자동화된 로깅 구조 만들기
  • 개발 인력이 없는 렌트카 업체도 공개 API를 연동할 수 있도록 개발자센터를 구축했습니다.
    • 비개발 직군도 이해할 수 있도록 API 명세와 차량·상품·예약·스케줄 등 도메인 가이드 작성

프론트엔드 플랫폼 및 디자인 시스템

2024년 07월 ~ 현재

Radix UI React Hook Form Sass Storybook Lexical Vite

  • 6개 웹앱과 1개 WebView에서 사용하는 Radix UI 기반 공용 컴포넌트 50개 이상과 라이트·다크 테마 구조를 구축했습니다.
    • 공용 컴포넌트는 단일 UI 역할만 수행하고, 화면에서 조합해 사용하도록 디자이너와 협업해 Atomic Design 기반 구조 설계
    • 폼 컴포넌트를 React Hook Form과 연동해 Input은 register 기반 uncontrolled, Select·DatePicker 등은 Controller 기반 controlled로 구현하고, label·설명·에러 메시지의 접근성 속성을 자동 연결
    • Storybook 컴포넌트 문서를 Agent Skills 형태로 전환해, Figma MCP로 디자인을 전달하면 AI가 공용 컴포넌트로 화면을 구현하도록 구성
  • OpenAPI YAML 기반 .d.ts 생성 스크립트를 구현해 모든 서비스에 적용했습니다.
    • endpoint·method별 request·response 타입을 자동 생성해 적용 이후 API 스펙 오용으로 인한 오류 0건
    • 생성된 타입을 기반으로 AI가 API 연동 코드와 Storybook 시각 테스트용 mock object까지 생성하도록 활용
  • 커스텀 DatePicker·DateRangePicker 및 Rich Text Editor 컴포넌트를 구현했습니다.
    • 기본 <input type="date">에 준하는 키보드 입력과 날짜 포맷 검증, 달력 UI를 제공하는 DatePicker 구현
    • Lexical headless editor를 기반으로, 디자인 시스템을 적용한 Rich Text Editor 구현
    • 저장 HTML을 API 전송 전 gzip 압축해 payload 크기 70~80% 절감

투루카 운영 백오피스 데스크톱 앱 신규 구축

2026년 03월 ~ 현재

Electron TanStack Router Vite React Hook Form Zod Mini Rust napi-rs

  • 여러 탭을 띄우고 전환하며 작업하는 운영 업무에 맞춰 브라우저 탭 형태 라우팅과 Page Keep-Alive를 구현했습니다.
    • 각 페이지를 독립된 React Root로 마운트해, 탭을 전환해도 입력 중인 내용과 화면 상태 유지
  • 운영자가 자리를 비워도 1:1 문의 등 중요 알림을 놓치지 않도록 Rust + napi-rs 기반 macOS·Windows Native Bridge를 구현했습니다.
    • Electron 기본 API만으로 확인하기 어려운 OS 알림 권한과 Focus/DND 상태 조회

Text-to-SQL 운영 데이터 분석 챗봇

2025년 11월 ~ 현재 (2025년 12월 오픈)

Next.js (App Router) Vercel AI SDK pgvector MSSQL

  • 개발자에게 반복 요청하던 데이터 추출을 현업이 직접 조회할 수 있도록, 자연어로 SQL을 생성해 조회하는 챗봇을 구축했습니다.
    • Next.js로 full-stack 앱을 구현하고, 사내 온프레미스 Ubuntu 서버에 배포 환경을 처음부터 구성
    • 월매출이 특정 금액 이상인 월 목록, 이용 횟수 상위 차량, 주차장 목록 조회 등 데이터 추출에 활용
  • 스키마 사전과 upvote 받은 답변을 pgvector로 검색해 Prompt에 주입하고, 도메인 용어–컬럼 매칭과 few-shot 예시로 활용했습니다.
  • 운영 DB 조회에 필요한 안전장치를 여러 겹으로 구성했습니다.
    • 개인정보성 테이블을 제외한 특정 테이블의 읽기 권한만 가진 DB 계정으로 조회 범위를 제한
    • SELECT만 생성, 최대 TOP 1000 제한 등 SQL 생성 규칙을 Prompt에 명시

(주)이노에이엑스

기술연구소 - 제품기술팀

2022년 03월 ~ 2024년 03월

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

TypeScript React Next.js (Pages Router) Tailwind CSS TanStack Query Apache ECharts Java

백엔드 성능 모니터링 웹 앱

  • 실시간 차트 API 응답 크기를 10MB에서 1MB 이내로 줄였습니다.
    • 전체 데이터를 반복 수신하던 문제를 차트별 마지막 Timestamp 이후 데이터만 조회하도록 API를 개선해 해결
  • 오픈소스 모니터링 솔루션을 분석하고 Apache ECharts 기반 대시보드의 기획·설계·기술스택 선정·개발을 담당했습니다.
  • Vanilla JS 기반의 사내 디자인 시스템을 React로 마이그레이션했습니다.
    • UI 컴포넌트, Modal(Dialog, Drawer, Tooltip) 등을 React로 재구성
  • React Query, Suspense, Error Boundary로 API 캐싱과 예외 처리 로직을 구현했습니다.

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

  • 사내 솔루션의 설정 방식을 분석해 고객사별 온프레미스 환경에 필요한 커스텀 화면을 설계·구현하고 유지보수했습니다.

Side Projects

bandal.dev

프론트엔드 개발 경험과 기술적 의사결정을 기록하는 개인 블로그입니다.

Website · GitHub

Education

쌍용교육센터

2021년 07월 ~ 2022년 01월

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

병역

2019년 07월 ~ 2021년 04월

병역 필

신구대학교

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

2017년 03월 ~ 2019년 02월