Hyunjun Kim

MECHOOSE

企画者がAIに指示して1人で構築:タイ向けファッションコマース+AIバーチャル試着、mechoose.store で稼働中

稼働中アイデア→リリースWeb公開まで約1週間 · App Storeまで約6週間

2026.02 – 2026.07(稼働中) / 1人(AIをチームとして活用) / Web · iOS · Android

課題
タイの消費者には、服を選び、バーチャル試着し、注文するまでを1か所で手軽に行う手段がなかった。
担当
企画 · 基準設定 · AIへの開発指示 · デプロイ
使用技術
React 18 · TypeScript · Supabase (Postgres · Auth · Edge Functions) · Capacitor · Vercel

成果

アイデア → Webサービス公開
約1週間
アイデア → Webサービス公開
アイデア → App Store 審査通過(Google Play でも公開)
約6週間
アイデア → App Store 審査通過(Google Play でも公開)
バックエンドAPIルート(エッジ関数)
137
バックエンドAPIルート(エッジ関数)
MECHOOSE
自分のコミット(全241件中、残りは Figma の自動同期)
100+
自分のコミット(全241件中、残りは Figma の自動同期)

⚡ アイデア→リリース

Web公開まで約1週間 · App Storeまで約6週間

  1. 2026-02-03

    最初の指示 · 最初の動作ビルド

  2. +6 days

    2026-02-09

    Web公開(mechoose.store)

  3. +36 days

    2026-03-17

    App Store 審査通過

  4. +120 days

    2026-07-15

    最新コミット

アイデア → Webサービス公開まで約1週間、App Store 審査通過・リリースまで約6週間(2026-03-17)。Google Play でも公開。git コミットベースで実作業 約33日

01

アイデア・課題

最初の指示:「コーディングの知識がないので Figma Make の AI と GPT でコマースアプリを作っているんですが、マイページでエラーが続いて行き詰まっています。手伝ってもらえますか?」 原文(韓国語):「기술이 없어서 Figma Make랑 GPT로 커머스를 만들고 있는데, 마이페이지에서 에러가 자꾸 나 막혀요 — 도와줄래요?」

タイの消費者向けに、服を選び、バーチャル試着して、そのまま注文できるファッションショッピングサービスを作りたいと考えました。コマースの基本機能(カタログ、決済、注文、管理)に加えて、AIバーチャル試着とスタイリスト相談を1か所で提供することを目標にしました。

02

企画と基準

  • サービス範囲と画面フロー(カタログ、注文、決済、管理)を自分で企画
  • 運用の基準:配送に必要な情報(電話番号、住所、LINE ID)が欠けている場合、決済時にブロックするのではなくアプリ起動時に入力してもらう
  • 1人で運用するスピードを最優先に、AIと技術スタックを選定:1つのWebコードベースを Capacitor でiOS/Androidアプリ化し、APIはサーバーレスの Supabase Edge Functions に集約
MECHOOSE — mechoose 02 desktop
MECHOOSE — mechoose 05 desktop
MECHOOSE — mechoose 05 mobile

03

AIへの指示プロセス

Fig. mechoose-direction

AIへの指示プロセス

  1. 01 最初の指示

    カタログ・カート・マイページの画面と、エッジ関数上のAPIを作らせる。

  2. 02 確認したこと

    本番サイトで実際に注文し、決済が止まる箇所や、住所入力で誤字・入力漏れが起きる箇所を見つけました。

  3. 03 修正

    ユーザーの困りごとを機能の指示に置き換えました —「止まった決済を再開できるように」「住所を自動補完して、郵便番号も自動入力されるように」。

実際の指示(抜粋)

  • 全体を上書きしないで、変更点だけをパッチして。Original전체를 덮어쓰지 말고 바뀐 부분만 패치해줘.
  • 変更前に副作用を説明して、私が承認してから修正して。Original바꾸기 전에 부작용을 먼저 설명하고, 승인받은 뒤에 고쳐.

Fig. mechoose-03

課題を言葉で指示し、機能に変える

Before

  • 決済が中断された注文がそのまま放置
  • ユーザーがどこで止まったか分からない

私の指示(抜粋)

決済が中断された注文を、続きから決済できるようにして

Original결제가 끊긴 주문을 다시 이어서 결제하게 해 줘

After

  • ✓ 「決済待ち」バナー+マイページで強調表示
  • ✓ 中断した箇所から再決済できるフロー

04

つまずいた点と解決方法

  • 未決済のまま放置される注文:中断された決済がそのまま放置されていました。「決済待ち」の状態をバナーとマイページで表示し、中断した箇所から再開できる再入場フローを追加するようAIに指示し、離脱を減らしました。
  • 住所入力のミス:手入力の住所に誤字が多発していました。郵便番号を自動入力する住所補完を追加し、配送失敗の原因を減らしました。
MECHOOSE — mechoose 07 mobile order detail pending
MECHOOSE — mechoose 07 mobile orders pending
顧客向け画面(タイ語):決済待ちの注文を強調し、決済に戻る導線を用意

Case 01

