프로필 이미지

김수민

Frontend Developer

반복되는 문제를 개별 기능 개선이 아닌, 일하는 방식과 협업 구조를 재설계하는 방식으로 해결하는 프론트엔드 개발자입니다. OpenAPI 기반 병렬 개발 구조 설계, 팀 내 일정 관리 자동화, 마케팅 보일러플레이트 구축 등을 통해 협업과 개발 프로세스의 구조를 개선해왔습니다. 기능 구현을 넘어, 팀이 더 안정적으로 일할 수 있는 환경을 만드는 데 책임감을 두고 일합니다.

Work Experience

NAVER Cloud

Frontend Developer

상주 프리랜서 25.02 - Present
체험형 인턴 24.04 - 24.10

LLM 기반 AI를 활용한 헬스케어와 교육 서비스 개발을 담당했으며, 조직의 생산성과 협업 문화를 정립하는 데 기여했습니다.

Tech Stack.

ReactNext.jsTypeScriptTanStack QueryTailwind CSSTanStack RouterPlaywrightDockerNginx

OpenAPI 기반 코드 자동 생성 시스템 구축 및 API 협업 구조 설계

  • 짧은 프로젝트 주기와 잦은 데모 요청이 반복되는 LAB 부서 환경에서, 백엔드 API 구현 완료 시점에 프론트엔드 개발이 종속되며 일정 지연이 발생하는 문제가 있었습니다.
  • OpenAPI 스펙을 기준으로 BE/FE가 사전에 협의하고, 해당 스펙을 기반으로 프론트엔드 API 연동 코드를 자동 생성해 병렬 개발이 가능하도록 협업 구조를 설계·구현했습니다.
  • 그 결과, API 구현 완료를 기다리며 평균 2~3일이 소요되던 개발 착수 대기를 병렬 개발 구조로 전환할 수 있었습니다.

팀 내 일정 관리 도구 개발 및 작업 자동 추적 프로세스 구축

  • 인턴·프리랜서가 사내 툴을 사용할 수 없어 개발자들이 매번 작업 현황을 수동으로 요약해 기획자에게 보고해야 하는 비효율이 있었습니다.
  • 이를 해결하기 위해 AI 도구를 활용한 빠른 프로토타이핑으로 직접 일정 관리 시스템을 구축했습니다. 또한 사내 Open OSS 웹훅과 연동해 작업 로그가 자동 추적되고, Slack 알림으로 실시간 공유되도록 설계했고 현재 팀 내 4개의 프로젝트에 도입했습니다.

SSE 기반 AI 채팅 스트리밍 구조 설계 및 UX 안정화

  • 실시간 채팅 구현 시 관습적으로 WebSocket을 사용하는 방식 대신, AI 채팅 특성에 더 적합한 text/event-stream 기반 스트리밍 구조를 제안하고 도입했습니다.
  • 스트리밍으로 수신되는 토큰을 서버 상태로 관리해, 로딩부터 완료까지의 흐름을 일관되게 처리할 수 있는 구조를 설계했습니다.
  • 또한 수신된 토큰을 즉시 렌더링하지 않고 큐 기반으로 버퍼링 처리해 출력 흐름을 안정화함으로써, AI 응답이 끊김 없이 표시되도록 했습니다.
  • 스트림 복원 및 다중 스트림 유지 방식에 대해 백엔드와 협업해 설계했으며, 해당 스트리밍 구조가 이후 시작된 다른 채팅 프로젝트들의 기준 패턴으로 활용되고 있습니다.

기타 경험

  • QA 시트 기반 E2E 테스트 자동화 플로우 설계에 참여해, 시트 데이터 기반 stub 코드 생성 → Playwright 테스트 실행 → 결과 재업로드 구조를 정의하고 QA–개발 간 반복 확인 작업을 줄이는 자동화 흐름을 구축
  • ProseMirror 기반 Rich Editor에 MathLive를 통합하고, Vanilla JS와 React 환경을 안정적으로 연결한 편집기 개발
  • 전문 QA 팀과 협업하며 Safari, iOS, Android 환경에서의 크로스브라우저 이슈 대응

1/3

당근

체험형 인턴 • Frontend Developer

24.10 - 25.01

당근알바 팀에서 BM, 마케팅, 엔터프라이즈 영역의 프론트엔드 개발을 담당했습니다.

Tech Stack.

ReactTypeScriptRelay ClientStitchesGatsbyVanilla Extract

자체 마케팅 페이지 모듈화 및 보일러플레이트 구축

  • 기존에는 마케팅 진행 시마다 별도의 프로젝트를 생성해야 했고, 웹뷰·로깅·앱 스킴 세팅 등 모든 과정을 매번 처음부터 반복해야 하는 불편함이 있었습니다.
  • 마케팅 페이지에 공통적으로 필요한 설정과 구조를 프론트엔드 보일러플레이트로 표준화해, 개발자가 페이지 구성과 퍼블리싱에만 집중할 수 있도록 개선했습니다.
  • 그 결과 개발 기간을 기존 3주에서 7~10일 수준으로 단축할 수 있었으며, QA 과정에서 발생하던 이슈도 약 30% 감소했습니다.

