bblog
읽기 모드

이충헌

Product Engineer

사용자가 처음 만나는 홈페이지부터 가입·결제·제품 화면까지, 제품이 쓰이는 전 과정을 팀과 같이 고민하고 만듭니다.

github.com/lodado
bblog-theta.vercel.app/about
ycp998@naver.com

Summary

•
5년 차 프론트엔드 엔지니어로, 회사 홈페이지에 SEO/GEO를 적용해 하루 방문자를 전년 대비 44% 늘렸고 Next.js 기반 글로벌 AI SaaS, B2B 제품을 이끌고 있습니다. 디자인 시스템 0 → 1 제안 및 구축 경험이 있으며, 아키텍처 설계부터 결제, 테스트·QA 자동화까지 제품이 완성되는 전 과정을 담당하고 있습니다.
•
번들 2.2MB → 700KB, LCP 2.6s → 1.0s, Lighthouse Performance 77 → 93점으로 성능을 개선했고, 수치/요구사항을 정의한 이후 유저 플로우 기반 테스트 코드를 먼저 짜고(TDD) 작업하는 방식을 선호합니다.
•
AI와 일할 때도 모호한 자연어 요구사항을 형식 논리·오토마타로 모델링하고 경계값 분석·속성 기반 테스트(fast-check)로 검증하는 하네스(frontend-oracle-design)를 직접 만들었습니다.
•
React 원리를 파고들어 Notion형 에디터와 Server-Driven UI를 오픈소스로 직접 설계했습니다 — 지금 보시는 이 이력서가 그 에디터로 렌더링된 결과물입니다.

Skills

Next.js · React · TypeScript · Google Analytics · PostHog · Paddle.js · Playwright · Vitest · Storybook · Zustand · TanStack Query · GitHub Actions · Turborepo · Vercel · Sentry

Work Experience

2026.02 — 현재

서울 · 대면근무

Frontend Web Developer

Korea Deep Learning Inc. · 정규직

시리즈 A 120억 원 투자를 유치하고 올해 상반기 매출 30억 원(전년 대비 약 3.4배 증가)을 기록한 AI OCR/VLM 스타트업에서 회사 홈페이지와 SaaS/B2B 제품의 프론트엔드를 맡고 있습니다.

홈페이지 Framer 마이그레이션과 SEO/GEO 개선

Framer로 만든 기존 홈페이지는 다국어 처리 및 유지보수에 에러사항이 있었습니다.

•
홈페이지를 Framer에서 직접 개발한 사이트로 옮겼습니다. 캐노니컬 태그, JSON-LD(구조화 데이터), 한·영·일 다국어 구조를 개선해 검색엔진과 ChatGPT 같은 AI 검색(GEO)에서 찾을 수 있게 했습니다
•
→ 하루 방문자 전년 대비 44% 증가, 검색으로 온 리드 문의(핵심 전환목표)의 27%는 AI(GEO) 유입

비개발자와의 바이브코딩 협업

•
기획·디자인 담당자가 AI로 직접 코드를 수정하는 협업 프로세스 구축. 린트·자동 테스트·하네스·리뷰를 통과해야 반영
•
Slack 스레드, jira 에서 태그된 요청들을 LLM으로 요약해 각각 알맞은 repository에 요청사항·원인·개선 플랜으로 정리 및 구현하는 하네스 오케스트레이션 툴 구현
◦
승인하면 Orca worktree에서 구현·Visual QA·PR까지 자동으로 이어지도록 연동
•
AI Agent가 Playwright 테스트 명세를 읽고 실행·판정하는 QA 도구 구현 및 사내 도입

성능 최적화

•
초기 화면 SSR 전환, 데이터 요청 병렬화, 코드 스플리팅·vendor chunk 분리, Pretendard 서브셋 적용
•
→ 측정 결과: 첫 화면 표시(LCP) 2.6s → 1.0s, 초기 JavaScript 2.2MB → 700KB, Lighthouse Performance 77 → 93점

제품 인터페이스 & 아키텍처

문서 종류마다 OCR 결과 구조가 달라 화면을 미리 정해둘 수 없었습니다.

•
서버가 보낸 구성대로 화면을 그리는 방식(Server-Driven UI)을 택해 문서 구조가 달라도 같은 코드로 화면을 그립니다. 처리할 수 없는 데이터가 오면 그 부분 fallback으로 보여줍니다
•
유저, 요금제, 권한마다 보이는 기능이 달라서 멀티테넌시 구조를 만들었습니다. 화면마다 조건문을 넣지 않고 server driven ui로 관리하므로, 권한이 바뀌면 json만 고치면 됩니다. 접근 허용은 서버가 최종 판단합니다
•
큰 문서를 편집할 때 바뀐 블록만 다시 그려서 재귀형 tree 데이터 리렌더링 성능 최적화를 구현

글로벌 결제

•
Paddle.js 글로벌 결제 연동. 최종 권한 판단은 서버, 클라이언트는 상태 표현만 맡도록 나누고 구독 상태 접근 제어를 State Pattern으로 설계
•
웹훅 반영이 늦는 구간은 실패가 아니라 대기 상태. 결제 확인 중 UI와 폴링 동기화로 사용자에게 현재 상태를 표시
•
결제·문서 편집 등 핵심 흐름에 경계값 분석 기반 E2E 400+, 단위 테스트 400+ 작성후 리펙토링. 대규모 구조 변경을 1~2일 만에 완료

