글로벌 자사몰 온보딩 기능 명세

개요

AI-native 글로벌 자사몰(MAKITT)에서 사용자가 완전한 운영(상품→결제→주문→배송)까지 도달하기 위한 전체 온보딩 여정과 Progress UX를 정의한다.

배경

현재 온보딩 플로우:

• 3D 온보딩 씬(Scene 0-6) → 국가 선택 → 샘플 상품 → 샘플 샵 → 홈 진입

문제점: 실제 운영까지의 긴 여정에 대한 Progress 가이드가 없음. 사용자가 다음에 무엇을 해야 하는지, 얼마나 남았는지 알 수 없음.

목표

1. 7단계 온보딩 여정 정의
2. 각 단계별 필수/선택 항목 명확화
3. 단계 간 의존성 및 병렬 진행 가능 여부 정의
4. 메인 화면 Progress UX 제안

---

온보딩 7단계 정의

flowchart LR
    S1[1. 조직 설정] --> S2[2. 샵 설정]
    S2 --> S3[3. 상품 준비]
    S2 --> S4[4. 마켓별 설정]
    S3 -.-> S4
    S4 --> S5[5. 결제 연동]
    S4 --> S6[6. 물류 연동]
    S5 --> S7[7. 콘텐츠 & 런칭]
    S3 --> S7

---

1단계: 조직 설정 (Organization Setup)

목적

비즈니스 주체 정보를 등록하여 법적/세금 요건을 충족

필수 항목

국가별 사업자 정보

한국 (KR)

미국 (US)

일본 (JP)

싱가포르 (SG)

완료 조건

• 모든 필수 항목 입력
• 사업자 정보 유효성 검증 통과

---

2단계: 샵 기본 설정 (Shop Setup)

목적

고객에게 노출되는 기본 샵 정보 설정

필수 항목

브랜딩 (필수)

정책 (필수)

완료 조건

• 기본 정보 및 브랜딩 완료
• 필수 정책 3종 작성

---

3단계: 상품 준비 (Product Setup)

목적

판매할 상품을 등록하고 글로벌 판매를 위한 다국어/다통화 설정

필수 항목

상품 기본 정보

글로벌화 설정 (마켓 확장 시 필수)

완료 조건

• 최소 1개 상품 등록 완료
• 기준 마켓에서 구매 가능 상태

---

4단계: 마켓별 설정 (Market Configuration)

목적

각 판매 국가(마켓)에 맞는 세금, 배송, 가격 정책 설정

마켓 추가 흐름

flowchart TD
    A[기준 마켓 설정 완료] --> B[추가 마켓 선택]
    B --> C[세금 설정]
    B --> D[배송 설정]
    B --> E[가격 정책]
    B --> F[약관/컴플라이언스]
    C & D & E & F --> G[마켓 활성화]

세금 설정

배송 설정

국가별 약관

완료 조건

• 활성화하려는 각 마켓에 대해:
  • 세금 설정 완료
  • 배송 영역 및 배송비 설정
  • 필수 약관 작성

---

5단계: 결제 연동 (Payment Integration)

목적

마켓별 결제 수단 연동 및 테스트

마켓별 결제 수단

연동 프로세스

flowchart LR
    A[PG사 선택] --> B[API 키 입력]
    B --> C[연결 테스트]
    C --> D[Webhook 설정]
    D --> E[테스트 결제]
    E --> F[Live 모드 전환]

필수 항목

완료 조건

• 각 활성 마켓에 최소 1개 PG 연동
• 테스트 결제 성공

---

6단계: 물류 연동 (Logistics Integration)

목적

주문 처리 및 배송을 위한 물류 시스템 연동

연동 옵션

ARGO 연동 흐름

flowchart TD
    A[ARGO 연동 시작] --> B{신규/기존 벤더}
    B -->|신규| C[벤더 등록]
    B -->|기존| D[이메일로 조회]
    C --> E[승인 대기]
    D --> E
    E --> F[연결 완료]
    F --> G[기본 창고 지정]

완료 조건

• ARGO 연동 완료 및 "연결됨" 상태
• 또는 "나중에 하기" 선택 (건너뜀 상태)

참고

