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

판매등록 - 직접 업로드 - 완료

MKT-011 · 2026. 03. 20

화면 이름 판매등록 - 직접 업로드 - 완료
화면 위치 마켓 > 판매 등록 > 직접업로드 완료 화면
화면 ID MKT-011
작성일 2026. 03. 20
MKT-011
Description
0 화면 접근 조건
  • 본 화면은 MKT-010 (직접 업로드 · 작품 정보 입력) 단계에서 모든 필수 정보를 입력하고 [완료] 버튼을 정상적으로 클릭한 경우에만 접근 가능
  • 직접 업로드 플로우의 최종 완료 화면
  • 작품 등록 API가 정상적으로 처리 완료된 이후에만 노출
1 완료 화면
  • 작품 등록이 성공적으로 완료되었음을 명확히 전달하는 피드백 화면
    • 구성
      • 완료 아이콘(체크 마크)
      • 안내 문구
        • 작품 등록이 완료되었습니다
      • 본 화면은 정보 입력 불가한 읽기 전용 상태
      • 완료 문구 및 아이콘은 화면 중앙에 고정 노출
      • [확인] 버튼 클릭 시:
        • MKT-001 (마켓 메인 화면) 으로 이동
        • 등록 완료된 작품은 마켓 정책에 따라 노출 여부 결정됨
2 토스트 메시지 정의
  • 기본적으로 본 화면에서는 토스트 메시지 노출 없음
  • 단, 완료 처리 중 네트워크 오류 발생 시:
    • 토스트 메시지 노출 후 이전 단계(MKT-010)로 복귀 가능
    • 일시적인 오류가 발생했습니다. 다시 시도해주세요
3 공통 규칙
  • 본 화면 진입 시:
    • 직접 업로드 플로우의 모든 입력 데이터는 초기화
    • 뒤로가기 제스처 및 상단 < 버튼 비활성 또는 무시 처리
    • 동일 작품 등록 완료 후 히스토리 접근 불가
  • 작품 노출 여부:
    • 직접 업로드의 경우, 즉시 마켓 노출

Design Output

UI 디자인 산출물

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

9:41

작품 등록이 완료되었습니다

Untitled Work

원화 · 72×60cm · 2024

확인
개발 구현 가이드 — MKT-011 판매등록 - 직접 업로드 - 완료

Update History

2026.03.26감도 개선 — 작품 썸네일(120×120) + 등록 작품 요약 정보 추가. 체크마크 40×40으로 축소. 모션 토큰 치환(ease-out → var(--ease-decelerate))
2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정
2026.03.17PM Description 전면 교체(4섹션), 완료 문구 디스크립션 기준 동기화, 구현 가이드 최신화
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.11확인 버튼 CTA 레드 그라디언트 적용, 구현 가이드 추가 (7섹션: 화면구조, 레이어구조, 완료아이콘, 확인버튼, 버튼동작, 완료화면접근조건, 에러처리)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

작품 등록 완료 피드백 화면. 단일 상태, 헤더·뒤로가기 없음. 화면 중앙에 64×64px 체크마크 아이콘 + 완료 텍스트, 하단 고정 CTA "확인" 버튼 1개로 구성. 직접 업로드 플로우(MKT-010 작품 정보 완료 후)에서만 진입 가능하며, 등록 API 성공 응답 후에만 노출된다. 간편 업로드 완료(MKT-007)와 동일한 UX 패턴을 따른다.

2. 레이어 구조 + 치수

# 영역 높이/위치 비고
1상태 표시줄44px, top:0iOS status bar
2중앙 피드백 영역height:calc(100% - 130px), flexbox column center작품 썸네일 120×120 + 체크마크 40×40 + 완료 텍스트 + 작품 요약
3확인 CTAposition:absolute; bottom:42px; height:50pxvar(--cta-gradient), left/right:24px, 15px/600 #fff
4홈 인디케이터120×5px, bottom safe areavar(--charcoal) #1A1A1A, border-radius:5px
5전체 컨테이너393×852pxvar(--bg) #FAFAF8 배경, 좌우 padding:24px

체크마크 아이콘 상세

  • 외곽 컨테이너: 64×64px, border: 1.5px solid var(--charcoal) #1A1A1A, R=0 직각
  • 체크 SVG: 28×28px viewBox="0 0 24 24", stroke: var(--charcoal), stroke-width:1.5, stroke-linecap:square, stroke-linejoin:miter
  • 체크 path: polyline points="20 6 9 17 4 12"
  • 컨테이너 내부: display:flex; align-items:center; justify-content:center

