bblog
編集モード

イ・チュンホン

AIネイティブ フロントエンドエンジニア

複雑な問題をシンプルな構造で解き、共に働く人が安心して変更できるコードを作りたいと考えています。

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

Summary

•
4年目のフロントエンドエンジニア — AI SaaS・プロダクト型プラットフォームで、ユーザー画面、デザインシステム、決済、パフォーマンス、テスト自動化まで担当
•
複雑な構造は共通コンポーネントと明確な状態モデルで単純化
•
AIコーディングツールをQA Agent・Design System MCP・仕様ベース検証へ拡張し、反復作業を削減して品質向上に活用

主要スキル

ユーザー中心のUI設計 · 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 — 現在

Frontend Web Developer

Korea Deep Learning Inc. · 正社員

シリーズA 120億ウォン を調達したAI OCR/VLMスタートアップにて、Next.jsベースのAI SaaSのフロントエンドアーキテクチャ、決済、パフォーマンス、品質自動化を担当しました。

プロダクトインターフェース & アーキテクチャ

•
非構造のN階層OCR結果を、ユーザーが探索・編集できる再帰ツリーベースのServer-Driven UIとして設計・実装し、複雑な認識結果を一貫した画面構造で提供
◦
バックエンドとノードスキーマ契約を共同定義し、Zodのランタイム検証と未対応ノードのfallbackレンダラーを適用して、一部のスキーマ不整合が画面全体の障害へ波及しないよう分離
◦
→ テンプレート OSS: https://github.com/lodado/sdui-template
•
OCRデータをIDベースで正規化し、useSyncExternalStore によるノード単位の購読構造を設計
◦
文書全体ではなく変更されたノードのみを再レンダリングし、大規模文書の編集でも変更箇所だけが更新される予測可能な編集構造を実現

パフォーマンス最適化

•
初期JavaScriptバンドル 2.2 MB → 700 KB（68%削減） ・ フォントリソース 70%削減
◦
初期画面をCSRからSSRへ移行し、独立したデータリクエストを並列化
◦
コード分割、vendor chunk分離による長期キャッシュ活用、韓国語Webフォントのサブセット化を適用
◦
→ LCP 2.6s → 1.0s ・ Lighthouse Performance 77 → 93点

グローバル決済とサブスクリプション状態UI

•
Paddle.jsによるグローバル決済連携と、バックエンドのサブスクリプション状態に基づくアクセス制御を設計（State Pattern）
◦
決済直後のWebhook反映が遅延する区間でも、ユーザーが現在の状態を理解できるよう 決済確認中 UIとポーリングベースの状態同期を実装
◦
最終的な権限判断はサーバーで行い、クライアントは状態表現のみを担当するよう役割を分離

品質自動化

•
ユーザーシナリオとBVA（境界値分析）に基づき、E2Eテスト 400+、ユニットテスト 400+ を構築
◦
実際のユーザーフローを検証可能なシナリオへ変換し、変更時にコア機能の破損を素早く確認

AI駆動の開発ワークフロー

•
Playwrightのテスト仕様をAI Agentが実行・判定するQAツールを開発し、社内テストプロセスへ導入
◦
判定結果を pass / fail / manual_review / skip に標準化し、根拠が不十分なケースは人へエスカレーションする保守的な判定ポリシーを設計
◦
自動化結果をそのまま信頼せず手動レビューへ回すことで、AI判定の非決定性とfalse passのリスクを低減
•
デザインシステムのコンポーネントと利用ルールをAI Agentへ提供するDesign System MCPを構築
◦
コンポーネントAPIと利用ルールをAI開発ワークフローへ接続し、生成コードが社内規約とデザインシステムに沿うよう誘導

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を実装
•
仮想化レンダリングを適用した共通の大容量Tableコンポーネントを設計
•
Storybookドキュメントと Jest・React Testing Library のテスト基盤を構築し、GitLab Runnerベースのリリースパイプラインを自動化

SysMasterDB 8 フロントエンド開発

Grafanaに類似したDBモニタリングプラットフォームのフロントエンド開発と構造改善を担当しました。

•
Feature-Sliced Designに基づきフォルダ構造とモジュール境界を再設計し、機能ごとの責務を分離して依存方向を明確化
•
JavaScriptのレガシーをTypeScriptと社内デザインシステムへ移行し、型安全性とUIの一貫性を確保
•
ドラッグ＆ドロップベースのServer-Driven UIダッシュボードを設計・実装 — ユーザーがウィジェットとレイアウトを自ら構成し、構成情報はサーバーデータで管理

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

サイドプロジェクト・オープンソース

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)

•
個人のWebサービスを自ら開発・運営し、広告なしでSEO流入を基盤に 2025年8月にMAU 900名 ・ 海外ユーザー比率 95%以上 を記録

Education

2021 ネイバー ブートキャンプ チャレンジ・メンバーシップ課程 6期 修了

2022.02 全南大学校 ソフトウェア専攻 卒業（専攻 4.09/4.5、総合 3.96/4.5）