bblog
읽기 모드

이충헌

AI Native 프론트엔드 엔지니어

복잡한 제품 요구사항을 이해하기 쉬운 인터페이스와 단순한 구조로 풀고, 함께 일하는 사람이 안심하고 변경할 수 있는 코드를 만들고 싶습니다.

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

Summary

•
4년 차 프론트엔드 엔지니어로, Next.js 기반 글로벌 AI SaaS를 이끌고 있습니다. 디자인 시스템 0 → 1 제안 및 구축 경험이 있으며, 아키텍처 설계부터 결제, 테스트·QA 자동화까지 제품이 완성되는 전 과정을 담당하고 있습니다.
•
번들 2.2MB → 700KB, LCP 2.6s → 1.0s, Lighthouse Performance 77 → 93점으로 성능을 개선했고, 요구사항을 정의한 이후 유저 플로우 기반 테스트 코드를 먼저 짜고(TDD) 작업하는 방식을 선호합니다.
•
React 원리를 파고들어 Notion형 에디터와 Server-Driven UI를 오픈소스로 직접 설계했습니다 — 지금 보시는 이 이력서가 그 에디터로 렌더링된 결과물입니다.
•
평소에도 코딩 자체를 즐기는 편입니다. 취미로 다양한 주제와 영감을 상상하고 현실화하는 것을 좋아합니다. 제가 만든 프로젝트들은 bblog-theta.vercel.app/portfolio에서 확인하실 수 있습니다.

Skills

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

Work Experience

2026.02 — 현재

서울 · 대면근무

Frontend Web Developer

Korea Deep Learning Inc. · 정규직

시리즈 A 120억 원 투자를 유치하고 올해 상반기 매출 30억 원(전년 대비 3배)을 기록한 AI OCR/VLM 스타트업에서, Next.js 기반 AI SaaS의 프론트엔드 아키텍처, 결제, 성능 최적화, 품질 자동화를 담당하고 있습니다.

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

문서 종류마다 OCR 결과 구조가 달라, 화면을 미리 고정할 수 없는 상황이었습니다.

•
백엔드와 노드 스키마 계약을 먼저 정의하고, 재귀 트리 기반 Server-Driven UI로 해결
◦
스키마는 신뢰할 수 없는 외부 입력. Zod 런타임 검증과 미지원 노드 fallback 렌더러를 붙여, 노드 하나의 오류가 화면 전체 장애로 번지지 않게 격리
◦
→ 템플릿 오픈소스: https://github.com/lodado/sdui-template
•
전역 스토어 구독으로는 전체 리렌더를 못 막아, N-depth 계층형 문서를 ID로 정규화하고 useSyncExternalStore 노드별 구독 구조로 설계. 대규모 문서를 편집해도 변경된 노드만 리렌더링

성능 최적화

•
Lighthouse 트레이스와 번들 분석으로 병목을 초기 CSR 렌더·vendor 번들·웹폰트로 좁혀 순서대로 제거. 초기 JavaScript 번들 2.2 MB → 700 KB (68% 감소) · 폰트 리소스 70% 감소
◦
초기 화면 SSR 전환과 데이터 요청 병렬화, 코드 스플리팅·vendor chunk 분리, Pretendard 서브셋 적용
◦
→ LCP 2.6s → 1.0s · Lighthouse Performance 77 → 93점

글로벌 결제와 구독 상태 UI

•
Paddle.js 글로벌 결제 연동. 최종 권한 판단은 서버, 클라이언트는 상태 표현만 맡도록 나누고 구독 상태 접근 제어를 State Pattern으로 설계
◦
웹훅 반영이 늦는 구간은 실패가 아니라 대기 상태. 결제 확인 중 UI와 폴링 동기화로 사용자에게 현재 상태를 표시

품질 자동화

