프로필 이미지

김수민

Frontend Developer
Phone 010-3134-0015

코드를 작성할 때는 무한한 확장성보다 기능의 가치맥락을 고려해 적정 수준의 엔지니어링을 지향하며, 사용자 경험을 최우선으로 사각지대까지 꼼꼼히 검토합니다. 또한 역할과 영역에 구애받지 않고 문제 해결에 나서며, 모두가 한 팀으로 긴밀히 협업하는 문화를 중요하게 생각합니다. 생산성협업에 진심인 개발자입니다. 비개발 직군의 워크플로우를 관찰해 업무 경험을 개선하고, 자동화 도구와 프로세스 정비로 팀과 개인의 생산성을 동시에 높인 경험이 있습니다.

Work Experience

NAVER Cloud

프리랜서 • Frontend Developer

2025.02 - Present

AI 기반 교육 서비스 개발을 담당했습니다. 또한 조직의 생산성과 협업 문화를 정립하는 데 기여했습니다.

Tech Stack.

ReactTypeScriptTanStack QuerytailwindCSSshadcn/uiTanstack RouterNext.js
  • OpenAPI + MSW 기반 API 협업 구조 설계
    • 백엔드 API가 완료되기 전까지 프론트엔드 개발을 시작할 수 없어 평균 2.5일 정도 병목이 발생하는 문제가 있었습니다.
    • 이를 개선하기 위해 기능 기획 완료 후 BE와 OpenAPI로 API를 협의하고, 코드와 MSW Mock을 자동 생성하는 프로세스를 구축했습니다.
    • 이 구조를 통해 프론트엔드 병목 시간을 평균 2.5일 단축하며 BE/FE 병렬 개발이 가능해졌습니다.
  • 팀 내 일정 관리 도구 개발 및 작업 자동 추적 프로세스 구축
    • 인턴·프리랜서가 사내 툴을 사용할 수 없어 개발자들이 매번 작업 현황을 수동으로 요약해 기획자에게 보고해야 하는 비효율이 있었습니다.
    • 이를 해결하기 위해 직접 일정 관리 시스템을 구축했습니다. 또한 사내 Open OSS 웹훅과 연동해 작업 로그가 자동 추적되고, Slack 알림으로 실시간 공유되도록 설계했고 현재 팀 내 4개의 프로젝트에 도입했습니다.
  • shadcn/ui + NAVER Design Token 기반 경량 디자인 템플릿 구축
    • 디자이너 없이 기획자와 개발자만으로 프로젝트를 진행해야 했기에 디자인이 큰 병목이 되었습니다.
    • 이를 해결하기 위해 shadcn/ui와 NAVER Design Token을 활용해 재사용 가능한 컴포넌트 템플릿을 구축했습니다.
    • 그 결과, 기획자는 준비된 컴포넌트를 활용하고 개발자는 일관된 스타일로 빠르게 구현할 수 있어 디자인 업무의 부담을 줄이고 일관성을 유지했습니다.
  • WebSocket → text/event-stream 기반 채팅 플로우 도입
    • 현재 팀은 기존에 채팅 기능을 무조건 WebSocket으로 구현하는 관행이 있었으나, 단순한 LLM 채팅 서비스에는 적합하지 않다고 판단했습니다.
    • 이에 ChatGPT·Claude 등 선례를 참고해, 새로 시작되는 프로젝트부터는 text/event-stream 기반 채팅을 도입하도록 제안했습니다.
    • 이로써 불필요한 WebSocket 의존을 줄여 코드 복잡성을 낮추고, 확장 가능한 DTO 설계를 통해 서비스 유지보수성을 강화했습니다.
  • ProseMirror 기반 수식 블럭 입력 에디터 개발
    • 교육용 LLM 서비스에서 수학 질문 입력 시 LaTeX 문법을 알아야 하는 불편이 있었고, 이는 학생들의 접근성을 떨어뜨렸습니다.
    • 이를 해결하기 위해 ProseMirror 기반 Rich Editor를 바닐라 JS로 개발 후 React와 통합했습니다.
    • 입력 즉시 LaTeX으로 변환 결과를 확인할 수 있고, 가상 키보드를 제공해 GUI 기반으로 수식을 편하게 입력할 수 있도록 구현했습니다.

