사용자 화면 · 마켓 / 판매등록

판매등록 - 업로드 방식 선택

MKT-003 · 2026. 03. 19

화면 이름 판매등록 - 업로드 방식 선택
화면 위치 마켓 > 판매 등록
화면 ID MKT-003
작성일 2026. 03. 19
MKT-003
Description
0 화면 접근 조건
  • 마켓 메인 화면(MKT-001)에서 판매등록 버튼 클릭 시 진입
  • 로그인 사용자만 접근 가능
 (비로그인 사용자가 판매등록 버튼 클릭 시 → 로그인 화면(LOG-008) 노출 후 로그인 완료 시 본 화면으로 이동)
1 헤더
  • 구성
    • 좌측: 뒤로가기 버튼
    • 중앙: 타이틀 텍스트 판매 등록
    • 우측: 없음
    • 뒤로가기 버튼 클릭 시
      • 이전 화면(MKT-001)으로 이동
      • 입력 정보 없음 → 별도 확인 모달 없이 즉시 이동
2 간편 업로드 버튼
  • 구성
    • 버튼 형태의 대형 카드 UI
    • 버튼 텍스트: 간편 업로드
    • 문구
      • 간편 업로드
      • 담당자 확인 후, 승인이 필요합니다
    • 버튼 클릭 시
      • 간편 판매등록 플로우 진행
      • 작품 보증서와 작품 사진 업로드를 통해 빠르게 작품 등록이 가능하지만, 운영 관리자의 작품 입력과 승인이 필요
3 직접 업로드 버튼
  • 구성
    • 버튼 형태의 대형 카드 UI
    • 버튼 텍스트: 직접 업로드
    • 문구
      • 직접 업로드
      • 담당자 승인이 필요하지 않아요
    • 버튼 클릭 시
      • 상세 판매등록 플로우 진행
      • 작품 정보 전체 입력 기반 등록 프로세스 시작
4 판매 가이드
  • 구성
    • 판매 가이드 안내 영역
    • 디자이너가 별도 작성한 가이드성 콘텐츠 노출
    • 텍스트, 아이콘, 강조 문구, 설명형 레이아웃 등 자유 구성 가능
    • 판매 등록 진입 전 불안 요소를 줄이고 선택 판단을 돕는 신뢰 보강 영역으로 사용
  • 동작
    • 별도 클릭 액션 없음
    • 별도 랜딩 페이지 없음
    • 화면 하단에 고정 또는 스크롤 내 노출 가능
    • 업로드 방식 선택과 무관하게 공통 안내 영역으로 노출
    • 판매 등록 방식 선택 화면 진입 시 기본 노출
    • 운영 정책 변경 시 콘텐츠 교체 가능
    • 상세 문구와 구성은 디자인 시안 기준 반영
  • 규칙
    • 본 영역은 정보 제공용이며 CTA 역할을 하지 않음
    • 사용자의 주 행동은 여전히 간편 업로드 또는 직접 업로드 선택이어야 함
    • 가이드 내용은 선택을 방해할 정도로 과도하게 길어지지 않도록 구성
    • 화면의 주 역할은 업로드 방식 선택이고, 판매 가이드는 그 선택을 돕는 보조 영역으로만 사용
    • 버튼, 링크, 외부 이동 기능은 두지 않음
5 공통 규칙
  • 본 화면은 업로드 방식 선택 전용 화면
    • 실제 작품 데이터는 이 단계에서 생성되지 않음
    • 이후 입력 항목 및 플로우 구조만 다름
    • 최종적으로 동일한 판매등록 완료 프로세스로 연결
    • 선택한 방식 기준으로만 플로우 진행
    • 중간 전환은 허용하지 않음 (뒤로가기를 통해서만 재선택 가능)
  • 토스트 메시지 없음
  • 버튼은 중복 클릭 방지를 위해 클릭 즉시 비활성화 처리 가능

Design Output

UI 디자인 산출물

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

9:41
판매 등록
QUICK 추천

간편 업로드

보증서와 작품 사진으로 빠르게 등록

시작하기

담당자 확인 후, 승인이 필요합니다

MANUAL

직접 업로드

작품 정보를 직접 입력하여 등록

담당자 승인이 필요하지 않아요

직접 입력

SELLING GUIDE

작품
등록
담당자
배정
입고
정밀
검수
정산
완료

전담 매니저가 판매의 전 과정을 함께합니다.

CONSIGNMENT INFO

장소서울 영등포구 의사당대로 83 (오투타워)
운영시간평일 09:30 – 18:30
개발 구현 가이드 — MKT-003 판매등록 업로드 방식 선택

Update History

2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정
2026.03.17구현 가이드 포맷 통일 — MKT-002 최신 스타일 적용
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.11구현 가이드 추가 (7섹션: 화면구조, 레이어구조, 헤더, 간편업로드카드, 직접업로드카드, 화면전환, 에러처리)
2026.03.04초기 디자인 작성
Implementation Specification

1. 화면 구조 개요

  • 화면 유형: 전체 화면 (Full Screen), 뷰포트 393 x 852px
  • 판매등록 플로우 진입 화면 — 업로드 방식(간편/직접) 선택
  • 진입 경로: MKT-001 판매등록 FAB 탭 (로그인 상태)
  • 접근 권한: 로그인 사용자만 (비로그인 시 LOG-009 선행)
  • 배경색: --bg #FAFAF8
  • 하단 탭바 없음 (등록 플로우 전용 화면)

2. 레이어 구조 + 치수