• 물류 연동은 선택 단계
• 건너뛰면 주문 발생 시 수동 처리 필요
• 설정 > 물류에서 언제든 연동 가능

---

7단계: 콘텐츠 & 런칭 (Content & Launch)

목적

샵 디자인 완성 및 최종 점검 후 오픈

콘텐츠 설정

런칭 체크리스트

필수 점검 항목

• 상품이 정상 노출되는가?
• 장바구니 담기가 동작하는가?
• 결제 테스트가 성공했는가?
• 주문 완료 후 주문 내역이 보이는가?
• 필수 약관이 모두 표시되는가?
• 모바일에서 정상 동작하는가?

런칭 프로세스

flowchart LR
    A[최종 점검] --> B[테스트 주문]
    B --> C{통과?}
    C -->|Yes| D[샵 상태: ACTIVE]
    C -->|No| A
    D --> E[런칭 완료!]

완료 조건

• 런칭 체크리스트 필수 항목 모두 통과
• 샵 상태가 ACTIVE로 변경

---

단계별 요약

총 예상 소요 시간: 3-6시간 (1개 마켓 기준)

---

단계 간 의존성

---

Progress UX 설계

메인 대시보드 Progress Widget

┌─────────────────────────────────────────────────────────────────────────┐
│  🚀 샵 런칭까지 57% 완료                           예상 소요: 약 2시간  │
│                                                                         │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━░░░░░░░░░░░░░░░░░░░░░░░░░ 57%          │
│                                                                         │
│  ┌───────┐   ┌───────┐   ┌───────┐   ┌───────┐   ┌───────┐   ┌───────┐│
│  │  ✓    │   │  ✓    │   │  ✓    │   │  ◐    │   │  ○    │   │  ○    ││
│  │ 조직  │ → │  샵   │ → │ 상품  │ → │ 마켓  │ → │ 결제  │ → │ 런칭  ││
│  └───────┘   └───────┘   └───────┘   └───────┘   └───────┘   └───────┘│
│   완료 ✓      완료 ✓      완료 ✓     진행 중      대기 중     대기 중   │
│                                                                         │
│  📍 다음 할 일: 마켓 설정 완료하기                                       │
│     KR 마켓 세금 설정이 아직 완료되지 않았습니다.                        │
│                                                            [계속하기 →] │
└─────────────────────────────────────────────────────────────────────────┘

상태 아이콘

상태 컬러

단계별 상세 카드

진행 중 상태:
┌─────────────────────────────────────────┐
│ ◐ 4단계: 마켓별 설정                    │
│ ━━━━━━━━━━━━━━░░░░░░░░░░░ 60%          │
│                                         │
│ ✓ KR 마켓 기본 설정                     │
│ ○ KR 세금 설정 ← 필수                   │
│ ✓ KR 배송 설정                          │
│ ○ US 마켓 설정                          │
│                                         │
│ 예상 소요: 약 20분      [계속하기 →]    │
└─────────────────────────────────────────┘

알림 배너

완료 시:
┌────────────────────────────────────────────────────────────────┐
│ ✓ 조직 설정이 완료되었습니다! 다음: 샵 기본 설정      [시작 →] │
└────────────────────────────────────────────────────────────────┘

런칭 가능 시:
┌────────────────────────────────────────────────────────────────┐
│ 🎉 모든 필수 설정이 완료되었습니다! 지금 샵을 오픈하세요. [런칭 →]│
└────────────────────────────────────────────────────────────────┘

---

구현 고려사항

상태 저장

• 서버 사이드: onboarding_progress 테이블에 사용자별 진행 상황 저장
• 클라이언트: Zustand store에 현재 세션 상태 캐싱
• 실시간 동기화: 설정 변경 시 progress 자동 업데이트

접근성

• 키보드 네비게이션 지원 (Tab, Enter)
• 스크린 리더 호환 (ARIA labels)
• 고대비 모드 지원

성능

• Progress widget은 대시보드 초기 로딩에 포함
• 상세 체크리스트는 lazy loading
• 단계 상태는 캐싱하여 불필요한 API 호출 방지

---

다이어그램

• 온보딩 플로우 다이어그램: diagrams/onboarding-flow.mmd
• 단계 의존성 다이어그램: diagrams/onboarding-dependency.mmd