bblog
Edit mode

Chungheon Lee

AI-Native Frontend Engineer

I simplify complex problems and build code that teammates can change with confidence.

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

Summary

•
Frontend engineer (4 yrs) — owned product development end to end across an AI SaaS and product platforms: user-facing screens, design systems, payments, performance, test automation
•
Simplify complex structures with shared components and clear state models
•
Extended AI coding tools into a QA agent, Design System MCP, and spec-based validation to cut repetitive work and improve output quality

Core Competencies

User-Centered UI Design · Design System · Next.js / TypeScript · Performance & Accessibility · AI-assisted Development · Test / QA Automation

Skills

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

Work Experience

2026.02 — Present

Frontend Web Developer

Korea Deep Learning Inc. · Full-time

At a Series A KRW 12B AI OCR/VLM startup, I owned the frontend architecture, payments, performance, and quality automation of a Next.js-based AI SaaS.

Product interface & architecture

•
Designed and built a recursive tree-based Server-Driven UI so users could explore and edit unstructured N-depth OCR results in a consistent screen structure
◦
Co-defined the node-schema contract with the backend and applied Zod runtime validation plus a fallback renderer for unsupported nodes, so a single schema error could not cascade into a full-screen failure
◦
→ Open-source template: https://github.com/lodado/sdui-template
•
Normalized OCR data by ID and designed a per-node subscription structure with useSyncExternalStore
◦
Re-rendered only the changed nodes rather than the whole document, keeping edits predictable even for large documents

Performance optimization

•
Initial JavaScript bundle 2.2 MB → 700 KB (−68%) · font resources −70%
◦
Moved the initial screen from CSR to SSR and parallelized independent data requests
◦
Applied code splitting, vendor-chunk separation for long-term caching, and Korean web-font subsetting
◦
→ LCP 2.6s → 1.0s · Lighthouse Performance 77 → 93

Global payments & subscription-state UI

•
Integrated global payments with Paddle.js and designed access control around backend subscription state (State Pattern)
◦
Kept users informed during the webhook-lag window right after checkout with a Confirming payment UI and polling-based state sync
◦
Split roles so the server made the final authorization decision and the client only rendered state

Quality automation

•
Built 400+ E2E and 400+ unit tests from user scenarios and boundary-value analysis (BVA)
◦
Turned real user flows into verifiable scenarios, so a broken core feature surfaces quickly on change

AI-driven development workflow

•
Developed a QA tool that lets an AI agent execute and adjudicate Playwright test specs, and adopted it into the internal testing process
◦
Standardized outcomes as pass / fail / manual_review / skip, with a conservative policy that escalates low-evidence cases to a human
◦
Rather than trusting automation blindly, routed cases to manual review to reduce AI non-determinism and false-pass risk
•
Built a Design System MCP that supplies design-system components and usage rules to AI agents
◦
Connected component APIs and usage rules to the AI development workflow, guiding generated code toward internal conventions and the design system

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

2022.10 — 2026.01

3 yrs 4 mos

Seongnam · On-site

Frontend Web Developer

Tmax Data · Full-time

Designed and built the frontend architecture of an in-house design system used across product teams and a DB monitoring platform. Starting with legacy improvements and product features, I led the design-system architecture and release infrastructure from my third year at the company.

In-house design system (proposed & led, 0 → 1)

•
Proposed the design system on the evidence of per-product UI fragmentation and duplicate build cost, then led everything from architecture to component development and release setup
•
Agreed a semantic-token system with 3–6 designers and shipped packages to 2–4 product teams — a shared base that let multiple products follow the same UI rules and cut duplicate implementation
•
Designed an ESM monorepo and package-versioning setup with Turborepo, Changesets, and Rollup, so changes could ship safely
•
Provided jscodeshift-based codemods and migration guides for breaking changes, helping product teams reduce their migration burden
•
Applied a Radix UI-based Compound Component Pattern for WAI-ARIA compliance and maintainability, building an accessible and extensible component API
•
Designed a shared high-volume Table component with virtualized rendering
•
Built Storybook documentation and a Jest · React Testing Library test suite, and automated the release pipeline on GitLab Runner

SysMasterDB 8 frontend

Owned frontend development and structural improvements of a Grafana-like DB monitoring platform.

•
Redesigned the folder structure and module boundaries with Feature-Sliced Design to separate per-feature responsibilities and clarify dependency direction
•
Migrated legacy JavaScript to TypeScript and the in-house design system for type safety and UI consistency
•
Designed and built a drag-and-drop Server-Driven UI dashboard — users compose widgets and layout themselves, and the configuration is managed as server data

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

Side Projects & Open Source

Sdui-document — Notion-style Block Editor

github.com/lodado/sdui-template · This résumé is authored, rendered, and exported to PDF with this editor

•
Designed the hierarchical JSON document model and edit state directly, using ProseMirror only for inline editing of the focused block, so the editor as a whole does not depend on one library
•
Implemented immutable patch, traversal, and normalization plus inverse-patch two-stack undo/redo in a framework-agnostic core
•
Re-rendered only changed blocks via useSyncExternalStore and an ID-keyed listener map, committing edit state only on blur/unmount to minimize unnecessary updates
•
Declared priority with CSS cascade layers to swap themes without specificity conflicts — this résumé's Swiss theme is implemented in CSS alone

bblog — Personal Knowledge-Growth Tech Blog

•
Built a knowledge pipeline that logs AI-agent work context, refines it into TIL notes, knowledge documents, and blog posts, and generates a relationship graph across documents
•
Used AI agents to analyze design and interaction references, implementing a responsive UI with light and dark themes

playwright-spec-for-AI-Agent

•
Generalized the approach used in the internal QA process into a public, reusable tool — turns Playwright spec comments into QA scenarios an AI agent can understand, and the agent validates the staging environment directly

Simmey (Web Service)

•
Built and ran a personal web service; with no ads and organic SEO traffic it reached 900 MAU in Aug 2025 with 95%+ overseas users

Education

2021 Completed Naver Boostcamp (Challenge & Membership), 6th cohort

2022.02 B.S. in Software Engineering, Chonnam National University (major GPA 4.09/4.5, overall 3.96/4.5)