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

작품 상세 페이지

MKT-013 · 2026. 03. 19

화면 이름 작품 상세 페이지

화면 위치 마켓 > 작품 상세페이지

화면 ID MKT-013

작성일 2026. 03. 19

Description

0	화면 접근 조건	본 화면은 마켓 내 작품 카드 클릭 시 진입 가능한 작품 상세 페이지 접근 주체에 따라 일부 UI 요소 노출 여부가 달라짐 접근 가능 사용자 로그인 사용자 비로그인 사용자 모두 접근 가능 홈 화면(HOM-001 ~ HOM-003) 마켓 메인 화면(MKT-001) 검색 결과 화면(MKT-001 / MKT-002) 마이페이지 화면(MYP-003 ~ MYP-008) 유사 작품 추천 영역 내 작품 카드 클릭 시 사용자 유형별 접근 조건 및 차이 일반 사용자(비작성자) 작품 상세 정보 열람 가능 구매 문의하기 버튼 노출 헤더 내 수정하기 버튼 비노출 작품 상세 정보 열람 가능 헤더 내 수정하기 버튼 노출 구매 문의하기 버튼 노출 여부는 정책에 따라 결정 (※ 본 화면에서는 구매 문의 버튼 자체는 동일하게 유지) 삭제되었거나 비공개 처리된 작품의 경우 접근 불가 접근 시 서버 상태에 따라 오류 발생 시 에러 화면 또는 토스트 메시지 노출 (정책 별도 정의)
1-1	헤더	구성 좌측: 뒤로가기 버튼 중앙: 화면 타이틀(고정 노출 없음) 우측: 찜 버튼 공유하기 버튼 (작성자일 경우) 수정하기 버튼 뒤로가기 버튼 클릭 시 이전 화면으로 이동 별도 확인 모달 없음 로그인 상태 클릭 시 해당 작품 찜 처리 찜 완료 토스트 메시지 노출 클릭 시 로그인 유도 모달 노출(LOG-008) 모달 선택지: 로그인하기 취소 로그인 여부와 관계없이 사용 가능 클릭 시 OS 기본 공유 시트 노출 공유 항목: 작품 상세 페이지 딥링크 작품명 대표 이미지 해당 작품을 등록한 작성자에게만 노출 클릭 시 작품 수정 플로우로 이동 (MKT-006) 작품 등록 화면에 전체 정보가 기입된 상태로 이동 간편 업로드/직접 업로드 형식 상관없이 MKT-006 이동
1-2	작품 이미지	구성 작품 대표 이미지 영역 이미지 슬라이드(Carousel) 형태 이미지 인디케이터(페이지 점 또는 카운트) 노출 최대 5장, 최소 1장 이상 필수 노출 판매자가 등록한 작품 이미지 중 대표 이미지가 첫 번째로 노출 작품 상세 설명 영역(1-5)에 등록된 이미지와 동일한 이미지 셋 사용 이미지 수가 2장 이상일 경우 좌/우 스와이프 가능 이미지 수가 1장일 경우 슬라이드 동작 및 인디케이터 비노출 동작 좌/우 스와이프 시 이미지 전환 이미지 탭 시 전체 화면 이미지 뷰어(확대 보기) 노출 (확대 보기 화면 ID는 추후 정의) 확대 보기에서도 동일하게 슬라이드 가능 이미지 로딩 전에는 스켈레톤 UI 또는 플레이스홀더 노출 이미지 비율은 업로드 원본 비율 유지하되, 영역 초과 시 중앙 기준 크롭 이미지 로딩 실패 시 기본 플레이스홀더 이미지 노출
1-3	작가+ 작품 카운팅 + 작품 가격 + 유사 도상 낙찰가 정보	구성 작품 가격 정보 카드 작품 가격(판매가) 유사 도상 낙찰가 정보 인포메이션 버튼(i 아이콘) 천 단위 콤마 적용 작품 가격은 판매자가 설정한 희망 판매 가격을 기준으로 노출 가격 정보는 모든 사용자에게 동일하게 노출됨 (로그인 여부 무관) 유사 도상 낙찰가 실제 판매가와는 무관하며, 참고 지표로만 활용됨 유사 도상 낙찰가 영역 내 인포메이션 버튼 클릭 시 토스트 메시지 노출 토스트 메시지 문구: “차트 AI 시스템이 분석한 동일 작가∙유사 도상 기준 낙찰가입니다.” 가격 영역은 클릭 불가 영역 (정보 제공 목적) 인포메이션 버튼(i)만 인터랙션 요소로 동작 상태 처리 유사 도상 낙찰가 데이터가 없는 경우 해당 영역 미노출 인포메이션 버튼도 함께 미노출
1-4	작품 정보	구성 작품명 카테고리 재료 사이즈 제작연도 구성품 보증서 액자 작품 등급 작가명 제작연도 작품 재료 작품 사이즈 판매자가 작품명을 입력한 경우 입력된 작품명 그대로 노출 작품명 영역에 제목 없음 텍스트 노출 ※ 작품명이 없는 경우에도 작품 상세 페이지 접근 및 구매 문의에는 영향 없음 기타 정보 노출 규칙 작가명, 제작연도, 재료, 사이즈는 판매자가 입력한 정보를 기준으로 노출 입력되지 않은 항목은 해당 영역 미노출 또는 - 처리 (표현 방식은 디자인 정책에 따름) 본 영역은 정보 제공 목적의 영역으로 별도 클릭 액션 없음
1-5	작품 상세 설명	구성 작품 설명 텍스트 영역 작품 설명 이미지 영역(슬라이드) 노출 규칙 판매자가 입력한 작품 설명 텍스트를 그대로 노출 줄바꿈 및 문단 구분은 입력값 기준 유지 텍스트가 없는 경우 해당 텍스트 영역은 미노출 텍스트 영역은 읽기 전용 별도 클릭 액션 없음 구성 작품 설명에 첨부된 이미지 리스트 일렬(세로 스택) 형태로 순차 노출 최소 1장 이상, 최대 5장까지 노출 판매자가 업로드한 이미지 순서를 그대로 유지하여 위에서 아래로 노출 각 이미지는 독립된 블록 형태로 표시됨 작품 상단 이미지 영역(1-2)과 동일한 이미지 셋 사용 동작 동작 없음 이미지 로딩 전에는 스켈레톤 UI 또는 플레이스홀더 노출 이미지 로딩 실패 시 기본 이미지로 대체 노출 이미지 비율은 원본 비율 유지
1-6	거래 프로세스	구성 작품 관련 부가 정보가 노출되는 영역 본 영역에 포함되는 정보의 내용 구조만 정의하며, UI 레이아웃 및 시각 디자인은 추후 디자이너에 의해 변경될 예정 작품 상태(컨디션) 거래 관련 유의사항 기타 작품 판매 및 거래에 필요한 안내 문구 ※ 위 정보들은 판매자가 입력한 값 또는 시스템 기준 값을 기반으로 노출됨 각 정보 항목은 존재하는 정보만 노출 정보가 없는 항목은 해당 영역에서 미노출 본 영역은 작품 상세 정보 흐름 중 보조 정보 제공 목적의 영역임 인터랙션 기본적으로 읽기 전용 영역 본 영역의 정보 순서 및 구분 기준은 유지 시각적 표현(카드형/리스트형/구분선 등)은 디자인 단계에서 조정 가능 기능 및 데이터 구조는 변경 없이 디자인만 변경 가능하도록 설계
1-7	유사 작품 추천	구성 유사 작품 추천 섹션 타이틀 작품 카드 리스트 최대 5개의 작품 카드 노출 1️차 기준 현재 작품과 동일 작가의 작품 동일 작가 작품 중 최신 등록순으로 정렬 동일 작가의 유사 작품이 없는 경우 현재 작품의 희망 판매 가격과 유사한 금액대의 작품 기준으로 추천 유사 금액대 작품 중 최신 등록순으로 정렬 ※ 1차 기준이 충족되는 경우, 2차 기준은 적용되지 않음 추천 가능한 작품이 있는 경우에만 영역 노출 추천 작품이 5개 미만인 경우: 가능한 수만큼만 노출 본 영역 전체 미노출 작품 카드 구성 작품 썸네일 이미지 작가명 작품 가격 작품 카드 클릭 시: 해당 작품의 작품 상세 페이지(MKT-013) 로 이동 공통 규칙 본 영역은 탐색 유도 목적의 보조 영역 현재 보고 있는 작품과 동일한 작품은 추천 리스트에 포함하지 않음 추천 로직은 서버 기준으로 처리하며, 클라이언트에서 임의 변경 불가
1-8	구매 문의하기 버튼	구성 하단 고정 CTA 버튼 구매 문의하기 로그인/비로그인 모두 버튼 노출 단, 비로그인 사용자는 문의 진행 불가 (로그인 유도) 판매 완료 상태인 작품은 버튼 비활성화 해당 작품 판매 사용자 버튼 비활성화 동작 로그인 사용자 버튼 클릭 시 → 2-1 구매 문의 바텀시트 노출 버튼 클릭 시 → 로그인 유도 모달(LOG-008) 노출
2	구매 문의 바텀시트	노출 트리거 작품 상세 화면(1-8)에서 [구매 문의하기] 버튼 클릭 시 노출 기존 작품 상세 화면은 딤 처리(dim) 되어 비활성화 화면 하단에서 바텀시트가 슬라이드 업 형태로 노출 바텀시트가 열린 동안: 배경(작품 상세)은 스크롤/탭/버튼 조작 불가 바텀시트 내부만 조작 가능 헤더 영역 우측: 닫기(X) 버튼 클릭 시 바텀시트 닫힘 배경 딤 해제 및 작품 상세 화면으로 복귀 구매 문의 단계임을 안내하는 텍스트 블록 결제/구매 확정이 아님을 명확히 고지하는 목적 사용자 입력 필드(문의 메시지 입력) Placeholder 포함 입력 시 키보드 노출, 바텀시트 내에서 입력 가능한 상태 유지 동의/체크 영역 체크박스 1개 (개인정보 수집∙이용 동의) 체크 상태에 따라 CTA 활성화 조건에 영향 개인정보 수집∙이용 동의 버튼 클릭 시, 동의서 노출 하단 1개 메인 CTA 버튼(예: “문의하기”) 활성화 조건: 필수 입력값 충족(문의 메시지) 체크박스 필수 동의(필요 시) 구매 문의 요청 처리(서버 요청) 성공 시 바텀시트 닫힘 + 후속 화면/토스트 정책은 3/4에서 정의(이번 항목 제외) 닫기/이탈 규칙 X 버튼 클릭: 즉시 닫힘(입력 내용 유지/초기화 정책은 공통 규칙에서 확정) 딤 영역 탭: (정책 선택 필요) 기본값: 탭 시 닫히지 않음(오작동 방지)
3	토스트 메시지 정의	유사 도상 낙찰가 정보 안내 노출 조건 1-3 유사 도상 낙찰가 영역의 인포메이션 버튼(i) 클릭 시 화면 하단 토스트 메시지 노출 자동으로 일정 시간 후 사라짐 토스트 문구 차트 AI 시스템이 분석한 동일 작가∙유사 도상 기준 낙찰가입니다. 구매 문의 바텀시트에서 필수 입력값 미충족 상태로 CTA 클릭 시 토스트 문구 문의 내용을 입력해 주세요. 토스트 문구 빠른 시간 안에 담당자가 연락드리겠습니다
4	공통 규칙	본 화면은 작품 상세 정보 확인 전용 화면 스크롤 가능한 단일 페이지 구조 화면 상태/데이터 유지 작품 상세 진입 시 작품 기본 정보/이미지/추천 리스트는 서버 응답 기준으로 렌더링 네트워크 지연 시 각 영역은 스켈레톤/플레이스홀더로 표시 후 로딩 완료 시 치환 이미지(대표/상세)는 로딩 실패 시 기본 대체 이미지 (placeholder) 노출 및 재시도 가능(UX는 디자이너 가이드에 따름) 본 화면은 세로 스크롤 페이지이며, 상단(헤더/작품 이미지 영역) 이후 정보 영역이 자연스럽게 이어지는 구조 하단 CTA(구매 문의하기)는 고정 영역(Sticky)으로 동작하며, 콘텐츠 스크롤과 독립적으로 항상 노출

