재직 중 · 합류할 팀을 찾고 있습니다

문제를 관찰하고,
배포되는 제품까지 만듭니다

기획 · 디자인 · 구현 · 배포 · 운영을 직접 맡아 온 프론트엔드 엔지니어 김준수입니다. 경력 1년 5개월, 전국 130여 농가·1,200여 사료빈을 보는 축산 IoT SaaS를 2인 웹 팀에서 만들고 있습니다.

  • 인천 · 서울
  • Next.js · TypeScript · React
  • FastAPI · LLM · CI/CD

일하는 원칙

  • 01

    기획서도, 배포 절차 문서도 제가 씁니다

    2인 개발 체제에서 커밋의 38%(355/941)를 맡았습니다. 화면을 만들고 끝내는 대신 배포 절차를 문서로 남겨, 다음 사람이 이어받게 했습니다.

  • 02

    현장에서 문제를 찾습니다

    실제 사용 환경을 직접 보고 문제를 정의합니다. 농가를 방문해 주문 흐름을 관찰한 뒤 화면을 설계했습니다.

  • 03

    개선 결과를 확인합니다

    GA4와 Clarity로 사용자 행동을 읽고, 바꾼 것이 실제로 나아졌는지 지표로 확인합니다.

About

작은 팀일수록 맡는 구간이 넓어집니다

2인, 3인 팀에서 일했습니다. 한 화면을 만드는 일보다, 그 화면이 실제로 쓰이게 만드는 일에 시간을 더 썼습니다.

End-to-End 오너십

기획 → 디자인 → 구현 → 배포 → 운영. 아이디어가 사용자에게 닿을 때까지의 모든 단계를 직접 맡습니다.

풀스택 실행력

프론트엔드부터 FastAPI 백엔드, Docker와 CI/CD 인프라까지 이어서 다룹니다. 막히는 지점을 남에게 넘기지 않습니다.

현장 기반 문제 정의

사용 현장을 직접 관찰하고 행동 데이터를 읽어, 요구사항 뒤에 있는 진짜 문제를 정의합니다.

AI를 제품에 녹이기

LLM과 SAM2를 실제 화면 흐름에 통합합니다. My Feed에서는 AI 분류 오류율을 10%에서 3%로 낮췄습니다.

Selected Work

만들어서 배포한 것들

실제로 운영되는 제품들입니다. 사내 서비스를 뺀 나머지는 데모 링크가 살아 있습니다.

01 실무 · 축산 IoT SaaS

My Feed

전국 130여 농가·1,200여 사료빈을 모니터링하는 축산 IoT SaaS. 웹 개발 2인 체제에서 커밋 38%를 맡아 농장 모니터링 화면과 관리자, 웹 알림 시스템을 주도했습니다.

모니터링 상세 API의 N+1을 걷어내 3개월 조회 기준 DB 왕복을 2,400회에서 1회로 줄였고, 관리자 이미지 목록은 실측 20장 172초에서 수 초로 내렸습니다. 62개 화면이 공통으로 받던 미사용 스크립트를 걷어내 페이지당 139KB를 줄였습니다.

SAM2 도입을 직접 제안해 사료빈 이미지 분류 오류율은 10%에서 3%가 됐습니다.

  • FastAPI
  • Jinja2
  • vanilla JS
  • Redis
  • Celery
  • MySQL
  • Chart.js
사내 서비스
02 실무 · 장애 대응 · 단독 구현

My Feed — 웹 알림

특정 브라우저에서 버전 업데이트 뒤부터 웹푸시가 조용히 끊겼습니다. 에러 하나 없이 알림만 오지 않았습니다.

OS 이벤트 로그로 푸시 경로를 홉 단위로 따라가 네트워크 도달·서버 발송·OS 수신까지는 정상이고 브라우저 내부에서 사라진다는 것을 특정했습니다. 제가 손댈 수 없는 계층이었습니다.

