Hyunjun Kim
← 전체 작업

Case 02 / 09

MECHOOSE

기획자가 AI를 지휘해 혼자 만든 태국 패션 이커머스 + AI 가상 피팅 — 실제 운영 중 (mechoose.store)

운영 중아이디어→출시웹 운영 약 1주 · 앱스토어 약 6주

2026.02 – 2026.07 (운영 중) / 1인 (AI를 팀으로) / Web · iOS · Android

문제
태국 소비자가 옷을 고르고, 가상으로 입어 보고, 바로 주문하는 곳이 없었다.
내 역할
기획 · 기준 설정 · AI 지휘로 구현 · 배포
스택
React 18 · TypeScript · Supabase (Postgres · Auth · Edge Functions) · Capacitor · Vercel

결과

아이디어 → 웹 서비스 운영
약 1주
아이디어 → 웹 서비스 운영
아이디어 → 앱스토어 승인 (구글플레이도 출시)
약 6주
아이디어 → 앱스토어 승인 (구글플레이도 출시)
백엔드 API 라우트 (엣지 함수)
137
백엔드 API 라우트 (엣지 함수)
MECHOOSE
본인 커밋 (전체 241, 일부 Figma 자동 동기화)
100+
본인 커밋 (전체 241, 일부 Figma 자동 동기화)

⚡ 아이디어→출시

웹 운영 약 1주 · 앱스토어 약 6주

  1. 2026-02-03

    첫 지시 · 첫 동작

  2. 6일 뒤

    2026-02-09

    웹 운영 시작 (mechoose.store)

  3. 36일 뒤

    2026-03-17

    앱스토어 승인

  4. 120일 뒤

    2026-07-15

    마지막 커밋

아이디어→웹 서비스 운영 약 1주, 앱스토어 승인·출시까지 약 6주(2026-03-17), 구글플레이에도 출시. git 커밋일 기준 실작업 약 33일

01

아이디어 / 문제

첫 지시: "기술이 없어서 Figma Make AI랑 GPT로 커머스를 만들고 있는데, 마이페이지에서 에러가 자꾸 나 막혀요 — 도와줄래요?"

태국 소비자가 옷을 고르고 가상으로 입어 본 뒤 바로 주문까지 할 수 있는 패션 쇼핑 서비스를 만들고 싶었습니다. 커머스의 기본기(진열·결제·주문·관리자)에 더해 AI 가상 피팅과 스타일리스트 상담까지 한 곳에서 제공하는 것이 목표였습니다.

02

내가 정한 기획·기준

  • 상품·주문·결제·관리자까지 서비스 범위와 화면 흐름을 직접 기획
  • 운영 기준: 배송에 꼭 필요한 정보(전화·주소·LINE ID)가 없으면 결제 단계에서 막지 말고 진입 시점에 먼저 받는다
  • 기술 조합은 1인 운영 속도를 기준으로 AI와 함께 선택: 웹 한 벌을 Capacitor로 iOS·Android 앱까지, 서버 관리가 필요 없는 Supabase 엣지 함수에 API를 집약
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 수정 지시

    "결제가 끊긴 주문을 다시 이어서 결제하게 해 줘", "주소는 자동완성으로 우편번호까지 채워 줘"처럼 사용자 문제를 말로 바꿔 기능으로 지시했습니다.

실제 지시 (발췌)

  • 전체를 덮어쓰지 말고 바뀐 부분만 패치해줘.
  • 바꾸기 전에 부작용을 먼저 설명하고, 승인받은 뒤에 고쳐.

Fig. mechoose-03

문제를 말로 지시해 기능으로

Before

  • 결제가 끊긴 주문이 그대로 방치
  • 어디서 멈췄는지 사용자가 못 찾음

내 지시 (발췌)

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

After

  • ✓ ‘결제 대기’ 배너 + 마이페이지 강조
  • ✓ 중단 지점부터 재결제 플로우

04

막힌 순간과 해결

  • 미결제 주문 이탈: 결제가 끊긴 주문이 방치됐습니다. '결제 대기' 상태를 배너와 마이페이지에 강조하고, 중단 지점부터 다시 결제하는 재진입 플로우를 붙이도록 지시해 이탈을 줄였습니다.
  • 주소 입력 오류: 손 입력은 오타·누락이 잦았습니다. 주소 자동완성을 붙여 우편번호까지 자동으로 채우도록 해 배송 실패 요인을 줄였습니다.
MECHOOSE — mechoose 07 mobile order detail pending
MECHOOSE — mechoose 07 mobile orders pending
고객 화면(태국어): 결제 대기 주문을 강조하고 결제로 다시 돌아가는 경로 제공

Case 01

