테마
Sprint 52 디자인 요청서
요청일: 2026-01-20
최종 수정: 2026-01-26 (PRD 기준 결제 화면 추가)
요청자: 윤재 (PO)
D-Day: 2026-02-01 (쿠팡 광고 공식 출시)
요청 개요
Sprint 52에서 디자인이 필요한 화면은 총 13건입니다.
기존 요청 (4건)
| 우선순위 | Story | 제목 | 작업량 | 개발 시작 예정 |
|---|---|---|---|---|
| P0 | E-01-S-01 | 랜딩페이지 전면 개편 | L | 즉시 |
| P0 | E-09-S-05 | 원가입력 삭제/복구 UI | M | E-09 진행 시 |
| P1 | E-07-S-07 | 마이페이지 추천 코드 UI | S | E-07 진행 시 |
| P1 | E-06-S-03 | (구) 결제 페이지 | M | → 아래 신규 요청으로 대체 |
신규 요청 - 결제 개선 (9건)
PRD_결제페이지개발범위_20260126.md 기준
| 우선순위 | # | 화면명 | 작업량 | Epic |
|---|---|---|---|---|
| P0 | 3 | 결제 페이지 (요금제 + 쿠폰) | 5일 | E-07 |
| P0 | 4 | 결제 전 최종 확인 | 3일 | E-07 |
| P0 | 5 | 결제 완료 (성공) | 2일 | E-07 |
| P0 | 6 | 결제 완료 (실패) | 1일 | E-07 |
| P0 | 7 | 마이페이지 변경 (추천인/크레딧/쿠폰) | 3일 | E-07 |
| P0 | 8 | 결제 내역 상세 | 1일 | E-07 |
| P1 | 1 | 몰연동 유도 팝업 | 1일 | E-06 |
| P1 | 2 | 결제 유도 팝업 | 1일 | E-06 |
| P1 | 9 | 크레딧 사용 내역 | 2일 | E-07 |
P2 (선택, 기존 회원 마이그레이션)
| 우선순위 | # | 화면명 | 작업량 | Epic |
|---|---|---|---|---|
| P2 | 10 | 토스 전환 유도 팝업 | 1일 | E-06 |
| P2 | 11 | 약관 동의 & 쿠폰 발급 | 2일 | E-06 |
1. 랜딩페이지 전면 개편 (E-01-S-01) - P0
목적
광고 분석 서비스 공식 출시에 맞춰 랜딩페이지를 "광고 분석 중심"으로 전면 개편
핵심 요구사항
1.1 히어로 섹션 (A/B 테스트)
헤드라인 2종:
- A안: "쿠팡 광고, 뭘 고쳐야 할지 모르겠다면?"
- B안: "광고비 줄이고, 순이익 늘리고"
구성 요소:
- 헤드라인 + 서브카피
- CTA 버튼 ("무료로 시작하기")
- 제품 스크린샷 (Surface Layer 화면)
1.2 가치 블록 3개
| 블록 | 내용 | 비주얼 아이디어 |
|---|---|---|
| 1. 광고 상태 진단 | Status Badge 시스템 | 초록/노랑/빨강 뱃지 예시 |
| 2. 순이익 번역 | ROAS → 100원당 순이익 | Before/After 비교 UI |
| 3. 액션 가이드 | 입찰가 조정 예시 | 조언 메시지 + 액션 버튼 |
1.3 Social Proof 섹션 (A/B 테스트)
메시지 2종:
- A안: "장사왕 셀러 10명 중 9명이 광고에서 순이익을 내고 있어요"
- B안: "장사왕과 함께한 셀러 절반 이상이 순이익이 개선됐어요"
실제 데이터 기반 (2026-01-19 기준):
- 순이익 달성률: 89%
- 평균 ROAS: 481%
- ROAS 200%+ 비율: 95%
1.4 정산 분석 연결 섹션
기존 정산 분석 서비스로 연결하는 섹션
- "정산 분석도 궁금하다면?" 형태의 유도 문구
1.5 FAQ 섹션
- 아코디언 형태
- 3~5개 FAQ
- FAQ 예시:
- "광고 분석은 어떻게 동작하나요?"
- "무료 체험 기간은 얼마나 되나요?"
- "다른 셀러 데이터가 노출되나요?"
1.6 GNB 메뉴 변경
현재: 정산 분석 중심 변경: 광고 분석 | 정산 분석 | 로그인
반응형 요구사항
- 데스크톱 (1440px)
- 태블릿 (768px)
- 모바일 (375px)
참고 자료
- Story 파일:
.context/sprints/s52/stories/E-01-S-01.md - Epic Spec:
.context/sprints/s52/epic-specs/E-01-landing-gtm.md
2. 결제 플로우 화면 (PRD 기준) - P0
참고 문서: PRD_결제페이지개발범위_20260126.md
목적
쿠폰 & 추천인 시스템 도입에 따른 결제 플로우 전면 개편. 2단계 결제 구조 (장사왕 → 토스)
제약 조건 (중요!)
⚠️ TossPayments 결제창은 UI 커스텀을 지원하지 않음
→ 쿠폰/크레딧 선택은 "장사왕 페이지"에서 처리
→ 최종 금액만 TossPayments에 전달2.1 결제 페이지 (#3) - 5일
주요 구성:
- 요금제 선택 (BASIC/PREMIUM/ADVANCED)
- 결제 주기 선택 (월간/연간)
- 쿠폰 코드 입력 + 보유 쿠폰 목록
- 크레딧 잔액 표시
- 금액 미리보기 (원금액, 쿠폰 할인, 크레딧 사용, 최종 금액)
┌────────────────────────────────────────────────────────────┐
│ 결제하기 │
├────────────────────────────────────────────────────────────┤
│ │
│ 📦 장사왕 PRO10 │
│ 월 110,000원 │
│ │
│ ───────────────────────────────────────────── │
│ │
│ 🎫 쿠폰 │
│ ┌──────────────────────────────────────────┐ │
│ │ ✅ 첫결제 100원 쿠폰 (-109,900원) │ │
│ └──────────────────────────────────────────┘ │
│ [다른 쿠폰 선택] │
│ │
│ 💰 추천 크레딧 │
│ 보유: 7,000원 → 사용: 0원 (결제금액 100원 미만) │
│ │
│ ───────────────────────────────────────────── │
│ │
│ 결제 금액 │
│ 상품 금액 110,000원 │
│ 쿠폰 할인 -109,900원 │
│ 크레딧 사용 -0원 │
│ ───────────────────────────────────────────── │
│ 최종 결제 금액 100원 │
│ │
│ ※ 다음 결제일: 2026.02.15 (110,000원) │
│ │
│ [ 결제하기 ] │
│ │
└────────────────────────────────────────────────────────────┘2.2 결제 전 최종 확인 (#4) - 3일
주요 구성:
- 선택 요금제 요약
- 금액 상세 (원금액, 쿠폰, 크레딧, 최종)
- 다음 결제 예정일
- 약관 동의 체크박스
- [이전] / [결제하기] 버튼
2.3 결제 완료 - 성공 (#5) - 2일
주요 구성:
- 주문번호, 결제일시
- 금액 상세 내역
- 구독 정보 (시작일, 다음 결제일)
- 추천 코드 발급 안내 (중요!)
- [영수증 다운로드] / [홈으로] 버튼
2.4 결제 완료 - 실패 (#6) - 1일
주요 구성:
- 오류 메시지, 오류 코드
- 해결 방법 안내
- [다시 시도] / [고객센터 문의] 버튼
2.5 마이페이지 변경 (#7) - 3일
추가 섹션:
추천인 정보 섹션
- 내 추천 코드 표시 (복사/공유 버튼)
- 추천 실적 (추천한 친구 수, 적립 크레딧)
크레딧 정보 섹션
- 보유 크레딧 잔액
- [크레딧 사용 내역 보기] 버튼
쿠폰 정보 섹션
- 보유 쿠폰 목록 (코드, 유효기간, 할인금액)
- [쿠폰 등록하기] 버튼
2.6 결제 내역 상세 (#8) - 1일
변경 내용:
- 기존: 주문번호, 결제일시, 요금제, 금액
- 추가: 금액 상세 (원금액, 쿠폰 할인, 크레딧 사용, 카드 결제)
- 사용된 쿠폰 코드 표시
- [영수증 다운로드] 버튼
참고 자료
- PRD:
~/Downloads/PRD_결제페이지개발범위_20260126.md - Epic Spec:
.context/sprints/s52/epic-specs/E-07-coupon-referral.md - Epic Spec:
.context/sprints/s52/epic-specs/E-06-pg-migration.md
3. 원가입력 삭제/복구 UI (E-09-S-05) - P0
목적
미사용 상품 정리를 위한 삭제/복구 기능 UI 추가
핵심 요구사항
3.1 상품 행 메뉴
기존 상품 행 우측 ... 메뉴에 "삭제" 항목 추가
[상품 행 우측 ... 메뉴]
┌─────────────────┐
│ 📝 원가 수정 │
│ 📋 상품 상세 │
│ ─────────────── │
│ 🗑️ 삭제 │
└─────────────────┘3.2 일괄 선택 UI
- 각 상품 행에 체크박스 추가
- 상단에 "전체 선택" / "선택 해제" 기능
- 선택 시 상단에 "선택 삭제" 버튼 활성화
3.3 삭제 확인 모달
┌───────────────────────────────────────────────────────────────┐
│ │
│ 🗑️ 상품 삭제 │
│ │
│ 15개 상품을 삭제하시겠습니까? │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ • 기본 티셔츠 (SKU-002) │ │
│ │ • 테스트 상품 (SKU-003) │ │
│ │ • 구모델 신발 (SKU-015) │ │
│ │ • ... 외 12개 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 💡 삭제 후 7일 내에 복구할 수 있습니다. │
│ │
│ [취소] [삭제하기] │
│ │
└───────────────────────────────────────────────────────────────┘모달 요소:
- 제목 + 아이콘
- 삭제 대상 수
- 상품명 미리보기 (최대 3-4개 + "외 N개")
- 복구 가능 안내 문구
- 취소/확인 버튼
3.4 삭제 완료 토스트
┌───────────────────────────────────────────────────────────────┐
│ ✅ 15개 상품이 삭제되었습니다. [복구하기] [✕] │
└───────────────────────────────────────────────────────────────┘- 즉시 복구 가능한 "복구하기" 버튼 포함
- 5초 후 자동 사라짐
3.5 삭제된 상품 목록 (페이지 또는 모달)
- 삭제된 상품 목록 조회
- 각 상품별 남은 복구 기간 표시 (D-5 형태)
- 개별/일괄 복구 버튼
참고 자료
- Story 파일:
.context/sprints/s52/stories/E-09-S-05.md - Epic Spec:
.context/sprints/s52/epic-specs/E-09-unused-product-cleanup.md
4. 마이페이지 추천 코드 UI (E-07-S-07) - P1
목적
유료 구독자가 추천 코드를 공유하고, 크레딧 현황을 확인하는 UI
핵심 요구사항
4.1 전체 화면 구성
┌────────────────────────────────────────────────────────────┐
│ 내 추천 코드 │
├────────────────────────────────────────────────────────────┤
│ │
│ 🎁 친구 추천하고 크레딧 받기! │
│ │
│ 내 추천 코드 │
│ ┌──────────────────────────────────────────┐ │
│ │ SELLER-ABC123 [복사] │ │
│ └──────────────────────────────────────────┘ │
│ │
│ 💰 보상 안내 │
│ • 친구가 몰연동하면 3,500원 크레딧 │
│ • 친구가 결제하면 3,500원 추가 크레딧 │
│ • 크레딧은 다음 결제 시 자동 차감! │
│ │
│ ───────────────────────────────────────────── │
│ │
│ 📊 추천 현황 │
│ │
│ 총 추천 5명 │
│ 몰연동 완료 3명 (+10,500원 적립) │
│ 결제 완료 2명 (+7,000원 적립) │
│ │
│ 💳 내 크레딧 잔액: 17,500원 │
│ └ 다음 결제 시 자동 차감됩니다 │
│ │
│ ⏰ 만료 예정 크레딧 │
│ ┌──────────────────────────────────────────┐ │
│ │ 3,500원 2026-03-15 만료 (D-54) │ │
│ │ 7,000원 2026-05-20 만료 (D-120) │ │
│ └──────────────────────────────────────────┘ │
│ └ 크레딧은 적립일로부터 12개월 내 사용해주세요 │
│ │
│ [카카오톡 공유] [링크 복사] │
│ │
└────────────────────────────────────────────────────────────┘4.2 UI 요소 상세
추천 코드 카드:
- 코드 표시 (SELLER-XXXXXX 형태)
- 복사 버튼 → 클릭 시 "복사 완료!" 토스트
보상 안내:
- 2단계 보상 구조 설명 (몰연동 3,500원 + 결제 3,500원)
추천 현황:
- 총 추천 수
- 몰연동 완료 수 + 적립 금액
- 결제 완료 수 + 적립 금액
크레딧 정보:
- 총 잔액 (강조 표시)
- 다음 결제 시 자동 차감 안내
- 만료 예정 크레딧 목록 (금액, 만료일, D-day)
공유 버튼:
- 카카오톡 공유 (아이콘 버튼)
- 링크 복사 (텍스트 버튼)
참고 자료
- Story 파일:
.context/sprints/s52/stories/E-07-S-07.md - Epic Spec:
.context/sprints/s52/epic-specs/E-07-coupon-referral.md
5. P1 추가 화면 (권장)
5.1 몰연동 유도 팝업 (#1) - 1일
목적: 신규 가입 후 몰연동 유도
주요 구성:
- 혜택 안내 (크레딧 3,500원, 쿠폰 100원)
- [지금 연동하기] / [나중에] 버튼
5.2 결제 유도 팝업 (#2) - 1일
목적: 몰연동 완료 후 결제 유도
주요 구성:
- 쿠폰 발급 완료 안내
- [결제하러 가기] / [나중에] 버튼
5.3 크레딧 사용 내역 (#9) - 2일
주요 구성:
- 크레딧 요약 (보유, 적립, 사용, 만료)
- 거래 내역 테이블 (날짜, 유형, 금액, 잔액, 사유)
- 페이지네이션
6. P2 화면 (선택, 기존 회원 마이그레이션)
6.1 토스 전환 유도 팝업 (#10) - 1일
목적: 기존 PortOne 유저의 TossPayments 재등록 유도
주요 구성:
- 시스템 변경 안내
- 새로운 혜택 소개 (쿠폰, 크레딧)
- [지금 재등록하기] / [나중에] 버튼
6.2 약관 동의 & 쿠폰 발급 (#11) - 2일
목적: 기존 회원 재등록 시 약관 동의 및 전환 쿠폰 발급
주요 구성:
- 약관 동의 체크박스 (필수/선택)
- 전환 쿠폰 안내 (MIGRATE10 - 10% 할인)
- [동의하고 계속하기] 버튼
일정 제안
Phase 1: P0 필수 (15일)
| 디자인 항목 | 권장 완료일 | 비고 |
|---|---|---|
| E-01-S-01 랜딩페이지 | 2026-01-24 (금) | 가장 시급, 개발 즉시 착수 필요 |
| #3 결제 페이지 | 2026-01-28 (화) | 5일, 핵심 화면 |
| #4 결제 전 최종 확인 | 2026-01-30 (목) | 3일 |
| #5~#6 결제 완료 (성공/실패) | 2026-01-31 (금) | 3일 |
| #7 마이페이지 변경 | 2026-02-03 (월) | 3일 |
| #8 결제 내역 상세 | 2026-02-03 (월) | 1일, #7과 병행 |
| E-09-S-05 원가입력 UI | 2026-02-03 (월) | 컴포넌트 추가 수준 |
Phase 2: P1 권장 (4일)
| 디자인 항목 | 권장 완료일 | 비고 |
|---|---|---|
| #1~#2 유도 팝업 | 2026-02-05 (수) | 2일 |
| #9 크레딧 사용 내역 | 2026-02-06 (목) | 2일 |
Phase 3: P2 선택 (3일)
| 디자인 항목 | 권장 완료일 | 비고 |
|---|---|---|
| #10~#11 마이그레이션 화면 | 2026-02-10 (월) | 3일, 기존 회원 대응 |
커뮤니케이션
- 질문/논의: DM 또는 팀 채널
- 피드백 요청: 디자인 초안 완료 시 알림 부탁드립니다
- 개발 담당: 수민 (FE)
작성일: 2026-01-20최종 수정: 2026-01-26 (PRD 기준 결제 화면 추가)