bblog
Read 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 with 4 years of experience, leading a Next.js-based global AI SaaS. I proposed and built a design system from 0 → 1, and I own product development end to end, from architecture and payments to test/QA automation.
•
I cut the bundle from 2.2 MB to 700 KB and LCP from 2.6s to 1.0s (Lighthouse Performance 77 → 93). Once requirements are defined, I prefer to write user-flow-based tests first (TDD) and build from there.
•
I dig deep into React internals and designed a Notion-style editor and Server-Driven UI, both open source — the resume you are reading is rendered by that editor.
•
I enjoy coding for its own sake. As a hobby I like imagining ideas across all sorts of subjects and making them real. You can see the projects I have built at 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 — Present

Seoul · On-site

Frontend Web Developer

Korea Deep Learning Inc. · Full-time

At a Series A KRW 12B AI OCR/VLM startup whose first-half revenue tripled from the previous year to KRW 3B, I own the frontend architecture, payments, performance, and quality automation of a Next.js-based AI SaaS.

Product interface & architecture

OCR output was shaped differently for every document type, so the screen could not be fixed up front.

•
Defined the node-schema contract with the backend first, then solved it with a recursive tree-based Server-Driven UI
◦
The schema is untrusted external input. Zod runtime validation and a fallback renderer for unsupported nodes keep one bad node from taking down the whole screen
◦
→ Open-source template: https://github.com/lodado/sdui-template
•
A global-store subscription could not stop whole-document re-renders, so I normalized the N-depth hierarchical document by ID and built per-node subscriptions on useSyncExternalStore. Editing a large document re-renders only the nodes that changed

Performance optimization

•
Lighthouse traces and bundle analysis narrowed the bottleneck to initial CSR rendering, the vendor bundle, and web fonts, and I removed them in that order. Initial JavaScript bundle 2.2 MB → 700 KB (−68%) · font resources −70%
◦
Moved the initial screen to SSR, parallelized data requests, applied code splitting, vendor-chunk separation, and Pretendard subsetting
◦
→ LCP 2.6s → 1.0s · Lighthouse Performance 77 → 93

Global payments & subscription-state UI

•
Integrated global payments with Paddle.js. The server makes the final authorization decision and the client only renders state, with subscription-state access control designed as a State Pattern
◦
Webhook lag is a waiting state, not a failure. A Confirming payment UI with polling-based sync shows users where they stand

Quality automation

•
Concentrated testing on the flows that cost the most when they break, payments and document editing. 400+ E2E and 400+ unit tests from user scenarios and boundary-value analysis (BVA) catch regressions before they ship
•
GitHub Actions CI gates every merge on type checks, lint, and unit/E2E tests. Browser support baseline set at ES2019, with Selenium cross-browser tests catching legacy-only regressions

Large refactors such as adopting SDUI start only once tests are in place as a safety net, and harness engineering brought them in within one to two days.

AI-driven development workflow

•
Built 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. Low-evidence cases default to human review rather than a pass, which blocks false passes
•
Built a Design System MCP that supplies component APIs and usage rules to AI agents, so generated code stays inside internal conventions

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
•
Since several product teams consumed the package at once, a bad release would ripple widely — so I designed an ESM monorepo and versioning setup with Turborepo, Changesets, and Rollup to ship changes incrementally
•
Decided not to push the cost of breaking changes onto product teams, and shipped jscodeshift-based codemods alongside migration guides
•
Delegated the areas where accessibility (WAI-ARIA) is expensive to hand-roll to Radix UI instead of building them, and designed an extensible component API with the Compound Component Pattern
•
Identified large result screens as the real usage bottleneck and designed a shared headless Table library with virtualized rendering. Renders 500K rows in 3.8s, on par with open-source grids such as TUI Grid (benchmarked on the same dataset) while following the design system's own tokens and component API
•
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.

→ Screenshots of the running product: SysMaster DB 8 (Notion)

•
Traced maintenance cost to module boundaries eroding as features accumulated, and redesigned the folder structure and dependency direction with Feature-Sliced Design
•
Migrated legacy JavaScript to TypeScript and the in-house design system for type safety and UI consistency
•
Migrated to a Turborepo · Vite monorepo as the business expanded the product line
•
Judged that the screen could not be fixed because every user needs different metrics, so I designed a drag-and-drop Server-Driven UI dashboard — layout is managed as server data and extends without code changes

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

Side Projects & Open Source

Sdui-document — Notion-style Block Editor

github.com/lodado/sdui-template · The résumé you are reading right now is authored, rendered, and exported to PDF with this editor

•
To keep the editor from becoming locked to one library, I designed the hierarchical JSON document model and edit state myself and used ProseMirror only for inline editing of the focused block
•
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)