사용자 화면 · 홈

차트 PICK 화면

HOM-005 · 2026. 03. 20

화면 이름 차트 PICK 화면

화면 위치 홈 > 차트 PICK

화면 ID HOM-005

작성일 2026. 03. 20

Description

0	화면 접근 조건	홈 화면 내 “지금 주목할 작품” 또는 “컬렉터들의 선택"영역의 이동 버튼 클릭 시 진입 로그인 / 비로그인 사용자 모두 접근 가능 찜 기능은 로그인 사용자만 사용 가능 비로그인 사용자가 찜 아이콘 클릭 시 로그인 안내 모달(LOG-008) 노출
1	헤더	구성 좌측: 뒤로가기 버튼 중앙: 타이틀 기획전 뒤로가기 버튼 클릭 시 홈화면으로 이동
2	차트 PICK 대배너	구성 “지금 주목할 작품” 대표 이미지 영역 “지금 주목할 작품” 성격을 설명하는 시각적 배너 (이미지 또는 이미지+텍스트 구성) 배너는 스크롤 시 상단 고정되지 않음 배너 자체 클릭 액션 없음 (단순 정보 제공 영역)
3	작품 리스트 영역	구성 “지금 주목할 작품”에 포함된 작품 카드 리스트 카드 구성 요소 작품 이미지 작품명 작가명 작품 사이즈 가격 찜 아이콘 작품 카드 클릭 시 작품 상세 화면으로 이동 (MKT-013) 로그인 상태 찜 상태 토글 처리 로그인 안내 모달(LOG-008) 노출 찜 동작에 대한 별도 토스트 메시지는 노출하지 않음
4	공통 규칙	“지금 주목할 작품” 화면 내 작품 노출 순서는 “지금 주목할 작품” 설정값 기준 작품 리스트는 페이징 또는 무한 스크롤 방식 적용 가능 (구현 방식 추후 결정) 화면 내 모든 찜 기능은 로그인 사용자만 사용 가능 비로그인 사용자는 찜 상태 변경 불가

Design Output

UI 디자인 산출물

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

9:41

지금 주목할 작품

이배 원화

130.3 × 97.0cm

45,000,000원

김창열 원화

72.7 × 60.6cm

28,000,000원

남춘모 원화

100.0 × 80.3cm

18,500,000원

김선우 원화

53.0 × 45.5cm

8,200,000원

아야코 록카쿠 원화

162.0 × 130.3cm

120,000,000원

요시토모 나라 아트토이

H 25.0cm

3,500,000원

개발 구현 가이드 — HOM-005 차트 PICK 화면

디자인 상태
완료

최종 승인
류우상 ✅

승인일
2026-03-27

Update History

2026.03.16구현 가이드 최신화 -- Description/토큰/디자인 산출물 기준 전면 재작성 (9섹션)

2026.03.16Applied Design Tokens/Design Description 구현 가이드 병합

2026.03.10UI 디자인 산출물 리빌드 (실제 작품 이미지, .chrt-save, 구현 가이드)

2026.03.10와이어프레임+디스크립션 피그마 기준 최신화 (6개 카드, 텍스트 수정)

2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

HOM-005는 홈 화면(HOM-001~003) 내 "지금 주목할 작품" 영역의 이동 버튼(chevron >) 클릭 시 진입하는 서브 페이지이다. "지금 주목할 작품" 기획전에 포함된 작품 전체를 2열 그리드로 나열한다.

접근 조건: 로그인/비로그인 사용자 모두 접근 가능. 찜 기능만 로그인 필수.

화면 구성 순서 (위→아래):

#	영역	높이/패딩	스크롤
0	Status Bar (iOS)	44px	고정
1	헤더 (뒤로가기 + 타이틀)	48px, 좌우 padding 24px	고정
2	대배너 이미지	height 200px, margin-top 16px, full-width	스크롤
3	작품 그리드 (2열)	padding 32px 24px 32px	세로 스크롤

2. 레이어 구조 + 치수

