bblog
閲覧モード

イ・チュンホン

プロダクトエンジニア

ユーザーが最初に出会うホームページから、登録・決済・プロダクト画面まで、プロダクトが使われる全過程を、チームと一緒に考えながら作ります。

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

Summary

•
5年目のフロントエンドエンジニアとして、会社のホームページにSEO/GEOを適用して1日の訪問者数を前年比44%増やし、Next.jsベースのグローバルAI SaaS・B2Bプロダクトをリードしています。デザインシステムを0 → 1で提案・構築した経験があり、アーキテクチャ設計から決済、テスト・QA自動化まで、プロダクトが完成する全工程を担当しています。
•
バンドル2.2MB → 700KB、LCP 2.6s → 1.0s、Lighthouse Performance 77 → 93点までパフォーマンスを改善しました。指標と要件を定義した上で、ユーザーフローに基づくテストコードを先に書いてから（TDD）実装する進め方を好みます。
•
AIと働くときも、曖昧な自然言語の要件を形式論理・オートマトンでモデル化し、境界値分析とプロパティベーステスト（fast-check）で検証するハーネス（frontend-oracle-design）を自作しました。
•
Reactの仕組みを深く掘り下げ、Notion型エディタとServer-Driven UIをオープンソースとして設計しました — 今ご覧のこの履歴書は、そのエディタでレンダリングされています。

Skills

Next.js · React · TypeScript · Google Analytics · PostHog · Paddle.js · Playwright · Vitest · Storybook · Zustand · TanStack Query · GitHub Actions · Turborepo · Vercel · Sentry

Work Experience

2026.02 — 現在

ソウル · 対面勤務

Frontend Web Developer

Korea Deep Learning Inc. · 正社員

シリーズA 120億ウォン を調達し、今年上半期の売上 30億ウォン（前年比約3.4倍）を記録したAI OCR/VLMスタートアップにて、会社ホームページとSaaS/B2Bプロダクトのフロントエンドを担当しています。

ホームページのFramer移行とSEO/GEO改善

Framerで作られた既存のホームページには、多言語対応と保守に課題がありました。

•
ホームページをFramerから自社開発のサイトへ移行しました。canonicalタグ、JSON-LD（構造化データ）、韓・英・日の多言語構造を改善し、検索エンジンやChatGPTのようなAI検索（GEO）で見つかるようにしました
•
→ 1日の訪問者数 前年比 44% 増加、検索経由のリード問い合わせ（主要コンバージョン目標）の 27% はAI（GEO）流入

非開発者とのバイブコーディング協業

•
企画・デザイン担当者がAIで直接コードを修正する協業プロセスを構築。リント・自動テスト・ハーネス・レビューを通過したものだけが反映
•
SlackスレッドやJiraでタグ付けされた依頼をLLMで要約し、それぞれ適切なrepositoryに依頼事項・原因・改善プランとして整理・実装するハーネスオーケストレーションツールを開発
◦
承認すると、Orca worktreeで実装・Visual QA・PRまで自動でつながるよう連携
•
Playwrightのテスト仕様をAI Agentが実行・判定するQAツールを開発し、社内に導入

パフォーマンス最適化

•
初期画面のSSR移行、データリクエストの並列化、コード分割・vendor chunk分離、Pretendardサブセットの適用
•
→ 計測結果: 初期表示（LCP） 2.6s → 1.0s、初期JavaScript 2.2MB → 700KB、Lighthouse Performance 77 → 93点

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

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

•
サーバーが送る構成どおりに画面を描く方式（Server-Driven UI）を選び、文書構造が違っても同じコードで画面を描画。処理できないデータが来た場合は、その部分だけfallbackで表示
◦
→ オープンソース: https://github.com/lodado/sdui-template
•
ユーザー・料金プラン・権限ごとに表示する機能が異なるため、マルチテナント構造を構築。画面ごとに条件分岐を入れず、Server-Driven UIで管理するため、権限が変わってもJSONを直すだけで済みます。アクセス許可の最終判断はサーバーが担います
•
大きな文書を編集する際、変更されたブロックだけを再描画し、再帰ツリーデータの再レンダリング性能を最適化

グローバル決済

•
Paddle.jsでグローバル決済を連携。最終的な権限判断はサーバー、クライアントは状態表現のみを担う分担にし、サブスクリプション状態のアクセス制御をState Patternで設計
•
Webhook反映の遅れは失敗ではなく待機状態。決済確認中 UIとポーリング同期で現在の状態をユーザーに提示
•
決済・ドキュメント編集などの中核フローに、境界値分析ベースのE2Eテスト 400+、ユニットテスト 400+ を作成してからリファクタリング。大規模な構造変更を1〜2日で完了

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ルールを共有できる共通基盤を提供
•
複数のプロダクトチームが同時に利用するパッケージでリリース事故の波及が大きいため、変更を段階的にリリースし、Breaking Changeのコストをプロダクトチームに押し付けないよう、codemodと移行ガイドを併せて提供
•
アクセシビリティ（WAI-ARIA）の実装負担が大きい領域は自作せずRadix UIへ委譲し、Storybookドキュメントとテスト・リリースの自動化を併せて構築
•
大容量の照会画面が実利用上のボトルネックだったため、仮想化レンダリングによる共通headless Tableライブラリを設計。50万行を3.8秒以内に描画し、同一データのベンチマークでTUI Gridなどのオープンソースグリッドと同等の性能を保ちながら、デザインシステムのトークンとコンポーネントAPIに沿った実装を提供

SysMasterDB 8 フロントエンド開発

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

→ 動作画面の例: SysMaster DB 8 (Notion)

•
機能が増えて崩れたモジュール境界をFeature-Sliced Designで再設計し、依存方向を明確化
•
JavaScriptのレガシーをTypeScriptと社内デザインシステムへ移行し、型安全性とUIの一貫性を確保
•
ユーザーごとに見る指標が異なり画面を固定できないため、ドラッグ＆ドロップベースのServer-Driven UIダッシュボードを設計。レイアウト構成はサーバーデータで管理

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

サイドプロジェクト

shareds — AIコーディングエージェント向けハーネス

•
AIが曖昧な方針を勝手に決め、「テスト通過」だけを報告する事態を防ぐため、決済・権限のように間違えると損害の大きい動作は、要件を人が承認してファイルに固定した上で、失敗するテスト・実装・独立レビューの順を守らせるClaude Code・Codexスキルを作りました（frontend-oracle-design）
•
曖昧な自然言語の要件を数学的モデル（形式論理・オートマトン）に置き換え、抜けているケースがないかを先に確かめます。その後、境界値を中心にテストを作り、多数の入力を自動生成して実行するテスト（プロパティベーステスト、fast-check）で、実際のコードがモデルどおりに動くことを確認します
•
作業ごとに計画・実装・検証・最終レビューの役割へ分け、前回のミスから先に直させるharness-teamと、リントプリセットも併せて作りました

Simmey (Web Service)

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

コッコの怒り（3D Webゲーム）

•
Three.jsでブラウザからすぐ遊べる3Dサバイバルゲームを自ら開発・運営しました。ゲームルールはECS（Miniplex）に分離し、システムの実行順序を一か所で決めているため、同じシードと入力なら常に同じ結果になります
•
画面（Three.js）は状態を読んで描画するだけで、ルールはECSが担います。人が承認した不変条件を形式モデルにした上で、実際のゲームロジックがモデルと同じ結果を出すかをテストで比較します

Education

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

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