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

판매등록 - 이미지 업로드 및 확인

MKT-006 · 2026. 03. 20

화면 이름 판매등록 - 이미지 업로드 및 확인
화면 위치 마켓 > 판매 등록 > 간편업로드 > 보증서 > 이미지 업로드 및 확인
화면 ID MKT-006
작성일 2026. 03. 20
MKT-006 MKT-006
Description
0 화면 접근 조건
  • MKT-005(판매등록 – 보증서 내용 확인) 화면에서 다음 버튼 클릭 후 진입
  • 로그인 사용자만 접근 가능
  • 비로그인 사용자는 접근 불가
  • 판매 등록 간편 업로드 플로우 내 단계 화면
1-1 헤더
  • 구성
    • 좌측: 뒤로가기 버튼
    • 중앙: 화면 타이틀 판매 등록
    • 우측: 취소 텍스트 버튼
    • 뒤로가기 버튼 클릭 시
      • 판매 등록 플로우 내 이전 단계 화면(MKT-003) 으로 이동
      • 기본적으로 별도의 안내 모달 없이 즉시 이동
      • 단, 업로드 방식 선택 화면(MKT-003)으로 이동하는 경우이며
 이미지 업로드 등 입력 또는 업로드 이력이 존재할 경우
        • 진행 중인 내용 초기화 안내 모달 노출 (MKT-012)
        • 모달 확인 시 이전 단계로 이동, 취소 시 현재 화면 유지
      • 판매 등록 플로우 중단 확인 모달 노출 (MKT-012)
      • 확인 시 판매 등록 종료 및 마켓 메인 화면(MKT-001) 으로 이동
      • 취소 시 현재 화면 유지
1-2 작품 사진 업로드 버튼 및 안내 카피
  • 구성
    • CTA 버튼: 작품 사진 업로드
    • 안내 문구:
      • * 작품 사진 퀄리티가 좋을수록 문의가 더 많이 들어와요
      • * jpeg, png, bmp 파일만 업로드 가능합니다
      • 대표 사진이 정방향일수록 문의가 더 많이 들어와요
    • 버튼 클릭 시
      • 디바이스 이미지 선택 인터페이스 호출
      • 다중 이미지 선택 가능
1-3 이전/완료 버튼
  • 구성
    • 좌측 버튼: 이전
    • 우측 버튼: 완료
    • 이전 버튼 클릭 시
      • MKT-004(보증서 업로드 확인 화면)으로 이동
      • 이미지 업로드 조건 충족 시
        • 완료 화면으로 이동
        • 버튼 비활성화
2-1 작품 사진 확인 및 메인 사진 선택
  • 구성
    • 업로드된 작품 이미지 썸네일 리스트
    • 각 이미지 우측 상단에 삭제(X) 버튼 노출
    • 이미지 선택 상태 표시 UI
    • 대표 사진 선택 안내 문구:
      • * 대표 사진을 선택해주세요
    • 업로드 완료 시
      • 선택한 이미지들이 썸네일 형태로 노출
      • 해당 이미지 즉시 제거
    • 대표 사진 선택
      • 업로드된 이미지 중 1장을 대표 사진으로 지정
      • 대표 사진은 마켓, 검색 결과, 카드 영역 등에서 우선 노출
      • 대표 사진은 반드시 1장 선택
3 토스트 메시지 정의
  • 3. 토스트 메시지 정의
    • 이미지 미업로드 상태에서 다음 버튼 클릭 시
      • 작품 사진을 1장 이상 업로드해주세요
      • 대표 사진을 선택해주세요
    • 업로드 불가 파일 선택 시
      • 지원하지 않는 파일 형식입니다
4 공통 규칙
  • 본 화면은 판매 등록 간편 업로드 Step 3 (작품 이미지 업로드 단계)
  • 작품 이미지는 마켓 노출 및 구매자 판단에 직접적인 영향을 미치는 요소
  • 최소 업로드 개수: 1장
  • 최대 업로드 개수: 5장
  • 대표 사진은 필수 선택 항목
  • 판매 등록 플로우 중 이탈(뒤로가기, 취소) 시
    • 업로드한 이미지 및 선택 상태는 저장되지 않음

