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

작품 상세 페이지

MKT-013 · 2026. 03. 04

화면 이름 작품 상세 페이지
화면 위치 마켓 > 작품 상세페이지
화면 ID MKT-013
작성일 2026. 03. 04
9:41

김작가

작품명 세부

12,345,678원

보증서 인증 보관 대행 안전 거래
작품정보
배송정보
취소환불
리뷰
단체문의
작가명 김작가
제작연도 2024
카테고리 원화
작품재료 캔버스에 유화
작품사이즈 100 x 80 cm
에디션 1/1
작품 상태 양호

작가 소개

작가 소개 텍스트가 들어갑니다. 작가의 경력, 수상 이력, 작품 세계에 대한 간략한 설명이 포함됩니다.

차트 프라이빗 세일러

프라이빗 세일러 정보

연관된 다른 작품

이작가

박작가

구매 문의 하기
1
2
3
4
5
6
7
8
9
9:41

김작가

작품명 세부

12,345,678원

이름

이름을 입력해주세요

연락처

연락처를 입력해주세요

문의 내용 (선택)

문의 내용을 입력해주세요
구매문의 (본인인증)
10
Description
0 화면 접근 조건
  • 마켓/홈 등에서 작품 카드 클릭 시 진입
  • 로그인/비로그인 모두 접근 가능
  • 찜/구매문의는 로그인 필요
1 헤더
  • 구성
    • 좌측: 뒤로가기 아이콘
    • 우측: 찜(북마크) + 공유 아이콘
  • 동작
    • 뒤로가기 → 이전 화면
    • 찜 → 로그인 시 토글, 비로그인 시 LOG-009 노출
    • 공유 → 시스템 공유 시트
2 작품 기본정보
  • 구성
    • 대표 이미지 (히어로 썸네일)
    • 작가명
    • 작품명
    • 가격
    • 안전거래보장 뱃지 (보증서 인증 / 보관 대행 / 안전 거래)
2-1 작품 정보 탭
  • 작품정보 / 배송정보 / 취소환불 / 리뷰 / 단체문의 탭 전환
  • 활성 탭 하단 2px 인디케이터
2-2 작품 정보 상세
  • 작품 스펙 테이블
    • 작가명, 제작연도, 카테고리, 작품재료, 작품사이즈, 에디션, 작품 상태
2-3 작품 이미지
  • 갤러리 이미지 5장 세로 스택 노출
  • 이미지 클릭 시 풀스크린 뷰어 가능 (추후 정의)
2-4 작가 소개
  • 작가 프로필 텍스트 소개
  • 작가명 클릭 시 작가 프로필 상세 화면 이동 (추후 정의)
3 구매 문의
  • 구매 문의 하기 CTA 버튼 클릭 시 바텀시트 노출
  • 바텀시트 구성
    • 작품 썸네일 + 작가명/작품명/가격
    • 이름 입력 (필수)
    • 연락처 입력 (필수)
    • 문의 내용 입력 (선택)
    • 구매문의(본인인증) CTA 버튼
  • 비로그인 시 구매문의 클릭 → LOG-009 로그인 안내 모달
4 공통 규칙
  • 비로그인 시 구매문의 LOC-008 노출
  • 찜 토글 동작
    • 로그인 사용자 → 찜 상태 토글
    • 비로그인 사용자 → LOG-009 노출
  • 공유 기능 → OS 네이티브 공유 시트

Design Output

UI 디자인 산출물

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

9:41

김작가

작품명 세부

12,345,678원

보증서 인증 보관 대행 안전 거래
작품정보
배송정보
취소환불
리뷰
단체문의
작가명 김작가
제작연도 2024
카테고리 원화
작품재료 캔버스에 유화
작품사이즈 100 x 80 cm
에디션 1/1
작품 상태 양호

작가 소개

작가 소개 텍스트가 들어갑니다. 작가의 경력, 수상 이력, 작품 세계에 대한 간략한 설명이 포함됩니다.

차트 프라이빗 세일러

PRIVATE SELLER INFO

연관된 다른 작품

이작가

박작가

구매 문의 하기
9:41

김작가

작품명 세부

12,345,678원

이름

이름을 입력해주세요

연락처

연락처를 입력해주세요

문의 내용 (선택)

문의 내용을 입력해주세요
구매문의 (본인인증)
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 아이콘 back + bookmark + share · square/miter --charcoal, 1.5px stroke
작품 이미지 --paper + linen Paper-Catalog 메타포, CHRT 워터마크
작가명 --sans · 14px · 600 Pretendard, --charcoal
작품명 --sans · 13px Pretendard, --text-muted
가격 --sans · 22px · 700 Pretendard, --charcoal
뱃지 --mono · 10px · border TASA Orbiter, rgba(26,26,26,0.12) border
정보 테이블 --sans · 12px · border-bottom rgba(26,26,26,0.06) 구분선
작품 갤러리 --paper + linen Paper-Catalog 썸네일, 5장 스택
구매문의 CTA --red-brand bg · #fff 직각 (R=0), 50px, 15px 600
바텀시트 --bg · 직각 border-radius: 0, handle bar rgba(26,26,26,0.12)
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 마켓/홈 등에서 작품 카드 클릭 시 진입
  • 로그인/비로그인 모두 접근 가능
  • 찜/구매문의는 로그인 필요
1 헤더
  • 구성
    • 좌측: 뒤로가기 아이콘
    • 우측: 찜(북마크) + 공유 아이콘
  • 동작
    • 뒤로가기 → 이전 화면
    • 찜 → 로그인 시 토글, 비로그인 시 LOG-009 노출
    • 공유 → 시스템 공유 시트
2 작품 기본정보
  • 구성
    • 대표 이미지 (히어로 썸네일)
    • 작가명
    • 작품명
    • 가격
    • 안전거래보장 뱃지 (보증서 인증 / 보관 대행 / 안전 거래)
2-1 작품 정보 탭
  • 작품정보 / 배송정보 / 취소환불 / 리뷰 / 단체문의 탭 전환
  • 활성 탭 하단 2px 인디케이터
2-2 작품 정보 상세
  • 작품 스펙 테이블
    • 작가명, 제작연도, 카테고리, 작품재료, 작품사이즈, 에디션, 작품 상태
2-3 작품 이미지
  • 갤러리 이미지 5장 세로 스택 노출
  • 이미지 클릭 시 풀스크린 뷰어 가능 (추후 정의)
2-4 작가 소개
  • 작가 프로필 텍스트 소개
  • 작가명 클릭 시 작가 프로필 상세 화면 이동 (추후 정의)
3 구매 문의
  • 구매 문의 하기 CTA 버튼 클릭 시 바텀시트 노출
  • 바텀시트 구성
    • 작품 썸네일 + 작가명/작품명/가격
    • 이름 입력 (필수)
    • 연락처 입력 (필수)
    • 문의 내용 입력 (선택)
    • 구매문의(본인인증) CTA 버튼
  • 비로그인 시 구매문의 클릭 → LOG-009 로그인 안내 모달
4 공통 규칙
  • 비로그인 시 구매문의 LOC-008 노출
  • 찜 토글 동작
    • 로그인 사용자 → 찜 상태 토글
    • 비로그인 사용자 → LOG-009 노출
  • 공유 기능 → OS 네이티브 공유 시트
← 이전 화면: MKT-012 다음 화면: MYP-001 →