홈 화면 (최근 본 작품만 있을 때)

Update History

1. 화면 구조 개요

HOM-003은 찜한 작품이 없고, 최근 본 작품이 1건 이상인 사용자가 홈 탭 진입 시 노출되는 홈 화면이다.

로그인/비로그인 사용자 모두 접근 가능하며, 전체 레이아웃은 세로 단방향 스크롤이다. 가로 스크롤은 캐러셀 섹션 내부에서만 발생한다.

HOM-001(기본 홈)과 구조가 동일하되, 안심영역 카피 아래에 "최근 본 작품" Full Bleed Carousel이 HOM-003 고유 섹션으로 추가된다. 나머지 섹션(판단 프레이밍, 실시간 마켓 업데이트, 지금 주목할 작품, 컬렉터들의 선택, 소형 띠배너)은 HOM-001과 동일하다.

#	영역	높이/패딩	스크롤	HOM-001 대비
0	Status Bar (iOS)	44px	--	동일
1	헤더 (CHRT 로고 + 알림)	48px, px 24px	--	동일
2	안심영역 카피 + CTA	pt 32px pb 44px, px 24px	--	동일
3	최근 본 작품 (Full Bleed Carousel)	py 20px	가로 스냅	HOM-003 고유 추가
--	구분선 (divider)	1px, mx 24px	--	동일
4	판단 프레이밍 (선택 카드 2종)	pt 32px pb 28px, px 24px	--	동일
5	실시간 마켓 업데이트 (캐러셀)	py 20px	가로 스냅	동일
6	지금 주목할 작품 (캐러셀)	py 20px	가로 스냅	동일
7	컬렉터들의 선택 (캐러셀)	py 20px	가로 스냅	동일
8	소형 띠배너 (AD)	44px, py 12px, px 24px	--	동일
9	하단 탭바 (Tab Bar)	80px	--	동일
10	홈 인디케이터 (iOS)	34px	--	동일

2. 레이어 구조 + 치수

전체 뷰포트 너비 393px (iPhone 기준). 위에서 아래로 순서대로 기술한다.

2-0. Status Bar (iOS)

• 높이 44px, 시스템 영역 (개발 미관여)
• 좌측 시각 "9:41", 우측 셀룰러/Wi-Fi/배터리 아이콘

2-1. 헤더 (Header)

• 높이: 48px, display:flex; align-items:center; justify-content:space-between;
• 배경: var(--bg) #FAFAF8
• 좌우 패딩: 24px
• 좌측: CHRT 모노그램 SVG (72x19px). 본체 fill --charcoal #1A1A1A, 마침표 점 fill --red-brand #961E23
• 우측: Lucide bell 아이콘 20x20px, stroke var(--charcoal) #1A1A1A, stroke-width 1.5

2-2. 안심영역 카피

• 패딩: 32px 24px 44px
• 타이틀: "차트, 검증된 기준으로 거래하는 리세일 마켓."
• font-family: var(--sans) Pretendard | font-size: 28px | font-weight: 800 | line-height: 1.4 | letter-spacing: -0.02em | color: #060606
• "차트," 부분만 color var(--red-brand) #961E23
• CTA 버튼 "CHRT. 소개 보기":
• margin-top: 24px | display: inline-flex | align-items: center | gap: 6px | padding: 10px 14px | min-height: 40px
• border: 1px solid rgba(6,6,6,0.1) | background: transparent | border-radius: 0
• font-family: var(--sans) | font-size: 13px | font-weight: 500 | letter-spacing: -0.01em | color: rgba(6,6,6,0.8)
• 우측 chevron-right SVG 14x14px, stroke currentColor, stroke-width 2, top: -1.25px relative

2-3. 최근 본 작품 섹션 (HOM-003 고유)

• 래퍼: padding: 20px 0 20px
• 타이틀 행: display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding:0 24px
• 타이틀: "최근 본 작품" | font-family: var(--sans) | font-size: 17px | font-weight: 700 | letter-spacing: -0.02em | color: var(--charcoal) #1A1A1A
• 이동 화살표: chevron-right SVG 8x14px | stroke: var(--charcoal) | stroke-width: 1.5 | stroke-linecap: square | stroke-linejoin: miter