#	영역	치수/위치	상세
0	Status Bar	height: 44px	iOS 기본 상태바. 시간(9:41), 셀룰러/Wi-Fi/배터리 아이콘
1	헤더	height: 48px, padding: 0 24px	bg: `var(--bg)` var(--bg), display:flex, align-items:center, justify-content:center, position:relative
1-a	뒤로가기 아이콘	position:absolute, left:24px	SVG 10x18px, stroke: `var(--charcoal)` var(--charcoal), stroke-width:1.5, linecap:square, linejoin:miter (직각 chevron)
1-b	타이틀 "지금 주목할 작품"	중앙 정렬	`var(--sans)` Pretendard 17px/700, color: `var(--charcoal)` var(--charcoal), letter-spacing:var(--ls-tight) (`var(--ls-tight)`)
2	대배너	height: 200px, margin-top: 16px, width: 100%	bg: `var(--paper)` var(--warm-paper) (fallback), overflow:hidden, 실제 이미지 `object-fit:cover`
2-a	배너 플레이스홀더	center, flex-direction:column, gap:8px	아이콘 SVG 32x32, stroke:var(--alpha-16), 라벨 `var(--mono)` 10px/uppercase/ls:0.08em, color:var(--alpha-25)
3	작품 그리드 컨테이너	padding: 32px 24px 32px	display:grid, grid-template-columns:1fr 1fr, gap: 28px 16px (row 28px, column 16px)
3-a	카드 — 썸네일	aspect-ratio: 1/1 (정방형)	bg: `var(--paper)` var(--warm-paper), overflow:hidden, position:relative, `object-fit:cover`
3-b	카드 — 찜 아이콘	position:absolute, top:8px, right:8px, 28x28px 터치 영역	Lucide bookmark SVG 18x18, stroke:rgba(255,255,255,0.9), stroke-width:2, filter:drop-shadow(0 1px 3px rgba(0,0,0,0.35))
3-c	카드 — 텍스트 영역	margin-top: 10px	작가명 + 유형 뱃지 + 사이즈 + 가격 (상세 아래 참조)
3-c-1	작가명	margin:0, line-height:1.3	`var(--sans)` 14px/600, color:#060606, letter-spacing:var(--ls-tight)
3-c-2	유형 뱃지 (원화/아트토이)	display:inline-block, margin-left:4px, padding:1px 5px	`var(--sans)` 10px/500, color:var(--alpha-40), border:1px solid var(--alpha-12), ls:0.01em, vertical-align:baseline
3-c-3	작품 사이즈	margin-top: 3px, line-height:1.3	`var(--sans)` 12px/400, color:var(--alpha-40), 예: "130.3 x 97.0cm" / "H 25.0cm"
3-c-4	작품 가격	margin-top: 4px, line-height:1.3	`var(--sans)` 13px/700, color:#060606, letter-spacing:var(--ls-normal), 예: "45,000,000원"

3. 핵심 인터랙션

뒤로가기 아이콘 탭: 홈 화면(HOM-001/002/003)으로 이동 (이전 화면 복귀)
작품 카드 탭: 해당 작품 상세 화면 MKT-013으로 이동
찜 아이콘 탭 (로그인 사용자): 찜 상태 토글 (.is-saved 클래스 토글 + 서버 API 호출). 별도 토스트 메시지 없음
찜 아이콘 탭 (비로그인 사용자): LOG-008 로그인 안내 모달 노출. 찜 상태 변경 없음
대배너 탭: 액션 없음 (단순 정보 제공 영역, 스크롤 시 상단 고정되지 않음)
세로 스크롤: 작품 리스트 무한 스크롤 또는 페이징 방식 (구현 시 결정). 노출 순서는 "지금 주목할 작품" 설정값 기준

4. 상태 변화

컴포넌트	상태	시각적 변화
찜 아이콘 (.chrt-save)	비활성 (기본)	stroke: rgba(255,255,255,0.9), fill: none, drop-shadow(0 1px 3px rgba(0,0,0,0.35))
	활성 (.is-saved)	fill: `--red-brand` var(--red-brand), stroke: var(--red-brand), transition: fill 0.25s ease, stroke 0.25s ease
	프레스 (:active)	transform: scale(0.92), transition: transform 0.2s ease-out
작품 카드	탭	MKT-013 작품 상세 화면으로 전환
대배너	—	인터랙션 없음 (정적 이미지)
뒤로가기 아이콘	탭	홈 화면으로 복귀

5. 네비게이션 플로우

동작	출발	도착
진입	HOM-001/002/003 (홈) "지금 주목할 작품" chevron 클릭	HOM-005 (현재 화면)
뒤로가기 (← 아이콘)	HOM-005	HOM-001/002/003 (이전 홈 화면)
작품 카드 탭	HOM-005	MKT-013 (작품 상세 화면)
비로그인 찜 탭	HOM-005	LOG-008 (로그인 안내 모달, 오버레이)