Next.js · React · TypeScript · Zustand · TanStack Query · Playwright · Vitest · Storybook · Paddle.js · Vercel · Sentry

2022.10 — 2026.01

3년 4개월

성남시 · 대면근무

Frontend Web Developer

티맥스데이터 · 정규직

여러 제품팀이 공통으로 사용하는 사내 디자인 시스템과 DB 모니터링 플랫폼의 프론트엔드 아키텍처를 설계·구축했습니다. 레거시 개선과 제품 기능 개발을 시작으로, 입사 3년 차부터 디자인 시스템 아키텍처와 배포 인프라를 주도했습니다.

사내 디자인 시스템 구축 (0 → 1 제안·주도)

•
제품별 UI 파편화와 중복 개발 비용을 근거로 디자인 시스템을 제안하고 아키텍처 설계부터 컴포넌트 개발·배포 체계 구축까지 주도
•
디자이너 3–6명과 시맨틱 토큰 체계를 협의하고 2–4개 제품팀에 패키지 배포, 여러 제품이 같은 UI 규칙을 공유하는 공통 기반 제공
•
여러 제품팀이 동시에 쓰는 패키지라 배포 사고의 파급이 커서 변경을 단계적으로 배포했고 Breaking Change 비용을 제품팀에 떠넘기지 않도록 자동 변환 도구(codemod)와 마이그레이션 가이드를 함께 제공
•
접근성(WAI-ARIA) 구현 부담이 큰 영역은 직접 만들지 않고 Radix UI에 맡기고 Storybook 문서화와 테스트·배포 자동화를 함께 구축
•
실사용 병목이던 대용량 조회 화면을 위해 가상화 렌더링 기반 공통 headless Table 라이브러리를 설계. 50만 row를 3.8초 내에 렌더링해 같은 데이터에서 TUI Grid 등 오픈소스 그리드와 대등한 성능(벤치마크 기준)을 내면서 디자인 시스템 토큰·API를 그대로 따르는 컴포넌트 확보

SysMasterDB 8 프론트엔드 개발

Grafana와 유사한 DB 모니터링 플랫폼의 프론트엔드 개발과 구조 개선을 담당했습니다.

→ 구동 화면 예시: SysMaster DB 8 (Notion)

•
기능이 늘며 무너진 모듈 경계를 Feature-Sliced Design으로 재설계해 의존성 방향을 명확화
•
JavaScript 레거시를 TypeScript와 사내 디자인 시스템으로 마이그레이션해 타입 안정성과 UI 일관성 확보
•
사용자마다 보는 지표가 달라 화면을 고정할 수 없어 드래그 앤 드롭 기반 Server-Driven UI 대시보드를 설계. 레이아웃 구성은 서버 데이터로 관리

React · TypeScript · Storybook · Turborepo · Vite · Rollup · Jest · React Testing Library · GitLab CI/CD

Side Projects

shareds — AI 코딩 에이전트용 하네스

•
AI가 애매한 정책을 마음대로 정하고 '테스트 통과'만 보고하는 일을 막으려고, 결제·권한처럼 틀리면 손해가 큰 동작은 요구사항을 사람이 승인해 파일로 잠근 뒤 실패하는 테스트, 구현, 독립 리뷰 순서를 지키게 하는 Claude Code·Codex 스킬을 만들었습니다(frontend-oracle-design)
•
모호한 자연어 요구사항을 수학적 모델(형식 논리·오토마타)로 바꿔 빠진 경우가 없는지 먼저 따져봅니다. 그다음 경계값 중심으로 테스트를 만들고, 수많은 입력을 자동으로 만들어 돌려보는 테스트(속성 기반 테스트, fast-check)로 실제 코드가 모델대로 동작하는지 확인합니다
•
매 작업을 계획·구현·검증·최종 리뷰 역할로 나누고 지난 실수부터 고치게 하는 harness-team과 린트 프리셋도 함께 만들었습니다

Simmey (Web Service)

•
개인 웹 서비스를 직접 개발·운영했으며 광고 없이 SEO 유입을 기반으로 2025.08 MAU 900명 · 해외 사용자 비중 95% 이상 기록

꼬꼬의 분노 (3D Web Game)

•
Three.js로 브라우저에서 바로 실행되는 3D 서바이벌 게임을 직접 개발·운영했습니다. 게임 규칙은 ECS(Miniplex)로 분리하고 시스템 실행 순서를 한곳에서 정해, 같은 시드와 입력이면 항상 같은 결과가 나옵니다
•
화면(Three.js)은 상태를 읽어 그리기만 하고 규칙은 ECS가 맡습니다. 사람이 승인한 불변식을 형식 모델로 만든 뒤, 실제 게임 로직이 모델과 같은 결과를 내는지 테스트로 비교합니다

Education

2021 네이버 부스트캠프 챌린지·멤버십 과정 6기 수료

2022.02 전남대학교 소프트웨어전공 졸업 (전공 4.09/4.5, 총합 3.96/4.5)