Design Output

UI 디자인 산출물

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

9:41

원화

김선우 Kim SunWoo

The Protectors

조회수 1,248 · 찜수 87 · 문의수 23

작품 가격 20,000,000원

유사 도상 낙찰가 : 22,000,000원

시리즈 사이즈 낙찰일 경매사

The Protectors 100호 2024.07 서울경매

무제 (2023) 80호 2023.11 케이옥션

작품 정보

작품명 The Protectors

카테고리 회화

재료 gouache on canvas

사이즈 162 × 130.6 cm

제작연도 2024

구성품

보증서 액자

가격 제안 가능

작품 등급 A

작품 이미지

작품 설명

이안온 작가의 무제 시리즈는 색채와 질감의 상호작용을 통해 내면의 감각을 캔버스 위에 펼쳐낸다. 두터운 임파스토 기법과 유기적인 붓 터치로 구성된 이 작품은 보는 이로 하여금 작가의 감성 세계로 자연스럽게 이끌린다. 대형 포맷의 화면 속에서 색면들이 서로 충돌하고 조화를 이루며 독특한 공간감을 형성한다.

CHAART CONCIERGE

안전하게,
거래를 도와드립니다.

전담 매니저가 작품 구매의 전 과정을 함께합니다.

전담 매니저 배정