Design Output

UI 디자인 산출물

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

9:41
마켓 - 판매 등록 취소

작품 사진 - 최대 5장

작품 사진 업로드

작품 사진 퀄리티가 좋을수록 문의가 더 많이 들어와요

jpeg, png, bmp 파일만 업로드 가능합니다

대표 사진이 정방향일수록 문의가 더 많이 들어와요

이전
완료
9:41
마켓 - 판매 등록 취소

작품 사진 - 최대 5장

작품 사진 업로드

작품 사진 퀄리티가 좋을수록 문의가 더 많이 들어와요

jpeg, png, bmp 파일만 업로드 가능합니다

대표 사진이 정방향일수록 문의가 더 많이 들어와요

PHOTO
MAIN
PHOTO
PHOTO
PHOTO
PHOTO

대표 사진을 선택해주세요.

이전
완료
개발 구현 가이드 — MKT-006 판매등록 - 이미지 업로드 및 확인

Update History

2026.03.17잔여 불일치 수정 — 안내 문구 PM 원문 복원("퀄리티"/"문의"), "다음"→"완료" 통일, Phone 1 완료 버튼 비활성 상태 반영
2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정
2026.03.17구현 가이드 최신화 — PM 디스크립션 교체 + MKT-002 표준 포맷 통일 + 뒤로가기 MKT-003 분기 반영 + 토스트 메시지 PM 원문 반영
2026.03.16구현 가이드 8섹션 표준 포맷 재작성 (치수·토큰값·모션·여백 보강)
2026.03.12피그마 반영: 업로드 버튼 상시 노출, 안내 문구 3줄, 이미지 셀 5개, "다음"→"완료", MAIN 셀 레드 보더
2026.03.11구현 가이드 추가 (7섹션)
2026.03.04초기 디자인 작성
Implementation Specification

1. 화면 구조 개요

  • 화면 유형: 전체 화면, 2개 상태 (업로드 전: 393 × 852px / 업로드 후: 393 × 1040px)
  • 판매 등록 간편 업로드 Step 3 — 작품 이미지 업로드 + 대표 사진 선택
  • MKT-005(보증서 내용 확인) 화면에서 다음 버튼 클릭 후 진입
  • 로그인 사용자만 접근 가능, 비로그인 사용자 접근 불가
  • State 1: 업로드 CTA + 안내 문구 3줄 (이미지 없음, 완료 버튼 비활성)
  • State 2: 업로드 CTA (상시 노출) + 2열 이미지 그리드 (최대 5장) + MAIN 뱃지 + 완료 버튼 활성
  • 최소 1장 업로드 필수, 최대 5장 제한, 대표 사진 필수 선택
  • 탭바 없음 — 헤더 "취소" 텍스트 버튼으로 등록 취소 (MKT-012 확인 모달)

2. 레이어 구조 + 치수

# 영역 높이 / 위치 세부 스펙
1상태바top:0 / 44pxiOS 시스템 영역
2헤더48px--bg #FAFAF8 bg / chevron 10×18 좌측(left:24px) / 타이틀 "마켓 - 판매 등록" 중앙 / "취소" 우측(right:24px)
3섹션 라벨padding-top 32px"작품 사진 - 최대 5장" --sans 13px/600, --charcoal, ls:-0.01em, mb:16px
4업로드 CTA48px--charcoal bg, #fff text, R=0, 이미지아이콘 18px + gap:8px + "작품 사진 업로드" 14px/600, mb:16px
5안내 문구가변 (3줄)--sans 12px, --text-muted #888888, lh:1.6, ls:-0.005em, 줄 간격 mb:4px
6이미지 그리드 (State 2)가변 (2열, 최대 5셀)grid 2-col, gap:12px, 각 셀 aspect-ratio:1/1, --paper #F0EDE6 bg, mb:16px
7이전/완료 버튼bottom:34px / 50pxflex row, gap:12px, 각 flex:1, R=0, padding:0 24px
8홈 인디케이터bottom:0 / 34pxiOS 기본

