홈 화면 (default)

Update History

1. 화면 구조 개요

HOM-001은 홈 기본 화면(default)이다. 로그인/비로그인 사용자 모두 접근 가능하며, 하단 내비게이션의 "홈" 탭 클릭 시 본 화면으로 이동한다.

• 로그인 사용자라도 찜한 작품이 없고, 최근 본 작품이 없을 경우 본 화면이 기본 홈으로 노출
• 전체 레이아웃은 세로 단방향 스크롤이며, 가로 스크롤은 캐러셀 섹션 내부에서만 발생
• 뷰포트 기준 너비: 393px (iPhone 15 Pro 기준)

구성 요소 요약 테이블

2. 레이어 구조 + 치수

위에서 아래로 각 레이어의 역할, 정확한 치수, 사용 토큰을 기술한다. 모든 값은 디자인 산출물 인라인 스타일에서 추출한 실측값이다.

2-1. Status Bar (iOS)

• 높이: 44px (시스템 영역, 개발자 제어 불가)
• 구성: 좌측 시간(9:41), 우측 셀룰러/Wi-Fi/배터리 아이콘
• 색상: #1d1d1f (iOS 시스템 기본)

2-2. 헤더 (Header)

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

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

• 패딩: top 32px, bottom 44px, 좌우 24px (padding: 32px 24px 44px)
• 타이틀: "차트, 검증된 기준으로 / 거래하는 리세일 마켓."
  • "차트," 부분: color: var(--red-brand) var(--red-brand)
  • 나머지: color: #060606
  • font-family: var(--sans) Pretendard
  • font-size: 28px
  • font-weight: 800
  • line-height: 1.4
  • letter-spacing: -0.02em (var(--ls-tight))
  • margin: 0
• CTA 버튼 "CHRT. 소개 보기":
  • margin-top: 24px (타이틀과의 간격)
  • display: inline-flex; align-items:center; gap:6px
  • padding: 10px 14px
  • min-height: 40px (var(--size-md-height))
  • border: 1px solid rgba(6,6,6,0.1)
  • background: transparent
  • border-radius: 0 (직각 원칙)
  • font: var(--sans) 13px / 500 / rgba(6,6,6,0.8)
  • letter-spacing: -0.01em
  • 우측 chevron-right 아이콘: 14x14px, stroke: currentColor, stroke-width 2, top -1.25px 보정

2-4. 구분선

• 좌우 마진 24px (margin: 0 24px)
• border-top: 1px solid /* NOTE: --alpha-6 미정의, 치환 보류 */rgba(6,6,6,0.06)

2-5. 판단 프레이밍 영역 (Choice Cards)

• 패딩: top 32px, bottom 28px, 좌우 24px (padding: 32px 24px 28px)
• 섹션 타이틀: "어떤 방식으로 찾으시겠어요?"
  • font: var(--sans) 17px / 700 / var(--charcoal) var(--charcoal)
  • letter-spacing: -0.02em
  • margin: 0 0 16px
• 카드 레이아웃: display:flex; gap:12px (가로 2열 균등)
• 각 카드 공통:
  • flex:1; min-height:120px
  • border: 1px solid var(--alpha-8)
  • background: transparent
  • padding: 20px 16px 16px
  • display:flex; flex-direction:column; gap:12px
  • border-radius: 0 (직각 원칙)
  • cursor: pointer
• 카드 A "직접 찾을게요":
  • 아이콘: Lucide search 20x20px, stroke: var(--red-brand) var(--red-brand), stroke-width 1.5
  • 헤드라인: var(--sans) 14px / 600 / #060606 / letter-spacing -0.01em / line-height 1.3
  • 서브카피 "공개 마켓 탐색": var(--sans) 11px / 400 / rgba(6,6,6,0.4) / letter-spacing -0.005em / margin-top:auto
• 카드 B "조용히 찾을래요":
  • 아이콘: Lucide lock 20x20px, stroke: var(--red-brand) var(--red-brand), stroke-width 1.5, rx="0" (직각 자물쇠)
  • 서브카피 "프라이빗 세일 의뢰"
  • 타이포/레이아웃은 카드 A와 동일
• hover 인터랙션 (CSS 클래스 .hom-choice-card):
  • border-color: rgba(6,6,6,0.2)
  • background: rgba(6,6,6,0.015)
  • transition: border-color 0.2s, background 0.2s

2-6. Full Bleed Carousel — 공통 구조 (3개 섹션 공유)

아래 3개 섹션(실시간 마켓 업데이트 / 지금 주목할 작품 / 컬렉터들의 선택)은 동일한 Full Bleed Carousel 패턴을 사용한다.

• 부모 컨테이너: padding: 20px 0 — 좌우 패딩 없음(Full Bleed)
• 섹션 헤더: padding: 0 24px; margin-bottom:12px
  • display:flex; justify-content:space-between; align-items:center
  • 타이틀: var(--sans) 17px / 700 / var(--charcoal) var(--charcoal) / letter-spacing -0.02em
  • 우측 chevron: 8x14px SVG, stroke: var(--charcoal), stroke-width 1.5, linecap square, linejoin miter
• 스크롤 컨테이너:
  • display:flex; gap:12px
  • overflow-x:auto; overflow-y:hidden
  • scroll-snap-type: x mandatory
  • scroll-padding-left: 24px
  • padding: 0 0 2px 24px — 좌측만 24px, 우측은 화면 끝까지 확장
  • -webkit-overflow-scrolling: touch
  • scrollbar-width: none (스크롤바 숨김)
  • cursor: grab (드래그 중 grabbing)