Z 영역 높이 / 위치 스타일 상세
1iOS 상태바44px, top:0시스템 제공
2헤더48pxbg: --bg #FAFAF8, flex center. 좌측 뒤로가기 chevron: 10x18px SVG stroke --charcoal 1.5px square/miter, position absolute left 24px. 타이틀 "판매 등록": --sans 17px/700 color --charcoal letter-spacing -0.02em, 중앙 정렬
3가이드 텍스트auto, padding 16px 24px 0"등록 방식을 선택해주세요.": --sans 13px color --text-secondary line-height 1.65 letter-spacing -0.005em. "보증서가 있다면 간편 업로드가 더 빠릅니다.": color --text-muted
4간편 업로드 카드 (QUICK)auto, padding 16px 24px 8px (outer)bg: --paper #F0EDE6, R=0, linen texture overlay (4x4px SVG pattern, opacity 0.6). inner padding: 20px 20px 18px. "QUICK" 라벨: --mono 10px uppercase letter-spacing 0.12em color --text-muted. "추천" 배지: --sans 10px/600 color --red-brand #961E23 border 1px solid --red-brand padding 2px 7px. 문서 아이콘: 22px stroke --charcoal 1.5px square/miter, margin-bottom 10px. 타이틀: --sans 20px/700 color --charcoal letter-spacing -0.03em. 서브텍스트: --sans 12px color --text-secondary letter-spacing -0.005em margin-bottom 18px. 하단 "시작하기": --sans 12px/600 color --charcoal + chevron 14px
5직접 업로드 카드 (MANUAL)auto, padding 0 24px 24px (outer)bg: rgba(26,26,26,0.025), border: 1px solid rgba(26,26,26,0.07), R=0. inner padding: 20px 20px 18px. "MANUAL" 라벨: --mono 10px uppercase letter-spacing 0.12em color --text-muted. 편집 아이콘: 22px stroke --charcoal 1.5px square/miter opacity 0.55. 타이틀: --sans 17px/700 color --charcoal letter-spacing -0.02em. 서브텍스트: --sans 12px color --text-muted margin-bottom 18px. 하단 "직접 입력": --sans 12px/500 color --text-muted + chevron 14px opacity 0.35

3. 핵심 인터랙션

  • 간편 업로드 카드 탭: 전체 카드 영역 탭 → MKT-004 보증서 업로드 화면으로 이동. 탭 즉시 카드 비활성화 (중복 탭 방지)
  • 직접 업로드 카드 탭: 전체 카드 영역 탭 → MKT-006 이미지 업로드 화면으로 이동 (보증서 없이 직접 입력 플로우)
  • 뒤로가기: 헤더 좌측 chevron 탭 → MKT-001 마켓 메인으로 즉시 복귀 (입력 데이터 없으므로 확인 모달 없음)

4. 상태 변화

  • Default: 두 카드 모두 탭 가능 상태. 간편 카드는 --paper bg + linen + "추천" 배지로 시각적 강조. 직접 카드는 neutral 스타일 (약한 bg + border)
  • 카드 탭 시: 탭된 카드 opacity 0.6 + 비활성화, 다른 카드도 동시 비활성화. 화면 전환 시작
  • 카드 미선택 시: 두 카드 모두 활성 상태 유지, 뒤로가기만 가능

5. 네비게이션 플로우

  • 뒤로가기 → MKT-001 마켓 메인
  • 간편 업로드 카드 탭 → MKT-004 보증서 업로드 (OCR 자동 등록)
  • 직접 업로드 카드 탭 → MKT-006 이미지 업로드 (직접 입력 플로우)

6. 에러 / 예외 처리

  • 비로그인 접근: MKT-001 FAB 탭 → LOG-009 로그인 화면 → 로그인 완료 후 MKT-003으로 이동
  • 네트워크 오류: 다음 화면 이동 실패 시 에러 토스트 + 카드 재활성화
  • 데이터 미생성: 방식 선택 전 뒤로가기 시 아무 데이터도 생성되지 않음

7. 모션 스펙

  • 화면 진입: push navigation (translateX(100%) → 0), duration 350ms, easing --ease-ios-spring
  • 카드 터치 피드백: scale(0.98) + opacity 0.8, duration 100ms ease-out → scale(1) 150ms
  • 카드 선택 후 전환: 선택된 카드 opacity 유지, 전체 화면 push transition 350ms
  • 뒤로가기: pop navigation (translateX(0) → 100%), duration 300ms ease-out

8. 여백 · 간격 요약

구간 값
콘텐츠 좌우 padding24px
가이드 텍스트 padding16px 24px 0
간편 카드 outer padding16px 24px 8px
직접 카드 outer padding0 24px 24px
카드 inner padding20px 20px 18px
QUICK/MANUAL 라벨 margin-bottom14px
아이콘 margin-bottom10px
타이틀 margin-bottom5px
서브텍스트 margin-bottom18px

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 헤더: --sans · 17px · 700 → back arrow: square/miter, --charcoal
  • 카드 배경: --paper + linen → #F0EDE6, Paper-Catalog 메타포
  • 간편 카드 타이틀: --charcoal · --sans · 20px · 700 · letter-spacing -0.03em → QUICK 카드 강조
  • 직접 카드 타이틀: --charcoal · --sans · 17px · 700 · letter-spacing -0.02em → MANUAL 카드
  • 간편 카드 서브텍스트: --text-secondary · --sans · 12px → 보증서 OCR 안내
  • 직접 카드 서브텍스트: --text-muted · --sans · 12px → 직접 입력 안내
  • 카드 높이: ~280px · 직각 → border-radius: 0 (직각 철학)
  • 좌우 패딩: 24px → 전체 콘텐츠 마진
← 이전 화면: MKT-002 다음 화면: MKT-004 →