결제가 중간에 끊긴 주문이 그대로 방치돼 재구매로 이어지지 않음.

  1. 증상

    결제가 중간에 끊긴 주문이 그대로 방치돼 재구매로 이어지지 않음.

  2. 내 설명

    결제가 끊긴 주문을 사용자가 다시 이어서 결제하게 하고 싶다"고 플로우로 전달.

  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

웹 한 벌로 웹·iOS·Android, 서버리스 백엔드

프런트React · Vite · TypeScript웹 한 벌
WebVercelmechoose.store
앱 래핑CapacitoriOS · Android
백엔드Edge API (서버리스 함수)137 라우트 · 주문·결제·관리자
DataDB · 스토리지
AIAI 가상 피팅 (외부 API)
AI와 함께 설계한 1인 운영형 구조. 서버 관리 없이 엣지 함수 하나에 API를 모았습니다.

06

회고

말로 지시해 기능이 붙는 속도는 빨랐지만, 초기 화면 구조가 한 파일에 몰려 수정이 점점 어려워졌습니다. 다시 만든다면 화면·상태 관리를 역할별로 더 잘게 쪼개도록 처음부터 기준을 세우겠습니다.

더 많은 화면 · 3장

MECHOOSE — 상품 상세
상품 상세
MECHOOSE — 장바구니
장바구니
MECHOOSE — 결제 — PromptPay
결제 — PromptPay

포트폴리오용으로 UI 문구만 영어로 보여 줍니다. 상품 데이터는 실서비스의 태국어 카탈로그 그대로이고, 판매자 상품 사진은 흐리게 처리했습니다.

(01) Review

Honest Review

개발자가 만들었다면?

강점3

  • 기능 범위 — 실제 운영 중인 커머스 전체

    쇼핑·장바구니·위시리스트, 실카드결제·환불, 클레임·반품, 재고, 리뷰, 스타일리스트 앱, 관리자, 소셜로그인 4종, 푸시·LINE 알림 — 웹·App Store·Google Play 운영 중.

  • 성능 — 메인 번들 1.6MB → 454KB

    라이브러리 5분할, 관리자 화면은 필요할 때만 로드(664KB 분리), 데이터 5분 캐시, 이미지 지연 로딩.

  • 속도·비용 — 웹 운영 약 1주, 앱스토어 출시 약 6주

    실제 개발 약 8주, 코드 약 5.1만 줄, 본인 커밋 100개.

동등4

  • 보안 기본기 — 소규모 팀 수준

    관리자 경로 전부 권한 확인, 결제 금액 서버 재검증, 허용 도메인 목록, 요청 제한, 보안 헤더, 서버 키는 앱에 포함하지 않음.

  • 배포·운영 — 코드 하나로 웹 + 앱스토어 2곳

    웹은 Vercel, iOS·Android는 Capacitor, 딥링크, PWA, 오류 화면에 추적 ID.

  • 현지화 — 태국 단일 시장 맞춤

    번역 키 245개, 하드코딩 문구 일부 남음.

  • 문서화 — 구조·설계 결정 기록

    문서 속 수치 일부가 실제 코드와 어긋나 있었음.

다음 단계 (보완 중)4

  • 테스트·자동화 — 테스트·CI·린트·타입검사 아직 없음

    출시마다 실제 구매 흐름을 직접 눌러 확인.

    개선 계획 → 결제·주문 로직부터 단위 테스트 10~20개 → 커밋마다 빌드+타입검사+테스트 자동 실행.

  • 구조 — 백엔드가 6,299줄 한 파일 + 단일 키-값 저장소

    API 137개가 한 파일에 있고 데이터가 범용 저장소 하나에 있어 DB가 관계를 강제하지 못함.

    개선 계획 → 도메인별 분리(주문→결제→관리자), 주문·결제부터 정식 테이블+마이그레이션으로 이전.

  • 코드 일관성 — 느슨한 타입과 남은 사본

    타입 미지정(`any`) 940곳, 빠른 반복으로 서버 코드 사본 3벌·백업 파일이 남음.

    개선 계획 → 엄격한 타입검사를 배포 조건으로, 결제부터 `any` 제거, 사본 정리.

  • 이력·모니터링 — 추적 어려운 커밋, 자동 알림 없음

    커밋 241개 중 141개가 디자인 도구 자동 동기화. 오류에 ID는 남지만 자동 알림은 없음.

    개선 계획 → 기능 커밋과 디자인 동기화 분리, 배포 절차에 오류 수집·정기 백업 추가.

다음 프로젝트 →

Momento

AI를 지휘해 같은 앱을 iOS·Android 네이티브로 각각 완성 — 커플 추억 자동 매칭 앱

케이스 보기
이력서 PDF