사용자 화면 · 홈

홈 화면 (default)

HOM-001 · 2026. 03. 04

화면 이름 홈 화면 (default)
화면 위치 홈
화면 ID HOM-001
작성일 2026. 03. 04
9:41
CHRT.

차트,
작품을 만나는
소중한 순간

미술품 찾는 방법

🧐 직접 찾을게요
🤫 조용히 찾을래요
공개 작품

김작가 원화

이작가 판화

차트 PICK 1

김작가 원화

이작가 판화

차트 PICK 2

김작가 원화

이작가 판화

홈
마켓
PS
MY
1
2
3
4
5
6
7
Description
0 화면 접근 조건
  • 홈 화면은 로그인/비로그인 사용자 모두 접근 가능
  • 하단 내비게이션의 '홈' 탭 클릭 시 본 화면으로 이동
  • 로그인 사용자라도
    • 찜한 작품이 없을 경우
    • 최근 본 작품이 없을 경우
    • 본 화면이 기본 홈으로 노출
1 헤더
  • 구성
    • 좌측 : 차트 로고
    • 우측 : 알림 버튼
  • 동작
    • 차트 로고 클릭 시
      • 별도 액션 없음 (홈 리프레시 및 화면 이동 없음)
    • 알림 버튼 클릭 시
      • 로그인 상태 → 알림 내역 화면(HOM-004)로 이동
      • 비로그인 상태 → 로그인 안내 모달(LOG-009) 노출, 로그인 완료 시 HOM-004로 이동
2 안심영역
  • 구성
    • 차트 서비스 소개 카피 (카피는 변경될 수 있음)
    • 이동하기 버튼
  • 동작
    • 이동하기 버튼 클릭 시
      • 차트가 어떤 플랫폼인지 소개하는 랜딩 페이지로 이동
      • 화면 ID 추후 작성
3 판단 프레이밍 영역
  • 구성
    • 선택 카드 2종
      • 직접 찾을게요
      • 조용히 찾을래요
  • 동작
    • 직접 찾을게요 클릭 시
      • 마켓 화면으로 이동 (MKT-001)
    • 조용히 찾을래요 클릭 시
      • 프라이빗 세일 화면으로 이동 (화면 ID 추후 작성)
4 가벼운 탐색 영역 - 마켓
  • 구성
    • 최신 공개 작품 카드 최대 5개 노출
    • 각 작품 카드 우측 상단에 찜 아이콘 노출
    • 섹션 우측 이동 버튼
  • 찜 아이콘 동작
    • 로그인 사용자 → 아이콘 클릭 시 찜 상태 토글
    • 비로그인 사용자 → 로그인 안내 모달(LOG-009) 노출, 찜 동작 수행되지 않음
  • 동작
    • 작품 카드 클릭 시 작품 상세 화면으로 이동 (MKT-013)
    • 이동 버튼 클릭 시 마켓 화면으로 이동 (MKT-001)
5 가벼운 탐색 영역 - 차트 PICK1
  • 구성
    • "차트 PICK" 대표 작품 최대 5개 노출
    • 섹션 우측 이동하기 버튼
    • 찜 아이콘 상태
      • 활성 상태 아이콘 노출
  • 찜 아이콘 동작
    • 로그인 사용자 → 아이콘 클릭 시 찜 상태 토글
    • 비로그인 사용자 → 로그인 안내 모달(LOG-009) 노출, 찜 동작은 수행되지 않음
  • 동작
    • 작품 카드 클릭 시 작품 상세 화면으로 이동 (MKT-013)
    • 이동하기 버튼 클릭 시 "차트 PICK" 목록 화면으로 이동
6 가벼운 탐색 영역 - 차트 PICK2
  • 구성
    • "차트 PICK" 대표 작품 최대 5개 노출
    • 섹션 우측 이동하기 버튼
  • 찜 아이콘 동작
    • 로그인 사용자 → 아이콘 클릭 시 찜 상태 토글
    • 비로그인 사용자 → 로그인 안내 모달(LOG-009) 노출, 찜 동작 수행되지 않음
  • 동작
    • 작품 카드 클릭 시 작품 상세 화면으로 이동 (MKT-013)
    • 이동하기 버튼 클릭 시 "차트 PICK" 목록 화면으로 이동
7 소형 띠배너
  • 구성
    • 소형 띠배너 1종
    • Google 띠배너 사이즈 기준
      • 8.09:1 비율 (728×90 또는 320×50)
  • 동작
    • 배너 클릭 시 연동된 외부 랜딩 페이지로 이동
8 공통 규칙
  • 홈 화면은 사용자 상태에 따라 구조가 분기됨
    • 찜한 작품 있음 → HOM-002
    • 최근 본 작품 있음 / 찜한 작품 없음 → HOM-003
    • 둘다 없는 경우 → HOM-001
  • 비로그인 사용자
    • 찜 관련 UI 노출 및 동작 불가
    • 찜 액션 시 로그인 유도 모달 노출 (LOG-009)
  • 본 화면은 홈 기본 진입 화면으로 사용

Design Output

UI 디자인 산출물

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

9:41

차트, 검증된 기준으로
거래하는 리세일 마켓.

미술품 찾는 방법

🧐 직접 찾을게요
🤫 조용히 찾을래요
공개 작품

김작가 원화

이작가 판화

차트 PICK 1

김작가 원화

이작가 판화

차트 PICK 2

김작가 원화

이작가 판화

