SYSTEM BLUEPRINT

해외 뷰티 커머스 앱
화면 설계 및 시나리오

구매자, 크리에이터, 관리자 관점에서 상품 탐색, 샘플 신청, 결제, 운영 연동 흐름을 정의합니다.

구매자 시나리오

해외 구매자 구매 여정

해외 사용자가 한국 뷰티 상품을 발견하고 Stripe 결제까지 진행하는 흐름입니다.

1. 홈 진입

추천 상품
브랜드 노출

2. 검색

상품, 브랜드
크리에이터 탐색

3. 상세 확인

이미지, 설명
샘플 신청

4. 장바구니

쿠폰 적용
배송 정보

5. 결제

Stripe 결제
이메일 확인

구매자 | 화면 01

홈 및 추천 화면

app.beauty-commerce/home
홈 추천 상태

Glow Serum Sample Kit

크리에이터 추천 샘플과 본품 구매를 한 화면에서 연결합니다.

$39.00
Creator PickK BeautySample Ready

[화면 개요 및 목적]

해외 구매자가 앱 진입 직후 인기 한국 뷰티 상품과 크리에이터 추천을 확인합니다. 제안서의 해외 직접 판매 채널 전략을 첫 화면에서 증명합니다.

[핵심 기능 로직]

기존 어드민 상품 데이터와 추천 영역을 연결하고, 향후 개인화 추천으로 확장 가능한 구조로 둡니다.

  • React Native 화면 컴포넌트
  • GraphQL 상품 조회
구매자 | 화면 02

상품 상세 및 샘플 신청

app.beauty-commerce/product/glow-serum
PRODUCT DETAIL
🧴

Glow Serum

효능, 성분, 리뷰, 샘플 신청 상태를 확인하고 장바구니로 이동합니다.

[화면 개요 및 목적]

상품 이미지, 설명, 샘플 신청, 좋아요, 장바구니 담기를 한 화면에서 처리합니다. 데모의 상품 상세 단계와 연결됩니다.

[핵심 기능 로직]

상품 URL 기반 진열 방식과 기존 등록 상품을 함께 지원하고 샘플 신청 상태를 주문 데이터와 분리 관리합니다.

  • MongoDB 상품 데이터
  • 좋아요 및 샘플 API
구매자 | 화면 03

장바구니와 Stripe 결제

CHECKOUT
💳

Stripe 결제 준비

BEAUTY10 쿠폰과 해외 배송 정보를 확인한 뒤 안전 결제로 진행합니다.

[화면 개요 및 목적]

쿠폰 적용, 배송 정보 입력, Stripe 결제, 결제 확인 이메일 발송 흐름을 보여줍니다.

[핵심 기능 로직]

결제 성공, 실패, 취소, 재시도 케이스를 주문 상태와 이메일 발송 상태에 맞춰 동기화합니다.

  • Stripe Payment Sheet
  • 주문 상태 웹훅
크리에이터 시나리오

크리에이터 참여 여정

크리에이터가 신청하고 상품을 탐색하며 브랜드 협업으로 연결되는 흐름입니다.

1. 가입

소셜 로그인
프로필 생성

2. 등록 신청

크리에이터
신청 제출

3. 상품 탐색

샘플 목록
브랜드 확인

4. 샘플 신청

배송 정보
신청 상태

5. 협업 관리

알림 수신
진행 확인

크리에이터 | 화면 01

크리에이터 등록 신청

app.beauty-commerce/creator/apply
CREATOR APPLY
📣

크리에이터 신청

채널 주소, 팔로워 규모, 관심 카테고리를 입력해 검토 요청을 보냅니다.

[화면 개요 및 목적]

크리에이터가 프로필과 채널 정보를 입력해 등록 신청을 제출합니다.

[핵심 기능 로직]

신청 데이터는 기존 관리 흐름으로 전달되어 검토와 승인 상태를 관리합니다.

  • 소셜 로그인 연동
  • 신청 폼 API
크리에이터 | 화면 02

샘플 캠페인 탐색

app.beauty-commerce/creator/samples
샘플 캠페인 상태

Hydra Cream Review

건성 피부 크리에이터 대상 샘플 캠페인입니다.

모집 28명
Review Due 14 daysSkincareGlobal Creator

[화면 개요 및 목적]

크리에이터가 브랜드 샘플을 탐색하고 적합한 캠페인에 신청합니다.

[핵심 기능 로직]

상품 데이터와 캠페인 조건을 함께 표시해 운영자가 관리하기 쉬운 구조로 둡니다.

  • GraphQL 목록 조회
  • 캠페인 상태 관리
크리에이터 | 화면 03

알림과 협업 상태

app.beauty-commerce/creator/alerts
CREATOR ALERTS
🔔

샘플 발송 완료

배송 추적과 리뷰 등록 요청을 알림으로 확인합니다.

[화면 개요 및 목적]

승인, 배송, 리뷰 요청, 캠페인 변경을 푸시 알림으로 전달합니다.

[핵심 기능 로직]

상태 변경 이벤트와 푸시 토큰을 연결해 크리에이터의 행동 누락을 줄입니다.

  • Data Aggregation & Visualization
  • 푸시 알림 이벤트
관리자 시나리오

관리자 운영 연동 흐름

기존 어드민을 유지하면서 앱 주문, 상품, 신청 데이터를 안정적으로 운영하는 흐름입니다.

1. 상품 등록

기존 어드민
상품 데이터

2. 앱 노출

GraphQL 연동
목록 반영

3. 주문 확인

결제 상태
배송 처리

4. 반품 처리

신청 접수
상태 변경

5. 개선 운영

QA 결과
기능 고도화

관리자 | 화면 01

상품 및 브랜드 데이터 연동

admin.beauty-commerce/products
ADMIN SYNC

상품 노출 동기화

GraphQL
Glow Serum앱 노출동기화 완료
Clean Toner검수 필요대기
Brand Apply신청 접수검토 중

[화면 개요 및 목적]

기존 어드민의 상품, 브랜드, 크리에이터 데이터를 앱 노출 구조와 연결합니다.

[핵심 기능 로직]

기존 등록 방식을 유지하면서 앱 전용 표시 필드와 상태값을 분리해 운영 안정성을 확보합니다.

  • NestJS API
  • MongoDB 스키마
관리자 | 화면 02

주문과 결제 상태 관리

admin.beauty-commerce/orders
ADMIN SYNC

주문 및 결제 상태

Stripe
Order 2031Paid이메일 발송
Order 2032Refund Requested검토 중
Order 2033Payment Failed재시도 필요

[화면 개요 및 목적]

Stripe 결제 상태와 주문 상태를 함께 확인하고 배송과 반품으로 연결합니다.

[핵심 기능 로직]

웹훅 이벤트와 주문 데이터가 어긋나지 않도록 재시도와 로그 확인 흐름을 둡니다.

  • Stripe Webhook
  • 주문 상태 관리
관리자 | 화면 03

운영 리포트와 고도화

admin.beauty-commerce/report
ADMIN SYNC

출시 후 개선 지표

리포트
상품 상세 전환18.4%개선 후보
샘플 신청312건상승
쿠폰 사용41.2%유지

[화면 개요 및 목적]

출시 후 구매 흐름, 샘플 신청, 크리에이터 활동을 점검해 기능 고도화 우선순위를 잡습니다.

[핵심 기능 로직]

앱 이벤트와 주문 데이터를 기반으로 운영 개선 지표를 만들고 유지보수 협업에 반영합니다.

  • 이벤트 로그
  • Issue Tracking & Status Management