완료 텍스트 상세

  • 카피: "작품 등록이 완료되었습니다"
  • 폰트: var(--sans) Pretendard, 18px, font-weight:700, letter-spacing:var(--ls-tight)
  • 색상: var(--charcoal) #1A1A1A
  • 정렬: text-align:center, margin-top:24px (아이콘과의 간격)

3. 핵심 인터랙션

  • 확인 버튼 탭: MKT-001 (마켓 메인 홈)으로 이동, navigation stack 전체 초기화
  • 스크롤: 없음 — 화면 전체가 정적 단일 뷰
  • 뒤로가기: 비활성 — 제스처 및 상단 < 버튼 모두 무시 처리

4. 상태 변화

  • 진입 조건: MKT-010에서 [완료] 클릭 → 등록 API 200 OK → 이 화면 진입
  • API 실패 시: 이 화면 미노출, MKT-010 유지 + 에러 토스트
  • 화면 진입 후: 판매 등록 플로우의 모든 입력 데이터 즉시 초기화 (메모리 해제)
  • 재진입 불가: 히스토리 스택에서 이 화면 접근 불가 (동일 작품 등록 완료 후)
  • 작품 노출: 판매 정책 / 검수 여부 / 마켓 운영 기준에 따라 결정 (이 화면과 무관)

5. 네비게이션 플로우

  • 진입: MKT-010 (작품 정보 완료) → [완료] → API 성공 → MKT-011
  • 이탈: [확인] 탭 → MKT-001 (마켓 메인), nav stack reset
  • 뒤로가기: 차단 — iOS 스와이프 백 / 안드로이드 백 버튼 모두 무시
  • 헤더: 없음 — 이 화면에는 헤더 바 자체가 존재하지 않음

6. 에러/예외 처리

  • 기본: 완료 화면에서는 토스트 없음 (순수 성공 피드백)
  • 일시적 오류 (API 타임아웃): MKT-010으로 자동 복귀 + 토스트 "일시적인 오류가 발생했습니다. 다시 시도해주세요"
  • 네트워크 오류: MKT-010으로 자동 복귀 + 에러 표시
  • 중복 등록 시도: 서버에서 차단, 토스트 안내

7. 모션 스펙

  • 화면 전환: MKT-010 → MKT-011 push 트랜지션, duration:400ms, easing:var(--ease-decelerate)
  • 작품 썸네일 등장: opacity 0→1, duration:400ms, easing:var(--ease-decelerate), delay:100ms
  • 체크마크 등장: opacity 0→1 + scale 0.8→1, duration:300ms, easing:var(--ease-decelerate), delay:300ms
  • 완료 텍스트 등장: opacity 0→1, duration:300ms, easing:var(--ease-decelerate), delay:450ms
  • 작품 요약 등장: opacity 0→1, duration:300ms, easing:var(--ease-decelerate), delay:550ms
  • CTA 등장: opacity 0→1, duration:300ms, easing:var(--ease-decelerate), delay:650ms
  • 확인 버튼 탭 → 이탈: 페이드 아웃, duration:300ms, easing:var(--ease-accelerate)

8. 여백·간격 요약

위치 값 비고
콘텐츠 좌우 padding24px중앙 영역 + CTA 모두 동일
체크마크 → 텍스트 간격24px (margin-bottom)아이콘 컨테이너 하단
CTA bottom 위치42pxposition:absolute; bottom:42px
CTA 높이50pxR=0 직각, var(--cta-gradient)
중앙 영역 수직 정렬height:calc(100% - 130px)flexbox column, justify-content:center, align-items:center

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 작품 썸네일: 120×120px, bg --alpha-4, R=0 직각, object-fit:cover (실제 이미지 시). placeholder SVG stroke:--text-muted 0.8px
  • 작품 요약: 작품명 --sans 13px/600 --charcoal, 메타 --sans 12px --text-muted, text-align:center, mt:12px
  • 완료 아이콘: 40×40px 직각 컨테이너(R=0) · border: 1.5px solid --charcoal, 내부 20×20 체크 SVG stroke-linecap:square/stroke-linejoin:miter
  • 완료 문구: --sans · 18px · 700 → Pretendard, --charcoal, center
  • 확인 버튼: --cta-gradient bg · #fff → 직각 (R=0), 50px height, 15px 600
  • 홈 인디케이터: --charcoal → 120x5px, border-radius: 5px
  • 좌우 패딩: 24px → 전체 콘텐츠 마진
← 이전 화면: MKT-010 다음 화면: MKT-012 →