AD BANNER
홈
마켓
PS
MY
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 로고 CHRT 모노그램 SVG --charcoal + --red-brand dot
안심영역 카피 --sans · 28px · 800 Pretendard, #060606, line-height: 140%, letter-spacing: -0.02em, "차트," --red-brand
섹션 타이틀 --sans · 17px · 700 Pretendard, --charcoal
선택 카드 --charcoal bg · 130px 직각 (R=0), 텍스트 #fff
작품 카드 썸네일 --paper + linen Paper-Catalog 메타포, CHRT 워터마크
찜 아이콘 bookmark · square/miter --text-muted, 14px, 직각 철학
작가명 --sans · 12px · 500 Pretendard, --charcoal
작품 유형 뱃지 --mono · 9px · border TASA Orbiter, rgba(26,26,26,0.12) border
CTA 버튼 outline · 13px · 500 · min-h 40px "CHRT. 소개 보기" + chevron-right 16px, border 1px rgba(6,6,6,0.1), R=0, 헤드라인 하단 24px
탭바 활성 --charcoal · 600 weight 비활성: rgba(26,26,26,0.06) bg + --text-muted
띠배너 --paper + linen · 44px 8.09:1 비율, --mono 라벨
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
2026.03.09안심영역 카피 확정, 헤더 로고/아이콘 시스템 에셋 교체, 타이포 스펙 피그마 동기화
0 화면 접근 조건
  • 홈 화면은 로그인/비로그인 사용자 모두 접근 가능
  • 하단 내비게이션의 '홈' 탭 클릭 시 본 화면으로 이동
  • 로그인 사용자라도
    • 찜한 작품이 없을 경우
    • 최근 본 작품이 없을 경우
    • 본 화면이 기본 홈으로 노출
1 헤더
  • 구성
    • 좌측 : 차트 로고
    • 우측 : 알림 버튼
  • 동작
    • 차트 로고 클릭 시
      • 별도 액션 없음 (홈 리프레시 및 화면 이동 없음)
    • 알림 버튼 클릭 시
      • 로그인 상태 → 알림 내역 화면(HOM-004)로 이동
      • 비로그인 상태 → 로그인 안내 모달(LOG-009) 노출, 로그인 완료 시 HOM-004로 이동
2 안심영역
  • 구성
    • 헤드라인 카피: "차트, 검증된 기준으로 / 거래하는 리세일 마켓."
    • "차트," — #961E23 (red-brand), 나머지 — #060606
    • 28px · 800 · line-height 140% · letter-spacing -2%
    • 이동하기 화살표 아이콘 (텍스트 그룹 하단 32px 간격)
  • 동작
    • CTA 버튼 클릭 시
      • 차트가 어떤 플랫폼인지 소개하는 랜딩 페이지로 이동
      • 화면 ID 추후 작성
3 판단 프레이밍 영역
  • 구성
    • 선택 카드 2종
      • 직접 찾을게요
      • 조용히 찾을래요
  • 동작
    • 직접 찾을게요 클릭 시
      • 마켓 화면으로 이동 (MKT-001)
    • 조용히 찾을래요 클릭 시
      • 프라이빗 세일 화면으로 이동 (화면 ID 추후 작성)
4 가벼운 탐색 영역 - 마켓
  • 구성
    • 최신 공개 작품 카드 최대 5개 노출
    • 각 작품 카드 우측 상단에 찜 아이콘 노출
    • 섹션 우측 이동 버튼
  • 찜 아이콘 동작
    • 로그인 사용자 → 아이콘 클릭 시 찜 상태 토글
    • 비로그인 사용자 → 로그인 안내 모달(LOG-009) 노출, 찜 동작 수행되지 않음
  • 동작
    • 작품 카드 클릭 시 작품 상세 화면으로 이동 (MKT-013)
    • 이동 버튼 클릭 시 마켓 화면으로 이동 (MKT-001)
5 가벼운 탐색 영역 - 차트 PICK1
  • 구성
    • "차트 PICK" 대표 작품 최대 5개 노출
    • 섹션 우측 이동하기 버튼
    • 찜 아이콘 상태
      • 활성 상태 아이콘 노출
  • 찜 아이콘 동작
    • 로그인 사용자 → 아이콘 클릭 시 찜 상태 토글
    • 비로그인 사용자 → 로그인 안내 모달(LOG-009) 노출, 찜 동작은 수행되지 않음
  • 동작
    • 작품 카드 클릭 시 작품 상세 화면으로 이동 (MKT-013)
    • CTA 버튼 클릭 시 "차트 PICK" 목록 화면으로 이동
6 가벼운 탐색 영역 - 차트 PICK2
  • 구성
    • "차트 PICK" 대표 작품 최대 5개 노출
    • 섹션 우측 이동하기 버튼
  • 찜 아이콘 동작
    • 로그인 사용자 → 아이콘 클릭 시 찜 상태 토글
    • 비로그인 사용자 → 로그인 안내 모달(LOG-009) 노출, 찜 동작 수행되지 않음
  • 동작
    • 작품 카드 클릭 시 작품 상세 화면으로 이동 (MKT-013)
    • CTA 버튼 클릭 시 "차트 PICK" 목록 화면으로 이동
7 소형 띠배너
  • 구성
    • 소형 띠배너 1종
    • Google 띠배너 사이즈 기준
      • 8.09:1 비율 (728×90 또는 320×50)
  • 동작
    • 배너 클릭 시 연동된 외부 랜딩 페이지로 이동
8 공통 규칙
  • 홈 화면은 사용자 상태에 따라 구조가 분기됨
    • 찜한 작품 있음 → HOM-002
    • 최근 본 작품 있음 / 찜한 작품 없음 → HOM-003
    • 둘다 없는 경우 → HOM-001
  • 비로그인 사용자
    • 찜 관련 UI 노출 및 동작 불가
    • 찜 액션 시 로그인 유도 모달 노출 (LOG-009)
  • 본 화면은 홈 기본 진입 화면으로 사용
← 이전 화면 다음 화면: HOM-002 →