스크롤 컨테이너 (#recentScroll)

• display: flex | gap: 12px | overflow-x: auto | overflow-y: hidden
• scroll-snap-type: x mandatory | scroll-padding-left: 24px | -webkit-overflow-scrolling: touch
• scrollbar-width: none | padding: 0 0 2px 24px | cursor: grab

작품 카드 (최대 5장, 최신순)

• 카드 래퍼: flex: 0 0 44% | min-width: 0 | scroll-snap-align: start
• 썸네일: aspect-ratio: 1/1 | background: var(--paper) #F0EDE6 | position: relative | overflow: hidden
• 이미지: width:100% | height:100% | object-fit: cover
• 찜 아이콘 (.chrt-save): position:absolute | top:8px | right:8px | z-index:1 | width:28px | height:28px
• SVG: 18x18px | stroke: rgba(255,255,255,0.9) | stroke-width: 2 | filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35))
• 작가명 블록: margin-top: 8px
• 국문 작가명: font-family var(--sans) | 14px | 600 | ls -0.02em | color #060606 | line-height 1.3
• 카테고리 뱃지 (예: "원화"): display: inline-block | font-size: 10px | weight 500 | color rgba(6,6,6,0.35) | border: 1px solid rgba(6,6,6,0.1) | padding: 1px 5px | margin-left: 4px | ls 0.01em
• 영문 작가명: font-family var(--serif) Libre Baskerville | 12px | 400 | color rgba(6,6,6,0.45) | margin-top: 2px | line-height 1.3
• End Spacer: flex: 0 0 24px | min-width: 24px (마지막 카드 우측 여백)

2-4. 구분선 (Divider)

• margin: 0 24px | border-top: 1px solid rgba(6,6,6,0.06)
• 최근 본 작품 섹션과 판단 프레이밍 사이 시각적 분리

2-5. 판단 프레이밍 영역

• 패딩: 32px 24px 28px
• 타이틀: "어떤 방식으로 찾으시겠어요?" | font-family var(--sans) | 17px | 700 | ls -0.02em | color var(--charcoal) | margin-bottom 16px
• 카드 컨테이너: display:flex | gap:12px
• 카드 (.hom-choice-card): flex:1 | min-height:120px | border:1px solid rgba(6,6,6,0.08) | background:transparent | padding:20px 16px 16px | display:flex | flex-direction:column | gap:12px | border-radius:0
• 카드 아이콘: Lucide 20x20px | stroke var(--red-brand) #961E23 | stroke-width 1.5
• 좌측 카드: search 아이콘 | "직접 찾을게요" | "공개 마켓 탐색"
• 우측 카드: lock 아이콘 | "조용히 찾을래요" | "프라이빗 세일 의뢰"
• 카드 타이틀: 14px/600 | color #060606 | ls -0.01em | line-height 1.3
• 카드 서브라벨: 11px | color rgba(6,6,6,0.4) | ls -0.005em | margin-top:auto

2-6. Full Bleed Carousel 공통 패턴 (3개 섹션)