3. 핵심 인터랙션

  • 뒤로가기 chevron: 10×18px SVG, stroke --charcoal #1A1A1A, stroke-width:1.5, linecap:square → 이전 단계 화면(MKT-003)으로 이동. 기본 즉시 이동, 단 이미지 업로드 등 입력/업로드 이력 존재 시 → MKT-012 초기화 안내 모달 노출 (확인: 이전 이동, 취소: 현재 유지)
  • 타이틀: "마켓 - 판매 등록" — --sans Pretendard 17px/700, --charcoal #1A1A1A, ls:-0.02em, 중앙 정렬
  • 취소: --sans 13px/500, --charcoal, ls:-0.01em → MKT-012 플로우 중단 확인 모달. 확인 시 MKT-001(마켓 메인)으로 이동, 취소 시 현재 유지
  • 업로드 CTA 클릭: 디바이스 이미지 선택 인터페이스 호출, 다중 이미지 선택 가능, 최대 5장 (jpeg/png/bmp만 허용)
  • 이미지 셀 탭: 해당 이미지를 대표 사진으로 지정 → MAIN 뱃지 + 레드 outline 표시. 대표 사진은 마켓·검색 결과·카드 영역에서 우선 노출
  • 삭제 X 버튼: 우측 상단 22×22px, --charcoal bg, X SVG 10px stroke:#fff square → 해당 이미지 즉시 제거
  • MAIN 뱃지: 좌측 하단, --mono 9px/700, --red-brand #961E23 bg, #fff text, padding 2px 6px, ls:0.04em
  • 대표 셀 outline: outline 2px solid --red-brand #961E23, outline-offset:-2px
  • 이전 버튼: 좌측, --charcoal bg → MKT-004(보증서 업로드 확인 화면)으로 이동
  • 완료 버튼: 우측, 조건 충족 시 완료 화면으로 이동, 미충족 시 비활성

4. 상태 변화

  • State 1 → State 2 (업로드 전→후):
  • — 업로드 CTA 유지 (상시 노출, 추가 업로드 가능)
  • — CTA 아래에 2열 이미지 그리드 추가 노출
  • — 각 셀: aspect-ratio 1/1, --paper #F0EDE6 bg, PHOTO placeholder (SVG 28px stroke rgba(6,6,6,0.2) + "PHOTO" --mono 9px rgba(6,6,6,0.25))
  • — 첫 번째 셀에 MAIN 뱃지 자동 지정, 대표 사진 반드시 1장 선택
  • — "대표 사진을 선택해주세요" 안내 문구 노출 (12px, --text-muted)
  • 완료 버튼 활성 조건:
  • — 비활성: 이미지 0장 — bg rgba(26,26,26,0.15), text rgba(26,26,26,0.35)
  • — 활성: 이미지 1장 이상 — --cta-gradient bg, #fff text
  • 이전 버튼: 항상 활성 — --charcoal bg, #fff text

5. 네비게이션 플로우

  • 진입: MKT-005(보증서 내용 확인) → "다음" 클릭
  • 뒤로가기(chevron): MKT-003(업로드 방식 선택)으로 이동. 입력/업로드 이력 존재 시 MKT-012 초기화 모달 경유
  • 취소: MKT-012 중단 확인 모달 → 확인 시 MKT-001(마켓 메인)으로 이동
  • 이전 버튼: MKT-004(보증서 업로드 확인)으로 이동 (항상 활성)
  • 완료 버튼: 최소 1장 업로드 시 활성 → 완료 화면으로 이동
  • 접근 제한: 로그인 사용자만 접근 가능, 비로그인 접근 불가

