홈 화면 (찜한 작품이 있을 때)

Update History

1. 화면 구조 개요

HOM-002는 로그인 사용자가 찜한 작품이 1개 이상 존재할 때 노출되는 홈 화면이다. 비로그인 사용자는 본 화면에 접근할 수 없으며, 홈 진입 시 HOM-001(default)이 노출된다. 하단 내비게이션의 '홈' 탭 클릭 시 사용자 상태에 따라 본 화면으로 진입한다.

찜한 작품 영역은 최근 본 작품 영역(HOM-003)보다 우선 노출되며, 홈 화면 최상단에 배치된다. 찜 데이터는 서버 기준 실시간 반영된다. 찜한 작품 외 나머지 홈 구성은 HOM-001 규칙을 따른다.

전체 레이아웃은 세로 단방향 스크롤이며, 가로 스크롤은 캐러셀 섹션 내부에서만 발생한다.

2. 레이어 구조 + 치수

2-1. Status Bar (iOS)

• 높이: 44px 고정
• 좌측: 시각 "9:41", font-family: var(--sans) Pretendard, 14px, 600 weight, color: var(--charcoal)
• 우측: 셀룰러 + Wi-Fi + 배터리 SVG 아이콘 (시스템 제공)

2-2. 헤더 (Header Bar)

• 높이: 48px
• 배경: var(--bg) var(--bg)
• 패딩: 0 24px (좌우)
• 레이아웃: display: flex, align-items: center, justify-content: space-between
• 좌측 CHRT. 로고: SVG 72x19px, 본체 fill: var(--charcoal) var(--charcoal), 마침표 점 fill: var(--red-brand) var(--red-brand)
• 우측 알림 아이콘: Lucide bell SVG 20x20px, stroke: var(--charcoal) var(--charcoal), stroke-width: 1.5, fill: none

2-3. 안심영역 카피 (Hero Copy)

• 패딩: 32px 24px 44px (top / left-right / bottom)
• 타이틀: "차트, 검증된 기준으로 거래하는 리세일 마켓."
  • font-family: var(--sans) Pretendard
  • font-size: 28px, font-weight: 800
  • line-height: 1.4, letter-spacing:var(--ls-tight)
  • color: #060606
  • "차트," 부분만 color: var(--red-brand) var(--red-brand)
• CTA "CHRT. 소개 보기":
  • display: inline-flex, align-items: center, gap: 6px
  • padding: 10px 14px, min-height: 40px
  • border: 1px solid /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.1), background: transparent, border-radius: 0 (직각)
  • font-family: var(--sans), font-size: var(--text-13), font-weight: 500, letter-spacing:var(--ls-normal)
  • color: var(--alpha-80)
  • margin-top: 24px (타이틀과의 간격)
  • chevron-right SVG 14x14px, stroke: currentColor, stroke-width: 2, top: -1.25px 보정

2-4. 보관함 섹션 (HOM-002 고유) - 래퍼

• 배경: #F2F2F0 (기본 --bg var(--bg) 대비 명도 5% 낮춤 → 공간 분리)
• 패딩: 48px 0 (상하 48px, 좌우 0 — Full Bleed)
• 노출 조건: 로그인 상태 + 찜한 작품 데이터 1개 이상 존재

2-4a. 보관함 타이틀 블록

• 래퍼 패딩: 0 24px, margin-bottom: 24px
• 레이아웃: display: flex, justify-content: space-between, align-items: flex-start
• 찜 아이콘: Lucide bookmark SVG 20x20px, fill: var(--red-brand) var(--red-brand), stroke: var(--red-brand) var(--red-brand), stroke-width: 2
• 아이콘-타이틀 갭: 8px (display: flex, align-items: center, gap: 8px)
• 타이틀: "{닉네임}님의 보관함" — font-family: var(--sans), font-size: 24px, font-weight: 700, letter-spacing:var(--ls-tight), color: #060606, line-height: 1.3
  • 닉네임은 로그인 사용자 정보 기준으로 노출
