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

판매등록 - 직접 업로드 - 작가 - 이미지

MKT-008 · 2026. 03. 04

화면 이름 판매등록 - 직접 업로드 - 작기 - 이미지
화면 위치 마켓 > 판매 등록 > 직접업로드 > 작기명 > 이미지
화면 ID MKT-008
작성일 2026. 03. 04
9:41
마켓 - 판매 등록
취소

작가 이름

작가 이름을 입력해주세요
다음
1-1
1-2
1-3
9:41
마켓 - 판매 등록
취소

작품 사진 - 최대 5장

작품 사진 업로드

JPG, PNG, HEIC 형식 / 장당 10MB 이하

이전
다음
2
9:41
마켓 - 판매 등록
취소

작품 사진 - 최대 5장

대표

대표 사진을 선택해주세요

이전
다음
3
Description
0 화면 접근 조건
  • MKT-003에서 직접 업로드 선택 시 진입
  • 로그인 사용자만 접근 가능
  • 직접 업로드 플로우 3단계 (작가 이름 → 이미지 → 보증서)
1-1 헤더
  • 구성
    • 좌측: 뒤로가기 아이콘 + "마켓 - 판매 등록" 타이틀
    • 중앙: 타이틀
    • 우측: 취소 텍스트 버튼
  • 동작
    • 뒤로가기 클릭 시 → 이전 단계로 이동
    • 취소 클릭 시 → MKT-012 (판매등록 취소 확인 화면)으로 이동
1-2 작가 이름 입력필드
  • 구성
    • 텍스트 입력 필드
    • 플레이스홀더: "작가 이름을 입력해주세요"
  • 동작
    • 입력 시 자동완성 리스트 노출
    • 자동완성 항목 선택 가능
    • 직접 입력도 허용
1-3 다음 버튼
  • 입력 전에는 비활성화 (opacity 낮춤)
  • 작가 이름 입력 시 다음 버튼 활성화
  • 클릭 시 이미지 업로드 화면으로 이동
2 이미지 업로드화면
  • MKT-006과 동일한 UI/동작
    • 업로드 영역 CTA (드래그 앤 드롭 / 클릭)
    • 최대 5장 제한
    • 허용 형식: JPG, PNG, HEIC
    • 장당 10MB 이하
  • 이전/다음 버튼으로 단계 이동
3 작품 사진 확인 및 메인 사진 선택
  • 구성
    • 업로드된 이미지 2열 그리드로 노출
    • 각 이미지 우측 상단에 X(삭제) 버튼
    • 첫 번째 이미지에 "대표" 뱃지 기본 표시
  • 동작
    • 이미지 클릭 시 대표 사진으로 선택
    • X 버튼 클릭 시 해당 이미지 삭제
    • 최소 1장 이상 업로드 시 다음 진행 가능
4 토스트 메시지 정의
  • 이미지 업로드 실패
    • "이미지 업로드에 실패했습니다. 다시 시도해주세요."
  • 파일 형식 오류
    • "지원하지 않는 파일 형식입니다. (JPG, PNG, HEIC만 가능)"
  • 파일 용량 초과
    • "파일 용량이 10MB를 초과합니다."
5 공통 규칙
  • 직접 업로드 플로우에서는 OCR/보증서 관련 로직 없음
  • 단계별 필수 입력값 미충족 시 다음 단계 진행 불가
  • 이전 단계 이동 시 입력 데이터 유지

Design Output

UI 디자인 산출물

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

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

작가 이름

작가 이름을 입력해주세요
다음
9:41
마켓 - 판매 등록
취소

작품 사진 - 최대 5장

작품 사진 업로드

JPG, PNG, HEIC 형식 / 장당 10MB 이하

이전
다음
9:41
마켓 - 판매 등록
취소

작품 사진 - 최대 5장

대표

대표 사진을 선택해주세요

이전
다음
Applied Design Tokens
요소Token
전체 배경 --bg #FAFAF8
헤더 --sans · 14px · 600 Pretendard, --charcoal, square/miter 아이콘
입력 필드 --sans · 14px · border-bottom 1px rgba(26,26,26,0.15) 하단 보더, 직각
플레이스홀더 --text-muted #888888
이미지 그리드 2col · 12px gap --paper 배경, CHRT 워터마크, 직각
X 삭제 버튼 circle · --charcoal bg 22px, border-radius:50%, stroke: square
이전/다음 버튼 --charcoal bg · 50px 직각, 15px, 600 weight
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • MKT-003에서 직접 업로드 선택 시 진입
  • 로그인 사용자만 접근 가능
  • 직접 업로드 플로우 3단계 (작가 이름 → 이미지 → 보증서)
1-1 헤더
  • 구성
    • 좌측: 뒤로가기 아이콘 + "마켓 - 판매 등록" 타이틀
    • 중앙: 타이틀
    • 우측: 취소 텍스트 버튼
  • 동작
    • 뒤로가기 클릭 시 → 이전 단계로 이동
    • 취소 클릭 시 → MKT-012 (판매등록 취소 확인 화면)으로 이동
1-2 작가 이름 입력필드
  • 구성
    • 텍스트 입력 필드
    • 플레이스홀더: "작가 이름을 입력해주세요"
  • 동작
    • 입력 시 자동완성 리스트 노출
    • 자동완성 항목 선택 가능
    • 직접 입력도 허용
1-3 다음 버튼
  • 입력 전에는 비활성화 (opacity 낮춤)
  • 작가 이름 입력 시 다음 버튼 활성화
  • 클릭 시 이미지 업로드 화면으로 이동
2 이미지 업로드화면
  • MKT-006과 동일한 UI/동작
    • 업로드 영역 CTA (드래그 앤 드롭 / 클릭)
    • 최대 5장 제한
    • 허용 형식: JPG, PNG, HEIC
    • 장당 10MB 이하
  • 이전/다음 버튼으로 단계 이동
3 작품 사진 확인 및 메인 사진 선택
  • 구성
    • 업로드된 이미지 2열 그리드로 노출
    • 각 이미지 우측 상단에 X(삭제) 버튼
    • 첫 번째 이미지에 "대표" 뱃지 기본 표시
  • 동작
    • 이미지 클릭 시 대표 사진으로 선택
    • X 버튼 클릭 시 해당 이미지 삭제
    • 최소 1장 이상 업로드 시 다음 진행 가능
4 토스트 메시지 정의
  • 이미지 업로드 실패
    • "이미지 업로드에 실패했습니다. 다시 시도해주세요."
  • 파일 형식 오류
    • "지원하지 않는 파일 형식입니다. (JPG, PNG, HEIC만 가능)"
  • 파일 용량 초과
    • "파일 용량이 10MB를 초과합니다."
5 공통 규칙
  • 직접 업로드 플로우에서는 OCR/보증서 관련 로직 없음
  • 단계별 필수 입력값 미충족 시 다음 단계 진행 불가
  • 이전 단계 이동 시 입력 데이터 유지
← 이전 화면: MKT-007 다음 화면: MKT-009 →