ビジネス価値を生み出し、チームの負担を減らす開発者
自己紹介
こんにちは。フロントエンドを中心に、プロダクトと運用に必要な機能を開発してきたイ・サンミンです。
コマース・モバイルWebView・保険・医療／臨床分析プロダクトを手がけ、アプリ配布に縛られていたイベント領域を独立したWebViewプロダクトとして提案し、開発者が実行していたコンテンツ業務を運用者向けツールへ移しました。
最近は医療・臨床分析プロダクトを開発し、画面のレスポンシブ対応・アクセシビリティ・性能だけでなく、デプロイ、ログ保存、リクエスト追跡まで、プロダクトに必要な作業を直接担当しています。
AI開発支援ツールはコード生成だけに使っているわけではありません。プロジェクト別の指示・Skill・Hook・PR検証基準を設けました。技術そのものより、その選択がユーザーとチームの次の作業をどう変えるかを重視しています。
コマース・モバイルWebView・保険・医療／臨床分析プロダクトを手がけ、アプリ配布に縛られていたイベント領域を独立したWebViewプロダクトとして提案し、開発者が実行していたコンテンツ業務を運用者向けツールへ移しました。
最近は医療・臨床分析プロダクトを開発し、画面のレスポンシブ対応・アクセシビリティ・性能だけでなく、デプロイ、ログ保存、リクエスト追跡まで、プロダクトに必要な作業を直接担当しています。
AI開発支援ツールはコード生成だけに使っているわけではありません。プロジェクト別の指示・Skill・Hook・PR検証基準を設けました。技術そのものより、その選択がユーザーとチームの次の作業をどう変えるかを重視しています。
オプリメド
2026.02 - 在職中 · サービス開発者医療・臨床分析プロダクト
医療・臨床分析画面の開発医療・臨床分析プロダクトの画面開発、アクセシビリティ・性能改善、AI開発環境、CI/CD、バックエンドのログ関連作業を担当しています。
- 長い分析プロセスで入力と結果が途切れないよう、条件設定、ジョブ実行、結果・レポート画面を開発しました。企画になかった画面サイズ別のレスポンシブ基準とエラー・再入場時の動作は、企画・デザイン・バックエンド担当者と協議して反映しました。
- 主要画面をキーボードでも利用できるよう、既存プロダクトになかったアクセシビリティ基準を追加し、Playwrightでログイン・サービス選択・セッション切れ画面を確認しました。
- 画像リクエストとUI修正コストを減らすため、画像ベースのUIを共通コンポーネントへ置き換えました。静的画像はビルド時に画面サイズ別WebPへ変換し、変更分だけを再生成・検証して、変換候補の計算上の転送量を約95%削減しました。別途行ったLighthouse比較では、LCPが1.3秒から1.0秒、Speed Indexが3.4秒から0.7秒へ短縮しました。
- 分析結果をチャートで表示し、反復照会を減らすためにECharts・Plotlyチャートを開発し、疾患一覧はTanStack Queryキャッシュへ移行して画面ごとの直接呼び出しをなくしました。
AI開発ツールの活用
- 医療・臨床の文脈を誤って解釈しないよう、プロジェクト別の指示、作業別Skill、実行Hook、PRルールをリポジトリに置き、CodexとClaudeが参照するAI workflowを作成しました。
- AIが作成した変更を人が確認し、チームで同じ基準を使えるよう、diffをレビューしてtypecheck・test・build結果を確認しました。チームメンバーも同じ指示とHookを修正して使えるようにしました。
インフラとバックエンド
技術スタック
Next.js
React
TypeScript
Tailwind CSS
Radix UI
TanStack Query
Zustand
React Hook Form
ECharts
Plotly
Vitest
Playwright
axe-core
GitHub Actions
Husky
Docker
Python
Django
Django REST Framework
PostgreSQL
Codex
Claude
MCP
- プロジェクトごとに異なっていた実行環境をそろえるため、Vite・React RouterベースのPortalをNext.jsへ移し、パッケージバージョン・Dockerランタイム・デプロイ方式を他のフロントエンドプロジェクトと統一しました。
- 手動デプロイと変更漏れによるミスを減らすため、DockerデプロイをGitHub Actionsへ移し、Huskyでtypecheck・test・buildを実行しました。主要画面はPlaywrightシナリオで別途確認しました。
- 業務データとログを分離し、エラーリクエストを探しやすくするため、3つのバックエンドにログDBを追加して環境・サービス・リクエストID基準で保存しました。Adminにはログ照会APIとフロントエンドエラー報告APIを追加しました。
- GitHub Actionsで実際のサーバー状態を確認できるよう、ヘルスチェックを追加しました。バックエンドのHTTP応答とコンテナ状態を確認し、異常時にはActions Summaryとログを残すようにしました。
株式会社コードクレヨン
2023.05 - 2025.07（2年3か月） · フロントエンド開発コマース・バックオフィス
コマース・バックオフィス初期メンバーとして、コマース・バックオフィス、モバイルWebView・Webゲーム、コンテンツ運用ツールを開発しました。
- 国内外のユーザーが自分に合った言語と決済手段を使えるよう、商品探索から注文・決済・マイページまでを開発し、韓国語・日本語・英語・中国語の画面に対応しました。
- モバイル顧客とデスクトップ利用の販売者、それぞれの使い方に合わせ、顧客画面はモバイル中心UIへ変更して作業速度を上げ、販売者ダッシュボードはデスクトップレイアウトを維持しました。
- 既存担当者がアプリ開発へ移った後も運用機能を継続開発できるよう、Flutter WebバックオフィスをNext.jsへ移行し、商品・注文・精算・イベント・問い合わせ管理機能を移しました。
WebView・Webゲーム
WebView・Webゲーム
- アプリ配布を待たずにイベントやゲームを追加できるよう、WebView領域を提案してプロトタイプで実演しました。採用後はフロントエンドプロジェクトを開発・運用しました。
- 反復訪問につながるコンテンツとしてPhaserベースのFlying Popを開発しました。その後、貯めたボーナスを使う後続ゲームが必要となり、Open Sesameのフロントエンドも担当し、ランキング・結果送信と2つのゲームのボーナス獲得・利用を接続しました。重複プレイを除いたDB基準の週間ユニーク利用者は約2,000〜3,000人でした。
- Webゲームをアプリ機能とサーバーへつなぐため、Flutter bridgeとゲームAPIをアプリ・バックエンド担当者と協業して連携しました。アプリの共有・画面遷移とゲーム結果送信を接続しました。
- 広告完了後の追加プレイを提供し、共有リンクからゲームへ入れるよう、Branch共有リンク・Airbridgeディープリンクを適用しました。WebViewで判明した結果送信中の重複進行とSafariの音声再生・画面離脱問題にも対応しました。
AI活用と運用ツール
AI活用と運用ツール
技術スタック
Next.js
React
TypeScript
MUI
Tailwind CSS
Jotai
SWR
React Hook Form
Toss Payments
PayPal
Phaser
Flutter InAppWebView
Branch.io
Airbridge
Node.js
Express
AWS Bedrock
OpenAI API
Google Cloud Translation
Axios
Cheerio
- 運用者が開発者なしで字幕を翻訳できるよう、AI字幕翻訳CLIを複数ファイル・多言語対応ツールへ変更し、バックオフィスに追加しました。在職中の約3か月間、運用担当者3〜4人が利用しました。
- 商品ブログの下書きをAIで作成できるか確認するため、Sellectors商品ブログ下書き生成プロトタイプを制作しました。
- 複数の動画プラットフォームを繰り返し検索する時間を減らすため、3プラットフォームの検索結果を1画面にまとめるツールを作りました。運用チームの確認時間を約50分から10分以内へ短縮し、違法性は運用者が最終判断するようにしました。
all of them Co., Ltd. · Japan
2021.07 - 2023.04（1年10か月） · フロントエンド開発者共通加入導線と性能改善
共通加入導線と性能改善顧客企業の流入から加入・運用までをつなぐ保険プロダクト
- 複数の顧客ページで1つの保険加入モーダルを再利用できるよう、共通CDN SDKでAPI keyと表示オプションを設定として受け取り、商品別画面アセットをplanIdベースのパスに分離しました。顧客情報の受け渡しから加入URLへの接続まで同じフローで処理しました。
- 日本の顧客から、加入時に白い画面とローダーが合わせて約5秒表示されるとの問い合わせがありました。加入前離脱につながり得る問題と判断し、すぐにフレームワークを変えるのではなく、既存React画面の初期取得をPromise.allでまとめ、顧客情報の取得を最初の画面へ前倒ししました。
- 追加の性能改善余地と移行コストの低さを基準に、担当加入フローを別のNext.jsコードベースへ移し、初期データの組み立てをSSRで処理しました。
- 韓国で移行版をLighthouseのデスクトップ標準設定で測定しLCP 1.2秒を確認しましたが、この数値だけで日本環境の改善を断定せず、現地メンバーへ再検証を依頼しました。顧客から実際の進入時間が約1.2〜1.5秒へ短縮したとの回答を得た後に配布しました。
加入・運用システム
加入・運用システム
技術スタック
React
Next.js
TypeScript
Redux
Context API
Java
Spring Boot
Doma2
MySQL
Redis
GraphQL
DynamoDB
S3
Sass
GitLab CI/CD
- 職業ベースの保険料算定から加入者情報・告知・カード決済・申込完了まで、1つの加入フローを担当しました。
- 別のがん・入院保険商品では、見積・プラン、契約者・被保険者・告知・決済、中断保存・復元を開発・補完し、復元時にはカード情報を初期化しました。
- 保険顧客の検索・詳細と取引・加入履歴をReact画面からSpringバックエンドまで開発し、管理者CSVファイルをS3へ保存するモジュールを作りました。
- 別の契約・代理店バックオフィスでは、支店・募集人、契約・決済・保険料請求書の照会とファイルアップロード画面を担当しました。
データロジックス
2020.08 - 2021.07（1年） · 運用・保守および開発領事コールセンター保守とSmart-DIS ETL開発
領事コールセンター保守とSmart-DIS ETL開発
技術スタック
Java
JavaScript
JSP
eGovFrame
MyBatis
MariaDB
Oracle
Linux
HTML
CSS
- 韓国外交部領事コールセンターの相談アプリケーションを運用・保守しました。アンケート用の一部JSP画面とDBバッチサーバー連携APIを開発し、機能改善・不具合修正と無料通話アプリのトラブルシューティングを担当しました。
- データ統合・ETLツールSmart-DISでデータ移行機能を開発し、OracleクエリをMariaDBでも動作させました。
- Linux専用機能をWindowsでも使えるようにし、オンライン接続が必要なライブラリをイントラネットでも動作する代替ライブラリへ置き換えた後、運用マニュアルを作成しました。
データロジックス
2017.08 - 2019.05（1年10か月） · インフラエンジニア公共機関インフラの構築と運用
公共機関インフラの構築と運用
技術スタック
Linux
Server
Network
L2/L3
Firewall
IPS
TMS
Backup
- 国務調整室の運用・保守で、世宗・ソウルのサーバー、L2・L3ネットワーク機器、ファイアウォール・IPS・TMSセキュリティ機器とバックアップを運用し、障害復旧・セキュリティ監査対応・国政監査準備を担当しました。
- 社会保障情報院高度化事業で、機器検収・マウント・設置テストを担当しました。
- 児童保護専門機関の構築・保守で、コールセンター移転のための機器撤去・再設置と新規機関の構築を担当しました。
社外活動
2020.03
ハイブリッドアプリ・Web開発者養成課程
- インフラ職から開発職へ転向するため、Java・SpringベースのWeb開発とREST API、Android・iOSアプリ開発の基礎を学びました。