빅폰트 환경 대응 및 CTA 레이블 최적화

  • 빅폰트 환경에서 CTA 버튼이 말줄임으로 표시되며, ‘지원취소’ 버튼이 ‘지원…’으로 노출돼 버튼의 의도가 제대로 전달되지 않는 문제가 있었습니다.
  • 개선 전 말줄임 발생 케이스를 1주일간 로깅해 일일 영향 사용자 수를 측정했고, 레이블 최적화 이후 동일한 지표로 성과를 비교·검증했습니다.
  • 그 결과 전체 지원취소율 2% 감소, 빅폰트 사용자 기준 20% 감소 성과를 달성했습니다.

프랜차이즈 엔터프라이즈 시장 진출을 위한 공고 등록 시스템 개발

  • 기존에는 신규 가맹점 공고 등록 시 본사에서 각 가맹점의 정보를 수기로 취합해 전달하는 방식이어서, 가맹점 수가 늘어날수록 운영 비용이 커지는 구조였습니다.
  • 엔터프라이즈 확장을 고려해 서버 드리븐 UI 기반 공고 등록 구조를 도입하고, 템플릿 기반 입력 화면·검증 로직과 Appsflyer QR 스캔으로 해당 Form에 바로 진입하는 플로우 및 QR 생성 로직을 함께 설계·구현해, 공고 등록 전체 플로우를 단순화했습니다.

서비스 내 마케팅 배너 노출 자동화

  • 기존에는 배너 노출 조건을 클라이언트 코드에서 직접 관리해, 배너 변경 시마다 재배포가 필요했고 new Date() 기반 제어로 안드로이드 시간 조작 시 미래 배너가 노출되는 취약점이 있었습니다.
  • 이를 해결하기 위해 배너 노출 로직을 서버와 관리자 페이지로 이관하고, PM이 직접 배너를 등록·관리할 수 있는 구조로 개선했습니다.
  • 그 결과 배포 의존성을 제거하고 보안 취약점을 해소했으며, 커뮤니케이션 및 QA에 소요되던 리소스를 월 3시간 이상 절감했습니다.

기타 경험

  • iOS WebView 환경의 WebGL 컨텍스트 손실 이슈를 Sentry 로그로 분석하고, 플랫폼 제약을 고려한 대응 로직을 적용

2/3

swagger-client-autogen

Frontend Developer

초기 구축 24.08 - 26.10
구조 개선 25.07 - Present

OpenAPI 스펙을 Single Source of Truth로 활용하여 API 함수, TanStack Query hook, Zod Schema를 포함한 프론트엔드 데이터 레이어를 자동 생성하는 CLI 라이브러리입니다.

Tech Stack.

TypeScriptOpenAPIswagger-typescript-api

런타임 타입 안정성 보장

  • TypeScript 정적 타입의 한계를 보완하기 위해 Zod Schema를 자동 생성하고, 백엔드 응답을 런타임에서 검증하는 타입 안전한 API 레이어를 설계했습니다.

캐시 일관성 및 invalidate 누락 문제 해결

  • API Path 기반의 계층적 Query Key 규칙을 강제하여 캐시 구조를 표준화했습니다.
  • mutation meta 정보를 활용한 Global Mutation Effect 아키텍처를 도입해 전역 invalidate 전략을 타입 안전하게 관리하고, entity 단위 fallback invalidate로 캐시 누락을 방지했습니다.

obsidian-callouts-markdown

Frontend Developer

24.03 - 24.04

blockquote로 파싱되는 마크다운 요소에서 obsidian callout 문법을 사용할 수 있도록 해주는 라이브러리입니다.

Tech Stack.

ReactTypescriptTailwind CSSCloudflareGithub Actions
  • 일상생활 속 불편한 점 기술적으로 해결해서 생산성을 향상시키는 경험
  • Github Action을 활용한 npm 패키지 배포 자동화

Additional Experience

모베란

|

계약직 • Frontend Developer

24.01 - 24.02

Stack

React, Javascript, TanStack Query, Tailwind CSS, Redux

대한민국 국회 정책영상 플랫폼 포탈 페이지 개발, kfa 축구협회 시스템 관리자 페이지 개발을 담당했습니다.

Gbrain

|

외주 • React Native Developer

23.01 - 23.08

Stack

React Native, Typescript, NativeWind, TanStack Query, Jotai, MQTT, BLE, Github Actions

근전도 데이터를 시각적으로 표시하고, 원격으로 전송할 수 있는 교육용 앱 개발을 담당했습니다.

Education

인천대학교

컴퓨터공학부 졸업

20.03 - 24.08

전체 3.98 · 전공 4.04 / 4.5

부스트캠프 웹 · 모바일 8기

23.07 - 23.12

Awards

  • INU 컴퓨터공학과 졸업프로젝트 동상
  • INU 4차 산업혁명 아이디어톤 우수상
  • 프로그래밍 기초 우수 TA상

3/3