작품을 받아보는 순간까지 차트의 매니저가 관리합니다.

개인정보 보호

매니저가 거래를 직접 조율하여 개인정보를 보호합니다.

안전 거래 보장

배송 완료 전까지 판매 대금은 안전하게 보호됩니다.

PURCHASE FLOW

작품
문의

안내
조율

정밀
검수

인보이스
발행

작품
수령

상세 구매 가이드

CHRT. 투명하고 안전한 거래를 약속드립니다.
전담 매니저가 구매의 전 과정을 가이드해 드립니다.

작품 문의

마음에 드는 작품에 문의 남기세요. 전담 매니저가 즉시 배정됩니다.

안내 및 조율

담당자가 작품의 상세 정보와 구매 절차를 1:1로 안내합니다.

정밀 검수

차트 작품 관리팀이 실물을 직접 검수합니다.

인보이스 발행

입금 확인 후 온라인 인보이스가 발행됩니다.

작품 수령

직접 방문 수령 원칙. 어려우신 경우 전문 운송 업체를 통해 인계.

PICK-UP INFO

ADDR서울 영등포구 의사당대로 83 (오투타워)

TIME평일 09:30 – 18:30

PAYMENT

우리은행 1005 – 604 – 511670

(주)차트

유사 작품 추천

이안온