6. 에러/예외 처리

  • 이미지 미업로드 + 완료 클릭: 토스트 "작품 사진을 1장 이상 업로드해주세요"
  • 대표 사진 미선택 + 완료 클릭: 토스트 "대표 사진을 선택해주세요"
  • 지원 불가 파일 형식: 토스트 "지원하지 않는 파일 형식입니다"
  • 이미지 삭제 후 0장: 완료 버튼 비활성화 (bg rgba(26,26,26,0.15))
  • 취소 탭: MKT-012 확인 모달 → 확인 시 판매 등록 종료 + MKT-001 이동
  • 플로우 이탈(뒤로가기/취소): 업로드한 이미지 및 선택 상태는 저장되지 않음. 취소 정책은 판매 등록 공통 규칙 준수

7. 모션 스펙

  • 이미지 추가 (셀 등장): opacity 0→1 + scale(0.95→1), duration 200ms, ease-out
  • 이미지 삭제 (셀 퇴장): opacity 1→0 + scale(1→0.95), duration 150ms, ease-in → 나머지 셀 리플로우
  • 대표 사진 변경: MAIN 뱃지 이동 crossfade 200ms / outline 전환 150ms
  • 완료 비활성→활성: background transition 200ms ease-out (rgba→gradient)
  • 토스트: translateY(100%)→0, 300ms ease-out / 2.5초 후 자동 dismiss
  • 화면 전환: push transition, translateX(100%→0), 350ms

8. 여백·간격 요약

  • 좌우 콘텐츠 패딩: 24px
  • 바디 상단 패딩: 32px (헤더 하단에서)
  • "작품 사진" 라벨 → 업로드 CTA: margin-bottom 16px
  • 업로드 CTA → 안내 문구: margin-bottom 16px
  • 안내 문구 줄 간격: line-height 1.6, 문구 간 margin-bottom 4px
  • 안내 문구 → 이미지 그리드: margin-bottom 16px
  • 이미지 그리드 gap: 12px (행·열 동일)
  • 삭제 X 버튼 offset: top:6px, right:6px
  • MAIN 뱃지 offset: bottom:6px, left:6px
  • 그리드 → "대표 사진을 선택해주세요" 안내: margin-top 16px
  • 이전/완료 버튼 gap: 12px
  • 이전/완료 → 홈 인디케이터: bottom 34px

9. 적용 디자인 토큰

  • 요소: 헤더 배경 → Token: --bg → 값: #FAFAF8
  • 요소: 헤더 타이틀 → Token: --sans · 17px · 700 · ls:-0.02em → 값: Pretendard Variable
  • 요소: 취소 버튼 → Token: --sans · 13px · 500 · --charcoal → 값: #1A1A1A
  • 요소: 섹션 라벨 → Token: --sans · 13px · 600 · --charcoal → 값: #1A1A1A
  • 요소: 업로드 CTA 배경 → Token: --charcoal → 값: #1A1A1A
  • 요소: 업로드 CTA 텍스트 → Token: --sans · 14px · 600 → 값: #FFFFFF
  • 요소: 안내 문구 → Token: --sans · 12px · --text-muted → 값: #888888, lh:1.6
  • 요소: 이미지 셀 배경 → Token: --paper → 값: #F0EDE6
  • 요소: MAIN 뱃지 → Token: --red-brand · --mono · 9px · 700 → 값: #961E23 bg, #FFF text
  • 요소: 대표 셀 outline → Token: --red-brand → 값: 2px solid #961E23
  • 요소: 삭제 X 버튼 → Token: --charcoal → 값: 22×22px #1A1A1A bg, X SVG #FFF
  • 요소: 이전 버튼 → Token: --charcoal · --sans · 14px · 600 → 값: #1A1A1A bg, #FFF text
  • 요소: 완료 버튼(활성) → Token: --cta-gradient · --sans · 14px · 600 → 값: linear-gradient(135deg, #961E23, #B22A30, #961E23), #FFF text
  • 요소: 완료 버튼(비활성) → 값: bg rgba(26,26,26,0.15), text rgba(26,26,26,0.35)
  • 요소: placeholder 아이콘 → 값: SVG 28px stroke rgba(6,6,6,0.2)
  • 요소: placeholder 텍스트 → Token: --mono · 9px · ls:0.08em → 값: rgba(6,6,6,0.25)
← 이전 화면: MKT-004 다음 화면: MKT-007 →