bblog
편집 모드

이충헌

AI Native 프론트엔드 엔지니어

복잡한 문제를 단순한 구조로 풀고, 함께 일하는 사람이 안심하고 변경할 수 있는 코드를 만들고 싶습니다.

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

Summary

•
4년 차 프론트엔드 엔지니어로, 글로벌 AI SaaS의 프론트엔드 개발을 담당하며 아키텍처 설계부터 결제 시스템, 테스트·QA 자동화까지 제품 개발 전반을 주도하고 있습니다.
•
React의 렌더링과 상태 관리 원리를 깊이 탐구하며, Notion형 에디터와 Server-Driven UI를 직접 설계·구현하고 오픈소스로 공개했습니다.
•
명세와 검증 기준을 먼저 설계하고 AI를 구현 파트너로 활용합니다. QA Agent와 Design System MCP 등 반복 가능한 개발 도구를 구축해 실제 업무에 적용하고 있습니다.

Skills

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

Work Experience

2026.02 — 현재

Frontend Web Developer

Korea Deep Learning Inc. · 정규직

시리즈 A 120억 원 투자를 유치한 AI OCR/VLM 스타트업에서 Next.js 기반 AI SaaS의 아키텍처, 결제, 품질 자동화, 성능 최적화를 주도적으로 담당했습니다.

AI 기반 개발 워크플로 구축

•
Playwright 테스트 명세를 AI Agent가 실행·판정하는 오픈소스 QA 도구 개발 및 사내 테스트 프로세스 도입
◦
결과를 pass / fail / manual_review / skip으로 표준화하고, 판정 근거가 불충분한 케이스를 사람에게 에스컬레이션하는 보수적 판정 정책 설계
◦
반복적인 QA 검증을 자동화하면서 AI 판정의 비결정성과 오탐(false pass) 위험 최소화
•
디자인 시스템 컴포넌트와 사용 규칙을 AI Agent에 제공하는 Design System MCP 구축
◦
컴포넌트 API와 사용 규칙을 AI 개발 워크플로에 연결해 생성 코드의 사내 컨벤션 및 디자인 시스템 준수 유도

품질 자동화

•
사용자 시나리오와 BVA(경계값 분석) 기반으로 E2E 테스트 400+, 단위 테스트 400+ 구축

아키텍처 & 성능

•
비정형 N-depth OCR 결과를 재귀 트리 기반의 Server-Driven UI로 설계·구현
◦
백엔드와 노드 스키마 계약을 공동 정의하고, Zod 런타임 검증과 미지원 노드 fallback 렌더러를 적용해 스키마 변경으로 인한 렌더링 실패 격리
◦
→ 템플릿 오픈소스: https://github.com/lodado/sdui-template
•
OCR 데이터를 ID 기반으로 정규화하고 useSyncExternalStore 기반 노드별 구독 구조 설계
◦
문서 전체가 아닌 변경된 노드만 리렌더링해 대규모 문서 편집 시 렌더링 지연 최소화
•
초기 JavaScript 번들 2.2 MB → 700 KB (68% 감소) · 폰트 리소스 70% 감소
◦
초기 화면을 CSR에서 SSR로 전환하고, 독립적인 데이터 요청을 병렬 처리
◦
코드 스플리팅, vendor chunk 분리를 통한 장기 캐시 활용, 한글 웹폰트 서브셋 적용
◦
LCP 2.6s → 1.0s · Lighthouse Performance 77 → 93점

글로벌 결제

•
Paddle.js 글로벌 결제 연동 및 백엔드 구독 상태 기반 접근 제어 설계 (State Pattern)
◦
웹훅 지연 시 결제 확인 중 UI와 폴링으로 상태 동기화
◦
클라이언트는 UX만 제어하고 최종 권한은 서버에서 검증

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개 제품팀에 디자인 시스템 패키지 배포
•
Turborepo, Changesets, Rollup 기반 ESM 모노레포 및 패키지 버전 관리 구조 설계
•
Breaking Change 발생 시 jscodeshift 기반 codemod와 마이그레이션 가이드 제공
•
Storybook 문서화와 Jest·React Testing Library 테스트 체계를 구축하고, GitLab Runner 기반 배포 파이프라인 자동화
•
가상화 렌더링을 적용한 공통 대용량 Table 컴포넌트 설계
•
WAI-ARIA 준수와 컴포넌트 유지보수성을 고려해 Radix UI 기반 Compound Component Pattern을 적용하고, 확장 가능한 API 구현

SysMasterDB 8 프론트엔드 개발

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

•
JavaScript 레거시를 TypeScript와 사내 디자인 시스템으로 마이그레이션해 타입 안정성과 UI 일관성 확보
•
Feature-Sliced Design 기반으로 폴더 구조와 모듈 경계를 재설계해 기능별 책임을 분리하고 의존성 방향을 명확화
•
드래그 앤 드롭 기반 Server-Driven UI 대시보드 설계·구현 — 사용자별 위젯 구성과 레이아웃을 서버 데이터로 동적 관리

React · TypeScript · Storybook · Turborepo · 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

•
Playwright spec 주석을 AI가 이해할 수 있는 QA 시나리오로 변환하고, 에이전트가 스테이징 환경을 직접 검증

Simmey (Web Service)

•
광고 없이 SEO 유입을 기반으로 2025.08 MAU 900명 기록, 해외 사용자 비중 95% 이상

Education

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

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