18,000,000원

이안온

22,000,000원

이안온

16,000,000원

구매 문의하기

9:41

CHAART CONCIERGE

안전하게, 거래를 도와드립니다.

전담 매니저 배정

개인정보 보호

안전 거래 보장

PURCHASE FLOW

작품
문의

안내
조율

정밀
검수

인보이스
발행

작품
수령

상세 구매 가이드

유사 작품 추천

이안온

18,000,000원

이안온

22,000,000원

이안온

16,000,000원

구매 문의하기

구매 문의

구매 문의 단계이며, 결제 및 구매 확정이 아닙니다.
담당 매니저가 빠른 시간 안에 연락드리겠습니다.

문의 내용

문의 내용을 입력해주세요

개인정보 수집∙이용에 동의합니다 (필수)

문의하기

9:41

원화

김선우 Kim SunWoo

The Protectors

조회수 1,248 · 찜수 87 · 문의수 23

작품 가격 20,000,000원

유사 도상 낙찰가 : 22,000,000원

시리즈 사이즈 낙찰일 경매사

The Protectors 100호 2024.07 서울경매

무제 (2023) 80호 2023.11 케이옥션

작품 정보

작품명 The Protectors

카테고리 회화

재료 gouache on canvas

사이즈 162 × 130.6 cm

제작연도 2024

구성품

보증서 액자

가격 제안 가능

작품 등급 A

작품 이미지

작품 설명

CHAART CONCIERGE

안전하게,
거래를 도와드립니다.

전담 매니저가 작품 구매의 전 과정을 함께합니다.

전담 매니저 배정

작품을 받아보는 순간까지 차트의 매니저가 관리합니다.

개인정보 보호

매니저가 거래를 직접 조율하여 개인정보를 보호합니다.

안전 거래 보장

배송 완료 전까지 판매 대금은 안전하게 보호됩니다.

PURCHASE FLOW

작품
문의

안내
조율

정밀
검수

인보이스
발행

작품
수령

상세 구매 가이드

CHRT. 투명하고 안전한 거래를 약속드립니다.
전담 매니저가 구매의 전 과정을 가이드해 드립니다.

작품 문의

마음에 드는 작품에 문의 남기세요. 전담 매니저가 즉시 배정됩니다.

안내 및 조율

담당자가 작품의 상세 정보와 구매 절차를 1:1로 안내합니다.

정밀 검수

차트 작품 관리팀이 실물을 직접 검수합니다.

인보이스 발행

입금 확인 후 온라인 인보이스가 발행됩니다.

작품 수령

직접 방문 수령 원칙. 어려우신 경우 전문 운송 업체를 통해 인계.

PICK-UP INFO

ADDR서울 영등포구 의사당대로 83 (오투타워)

TIME평일 09:30 – 18:30

PAYMENT

우리은행 1005 – 604 – 511670

(주)차트

유사 작품 추천

이안온

18,000,000원

이안온

22,000,000원

이안온

16,000,000원

구매 문의하기

개발 구현 가이드 — MKT-013 작품 상세페이지

Update History

2026.03.26감도 개선 — 모션 토큰 전량 치환(ease-out → var(--ease-decelerate), ease-in → var(--ease-accelerate), cubic-bezier(0.25,0,0.15,1) → var(--ease-hero-reveal), cubic-bezier(0.4,0,0.2,1) → var(--ease-material)). Carousel CSS transition 토큰 적용

2026.03.17구현 가이드 전면 최신화 — 산출물 대조 수정 12건: Phone 1 height 4273px, Carousel 세그먼트 바(도트→3px bar), 거래 5단계(6→5), 약속 28×28(24→28), 타임라인 9×9 dot(40→9), CTA 50px(80→50), Phone 3 인터랙티브 프로토타입(dissolve 헤더+sticky CTA) 섹션 신규, 아코디언 상세 구매 가이드 섹션 추가

2026.03.17PM Description 교체 (Figma 12섹션 최신화) + 산출물-가이드 충돌 18건 수정: 바텀시트 전면 교체(X버튼·안내텍스트·문의메시지1개·동의체크·"문의하기" CTA), 작품 최종가→작품 가격, 작품정보 8→5필드, 유사작품카드 작품명 제거, LOG-009→LOG-008, #6B6B6B→#555555, 토큰 타이포 6건 교정