決済が中断された注文がそのまま放置され、購入につながらなかった。

  1. 症状

    決済が中断された注文がそのまま放置され、購入につながらなかった。

  2. AIへの説明

    止まった決済をユーザーが再開できるようにしたい」とフローとして説明。Original결제가 끊긴 주문을 사용자가 다시 이어서 결제하게 하고 싶다"고 플로우로 전달.
  3. AIの最初の試み

    単純なステータス表示だけでは、ユーザーはどこで止まったか分からなかった。

  4. 自分が気づいた点

    決済待ち」の状態をバナーとマイページで目立たせ、止まった箇所から再開させる必要があった。

  5. 解決

    再入場フローを追加し、離脱を削減。

  6. 再発防止

    中断されうるフローでは、「中断—再開」の状態を最初から設計に組み込む。

05

成果

  • mechoose.store ドメインで稼働中
  • 実開発 約8週間(自分のコミット100件。全241件中、残りは Figma の自動同期ボット)
  • フロントエンドのソースコード 約38,600行、エッジ関数は137ルート(単一関数)
  • 稼働中の機能:未決済注文の再入場フロー、住所の自動補完、AIバーチャル試着
MECHOOSE — mechoose 04 alt mobile tryon hero
MECHOOSE — mechoose 06 desktop orders
MECHOOSE — mechoose 06 desktop products
MECHOOSE — mechoose 06 desktop reviews
MECHOOSE — mechoose 06 desktop stylist
MECHOOSE — mechoose 06 desktop users
管理画面 — ポートフォリオ用にUIの文言を英語に翻訳

Fig. mechoose-08

1つのWebコードベースで Web・iOS・Android、サーバーレスのバックエンド

フロントエンドReact · Vite · TypeScriptWebコードベース1つ
WebVercelmechoose.store
アプリ化CapacitoriOS · Android
バックエンドEdge API(サーバーレス関数)137ルート · 注文・決済・管理
DataDB · ストレージ
AIAIバーチャル試着(外部API)
AIと設計した、1人で運用できる構成。サーバー管理なしで、APIを1つのエッジ関数に集約しました。

06

振り返り

音声で指示すると機能は速く追加できましたが、初期の画面構造が1ファイルに詰め込まれ、変更しにくくなりました。次は、画面と状態管理を役割ごとに小さく分ける基準を最初に決めます。

その他の画面 · 3枚

MECHOOSE — 商品詳細
商品詳細
MECHOOSE — カート
カート
MECHOOSE — 決済 — PromptPay
決済 — PromptPay

UI shown in English for portfolio; product data is the live Thai catalog (seller photos blurred).

(01) Review

Honest Review

開発者が作っていたら?

強み3
  • 機能範囲 — 本格的なコマースサービスとして稼働中

    ショップ、カート、お気に入り、実際のカード決済と返金、クレーム・返品、在庫、レビュー、スタイリストアプリ、管理画面、4種類のソーシャルログイン、プッシュ通知とLINE通知 — Web・App Store・Google Play で稼働中。

  • パフォーマンス — メインバンドル 1.6MB → 454KB

    ベンダーコードを5つのチャンクに分割、管理画面アプリは必要時のみ読み込み(664KBを分離)、5分間のデータキャッシュ、画像の遅延読み込み。

  • スピードとコスト — Web公開まで約1週間、App Storeまで約6週間

    実開発 約8週間、約51K行、自分のコミット100件。

同等4
  • セキュリティの基本 — 小規模チームと同等

    すべての管理用ルートで管理者チェック、決済金額をサーバーで再確認、オリジンの許可リスト、レート制限、セキュリティヘッダー、サーバーキーはアプリに含めない。

  • リリースと運用 — 1つのコードベースでWebと2つのアプリストアに展開

    WebはVercel、iOS/AndroidはCapacitor。ディープリンク、PWA、参照ID付きのエラー画面。

  • 多言語対応 — タイ語優先の単一市場

    翻訳キー245個。ハードコードされたテキストが一部残っています。

  • ドキュメント — アーキテクチャと意思決定を記録

    ドキュメント内の一部の数値がコードとずれていました。

次のステップ(改善中)4
  • テストと自動化 — テスト・CI・lint・型チェックは未導入

    リリースのたびに、実際の購入フローを手動で確認しました。

    改善計画 → まず決済・注文ロジックに10〜20件のユニットテスト、その後コミットごとのビルド+型チェック+テスト。

  • アーキテクチャ — バックエンドが単一のキーバリューストア上の6,299行の1ファイルに肥大化

    137のAPIルートが1ファイルにあり、データも1つの汎用ストアにあるため、データベースでリレーションを保証できません。

    改善計画 → ドメイン単位(注文 → 決済 → 管理)で分割し、注文と決済はマイグレーション付きの正式なテーブルへ移行。

  • コードの一貫性 — 緩い型付けと残存する複製ファイル

    型なし(`any`)が940箇所。高速な反復のため、サーバーコードの複製3つとバックアップファイルが残っています。

    改善計画 → 厳格な型チェックをリリース条件にし、決済から `any` を除去。古い複製を削除。

  • 履歴と監視 — 追跡しにくいコミット履歴、アラートなし

    241件のコミット中141件がデザインツールの自動同期。エラーにはIDが付きますが、自動で通知される仕組みはありません。

    改善計画 → 明確なメッセージの機能コミットをデザイン同期と分離。デプロイ手順にエラートラッキングと定期バックアップを追加。

次のプロジェクト →

Momento

AIに指示して同じアプリをiOSとAndroidの両方でネイティブ開発 — カップルの思い出を自動でまとめるアプリ

ケーススタディを見る
履歴書 PDF(英語)