그래서 원인을 고치는 대신 도달을 보장하는 구조로 갔습니다 — 푸시, 폴링 폴백, 탭 복귀 갱신의 3중 방어. 숨은 탭은 타이머가 눌려 5분 뒤 65초 동안 요청이 0건인 것을 실측하고 Web Lock으로 면제를 받았습니다. 브라우저가 패치되면 푸시가 다시 우선권을 가져갑니다. 4일 동안 9개 파일, 커밋 8개로 혼자 넣었습니다.

  • Service Worker
  • FCM
  • vanilla JS
  • FastAPI
사내 서비스
03 실무 · 리뉴얼 · SEO·AEO·GEO

AimBe Lab 홈페이지

작업 전 0이던 ChatGPT 경유 방문이 지금은 월 10명대입니다. Clarity로 셌습니다.

투자자용 소개 페이지였던 회사 홈페이지를 고객이 보는 사이트로 다시 짓고 문의 flow를 붙여, 전화로만 받던 도입 문의를 온라인으로도 받게 만들었습니다. 메인 영상도 AI로 직접 만들어 올렸습니다.

그다음이 AI가 인용하게 만드는 일이었습니다. 형용사는 인용되지 않는다고 보고, 사내에 이미 있던 주문 가이드 12장에서 검증된 문장 40여 개를 뽑아 HTML 텍스트로 옮겼습니다 — 슬라이드를 이미지로 올렸다면 효과는 0이었습니다. HowTo 4스텝과 FAQ 12문항을 붙였고, 12개 페이지 전부 빌드 시각으로 나가던 사이트맵 lastmod를 git 이력 기준 실제 변경일로 고쳤습니다.

구글이 2023년 HowTo 리치 결과를 폐지한 것을 알고도 붙인 이유는, 목표가 검색 순위가 아니라 인용이기 때문입니다.

  • Next.js
  • TypeScript
  • schema.org
  • llms.txt
04 오픈소스 · 4인 팀

Componique

30개 이상의 컴포넌트를 npm에 배포한 오픈소스 디자인 시스템. 4인 팀에서 UI 컴포넌트 설계·개발을 맡았고, Storybook 문서와 Rollup 빌드 파이프라인을 함께 구성했습니다. 웅진씽크빅 × Udemy 부트캠프 2등.

  • React
  • TypeScript
  • Tailwind CSS
  • Storybook
  • Rollup
05 SaaS

StartupQT

퀴즈 저작 · 검수 · 관리 SaaS. 모듈형 에디터와 검수 워크플로우를 설계하고, GitHub Actions와 EC2 self-hosted runner로 배포를 자동화했습니다. 멀티스테이지 Dockerfile은 인스턴스 디스크가 모자라 빌드가 계속 죽어서 PM2로 바꿔 끝냈습니다.

성능은 재기 전에 점검 문서부터 썼습니다. 대상 5개 화면과 측정 환경을 시크릿 창·Slow 4G로 고정해 1차에서 메인 LCP 2.7초·CLS 0.103·Performance 82를 얻었고, 개선한 뒤 같은 조건으로 다시 재 리포트를 비교했습니다.

자료 삭제 API에서 남의 자료까지 지워지는 문제를 발견해 등록자 검증과 사용자별 API 분리를 제안했습니다.

  • Next.js
  • TypeScript
  • Zustand
  • Tiptap
  • MUI
  • Docker
06 졸업작품 · 3인 팀

Eat Fit

한국인 영양섭취기준(KDRIs)으로 개인별 목표 섭취량을 계산하고, EfficientNet으로 음식 사진을 분류하는 식단관리 PWA. 3인 팀에서 기획·프론트엔드·발표를 맡았습니다. 전날 식단은 매일 00시 배치로 ChatGPT API가 피드백합니다. 여러 음식이 한 접시에 담기면 분류가 흔들리고 질량 추정은 구현하지 못했습니다. 한국공학대전 우수상.

  • Next.js
  • FastAPI
  • AWS
  • PWA