실시간 마켓 업데이트(#marketScroll), 지금 주목할 작품(#pickScroll), 컬렉터들의 선택(#collectScroll) 3개 캐러셀은 동일 패턴이다.

• 래퍼: padding: 20px 0 20px
• 타이틀: font var(--sans) 17px/700/ls -0.02em + 우측 chevron-right 8x14px
• 스크롤 컨테이너: 최근 본 작품 캐러셀(2-3)과 동일한 CSS 속성
• 카드: flex 0 0 44% | aspect-ratio 1:1 | scroll-snap-align start
• 찜 아이콘: 비활성 상태 — bookmark 18x18 | stroke rgba(255,255,255,0.9) | drop-shadow
• 작가명: 국문 var(--sans) 14px/600 + 영문 var(--serif) 12px/400 세로 적층
• End Spacer: 24px

2-7. 소형 띠배너 (AD)

• 패딩: 12px 24px 12px
• 배너: height 44px | background var(--paper) #F0EDE6 | display:flex | align-items:center | justify-content:center | position:relative | overflow:hidden
• linen 텍스처 패턴 (SVG data URI, background-size 4x4px, opacity 0.6)
• 라벨: font var(--mono) TASA Orbiter | 10px | color var(--text-muted) | ls 0.08em | uppercase | z-index 1

2-8. 하단 탭바 (Tab Bar)

• 높이: 80px | background var(--bg) #FAFAF8 | border-top: 1px solid rgba(26,26,26,0.06)
• display:flex | align-items:center | justify-content:space-around | padding:0 24px
• 각 탭: flex-direction column | align-items center | gap 3px
• 활성 (홈): SVG 24x24 stroke #961E23 stroke-width 1.8 | 라벨 10px/600 color #961E23
• 비활성 (마켓/PS/MY): SVG 24x24 stroke var(--text-muted) stroke-width 1.5 | 라벨 10px/500 color var(--text-muted)

탭	아이콘	상태
홈	Lucide home 24x24	활성 (red-brand)
마켓	Lucide shopping-cart 24x24	비활성
PS	Lucide lock 24x24	비활성
MY	Lucide user 24x24	비활성

3. 핵심 인터랙션

사용자 동작	시스템 반응
최근 본 작품 카드 탭	MKT-013 (작품 상세) 이동
최근 본 작품 chevron(>) 탭	최근 본 작품 전체 목록 화면 이동
찜 아이콘 탭 (로그인)	찜 상태 토글 (비활성 <-> 활성, fill/stroke #961E23)
찜 아이콘 탭 (비로그인)	로그인 안내 모달 노출 (LOG-008)
캐러셀 가로 스와이프	scroll-snap 단위로 카드 전환, 스크롤바 숨김
캐러셀 마우스 드래그 (데스크톱)	mousedown: cursor grabbing + snap 해제 -> mousemove: scrollLeft 이동 -> mouseup: cursor grab + snap 복원
알림 아이콘(bell) 탭 (로그인)	HOM-004 (알림 목록) 이동
알림 아이콘(bell) 탭 (비로그인)	LOG-008 (로그인 안내 모달) 노출
"CHRT. 소개 보기" CTA 탭	소개 랜딩 (TBD) 이동
"직접 찾을게요" 선택 카드 탭	MKT-001 (공개 마켓) 이동
"조용히 찾을래요" 선택 카드 탭	프라이빗 세일 의뢰 (TBD) 이동
캐러셀 작품 카드 탭 (3개 공통 섹션)	MKT-013 (작품 상세) 이동
캐러셀 chevron(>) 탭	MKT-001 / 해당 목록 이동
띠배너 탭	외부 랜딩 이동
하단 탭바 탭	홈: HOM-001/002/003(분기) | 마켓: MKT-001 | PS: TBD | MY: MYP-001

4. 상태 변화

4-1. 찜 아이콘 (.chrt-save)

상태	클래스	SVG 속성
비활성 (기본)	.chrt-save	fill: none | stroke: rgba(255,255,255,0.9) | stroke-width: 2 | drop-shadow(0 1px 3px rgba(0,0,0,0.35))
활성 (찜됨)	.chrt-save.is-saved	fill: #961E23 | stroke: #961E23 | transition: fill 0.25s ease, stroke 0.25s ease
프레스	.chrt-save:active svg	transform: scale(0.92)

4-2. 선택 카드 (.hom-choice-card)

상태	border-color	background
기본	rgba(6,6,6,0.08)	transparent
hover	rgba(6,6,6,0.2)	rgba(6,6,6,0.015)

4-3. 캐러셀 드래그 상태

상태	cursor	scroll-snap-type
기본 (대기)	grab	x mandatory
드래그 중	grabbing	none (해제)
드래그 종료	grab (복원)	x mandatory (복원)

5. 네비게이션 플로우

5-1. 진입 조건 (어디서 오는가)

• 앱 실행 -> 홈 탭 진입 시 서버에서 사용자 데이터 확인
• 분기 우선순위: 찜한 작품 있음 -> HOM-002 > 최근 본 작품 있음 -> HOM-003 (현재) > 둘 다 없음 -> HOM-001
• 하단 탭바 "홈" 탭 재선택 시에도 동일 분기 로직 적용

5-2. 이탈 경로 (어디로 가는가)

사용자 액션	이동 화면	전환 방식
알림 아이콘 (로그인)	HOM-004	push
알림 아이콘 (비로그인)	LOG-008 (모달)	modal overlay
소개 보기 CTA	소개 랜딩 (TBD)	push
최근 본 작품 chevron	최근 본 작품 전체 목록	push
최근 본 작품 카드	MKT-013	push
"직접 찾을게요"	MKT-001	push
"조용히 찾을래요"	프라이빗 세일 (TBD)	push
캐러셀 작품 카드	MKT-013	push
캐러셀 chevron	MKT-001 / 해당 목록	push
찜 아이콘 (비로그인)	LOG-008 (모달)	modal overlay
띠배너	외부 랜딩	external
홈 탭바	HOM-001/002/003 (분기)	tab switch
마켓 탭바	MKT-001	tab switch
MY 탭바	MYP-001	tab switch

5-3. 화면 분기 규칙

사용자 상태	화면
찜한 작품 있음 (로그인)	HOM-002
찜 없음 + 최근 본 작품 있음	HOM-003 (현재 화면)
둘 다 없음 (기본)	HOM-001
비로그인	HOM-001 (찜 관련 UI 비노출, 최근 본 작품은 로컬 기준 가능)

6. 에러/예외 처리

예외 케이스	처리
비로그인 사용자가 찜 아이콘 탭	LOG-008 로그인 유도 모달 노출. 찜 관련 UI 동작 불가.
비로그인 사용자가 알림 아이콘 탭	LOG-008 로그인 유도 모달 노출
최근 본 작품이 5개 미만	있는 만큼만 노출 (1~4장). 0개인 경우 이 화면 자체가 노출되지 않음 (HOM-001로 분기).
찜한 작품이 새로 생긴 경우	다음 홈 탭 진입 시 HOM-002로 분기 (찜 우선순위가 높음)
네트워크 오류로 최근 본 작품 로딩 실패	최근 본 작품 섹션 비노출 (나머지 섹션 정상 렌더). 재시도 시 복원.
이미지 로딩 실패	썸네일 영역에 var(--paper) #F0EDE6 배경색 유지 (플레이스홀더)

7. 모션 스펙

대상	속성	값
.hom-choice-card (선택 카드)	transition	border-color 0.2s, background 0.2s
.chrt-save svg (찜 아이콘)	transition	transform 0.2s ease-out
.chrt-save.is-saved svg path	transition	fill 0.25s ease, stroke 0.25s ease
.chrt-save:active svg (프레스)	transform	scale(0.92)
캐러셀 스크롤	scroll-snap-type	x mandatory (드래그 중 none으로 해제 -> 종료 시 복원)

• 바운시/스프링 애니메이션 사용 금지 -- 절제된 고급 인상 유지
• 모든 transition은 ease 또는 ease-out 커브 사용

8. 여백 / 간격 요약

위치	속성	값
헤더 좌우	padding-left/right	24px
안심영역	padding	32px 24px 44px
안심영역 CTA 간격	margin-top	24px
최근 본 작품 래퍼	padding	20px 0
캐러셀 타이틀 행	padding / margin-bottom	0 24px / 12px
캐러셀 스크롤 컨테이너	padding / gap	0 0 2px 24px / 12px
캐러셀 End Spacer	flex / min-width	0 0 24px / 24px
작가명 블록	margin-top	8px
영문 작가명	margin-top	2px
카테고리 뱃지	padding / margin-left	1px 5px / 4px
구분선	margin	0 24px
판단 프레이밍	padding	32px 24px 28px
선택 카드 간격	gap	12px
선택 카드 내부	padding / gap	20px 16px 16px / 12px
띠배너	padding	12px 24px
탭바	height / padding	80px / 0 24px
탭바 아이콘-라벨 간격	gap	3px

9. 적용 디자인 토큰

9-1. 색상 토큰

토큰	실제값	사용처
--bg	#FAFAF8	페이지 배경, 헤더, 탭바
--charcoal	#1A1A1A	CHRT 로고 본체, 헤더 bell, 섹션 타이틀, chevron
--red-brand	#961E23	"차트," 카피, 찜 활성, 선택카드 아이콘, 홈 탭 활성, CHRT 마침표 점
--paper	#F0EDE6	썸네일 플레이스홀더, 띠배너 배경
--text-muted	#888888	비활성 탭 아이콘/라벨, 띠배너 텍스트
#060606	(하드 블랙)	안심영역 타이틀, 작가명, 선택카드 타이틀
rgba(6,6,6,0.08)	(약한 보더)	선택카드 border, CTA border
rgba(6,6,6,0.06)	(초약한 보더)	구분선, 탭바 border-top
rgba(6,6,6,0.35)	(보조 텍스트)	카테고리 뱃지 color
rgba(6,6,6,0.1)	(뱃지 보더)	카테고리 뱃지 border, CTA border
rgba(6,6,6,0.45)	(영문 작가명)	영문 작가명
rgba(6,6,6,0.4)	(서브라벨)	선택 카드 서브라벨
rgba(6,6,6,0.8)	(CTA 텍스트)	소개 보기 CTA 텍스트
rgba(255,255,255,0.9)	(찜 비활성)	찜 아이콘 stroke (비활성 상태, 이미지 위 가시성 확보)

9-2. 타이포그래피 토큰

요소	font-family	size	weight	letter-spacing
안심영역 타이틀	--sans	28px	800	-0.02em
섹션 타이틀	--sans	17px	700	-0.02em
선택카드 타이틀	--sans	14px	600	-0.01em
국문 작가명	--sans	14px	600	-0.02em
CTA 라벨	--sans	13px	500	-0.01em
영문 작가명	--serif (Libre Baskerville)	12px	400	normal
선택카드 서브라벨	--sans	11px	400	-0.005em
카테고리 뱃지	--sans	10px	500	0.01em
탭바 라벨	--sans	10px	활성 600 / 비활성 500	-0.01em
띠배너 라벨	--mono (TASA Orbiter)	10px	400	0.08em

9-3. 아이콘 토큰

아이콘	크기	stroke/fill	위치
bell (알림)	20x20px	stroke --charcoal 1.5	헤더 우측
chevron-right (CTA)	14x14px	stroke currentColor 2	소개 보기 CTA 우측
chevron-right (섹션)	8x14px	stroke --charcoal 1.5	섹션 타이틀 우측
bookmark (찜)	18x18px	stroke rgba(255,255,255,0.9) 2	썸네일 우상단 (top:8px right:8px)
search (선택카드)	20x20px	stroke --red-brand 1.5	좌측 선택 카드
lock (선택카드)	20x20px	stroke --red-brand 1.5	우측 선택 카드
home (탭바)	24x24px	stroke #961E23 1.8	탭바 (활성)
shopping-cart (탭바)	24x24px	stroke --text-muted 1.5	탭바 (비활성)
lock (탭바)	24x24px	stroke --text-muted 1.5	탭바 (비활성)
user (탭바)	24x24px	stroke --text-muted 1.5	탭바 (비활성)

9-4. 레이아웃 토큰

속성	값	비고
전체 좌우 패딩	24px	헤더, 안심영역, 타이틀, 판단 프레이밍, 띠배너 공통
캐러셀 카드 너비	44%	flex-basis, 뷰포트의 약 44% (393px 기준 ~173px)
캐러셀 카드 비율	1:1	aspect-ratio 1/1 (정사각형)
캐러셀 카드 gap	12px	카드 간 간격
border-radius	0	직각 원칙 -- 모든 카드/이미지/CTA R=0
터치 타겟	min 44px	CTA min-height 40px + padding 보정, 탭바 44px+

9-5. CSS 클래스 레퍼런스

클래스	용도
.hom-choice-card	판단 프레이밍 선택 카드 (2종) -- hover transition 포함
.chrt-save	찜(북마크) 아이콘 래퍼 -- 28x28px absolute 위치
.chrt-save.is-saved	찜 활성 상태 -- fill+stroke #961E23
.chrt-save:active svg	프레스 피드백 -- scale(0.92)

9-6. JS 드래그 스크롤

• 대상 ID 4개: recentScroll, marketScroll, pickScroll, collectScroll
• HOM-001은 3개(market/pick/collect), HOM-003은 recentScroll 1개 추가하여 4개
• mousedown: cursor='grabbing', scrollSnapType='none'
• mousemove: scrollLeft = scrollL - (pageX - offsetLeft - startX)
• mouseup / mouseleave: cursor='grab', scrollSnapType='x mandatory'