SYSTEM BLUEPRINT

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

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

구매자 시나리오

해외 구매자 구매 여정

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

1. 홈 진입

추천 상품
브랜드 노출

2. 검색

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

3. 상세 확인

이미지, 설명
샘플 신청

4. 장바구니

쿠폰 적용
배송 정보

5. 결제

Stripe 결제
이메일 확인

구매자 | 화면 01

홈 및 추천 화면

app.beauty-commerce/home

Fresh K Beauty

추천 상품과 크리에이터 큐레이션

K Beauty
Glow Serum Sample Kit

크리에이터 추천 샘플과 본품 구매 연결

Clean Mint Toner

해외 인기 카테고리 노출

[화면 개요 및 목적]

해외 구매자가 앱 진입 직후 인기 한국 뷰티 상품과 크리에이터 추천을 확인합니다.

[핵심 기능 로직]

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

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

상품 상세 및 샘플 신청

app.beauty-commerce/product/glow-serum

Glow Serum

상세 설명과 샘플 신청

K Beauty
샘플 신청

브랜드 캠페인 참여 흐름

장바구니 담기

쿠폰과 배송 정보로 연결

[화면 개요 및 목적]

상품 이미지, 설명, 샘플 신청, 좋아요, 장바구니 담기를 한 화면에서 처리합니다.

[핵심 기능 로직]

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

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

장바구니와 Stripe 결제

Checkout

Stripe 기반 해외 결제

K Beauty
쿠폰 적용

프로모션 코드 반영

결제 확인

이메일과 주문 상태 업데이트

[화면 개요 및 목적]

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

[핵심 기능 로직]

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

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

크리에이터 참여 여정

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

1. 가입

소셜 로그인
프로필 생성

2. 등록 신청

크리에이터
신청 제출

3. 상품 탐색

샘플 목록
브랜드 확인

4. 샘플 신청

배송 정보
신청 상태

5. 협업 관리

알림 수신
진행 확인

크리에이터 | 화면 01

크리에이터 등록 신청

app.beauty-commerce/creator/apply

Creator Apply

채널 정보와 뷰티 관심사 입력

K Beauty
채널 입력

인스타그램, 틱톡 등

관심 카테고리

스킨케어, 메이크업

[화면 개요 및 목적]

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

[핵심 기능 로직]

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

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

샘플 캠페인 탐색

app.beauty-commerce/creator/samples

Sample Campaign

브랜드 샘플 탐색

K Beauty
Hydra Cream

건성 피부 크리에이터 추천

Calm Mask

리뷰 모집 중

[화면 개요 및 목적]

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

[핵심 기능 로직]

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

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

알림과 협업 상태

app.beauty-commerce/creator/alerts

Creator Alerts

협업 진행 상황

K Beauty
샘플 발송 완료

배송 추적 확인

리뷰 요청

콘텐츠 등록 안내

[화면 개요 및 목적]

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

[핵심 기능 로직]

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

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

관리자 운영 연동 흐름

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

1. 상품 등록

기존 어드민
상품 데이터

2. 앱 노출

GraphQL 연동
목록 반영

3. 주문 확인

결제 상태
배송 처리

4. 반품 처리

신청 접수
상태 변경

5. 개선 운영

QA 결과
기능 고도화

관리자 | 화면 01

상품 및 브랜드 데이터 연동

admin.beauty-commerce/products

Admin Products

앱 노출 상태 관리

K Beauty
상품 동기화

앱 노출 상태 확인

브랜드 신청

폼 제출 데이터 검토

[화면 개요 및 목적]

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

[핵심 기능 로직]

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

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

주문과 결제 상태 관리

admin.beauty-commerce/orders

Orders

결제와 배송 상태

K Beauty
결제 완료

이메일 발송 완료

반품 신청

관리자 검토 필요

[화면 개요 및 목적]

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

[핵심 기능 로직]

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

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

운영 리포트와 고도화

admin.beauty-commerce/report

Operation Report

출시 후 개선 지표

K Beauty
구매 전환

상품 상세에서 결제까지

샘플 신청

크리에이터 참여 추이

[화면 개요 및 목적]

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

[핵심 기능 로직]

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

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