당근

체험형 인턴 • Frontend Developer

2024.10 - 2025.01

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

Tech Stack.

ReactTypeScriptRelay ClientStitchesGatsbyVanilla ExtractBigQuery
  • 자체 마케팅 페이지 모듈화 및 자동 생성 시스템 구축
    • 기존에는 마케팅 진행 시마다 별도의 프로젝트를 생성해야 했고, 웹뷰·로깅·앱 스킴 세팅 등 모든 과정을 매번 처음부터 반복해야 했습니다.
    • 이를 해결하기 위해 UI 퍼블리싱만 신경 쓰면 되는 마케팅 페이지 자동 생성 시스템을 구축했습니다.
    • 덕분에 개발 기간을 기존 3주에서 7~10일 수준으로 단축할 수 있었으며, QA 과정에서 발생하던 이슈도 약 30% 감소했습니다.
  • 빅폰트 환경 대응 및 CTA 레이블 최적화
    • 빅폰트 환경에서 CTA 버튼이 말줄임으로 표시되어, 예를 들어 ‘지원취소’ 버튼이 ‘지원...’으로 표현되어 버튼의 의도를 이해하기 어려웠습니다.
    • 레이블을 최적화하여 가독성을 개선한 결과, 전체 지원취소율 2% 감소, 타겟 유저 기준 20% 감소 성과를 달성했습니다.
  • 프랜차이즈 엔터프라이즈 시장 진출을 위한 공고 등록 시스템 개발
    • 기존에는 신규 가맹점이 글을 등록할 때 본사에서 정보를 취합해 전달해야 하는 비효율적인 프로세스가 있었습니다.
    • 이 과정을 개선하기 위해 서버 드리븐 UI 기반 공고 작성 Form을 도입하여, 어드민 템플릿 설정과 QR 기반 최소 입력만으로 글을 등록할 수 있도록 플로우를 단순화했습니다.
  • 서비스 내 마케팅 배너 자동화
    • 기존에는 배너 노출을 클라이언트 코드에서 관리해 배포 시마다 재배포가 필요했고, new Date() 기반 제어로 안드로이드 시간 조작 시 미래 배너가 노출되는 취약점이 있었습니다.
    • 이를 해결하기 위해 배너 노출 정보를 서버와 관리자 페이지에서 관리하도록 전환해, PM이 직접 배너를 등록할 수 있도록 개선했습니다.
    • 그 결과 배포 과정이 단순해지고, 취약점도 개선하였으며 커뮤니케이션과 QA에 소요되던 리소스를 월 3시간 이상 절감할 수 있었습니다.
  • iOS 웹뷰 환경 WebGL 안정성 개선
    • iOS 17에서 백그라운드 전환 시 WebGL 컨텍스트가 손실되는 이슈를 Sentry 로그를 통해 발견했습니다.
    • 근본적 수정은 불가능했지만, 이벤트 발생 시 컴포넌트를 리마운트하고 3회 제한을 두는 방식으로 안정성을 높여 사용자 경험 저하를 방지했습니다.

NAVER Cloud

체험형 인턴 • Frontend Developer

2024.04 - 2024.10

LLM 기반 AI를 활용해 헬스케어 제품 개발 가능성을 POC로 검증하는 LAB 부서에서 프론트엔드 개발을 담당했습니다.

Tech Stack.

Next.jsTypeScriptReact NativeTanStack QuerytailwindCSSnextuishadcn/uiDocker
  • OpenAPI 기반으로 프론트엔드 코드 자동 생성 CLI 도구 개발
    • Lab 부서 특성상 다양한 프로젝트가 짧은 시간 안에 시작되고 종료되었으며, 그때마다 API와 관련된 코드를 수동으로 작성하는 비효율적인 과정을 개선하기 위해 CLI 도구를 개발했습니다.
    • swagger-typescript-api 패키지와 EJS 템플릿을 사용해, OpenAPI 스펙 기반으로 API 클라이언트, DTO, Query/Mutation Hook 코드를 팀 컨벤션에 맞게 자동 생성하는 프로세스를 구축했습니다.
  • 갑작스러운 요청에 유연하게 대응하고, 빠르게 피드백을 받은 경험
    • 진행중인 프로젝트를 중단하고, 일주일 기한 내에 STT와 Wake Word 기능을 포함한 데모 프로젝트를 제작해야하는 일정이 생겼습니다.
    • 이를 해결하기 위해 웹에서 STT를 수행할 수 있는 솔루션을 탐색하고, Web Speech Recognition API를 활용해 STT 및 Wake Word 기능을 빠르게 구현했습니다. 이를 바탕으로 실시간 음성 채팅 기능까지 개발하여 데모를 시연했습니다.