2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성

2026.03.13Design Description 독립 섹션 → 개발 구현 가이드 병합 (Update History 이동, 중복 제거, 섹션 번호 zone ID 포맷으로 통일); 피그마 node 149-5665 기준 Description 전면 최신화

2026.03.12Figma node 129-1825 기준 완전 재작성

2026.03.11구매 CTA 레드 그라디언트 적용, 헤더 HOM-005 스킬 교체, 구현 가이드 추가 (7섹션)

2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

마켓 작품 상세 페이지. 스크롤 가능한 롱 폼 구성으로 10개 섹션이 순서대로 배치된다: ① 헤더(48px) → ② Hero Carousel(393×393px, 1:1 full-width, 세그먼트 바 인디케이터 5개) → ③ 작가/가격/유사도상 낙찰가 → ④ 작품 정보(8 fields) → ⑤ 작품 이미지 갤러리(5장 세로 스택) → ⑥ 작품 상세 설명 → ⑦ 차트 거래(차콜 히어로 배너 + 약속 3개 + PURCHASE FLOW 5단계 타임라인 + 아코디언 상세 구매 가이드) → ⑧ 유사 작품 추천(3카드 가로 스크롤) → ⑨ 구매 문의 CTA(50px). 별도 바텀시트로 구매 문의 폼을 제공한다. Phone 3(852px)은 실제 모바일 뷰 인터랙티브 프로토타입으로, sticky CTA + dissolve 헤더 스크롤 동작을 시연한다.

접근 조건

진입 경로: 마켓 내 작품 카드 클릭 / HOM-001~003, MKT-001~002, MYP-003~008, 유사 작품 추천 카드
로그인/비로그인 공통: 상세 정보 전체 열람 가능, 구매 문의 CTA 노출
작성자만: 헤더 수정하기 버튼 노출
비로그인 상태: 찜 탭 / 구매 문의 탭 → LOG-008 로그인 유도 모달
접근 제한: 삭제·비공개 작품 접근 시 에러 화면 또는 토스트

2. 레이어 구조 + 치수

Phone 1: 작품 상세 (height: 4273px)

