김수민
Frontend Developer
반복되는 문제를 개별 기능 개선이 아닌, 일하는 방식과 협업 구조를 재설계하는 방식으로 해결하는 프론트엔드 개발자입니다. OpenAPI 기반 병렬 개발 구조 설계, 팀 내 일정 관리 자동화, 마케팅 보일러플레이트 구축 등을 통해 협업과 개발 프로세스의 구조를 개선해왔습니다. 기능 구현을 넘어, 팀이 더 안정적으로 일할 수 있는 환경을 만드는 데 책임감을 두고 일합니다.
Work Experience
NAVER Cloud
Frontend Developer
LLM 기반 헬스케어·교육 서비스의 프론트엔드를 개발하며, 메시지 모델 표준화와 API 협업 구조 개선을 주도했습니다.
Tech Stack.
LLM 채팅 메시지 아키텍처 설계 및 팀 표준화
- 채팅 메시지를 Discriminated Union 기반 구조로 재설계해 text·link 등 메시지 타입을 확장 가능하게 정의하고, 새로운 형식 추가 시 기존 로직 수정 없이 대응할 수 있는 메시지 DTO 표준을 정립했습니다.
- text/event-stream 기반 스트리밍 구조를 도입하고, 메시지 delta를 누적·조합하는 처리 패턴과 큐 기반 버퍼링 로직을 설계해 자연스러운 타이핑 UX를 구현했습니다.
- 스트림 복원 및 다중 스트림 유지 방식에 대해 백엔드와 협업해 API 스펙을 정의했으며, 해당 메시지 모델과 처리 구조를 팀 내 채팅 표준 아키텍처로 확산했습니다.
ProseMirror 기반 Rich Editor 아키텍처 설계 및 수식 블럭 확장 구현
- ProseMirror 기반으로 채팅 입력용 Rich Editor를 설계·구현하고, 문서 스키마를 정의해 텍스트·블럭 단위 구조를 구성했습니다.
- 수식 블럭을 커스텀 노드로 확장해 $...$ 자동 변환 및 복사 규칙을 구현하고, 이벤트 매니저 패턴을 활용해 React 기반 Popover와 Vanilla JS 기반 에디터 간 상태 동기화 구조를 설계했습니다.
팀 내 일정 관리 도구 개발 및 작업 자동 추적 프로세스 구축
- 프로젝트 단위 멤버 배정 및 역할 기반 권한 관리를 지원하는 관리자 페이지와, 일정 등록·상태 변경·다중 뷰(칸반/테이블/트리)를 제공하는 관리 대시보드를 설계·구현했습니다.
- 사내 GitHub Enterprise 웹훅과 연동해 작업 로그를 자동 수집하고, Slack 알림으로 실시간 공유되는 자동 추적 프로세스를 구축했으며, 현재 4개 프로젝트에 도입되었습니다.
OpenAPI 기반 코드 자동 생성 시스템 구축 및 API 협업 구조 설계
- 짧은 프로젝트 주기와 잦은 데모 요청이 반복되는 LAB 부서 환경에서, 백엔드 API 구현 완료 시점에 프론트엔드 개발이 종속되며 일정 지연이 발생하는 문제가 있었습니다.
- OpenAPI 명세를 기준으로 API 연동 코드·타입·MSW 핸들러를 자동 생성해 실제 API 구현 전에도 동일한 명세 기반으로 개발할 수 있도록 구조를 설계했습니다.
- 그 결과, API 구현 완료를 기다리며 평균 2~3일이 소요되던 개발 착수 대기를 병렬 개발 구조로 전환할 수 있었습니다.
1/3
당근
체험형 인턴 • Frontend Developer
당근알바 팀에서 BM, 마케팅, 엔터프라이즈 영역의 프론트엔드 개발을 담당했습니다.
Tech Stack.
Configuration-Driven 캠페인 페이지 생성 구조 설계
- 기존에는 마케팅 진행 시마다 별도의 프로젝트를 생성해야 했고, 웹뷰·로깅·앱 스킴 세팅 등 모든 과정을 매번 처음부터 반복해야 하는 불편함이 있었습니다.
- 캠페인 기간·페이지 구성·SEO 메타·보상 정책 등을
CampaignConfig로 선언적으로 정의하고, 설정 입력 후 generate하면 신규 캠페인 뼈대가 자동 생성되도록 구조를 설계했습니다. - 그 결과 개발 기간을 기존 3주에서 7~10일 수준으로 단축할 수 있었으며, QA 과정에서 발생하던 이슈도 약 30% 감소했습니다.
프랜차이즈 엔터프라이즈 시장 진출을 위한 공고 등록 시스템 개발
- 기존에는 신규 가맹점 공고 등록 시 본사에서 각 가맹점의 정보를 수기로 취합해 전달하는 방식이어서, 가맹점 수가 늘어날수록 운영 비용이 커지는 구조였습니다.
- 엔터프라이즈 확장을 고려해 서버 드리븐 UI 기반 공고 등록 구조를 도입하고, 템플릿 기반 입력 화면·검증 로직과 Appsflyer QR 스캔으로 해당 Form에 바로 진입하는 플로우 및 QR 생성 로직을 함께 설계·구현해, 공고 등록 전체 플로우를 단순화했습니다.
빅폰트 환경 대응 및 CTA 레이블 최적화
- 빅폰트 환경에서 CTA 버튼이 말줄임으로 표시되며, ‘지원취소’ 버튼이 ‘지원…’으로 노출돼 버튼의 의도가 제대로 전달되지 않는 문제가 있었습니다.
- 개선 전 말줄임 발생 케이스를 1주일간 로깅해 일일 영향 사용자 수를 측정했고, 레이블 최적화 이후 동일한 지표로 성과를 비교·검증했습니다.
- 그 결과 전체 지원취소율 2% 감소, 빅폰트 사용자 기준 20% 감소 성과를 달성했습니다.
서비스 내 마케팅 배너 노출 자동화
- 기존에는 배너 노출 조건을 클라이언트 코드에서 직접 관리해, 배너 변경 시마다 재배포가 필요했고
new Date()기반 제어로 안드로이드 시간 조작 시 미래 배너가 노출되는 취약점이 있었습니다. - 이를 해결하기 위해 배너 노출 로직을 서버와 관리자 페이지로 이관하고, PM이 직접 배너를 등록·관리할 수 있는 구조로 개선했습니다.
- 그 결과 배포 의존성을 제거하고 보안 취약점을 해소했으며, 커뮤니케이션 및 QA에 소요되던 리소스를 월 3시간 이상 절감했습니다.
Project Experience
곰터뷰
Frontend Developer
혼자서 면접 시뮬레이션을 하며 연습하는 것을 도와주는 웹사이트입니다.
Tech Stack.
Github 
Service 2/3
swagger-client-autogen
Frontend Developer
OpenAPI 스펙을 Single Source of Truth로 활용하여 API 함수, TanStack Query hook, Zod Schema를 포함한 프론트엔드 데이터 레이어를 자동 생성하는 CLI 라이브러리입니다.
Tech Stack.
npm 런타임 타입 안정성 보장
- TypeScript 정적 타입의 한계를 보완하기 위해 Zod Schema를 자동 생성하고, 백엔드 응답을 런타임에서 검증하는 타입 안전한 API 레이어를 설계했습니다.
캐시 일관성 및 invalidate 누락 문제 해결
- API Path 기반의 계층적 Query Key 규칙을 강제하여 캐시 구조를 표준화했습니다.
- mutation meta 정보를 활용한 Global Mutation Effect 아키텍처를 도입해 전역 invalidate 전략을 타입 안전하게 관리하고, entity 단위 fallback invalidate로 캐시 누락을 방지했습니다.
obsidian-callouts-markdown
Frontend Developer
blockquote로 파싱되는 마크다운 요소에서 obsidian callout 문법을 사용할 수 있도록 해주는 라이브러리입니다.
Tech Stack.
Links.
- 일상생활 속 불편한 점 기술적으로 해결해서 생산성을 향상시키는 경험
- Github Action을 활용한 npm 패키지 배포 자동화
Additional Experience
React, Javascript, TanStack Query, Tailwind CSS, Redux
대한민국 국회 정책영상 플랫폼 포탈 페이지 개발, kfa 축구협회 시스템 관리자 페이지 개발을 담당했습니다.
Gbrain
|외주 • React Native Developer
23.01 - 23.08
React Native, Typescript, NativeWind, TanStack Query, Jotai, MQTT, BLE, Github Actions
근전도 데이터를 시각적으로 표시하고, 원격으로 전송할 수 있는 교육용 앱 개발을 담당했습니다.
3/3