07 마이그레이션 · 팀 리더

Wairi

검색 노출이 어려운 실제 기업의 Vue 서비스를 Next.js로 옮겨 서버 렌더링과 메타데이터 구조를 다시 설계했습니다. 팀 리더로 일정과 UI 개발을 총괄했고, 스나이퍼팩토리 부트캠프 우수상을 받았습니다.

  • Next.js
  • TypeScript
  • Tailwind CSS
  • SEO
Process

도구를 먼저 열지 않습니다

대부분의 실패는 무엇을 풀지 정하지 않은 채 손부터 대는 데서 나옵니다. 네 단계를 돌리고 지표를 확인한 뒤, 다시 첫 단계로 돌아갑니다.

  1. STEP 01

    정의

    무엇을 풀지부터 좁힙니다. 사용 현장과 데이터를 함께 봅니다.

  2. STEP 02

    설계

    화면 흐름과 데이터 구조, 권한 범위를 같은 자리에서 그립니다. 여기서 빠뜨린 것은 구현에서 두 배로 돌아옵니다.

  3. STEP 03

    구현

    프론트엔드와 API, 배포 파이프라인까지 이어서 만듭니다.

  4. STEP 04

    운영

    실제 사용 지표를 읽고 다음에 고칠 것을 정합니다. 대개 여기서 1번이 다시 시작됩니다.

Experience

지금까지의 경로

2025.07 — 현재

AimBe Lab

주임연구원 (정규직) · SaaS 기획 · 프론트엔드 · AI 통합

  • My Feed: 수기 장부·카카오톡으로 흩어져 있던 농가 주문을 디지털화했습니다.
  • GA4·Clarity로 사용자 행동을 계측해 UX 개선 우선순위를 정했습니다.
  • 홈페이지 리뉴얼: AEO·GEO 관점으로 구조를 다시 잡고 도입 문의 Flow를 붙여, 월 1건 남짓이던 문의를 월 평균 유선 4건·온라인 5건이 자동 수집되는 체계로 전환했습니다.
  • 3단계 RBAC 대시보드 설계, GitHub Actions CI/CD 구축.

2025.03 — 2025.06

The Innovators

Intern · 프론트엔드 · 배포 자동화

  • StartupQT 퀴즈 저작 SaaS의 모듈형 에디터와 검수 워크플로우 구현.
  • GitHub Actions·Docker·PM2 배포 파이프라인 단독 구축, Nginx 리버스 프록시와 HTTPS 환경 구성.

2021.06 — 2022.12

대한민국 육군 · 병장 만기 전역

정보통신 병과 — 정보분석 부대에서 네트워크 정비를 맡았습니다.

2020.03 — 2026.02

한국공학대학교

컴퓨터공학부 소프트웨어전공 · 학점 3.45 / 4.5 (전공 3.54)

수상

  • 베리타스알파 교육기사 공모전 우수상 — 공개 데이터 분석2026
  • 한국공학대전 우수상 — Eat Fit2025
  • 스나이퍼팩토리 부트캠프 우수상 — Wairi, 팀 리더2024
  • 웅진씽크빅 × Udemy 부트캠프 2등 — Componique2024

자격

  • ADsP2026.06
  • GA4 인증2025.09
  • OPIc IM12025.02

주요 기술

Frontend
  • React
  • Next.js (App Router · RSC)
  • TypeScript
  • Tailwind CSS
  • Zustand
  • Storybook
AI
  • LLM 통합
  • SAM2
  • FastAPI
DevOps
  • GitHub Actions
  • Docker
  • PM2
  • CI/CD
Data · 기타
  • GA4
  • Microsoft Clarity
  • RBAC
  • i18n
  • Tiptap
  • MUI

함께 풀 문제를 찾고 있습니다

제품을 처음부터 끝까지 맡을 사람이 필요하시다면 편하게 연락 주세요. 이력서와 상세 사례는 메일로 보내드립니다.