•
실패 비용이 가장 큰 결제·문서 편집 플로우에 테스트를 집중. 사용자 시나리오와 BVA(경계값 분석) 기반 E2E 테스트 400+, 단위 테스트 400+로 회귀를 배포 전에 차단
•
GitHub Actions CI에서 타입 검사·린트·단위/E2E 테스트를 머지 필수 게이트로 운영. 브라우저 지원 기준선을 ES2019로 잡고, 구버전 전용 회귀는 Selenium 크로스브라우징 테스트로 검출

SDUI 도입 같은 대규모 리팩토링은 테스트로 안전망부터 깔고 시작해, 하네스 엔지니어링으로 1~2일 만에 마쳤습니다.

AI 기반 개발 워크플로

•
Playwright 테스트 명세를 AI Agent가 실행·판정하는 QA 도구를 만들어 사내 테스트 프로세스에 도입
◦
판정을 pass / fail / manual_review / skip으로 표준화. 근거가 부족하면 통과가 아니라 사람 검토로 넘기는 보수적 기본값으로 오탐(false pass) 차단
•
생성 코드가 사내 컨벤션에서 벗어나지 않도록, 디자인 시스템 컴포넌트 API와 사용 규칙을 AI Agent에 제공하는 Design System MCP를 구축

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 규칙을 공유하는 공통 기반 제공
•
여러 제품팀이 동시에 쓰는 패키지라 배포 사고의 파급이 커서, Turborepo·Changesets·Rollup 기반 ESM 모노레포와 버전 관리 구조로 변경을 단계적으로 배포
•
Breaking Change 비용을 제품팀에 떠넘기지 않도록 jscodeshift 기반 codemod와 마이그레이션 가이드를 함께 제공
•
접근성(WAI-ARIA) 구현 부담이 큰 영역은 직접 만들지 않고 Radix UI에 위임, Compound Component Pattern으로 확장 가능한 컴포넌트 API 구현
•
실사용 병목이던 대용량 조회 화면을 위해 가상화 렌더링 기반 공통 headless Table 라이브러리를 설계. 50만 row를 3.8초 내에 렌더링해, 같은 데이터에서 TUI Grid 등 오픈소스 그리드와 대등한 성능(벤치마크 기준)을 내면서 디자인 시스템 토큰·API를 그대로 따르는 컴포넌트 확보
•
Storybook 문서화와 Jest·React Testing Library 테스트 체계를 구축하고, GitLab Runner 기반 배포 파이프라인 자동화

SysMasterDB 8 프론트엔드 개발

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

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

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

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

Side Projects & Open Source

Sdui-document — Notion형 블록 에디터

github.com/lodado/sdui-template · 지금 보고 계신 이력서가 이 에디터로 작성·렌더링·PDF 출력됩니다

•
에디터 전체가 특정 라이브러리에 종속되는 것을 피하려고, 계층형 JSON 문서 모델과 편집 상태는 직접 설계하고 ProseMirror는 포커스된 블록의 인라인 편집에만 사용
•
프레임워크 독립 코어에서 불변 패치·순회·정규화와 역패치 2-스택 기반 undo/redo 구현
•
useSyncExternalStore와 ID별 리스너 맵으로 변경된 블록만 리렌더링하고, 편집 상태는 blur·unmount 시점에만 커밋해 불필요한 업데이트 최소화
•
CSS cascade layer로 우선순위를 선언해 specificity 경쟁 없이 테마를 교체하며, 이 이력서의 Swiss 테마도 CSS만으로 구현

bblog — 개인 지식 성장형 기술 블로그

•
AI Agent 작업 Context를 로깅해 TIL·지식 문서·블로그 글로 정제하고, 문서 간 관계 그래프를 생성하는 지식 파이프라인 구축
•
AI Agent로 디자인·인터랙션 레퍼런스를 분석해 반응형 UI와 라이트·다크 테마 구현

playwright-spec-for-AI-Agent

•
사내 QA 프로세스에서 사용한 접근을 공개 가능한 범용 도구로 일반화 — Playwright spec 주석을 AI Agent가 이해할 수 있는 QA 시나리오로 변환하고, 에이전트가 스테이징 환경을 직접 검증

Simmey (Web Service)

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

Education

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

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