#	영역	치수 / 위치	디자인 상세
1	Status Bar	44px, top:0	iOS 시스템 상태바
2	헤더	48px, padding:0 24px	back(left-abs, 10×18 SVG) + bookmark+share(right-abs, gap:16px), SVG 20×20 stroke:1.5 square/miter
3	Hero Carousel	393×393px (1:1 full-width)	object-fit:cover, 세그먼트 바 5개(flex:1, height:3px, gap:2px, bottom:0), active: `--red-brand`, inactive: `--charcoal`
4	작가 + 가격 + 낙찰가	padding:20px 24px	원화 뱃지(10px/500) + 작가명 24px/700 + 영문 serif 14px + 작품명 14px/500 + 통계(조회/찜/문의) + 가격 26px/700 mono + 유사도상 낙찰가 4열 테이블
5	작품 정보 (8 fields)	padding:20px 24px	label 72px mono 10px uppercase + value sans 13px, border-bottom rgba(26,26,26,0.07). 작품명/카테고리/재료/사이즈/제작연도/구성품(태그칩 11px mono, bg:rgba(26,26,26,0.05), padding:4px 10px)/가격제안/작품등급
6	작품 이미지 갤러리	padding:0 24px 16px	5장 1:1 세로 스택, margin-bottom:8px (마지막 0), object-fit:cover
7	작품 상세 설명	padding:20px 24px	13px/1.75 `var(--text-secondary)` #555555, ls:-0.005em
8	차트 거래	차콜 히어로 배너 + 약속 카드 + 타임라인 + 아코디언	히어로: charcoal bg, padding:28px 24px 24px, 좌측 4px red accent. 약속 3개(28×28 charcoal box, 11px/600 #fff) + 5단계 타임라인(9×9px red-brand dot, 연결선 rgba(150,30,35,0.2), 10px/600 sans) + 상세 구매 가이드 아코디언(토글 12px/500, maxHeight 트랜지션 500ms)
9	유사 작품 추천	padding:20px 0 20px 24px	3카드 158×158px, gap:12px, overflow-x:auto, 작가명 12px/500 + 가격 12px/600
10	구매 문의 CTA	height:50px, padding:20px 24px 24px	`var(--cta-gradient)`, 15px/600 #fff, ls:-0.01em, R=0

Phone 2: 구매 문의 바텀시트 (height: 852px)

#	영역	치수	디자인 상세
A	딤 오버레이	전체 화면	rgba(26,26,26,0.45)
B	핸들바	36×4px, center	rgba(26,26,26,0.12), padding:12px 0 0
C	닫기(X) 버튼	20×20 SVG, 우측 정렬	stroke:var(--charcoal) 1.5px square/miter, padding:8px 24px 0
D	안내/설명 텍스트	padding:12px 24px 16px	제목 15px/600 charcoal + 안내문 13px/400 text-muted, border-bottom rgba(26,26,26,0.06)
E	문의 메시지 입력	height:96px	bg:rgba(26,26,26,0.04), border:1px solid rgba(26,26,26,0.07), padding:12px 14px, textarea, placeholder 13px text-muted
F	개인정보 동의 체크박스	18×18px checkbox + 라벨	border:1.5px rgba(26,26,26,0.3), 라벨 12px sans, (필수) red-brand 600
G	CTA "문의하기"	height:50px, padding:20px 24px 32px	`var(--cta-gradient)`, 15px/600 #fff, ls:-0.01em, R=0

Phone 3: 인터랙티브 스크롤 프로토타입 (height: 852px)

#	영역	치수	디자인 상세
P3-1	Status Bar	44px, top:0	iOS 상태바 (고정)
P3-2	Dissolve 헤더	48px, position:absolute top:44px, z-index:10	스크롤↓: opacity:0 + translateY(-6px) + filter:blur(3px) + pointerEvents:none. 스크롤↑ 또는 600ms 정지 시 복귀. transition 400ms `var(--ease-hero-reveal)`
P3-3	스크롤 콘텐츠	top:44px, padding-top:48px, overflow-y:auto	Phone 1과 동일한 전체 콘텐츠, scrollbar 숨김, -webkit-overflow-scrolling:touch
P3-4	Sticky CTA	position:absolute bottom:0, z-index:10	스크롤↓: translateY(100%) 숨김. 스크롤↑ 또는 600ms 정지 시 translateY(0) 복귀. transition 350ms `var(--ease)`. padding:20px 24px 32px, height:50px

섹션별 타이포그래피 상세

요소	font	size/weight	color	ls
원화 뱃지	--sans	10px/500	rgba(6,6,6,0.35)	0.01em
작가명 (한글)	--sans	24px/700	--charcoal #1A1A1A	-0.025em
작가명 (영문)	--serif	14px/400	rgba(26,26,26,0.55)	0.01em
작품명	--sans	14px/500	--charcoal	-0.01em
통계 (조회/찜/문의)	--mono	11px/400	rgba(26,26,26,0.5)	var(--ls-wide) 0.04em
가격 라벨	--mono	10px/400 uppercase	--text-muted #888888	var(--ls-widest) 0.12em
가격 금액	--mono	26px/700	--charcoal	-0.03em
섹션 라벨	--mono	10px/400 uppercase	--text-muted	0.07em
정보 필드 라벨	--mono	10px/400 uppercase	--text-muted	var(--ls-wide)
정보 필드 값	--sans	13px/400	--charcoal	-0.01em
구성품 태그칩	--mono	11px/400	--charcoal, bg:rgba(26,26,26,0.05)	0.02em
낙찰가 테이블 헤더	--mono	10px/400 uppercase	--text-muted	var(--ls-wide)
낙찰가 테이블 데이터	--sans/--mono	12px/400	--charcoal / --text-muted	-0.005em
CHAART CONCIERGE	--mono	10px/700 uppercase	--red-brand	0.12em
거래 히어로 타이틀	--serif	21px/400	#fff	-0.02em
거래 히어로 설명	--sans	12px/400	rgba(255,255,255,0.7)	-0.005em
약속 번호	--mono	11px/600	#fff (28×28 charcoal box)	-
약속 제목	--sans	13px/600	--charcoal	-0.02em
약속 설명	--sans	11.5px/400	--text-muted, line-height:1.55	-0.005em
PURCHASE FLOW 라벨	--mono	9px/400 uppercase	--red-brand	0.12em
타임라인 스텝 텍스트	--sans	10px/600	--charcoal	-0.02em

3. 핵심 인터랙션

Hero Carousel 스와이프: 좌우 제스처로 이미지 전환, 세그먼트 바 인디케이터 활성 상태 연동 (active: var(--red-brand) #961E23, inactive: var(--charcoal) #1A1A1A, flex:1 height:3px, gap:2px, transition:background 200ms)
헤더 뒤로가기: 이전 화면으로 이동, 확인 모달 없음
헤더 찜: 로그인 → 찜 토글 + 완료 토스트 / 비로그인 → LOG-008 로그인 유도 모달
헤더 공유하기: 로그인 여부 무관, OS 기본 공유 시트 호출 (딥링크·작품명·대표 이미지)
헤더 수정하기: 등록자에게만 노출, 클릭 시 수정 플로우 진입
구매 문의 CTA (50px): 로그인 → 바텀시트 호출 / 비로그인 → LOG-008 로그인 유도 모달
바텀시트 닫기(X): 즉시 닫힘, 배경 딤 해제 + 작품 상세 복귀
바텀시트 CTA "문의하기": 문의 메시지 입력 + 개인정보 동의 체크 시 활성화 → 서버 요청
유사 작품 카드 탭: 해당 작품 상세 페이지(MKT-013)로 이동
유사 도상 낙찰가 ℹ 아이콘: 탭 시 토스트 "차트 AI 시스템이 분석한 동일 작가·유사 도상 기준 낙찰가입니다."
상세 구매 가이드 아코디언: 토글 클릭 → maxHeight 0↔scrollHeight, chevron rotate(0↔180deg), transition 500ms var(--ease-material). 내부: 약속 배너(차콜+레드 accent) + 5단계 상세(22×22 charcoal box) + PICK-UP INFO/PAYMENT 카드
Phone 3 스크롤 동작: 스크롤↓ delta>3px → CTA translateY(100%) + 헤더 dissolve(opacity:0, translateY:-6px, blur:3px). 스크롤↑ delta<-3px → 복귀. 스크롤 정지 600ms → 자동 복귀

4. 상태 변화

찜 토글: 비활성(stroke only) ↔ 활성(filled), 토스트 "찜 목록에 추가되었습니다" / "찜 목록에서 제거되었습니다"
바텀시트 CTA: 문의 메시지 미입력 또는 개인정보 동의 미체크 → opacity:var(--state-disabled-opacity) 비활성 / 모두 충족 → 정상 활성
Carousel 세그먼트 바: 현재 이미지 인덱스에 따라 active bar 전환 (red-brand ↔ charcoal)
바텀시트 열림/닫힘: 딤 rgba(26,26,26,0.45) 노출/숨김
Phone 3 헤더: 스크롤 중 dissolve(투명+블러+위로 6px) ↔ 정지 시 materialize(불투명+선명+원위치)
Phone 3 CTA: 스크롤 중 translateY(100%) 숨김 ↔ 정지 시 translateY(0) 복귀

5. 네비게이션 플로우

진입: HOM/MKT/MYP 내 작품 카드 또는 유사 작품 추천 카드 탭 → push MKT-013
이탈 [뒤로가기]: 이전 화면으로 pop (모달 없음)
바텀시트 CTA: 구매문의 제출 → 성공 시 바텀시트 닫힘 + 토스트 "빠른 시간 안에 담당자가 연락드리겠습니다"
수정하기: 작품 수정 플로우 진입 (별도 화면 ID 정의)
유사 작품 카드: 해당 작품 MKT-013으로 push (재귀적 진입 가능)
비로그인 찜/구매문의: LOG-008 로그인 유도 모달 → 로그인 완료 후 이 화면 복귀

6. 에러/예외 처리

이미지 로드 실패: var(--paper) #F0EDE6 placeholder 표시, 재시도 가능
비로그인 + 찜/구매문의: LOG-008 로그인 유도 모달 노출
삭제/비공개 작품: 접근 시 에러 화면 또는 토스트 안내
구매문의 필수 미입력 + CTA 클릭: 토스트 "문의 내용을 입력해 주세요"
구매문의 API 오류: 토스트 에러 "일시적인 오류가 발생했습니다" + 재시도 안내, 바텀시트 유지
네트워크 오류: 상세 페이지 로딩 실패 시 빈 화면 + 재시도 버튼

7. 모션 스펙

화면 진입: push 트랜지션 (right→left), duration:400ms, easing:var(--ease-decelerate)
Carousel 스와이프: spring-based, translateX 제스처 추적, snap 300ms var(--ease-decelerate)
세그먼트 바 전환: background 색상 전환, duration:200ms
바텀시트 등장: translateY(100%→0), duration:350ms, easing:var(--ease-ios-spring)
바텀시트 닫힘: translateY(0→100%), duration:300ms, easing:var(--ease-accelerate)
딤 등장: opacity 0→0.45, duration:250ms, easing:var(--ease-decelerate)
찜 토글: scale 1→0.85→1, duration:200ms, spring-bounce
토스트: 하단 슬라이드 업 300ms var(--ease-decelerate) → 2.5초 유지 → 페이드 아웃 300ms var(--ease-accelerate)
Phone 3 헤더 dissolve: opacity + transform + filter 동시 전환, duration:400ms, easing:var(--ease-hero-reveal) cubic-bezier(0.25,0,0.15,1). 숨김: opacity:0, translateY(-6px), blur(3px). 복귀: opacity:1, translateY(0), blur(0)
Phone 3 CTA 슬라이드: translateY 전환, duration:350ms, easing:var(--ease) cubic-bezier(0.25,0.1,0.25,1)
아코디언 토글: maxHeight 0↔scrollHeight, duration:500ms, easing:var(--ease-material) cubic-bezier(0.4,0,0.2,1). chevron rotate(0↔180deg) 300ms

8. 여백·간격 요약

위치	값	비고
콘텐츠 좌우 padding	24px	전체 섹션 공통
원화 뱃지	padding:1px 5px, border:1px solid var(--alpha-8)	mb:6px
작가명 → 작품명	mb:4px (작가) → mb:12px (작품명)	영문명 gap:8px
가격 영역	border-top rgba(26,26,26,0.1), padding:14px 0, mb:16px	flex between baseline
낙찰가 테이블	margin:0 -24px (full-bleed)	헤더 bg rgba(26,26,26,0.06), padding:10px 24px
정보 필드	label width:72px, padding:10px 0	border-bottom rgba(26,26,26,0.07)
구성품 태그칩	padding:4px 10px, gap:6px	align-items:center, line-height:1
갤러리 이미지 간격	8px (margin-bottom)	마지막 이미지는 mb:0
섹션 구분선	1px, rgba(26,26,26,0.08)	각 섹션 사이
거래 히어로 배너	padding:28px 24px 24px, 좌측 accent 4px	charcoal bg, red-brand accent
약속 항목	padding:14px 0, gap:14px(아이콘↔텍스트)	border-bottom rgba(26,26,26,0.06), 마지막 없음
타임라인 도트	9×9px red-brand, gap:8px(dot↔text)	연결선: top:4px, left:16px~right:16px, 1px rgba(150,30,35,0.2)
아코디언 토글	padding:12px 16px, bg:rgba(26,26,26,0.03)	border:1px rgba(26,26,26,0.06)
유사 작품 카드	158×158px, gap:12px, padding-right:24px	overflow-x:auto 가로 스크롤, drag grab
바텀시트 문의 입력	padding:16px 24px 0, height:96px	라벨 mb:6px, textarea 1개
바텀시트 동의 체크	padding:14px 24px 0, 18×18px checkbox	개인정보 수집∙이용 동의 (필수)
CTA 영역 (공통)	height:50px, padding:20px 24px 24px (Phone 1) / 20px 24px 32px (Phone 2,3)	`var(--cta-gradient)`, R=0

9. 적용 디자인 토큰

전체 배경: --bg → #FAFAF8
헤더 아이콘: back(10×18) + bookmark(20×20) + share(20×20) · square/miter → --charcoal, 1.5px stroke
Hero 이미지: aspect-ratio 1:1 · 100% width → Carousel 형태, object-fit:cover, 5장
Carousel 세그먼트 바: flex:1 · height:3px · gap:2px → active: --red-brand #961E23, inactive: --charcoal #1A1A1A
작가명 (한글): --sans · 24px · 700 → Pretendard, --charcoal, ls:-0.025em
작가명 (영문): --serif · 14px · 400 → Libre Baskerville, rgba(26,26,26,0.55), ls:0.01em
작품명: --sans · 14px · 500 → Pretendard, --charcoal, ls:-0.01em
통계 (조회/찜/문의): --mono · 11px · 400 → rgba(26,26,26,0.5), ls:var(--ls-wide) 0.04em
가격: --mono · 26px · 700 → TASA Orbiter, --charcoal, ls:-0.03em
유사 도상 낙찰가: table · rgba(26,26,26,0.06) 헤더 · rgba(26,26,26,0.03) 행 → 12px, 4열 (시리즈/사이즈/낙찰일/경매사)
작품 정보 테이블: --sans · 13px · border-bottom → rgba(26,26,26,0.07) 구분선, 8 fields (작품명/카테고리/재료/사이즈/제작연도/구성품/가격제안/작품등급)
구성품 태그칩: --mono · 11px · bg:rgba(26,26,26,0.05) → padding:4px 10px, ls:0.02em
섹션 타이틀: --mono · 10px · uppercase → letter-spacing:var(--ls-wider), --text-muted
작품 갤러리: aspect-ratio 1:1 · padding 0 24px → 실제 이미지 5장 세로 스택, object-fit:cover
거래 히어로 배너: --charcoal bg · 좌측 4px --red-brand accent · serif 21px/400 #fff
약속 번호: 28×28 · --charcoal bg · #fff → --mono 11px/600, 직각
타임라인 도트: 9×9px · --red-brand → 직각, 연결선 rgba(150,30,35,0.2) 1px
유사작품 카드: 158×158px · 가로 스크롤 → overflow-x:auto, 3장, object-fit:cover
구매문의 CTA: --cta-gradient bg · #fff → 직각 (R=0), 50px, 15px/600
구분선: 1px rgba(26,26,26,0.08) → 각 섹션 사이
바텀시트: --bg · 직각 → border-radius: 0, handle bar 36×4px rgba(26,26,26,0.12)
좌우 패딩: 24px → 전체 콘텐츠 마진

← 이전 화면: MKT-012 다음 화면: MYP-001 →