bblog
閲覧モード

イ・チュンホン

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

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

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億ウォン を調達し、今年上半期の売上が前年比3倍の 30億ウォン に成長したAI OCR/VLMスタートアップにて、Next.jsベースのAI SaaSのフロントエンドアーキテクチャ、決済、パフォーマンス、品質自動化を担当しています。

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

文書の種類ごとにOCR結果の構造が異なり、画面をあらかじめ固定できない状況でした。

•
バックエンドとノードスキーマ契約を先に定義し、再帰ツリーベースのServer-Driven UIで解決
◦
スキーマは信頼できない外部入力。Zodのランタイム検証と未対応ノードのfallbackレンダラーを適用し、ノード1つの不整合が画面全体の障害へ波及しないよう分離
◦
→ テンプレート OSS: https://github.com/lodado/sdui-template
•
グローバルストアの購読では全体再レンダリングを防げないため、N階層の階層型ドキュメントをIDで正規化し、useSyncExternalStore によるノード単位の購読構造で設計。大規模文書を編集しても変更されたノードだけが再レンダリングされます

パフォーマンス最適化

•
Lighthouseのトレースとバンドル解析でボトルネックを初期CSRレンダリング・vendorバンドル・Webフォントに絞り込み、順に解消。初期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で設計
◦
Webhook反映の遅れは失敗ではなく待機状態。決済確認中 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万行を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

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

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）