• 서브카피: "현재 N점의 작품을 보관 중입니다." — font-family: var(--sans), font-size: 14px, font-weight: 400, color: /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.45), margin-top: 6px, line-height: 1.4
• 우측 화살표: chevron-right SVG 8x14px, stroke: var(--charcoal) var(--charcoal), stroke-width: 1.5, stroke-linecap: square, margin-top: 8px

2-4b. 보관함 캐러셀 (찜한 작품)

• Scroll Container: 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
• 카드 너비: flex: 0 0 44%, min-width: 0, scroll-snap-align: start
• 작품 썸네일: aspect-ratio: 1/1 (정방형), background: var(--paper) var(--warm-paper) (이미지 로딩 전 폴백), overflow: hidden, position: relative
• 이미지: width: 100%, height: 100%, object-fit: cover
• 작품 카드 최대: 5개 노출
• 찜 아이콘: .chrt-save.is-saved 클래스 — 보관함 내 모든 카드는 활성(채움) 상태
  • 위치: position: absolute, top: 8px, right: 8px, z-index: 1
  • 터치 영역: 28x28px (display: flex, align-items: center, justify-content: center)
  • 비활성: SVG 18x18px, fill: none, stroke: rgba(255,255,255,0.9), stroke-width: 2, filter: drop-shadow(0 1px 3px var(--alpha-40))
  • 활성(.is-saved): fill: var(--red-brand) var(--red-brand), stroke: var(--red-brand), transition: fill 0.25s ease, stroke 0.25s ease
• 텍스트 영역: margin-top: 8px
  • 작가명 (국문): font-family: var(--sans), 14px, 600 weight, color: #060606, letter-spacing:var(--ls-tight), line-height: 1.3
  • 작품 유형 뱃지: display: inline-block, font-size: var(--text-2xs), font-weight: 500, font-family: var(--sans), color: /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.35), border: 1px solid /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.1), padding: 1px 5px, margin-left: 4px, letter-spacing:var(--ls-normal)
  • 작가명 (영문): font-family: var(--serif) Libre Baskerville, 12px, 400 weight, color: /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.45), margin-top: 2px, line-height: 1.3
• End Spacer: flex: 0 0 24px, min-width: 24px (마지막 카드 우측 여백)

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

• 패딩: 20px 24px 28px
• 섹션 타이틀: "어떤 방식으로 찾으시겠어요?" — font-family: var(--sans), 17px, 700 weight, letter-spacing:var(--ls-tight), color: var(--charcoal) var(--charcoal), margin-bottom: 16px
• 카드 레이아웃: display: flex, gap: 12px
• 카드 A "직접 찾을게요":
  • flex: 1, min-height: 120px, border: 1px solid var(--alpha-8), background: transparent, border-radius: 0
  • padding: 20px 16px 16px, display: flex, flex-direction: column, gap: 12px
  • 아이콘: Lucide search SVG 20x20px, stroke: var(--red-brand) var(--red-brand), stroke-width: 1.5
  • 타이틀: font-family: var(--sans), 14px, 600 weight, color: #060606, letter-spacing:var(--ls-normal), line-height: 1.3
  • 서브라벨: "공개 마켓 탐색" — 11px, font-family: var(--sans), color: var(--alpha-40), letter-spacing:var(--ls-normal), margin-top: auto
• 카드 B "조용히 찾을래요":
  • 동일 규격, 아이콘: Lucide lock SVG 20x20px, stroke: var(--red-brand), rx="0" (직각 자물쇠)
  • 서브라벨: "프라이빗 세일 의뢰"

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

실시간 마켓 업데이트 / 지금 주목할 작품 / 컬렉터들의 선택 — 3개 캐러셀 공통 구조:

• 부모 컨테이너: padding: 20px 0 (좌우 패딩 없음 = Full Bleed)
• 섹션 헤더: padding: 0 24px, display: flex, justify-content: space-between, align-items: center, margin-bottom: 12px
  • 타이틀: font-family: var(--sans), 17px, 700 weight, color: var(--charcoal) var(--charcoal), letter-spacing:var(--ls-tight)
  • 우측: chevron-right SVG 8x14px, stroke: var(--charcoal), stroke-width: 1.5, stroke-linecap: square
