사용자 화면 · 프라이빗 세일

프라이빗 세일 메인 화면

PRS-001 · 2026. 03. 19

화면 이름 프라이빗 세일 메인 화면
화면 위치 프라이빗 세일
화면 ID PRS-001
작성일 2026. 03. 19
PRS-001
Description
0 화면 접근 조건
  • 하단 GNB 내 “프라이빗 세일" 탭 클릭 시 진입
  • 로그인 여부와 무관하게 접근 가능
  • PS 탭 선택 시 GNB 에서 프라이빗 세일 아이콘 활성화 상태 유지
  • 이전 화면 스크롤 위치와 무관하게 항상 상단부터 노출
1 헤더
  • 구성
    • 타이틀 텍스트 : “프라이빗 세일"
    • 별도 액션 없음
2 카피 또는 배너
  • 프라이빗 세일 서비스 방식 안내
  • 구성
    • 카피+이동하기 버튼
    • 클릭 시, 프라이빗 세일 안내 페이지로 이동(공지사항 상세 게시물)
3 작품 구해요 버튼
  • 구매 요청 플로우 진입
  • 구성
    • 카드형 버튼 영역
      • 라벨 : “작품 구해요"
      • 보조 텍스트 : “프라이빗 세일 매물수 (n)개"
        • (n)은 서버 기준 실시간 매물 수
      • 버튼 클릭 시, 작품 구매 요청 입력 화면으로 이동 (PRS-002)
    • 비로그인 사용자 클릭 시
      • 로그인 안내 모달(LOG-008) 노출
4 작품 팔아요 버튼
  • 판매 등록 플로우 진입
  • 구성
    • 카드형 버튼 영역
      • 라벨 : “작품 팔아요"
      • 보조 텍스트 : “프라이빗 세일 의뢰인 (n)명"
        • (n)은 서버 기준 현재 판매 의뢰수
      • 버튼 클릭 시, 작품 판매 요청 입력 화면으로 이동 (PRS-003)
    • 비로그인 사용자 클릭 시
      • 로그인 안내 모달(LOG-008) 노출
5 공통 규칙
  • 본 화면은 프라이빗 세일의 진입 허브 역할 수행
  • 각 버튼 클릭 시 단일 플로우로 즉시 이동, 비로그인 시 로그인 안내 모달 노출
  • 매물 수 및 의뢰인 수 데이터는 화면 진입 시 1회 조회
    • 스크롤에 따른 추가 조회 없음
    • 기본값 0으로 노출
    • 화면 기능은 정상 작동
  • 버튼 영역은 전체 카드 영역 터치 시 동일 동작 수행

Design Output

UI 디자인 산출물

위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.

9:41
프라이빗 세일

차트 전문 매니저가
원하는 작품을
조용히 찾아드립니다

CHRT. Private
작품 구해요
프라이빗 세일 매물수 1,234개
작품 팔아요
프라이빗 세일 의뢰인 123명
홈
마켓
PS
MY
개발 구현 가이드 — PRS-001 프라이빗 세일 메인

Update History

2026.03.16구현 가이드 최신화 (8섹션 재작성)
2026.03.11구현 가이드 추가 (7섹션)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