• 카드 규격:
  • flex: 0 0 44%; min-width:0; scroll-snap-align:start
  • 초기 뷰포트에 2장 + 3번째 카드 12% peek (스크롤 힌트)
  • 카드 최대 5장 + 끝 spacer (flex:0 0 24px; min-width:24px)
• 카드 내부 — 썸네일:
  • aspect-ratio: 1/1 (정방형)
  • background: var(--paper) var(--warm-paper) (이미지 로드 전 fallback)
  • position:relative; overflow:hidden
  • 이미지: width:100%; height:100%; object-fit:cover
  • 우측 상단 찜 아이콘 (별도 섹션 참조)
• 카드 내부 — 텍스트 영역:
  • margin-top: 8px
  • 작가명(국문): var(--sans) 14px / 600 / #060606 / letter-spacing -0.02em / line-height 1.3
  • 작품유형 뱃지(원화/아트토이): display:inline-block; font-size:var(--text-2xs); font-weight:500; color:rgba(6,6,6,0.35); border:1px solid rgba(6,6,6,0.1); padding:1px 5px; margin-left:4px; vertical-align:baseline; letter-spacing:var(--ls-normal)
  • 작가명(영문): var(--serif) Libre Baskerville 12px / 400 / rgba(6,6,6,0.45) / line-height 1.3 / margin-top 2px

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

• 패딩: 12px 24px (상하 12px, 좌우 24px)
• 배너 높이: 44px
• 배경: var(--paper) var(--warm-paper)
• 비율: 8.09:1 (Google 띠배너 기준 728x90 또는 320x50)
• 질감: 리넨 텍스처 SVG 패턴 (4x4px 반복, opacity 0.6)
• 라벨: "AD BANNER" — var(--mono) 10px / letter-spacing 0.08em / uppercase / var(--text-muted) / z-index:1

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
• 포지셔닝: normal flow (position: static) — 고정 탭바 아님, 페이지 하단 자연 배치
• 각 탭 아이템: display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px

• 탭 라벨: var(--sans) 10px / letter-spacing -0.01em
• 활성 탭: var(--red-brand)(red-brand) + stroke-width 1.8 + font-weight 600
• 비활성 탭: var(--text-muted) + stroke-width 1.5 + font-weight 500

3. 핵심 인터랙션

4. 상태 변화

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

• 아이콘: Lucide bookmark SVG 18x18px, stroke-width 2
• 히트박스: 28x28px (position:absolute; top:8px; right:8px; z-index:1)
• 터치 타겟: 28px (최소 44px 권장이나, 주변 여백 포함 시 44px 이상 확보)
• -webkit-tap-highlight-color: transparent

4-2. 판단 프레이밍 카드 상태

4-3. 홈 화면 분기 (사용자 상태별)

5. 네비게이션 플로우

5-1. 어디서 오는가 (Incoming)

• 앱 최초 실행 (비로그인 또는 찜/최근본 없는 로그인)
• 하단 탭바 "홈" 탭 선택
• 기타 화면에서 뒤로가기 시 홈으로 복귀

5-2. 어디로 가는가 (Outgoing)

6. 에러/예외 처리

7. 모션 스펙

CHAART 모션 원칙: 절제되고 고급스러운 인상. 바운시/스프링 효과 금지, ease/ease-out 위주.

8. 여백 · 간격 요약

9. 적용 디자인 토큰

9-1. 색상 토큰

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

9-3. 아이콘 토큰

9-4. 레이아웃 토큰

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

9-6. JS 스크롤 드래그 (마우스 드래그 스크롤)

• 대상 컨테이너 ID: marketScroll, pickScroll, collectScroll
• mousedown: 드래그 시작, cursor → grabbing, scroll-snap-type → none
• mousemove: el.scrollLeft = scrollL - (x - startX)
• mouseup / mouseleave: 드래그 종료, cursor → grab, scroll-snap-type → 'x mandatory'
• e.preventDefault() 적용 — 이미지 드래그 방지
• 모바일: 네이티브 터치 스크롤 (-webkit-overflow-scrolling: touch)

9-7. 디자인 원칙 준수 사항

• 직각 원칙: 모든 카드, 버튼, 입력 필드, 배너는 border-radius: 0. 둥근 모서리 절대 금지
• 전체 좌우 패딩: 24px 통일 (캐러셀 스크롤 컨테이너의 좌측만 예외적으로 적용, 우측은 Full Bleed)
• 폰트 시스템: 한글 Pretendard(var(--sans)), 영문 Libre Baskerville(var(--serif)), 라벨 Space Grotesk(var(--mono))
• 브랜드 컬러: var(--red-brand) (red-brand) — CTA 강조, 활성 탭, 찜 활성, 로고 점, 카드 아이콘에만 사용
• 인터랙션 톤: 절제되고 고급스러운 모션. 바운시/스프링 효과 금지, ease/ease-out 위주
• Scrollbar 숨김: 모든 가로 스크롤 영역 scrollbar-width: none
• 터치 타겟: 인터랙티브 요소 최소 44px (찜 아이콘은 28px이나 패딩으로 44px 이상 확보 권장)
• 안심영역 카피: "카피는 변경될 수 있음" — 텍스트 하드코딩하지 말고 API/CMS 연동 고려