• Scroll Container: 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
• 카드: flex: 0 0 44% (뷰포트에 2장 + 3번째 peek), scroll-snap-align: start, aspect-ratio: 1/1
• 찜 아이콘: .chrt-save (비활성) — bookmark SVG 18x18px, stroke: rgba(255,255,255,0.9), stroke-width: 2, filter: drop-shadow(0 1px 3px var(--alpha-40))
• 텍스트: 국문 var(--sans) 14px/600 + 유형 뱃지 10px + 영문 var(--serif) 12px/400 세로 적층
• End Spacer: flex: 0 0 24px, min-width: 24px

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

• 래퍼 패딩: 12px 24px
• 배너: height: 44px, background: var(--paper) var(--warm-paper) + 리넨 텍스처 SVG 패턴 (4x4px, opacity 0.6)
• 라벨: "AD BANNER" — font-family: var(--mono) TASA Orbiter, 10px, color: var(--text-muted), letter-spacing:var(--ls-wider), text-transform: uppercase, z-index: 1
• 레이아웃: display: flex, align-items: center, justify-content: center, position: relative, overflow: hidden

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

• 높이: 80px
• 배경: var(--bg) var(--bg)
• 상단 보더: border-top: 1px solid rgba(26,26,26,0.06)
• 레이아웃: display: flex, align-items: center, justify-content: space-around, padding: 0 24px
• 각 탭 아이템: display: flex, flex-direction: column, align-items: center, gap: 3px

3. 핵심 인터랙션

4. 상태 변화

4-1. 찜(북마크) 아이콘

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

4-3. 캐러셀 마우스 드래그

4-4. 홈 화면 조건 분기

5. 네비게이션 플로우

• 진입 경로:
  • 하단 탭바 '홈' 탭 → 찜한 작품 1개 이상 → HOM-002 자동 진입
  • 앱 실행 시 홈 진입 → 사용자 상태 판단 → HOM-002 조건 충족 시 노출
  • 타 화면에서 뒤로가기 → 홈 복귀 → HOM-002
• 이탈 경로:
  • 알림 아이콘 → HOM-004 (로그인) / LOG-008 모달 (비로그인)
  • CTA "CHRT. 소개 보기" → 소개 랜딩 (TBD)
  • 보관함 chevron → 보관함 전체 목록 (TBD)
  • 찜한 작품 카드 / 캐러셀 작품 카드 → MKT-013 작품 상세
  • "직접 찾을게요" → MKT-001 공개 마켓
  • "조용히 찾을래요" → 프라이빗 세일 (TBD)
  • 캐러셀 섹션 chevron → MKT-001 또는 해당 목록
  • 띠배너 → 외부 랜딩
  • 탭바: 마켓 → MKT-001, MY → MYP-001
• 전환 트리거: 찜 작품 0개 도달 시 → HOM-001로 자동 전환 (Description 항목 1 "찜 작품이 0개가 될 경우 홈 구조는 HOM-001로 전환")

6. 에러/예외 처리

• 비로그인 사용자: 본 화면(HOM-002) 접근 불가 → HOM-001(default)로 리다이렉트. 찜 관련 UI/영역 일체 비노출 (Description 항목 0, 2)
• 찜한 작품 0개: 보관함 섹션 전체 미노출, 홈 구조 HOM-001로 전환 (Description 항목 1)
• 이미지 로딩 실패: 썸네일 fallback background: var(--paper) var(--warm-paper) 표시
• 닉네임 없음: 서버 닉네임 값 null/빈 문자열 시 기본값 "회원"으로 대체 표시
• 네트워크 오류 (찜 해제 요청): 서버 실패 시 UI 롤백 (찜 상태 복원) + 에러 토스트 "네트워크 연결을 확인해주세요." 2.5초 auto-dismiss
• 찜 데이터 갱신 지연: 서버 기준 실시간 반영 원칙 (Description 항목 2 "찜 데이터는 서버 기준 실시간 반영"). Optimistic UI 적용 가능
• 캐러셀 데이터 부족: 각 캐러셀 카드 0개 시 해당 섹션 전체 미노출

7. 모션 스펙