6. 에러/예외 처리

비로그인 사용자 찜 시도: LOG-008 로그인 안내 모달 노출. 앱 상태(찜 목록) 변경 불가
찜 API 실패: 토글 UI 원상 복구 + 에러 토스트 표시 (옵션, 구현 시 결정)
"지금 주목할 작품" 데이터 없음: 빈 상태 화면 표시 (작품이 등록되지 않은 경우)
이미지 로딩 실패: var(--paper) var(--warm-paper) 배경색 유지 (fallback)
네트워크 오류: 작품 리스트 로딩 실패 시 재시도 안내
찜 동작 토스트: 찜 상태 토글 시 별도 토스트 메시지 노출하지 않음 (기획 명시)

7. 모션 스펙

동작	속성	duration	easing
찜 아이콘 활성/비활성	fill, stroke	250ms	ease
찜 아이콘 프레스	transform: scale(0.92)	200ms	ease-out
화면 전환 (push)	translateX(100% -> 0)	350ms	cubic-bezier(0.2, 0, 0, 1)

8. 여백·간격 요약

항목	값	비고
헤더 좌우 padding	24px	뒤로가기 아이콘 left:24px
배너 margin-top	16px	헤더와 배너 사이 간격
배너 높이	200px	full-width, 좌우 마진 0
그리드 padding	32px 24px 32px	top 32px, left/right 24px, bottom 32px
그리드 row gap	28px	카드 세로 간격
그리드 column gap	16px	카드 가로 간격
썸네일 → 텍스트 영역	margin-top: 10px	이미지와 작가명 사이
작가명 → 사이즈	margin-top: 3px
사이즈 → 가격	margin-top: 4px
유형 뱃지 margin-left	4px	작가명 오른쪽 인라인 배치
유형 뱃지 padding	1px 5px	상하 1px, 좌우 5px
찜 아이콘 위치	top:8px, right:8px	썸네일 내부 우상단, 28x28px 터치 영역

9. 적용 디자인 토큰

[색상]
--bg: var(--bg) -- 헤더 배경, 페이지 배경
--charcoal: var(--charcoal) -- 헤더 타이틀, 뒤로가기 아이콘 stroke
--paper: var(--warm-paper) -- 대배너 fallback 배경, 썸네일 fallback 배경
--red-brand: var(--red-brand) -- 찜 활성 fill/stroke
#060606 -- 작가명, 가격 텍스트 (near-black)
var(--alpha-40) -- 작품 사이즈 텍스트
var(--alpha-40) -- 유형 뱃지 텍스트
var(--alpha-12) -- 유형 뱃지 border
rgba(255,255,255,0.9) -- 찜 아이콘 기본 stroke
rgba(0,0,0,0.35) -- 찜 아이콘 drop-shadow
var(--alpha-16) -- 배너 플레이스홀더 아이콘 stroke
var(--alpha-25) -- 배너 플레이스홀더 라벨 color
[타이포그래피]
--sans: Pretendard Variable -- 타이틀, 작가명, 사이즈, 가격, 뱃지
--mono: TASA Orbiter -- 배너 플레이스홀더 라벨
--ls-tight: -0.02em -- 헤더 타이틀, 작가명 letter-spacing
[폰트 스펙 요약]
헤더 타이틀: var(--sans) 17px / 700 / var(--charcoal) / ls:-0.02em
작가명: var(--sans) 14px / 600 / #060606 / ls:-0.02em / lh:1.3
유형 뱃지: var(--sans) 10px / 500 / var(--alpha-40) / ls:0.01em
작품 사이즈: var(--sans) 12px / 400 / var(--alpha-40) / lh:1.3
작품 가격: var(--sans) 13px / 700 / #060606 / ls:-0.01em / lh:1.3
배너 라벨: var(--mono) 10px / ls:0.08em / uppercase / var(--alpha-25)
[레이아웃]
그리드: grid-template-columns: 1fr 1fr, gap: 28px 16px
썸네일: aspect-ratio: 1/1, object-fit: cover
찜 아이콘 터치 영역: 28x28px (최소 터치 타겟 확보)
뒤로가기 SVG: 10x18px, stroke-width:1.5, linecap:square, linejoin:miter
배너 플레이스홀더 아이콘: 32x32px SVG, stroke-width:1

← 이전 화면: HOM-004 다음 화면: LOG-001 →