프라이빗 세일(PS) 메인 화면은 GNB 하단 탭바의 "PS" 탭에서 진입하는 전용 랜딩 화면이다. 헤더 타이틀 + 히어로 카피 + Paper-Catalog Hero + "작품 구해요" / "작품 팔아요" 2개 카드형 버튼으로 구성된다. 하단 4탭 탭바(홈/마켓/PS/MY) 포함. 전체 배경: --bg (#FAFAF8). 로그인 여부 무관하게 접근 가능.

2. 레이어 구조 + 치수

# 영역 높이/위치 스타일 상세
1상태바44pxiOS 시스템 영역
2헤더48px"프라이빗 세일" --sans 17px/700, --charcoal (#1A1A1A), ls:-0.02em, padding 0 24px, bg: --bg
3히어로 카피padding 24px 24px 20px"차트 전문 매니저가 원하는 작품을 조용히 찾아드립니다" --sans 20px/700, --charcoal, ls:-0.03em, line-height 1.45
4Paper-Catalog Hero180px, margin 0 24px 20pxCHRT 모노그램 60x68px, --red-brand bar, edition "CHRT. Private"
5"작품 구해요" 카드140px, padding 0 24px--charcoal bg, R=0, 뱃지 "작품 구해요" --red-brand bg, 보조 텍스트 16px/600 #fff
6"작품 팔아요" 카드140px, padding 0 24px동일 스타일, 뱃지 "작품 팔아요", 보조 텍스트 의뢰인 수
7하단 탭바absolute bottom 0, height 80px홈/마켓/PS(활성)/MY 4탭, border-top rgba(26,26,26,0.06)

3. 핵심 인터랙션

  • "작품 구해요" 카드: 전체 카드 터치 → 로그인 시 PRS-002(구매 등록)로 이동, 비로그인 시 LOG-009(로그인 안내 모달) 노출
  • "작품 팔아요" 카드: 전체 카드 터치 → 로그인 시 PRS-003(판매 등록)로 이동, 비로그인 시 LOG-009 노출
  • 카드 뱃지: position absolute, top 12px left 12px, --red-brand (#961E23) bg, #fff text, --mono TASA Orbiter 10px/700, padding 2px 8px, ls:0.04em
  • 카드 보조 텍스트: --sans 16px/600, #fff, ls:-0.01em, center. "(n)"은 서버 기준 실시간 매물수/의뢰인수
  • 히어로 카피 영역 클릭: 프라이빗 세일 안내 페이지(공지사항 상세 게시글)로 이동

4. 상태 변화

  • GNB 탭바: PS 탭 활성 시 아이콘 stroke --red-brand (#961E23) 1.8px + 라벨 --red-brand 10px/600. 비활성 탭: stroke --text-muted (#888888) 1.5px + 라벨 --text-muted 10px/500
  • 탭 진입 시: 스크롤 위치 상단 리셋
  • 매물수/의뢰인수: 진입 시 1회 서버 조회, 미수신 시 기본값 "0" 표시

5. 네비게이션 플로우

  • GNB 하단 "PS" 탭 클릭으로 진입
  • "작품 구해요" 카드 → PRS-002 (구매 등록)
  • "작품 팔아요" 카드 → PRS-003 (판매 등록)
  • 히어로 카피 → 공지사항 상세 게시글
  • 로그인 여부 무관하게 화면 접근 가능 (카드 클릭 시 로그인 체크)

6. 에러/예외 처리

  • 매물수/의뢰인수 서버 데이터 미수신 → 기본값 "0" 표시, 화면 기능 정상 작동
  • 비로그인 카드 클릭 → LOG-009 모달 노출

7. 모션 스펙

  • 카드 터치: scale 0.97, 100ms ease-out (선택적)
  • 화면 전환: iOS push navigation (translateX 100%→0, 300ms ease)
  • 탭 전환: 크로스페이드 또는 즉시 교체 (탭 간 전환 시)

8. 여백 · 간격 요약

  • 전체 좌우 패딩: 24px
  • 히어로 카피: padding 24px 24px 20px
  • Paper-Catalog Hero: margin 0 24px 20px, height 180px
  • "작품 구해요" 카드: padding 0 24px, margin-bottom 16px, height 140px
  • "작품 팔아요" 카드: padding 0 24px, margin-bottom 24px, height 140px
  • 카드 내 뱃지: top 12px, left 12px
  • 카드 내 gap: 8px (뱃지-텍스트 간)
  • 탭바: absolute bottom 0, height 80px, padding 0 24px
  • 탭 아이콘-라벨 gap: 3px

9. 적용 디자인 토큰

  • [색상]
  • --bg: #FAFAF8
  • --charcoal: #1A1A1A
  • --red-brand: #961E23
  • --text-muted: #888888
  • [타이포그래피]
  • --mono: TASA Orbiter
  • --sans: Pretendard Variable
← 이전 화면: MYP-016 다음 화면: PRS-002 →