• 원칙: 절제된 고급 인터랙션. 바운시/스프링 금지. 모든 전환은 ease 또는 ease-out만 사용
• 마우스 드래그 JS: mousedown → cursor: grabbing + scroll-snap: none, mousemove → scrollLeft = startScrollLeft - (currentX - startX) * 1.2, mouseup/mouseleave → cursor: grab + scroll-snap: x mandatory 복원. 이미지 드래그 방지: e.preventDefault() 적용
• 모바일: 네이티브 터치 스크롤 사용 (-webkit-overflow-scrolling: touch)
• 대상 컨테이너 ID: savedScroll (보관함), marketScroll (마켓 업데이트), pickScroll (주목할 작품), collectScroll (컬렉터들의 선택)

8. 여백·간격 요약

9. 적용 디자인 토큰

Color Tokens

• 페이지 배경: --bg → var(--bg)
• 보관함 섹션 배경: #F2F2F0 (커스텀 — --bg 대비 명도 5% 낮춤)
• 브랜드 레드: --red-brand → var(--red-brand) — 활성 탭, 찜 아이콘, "차트," 카피, 선택 카드 아이콘, 찜 bookmark fill
• 차콜: --charcoal → var(--charcoal) — 로고 본체, 섹션 타이틀, 탭바 border-top 기반색
• 본문 텍스트: #060606 — 타이틀, 작가명(국문), 카드 헤드라인
• 보조 텍스트: /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.45) — 서브카피, 영문 작가명
• Muted 텍스트: --text-muted — 비활성 탭 아이콘/라벨, AD 배너 라벨
• 서브라벨: var(--alpha-40) — 선택 카드 서브라벨
• 유형 뱃지 텍스트: /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.35), 보더: /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.1)
• CTA 보더: /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.1), CTA 텍스트: var(--alpha-80)
• 선택 카드 보더: var(--alpha-8), hover 보더: /* NOTE: 근사 토큰 없음, 치환 보류 */rgba(6,6,6,0.2), hover 배경: rgba(6,6,6,0.015)
• 탭바 보더: rgba(26,26,26,0.06)
• 이미지 fallback: --paper → var(--warm-paper)
• 찜 아이콘 비활성 stroke: rgba(255,255,255,0.9) + drop-shadow var(--alpha-40)

Typography Tokens

• 안심영역 타이틀: --sans Pretendard / 28px / 800 / lh 1.4 / ls -0.02em
• 보관함 타이틀: --sans / 24px / 700 / lh 1.3 / ls -0.02em
• 섹션 타이틀 (판단 프레이밍 + 캐러셀): --sans / 17px / 700 / ls -0.02em
• 서브카피: --sans / 14px / 400 / lh 1.4
• 카드 헤드라인: --sans / 14px / 600 / lh 1.3 / ls -0.01em~-0.02em
• 카드 서브라벨: --sans / 11px / ls -0.005em
• CTA 버튼: --sans / 13px / 500 / ls -0.01em
• 작가명 (국문): --sans / 14px / 600 / ls -0.02em / lh 1.3
• 작가명 (영문): --serif Libre Baskerville / 12px / 400 / lh 1.3
• 유형 뱃지: --sans / 10px / 500 / ls 0.01em
• 탭바 라벨: --sans / 10px / 활성 600 · 비활성 500 / ls -0.01em
• AD 배너 라벨: --mono TASA Orbiter / 10px / ls 0.08em / uppercase

Shape & Layout Tokens

• border-radius: 0 (직각 원칙) — 모든 카드, 이미지 래퍼, CTA 버튼, 선택 카드, 탭바
• 캐러셀 카드: flex: 0 0 44% (뷰포트에 2장 + 3번째 12% peek)
• 작품 썸네일: aspect-ratio: 1/1 (정방형)
• 찜 아이콘 터치 영역: 28x28px (SVG 18x18px 대비 확장)
• CTA min-height: 40px
• 선택 카드 min-height: 120px
• 터치 타겟: 최소 44px (접근성)
• scrollbar-width: none (스크롤바 숨김)
• -webkit-overflow-scrolling: touch (모바일 관성 스크롤)

CSS 클래스 레퍼런스