모베란

계약직 • Frontend Developer

2024.01 - 2024.02

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

Tech Stack.

ReactJavascriptTanStack QueryzustandtailwindCSSReduxRedux thunk

Links.

  • 워드클라우드 차트의 프레임 속도를 1050ms → 15.6ms로 향상시켜 퍼포먼스 개선
    • 워드클라우드에서 각 아이템 호버시 글자가 확대되는 애니메이션을 구현해야한다는 요구사항으로 인해 svg 기반 라이브러리를 사용했습니다.
    • 하지만 차트 랜더링시 약 1050ms의 frame 시간이 소요되었고, 60fps 기준 사용자에게 좋지 않은 퍼포먼스를 제공했습니다.
    • 이를 해결하기 위해 canvas 기반 라이브러리로 마이그레이션하여 frame 시간을 15.6ms로 향상시키고, 마우스 좌표값을 기반으로 호버 애니메이션을 구현해서 기능 요구사항과 퍼포먼스 개선을 모두 달성했습니다.
  • 무한스크롤 최적화를 통한 랜더링 속도 개선
    • 무한스크롤시 DOM 요소가 늘어남에 따라 랜더링 성능이 저하된다는 문제점을 해결하기 위해 react-virtualized 라이브러리를 도입해서 사용자에게 보여지는 영역만 랜더링되도록 개선했습니다.
  • React Router v6 loader 활용해 페이지 로직과 라우터 로직의 책임 분리와 typeSafe한 쿼리스트링 관리
    • 통합검색시 다양한 종류의 필터링 기능을 지원하고, 필터와 쿼리 url이 연동돼야한다는 요구사항이 있었습니다. 필터링 값은 api 요청을 통해 받아오기 때문에 사용자가 유효하지 않은 쿼리스트링을 입력하는 상황에 대한 예외처리가 필요했습니다.
    • 이를 페이지의 책임이 아닌 라우터의 책임으로 보고, loader를 사용해 페이지 진입 시 api 데이터를 기반으로 쿼리스트링의 유효성을 검증하도록 구현했습니다.

Gbrain

외주 • React Native Developer

2023.01 - 2023.08

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

Tech Stack.

React NativeTypescriptNativeWindTanStack QueryJotaiMQTTBLEGithub Actions
  • 사용자 친화적인 UX로 장비 연결 과정 개선
    • 기존 앱은 사용자가 장비를 세팅하기 위해 반드시 별도의 튜터리얼 영상을 참고해야 하는 문제점이 있었습니다.
    • 사용자들이 별도의 설명서 없이 아두이노 장비를 세팅할 수 있도록, 각 장비 연결 과정을 단계별로 나눈 Step 형식의 UX/UX로 개선했습니다. 또한 각 단계에서 발생할 수 있는 문제를 해결하기 위한 FAQ를 제공했습니다.
    • 비개발자도 쉽게 FAQ 내용을 관리할 수 있도록, Google 스프레드 시트에서 내용을 수정하면 자동으로 앱에 반영되도록 구현하여 비개발 직군의 업무 효율 또한 향상시켰습니다.
  • Android 네이티브 → React Native 마이그레이션
    • iOS 기기를 지원해야하는 요구사항으로 인해 Android 네이티브 앱을 React Native로 마이그레이션하는 작업을 진행했습니다.
    • iOS 기기에서 Bluetooth classic을 사용할 수 없다는 이슈로 인해 BLE 통신 방법을 사용하도록 Arduino 펌웨어를 재작성했습니다.

Project Experience

obsidian-callouts-markdown

Frontend Developer

2024.03 - 2024.04

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

Tech Stack.

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

Education

인천대학교

2020.03 - 2024.08

컴퓨터공학부 졸업

전체 학점 3.98/4.5

전공 학점 4.04/4.5

Awards

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