사용자 화면 · 홈

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

HOM-003 · 2026. 03. 04

화면 이름 홈 화면 (최근 본 작품만 있을 경우)
화면 위치 홈
화면 ID HOM-003
작성일 2026. 03. 04
9:41
CHRT.

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

최근 본 작품 1

김작가 원화

이작가 판화

미술품 찾는 방법

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

김작가 원화

이작가 판화

비공개 작품

김작가 원화

차트 PICK

김작가 원화

이작가 판화

홈
마켓
PS
MY
1
2
3
4
5
6
7
8
Description
0 화면 접근 조건
  • 앱 상태 및 정보 시 노출
  • 메인 네비게이션을 사용 선택 시 접근
  • 로그인/비로그인 사용자 모두 접근 가능
  • 최근 본 작품목의 있을 경우, 최상단 화면 노출
1 사용자 최근 본 작품 영역
  • 사용자가 최근 열람한 작품이 1개 이상 존재할 경우 노출
    • 최대 5개의 작품 카드 노출
    • 최신 열람순 기준으로 정렬 → ○
  • 작품 카드 구성:
    • 작품 썸네일
    • 작가명
    • 우측 상단 찜 아이콘
  • 카드 클릭시:
    • 해당 작품 상세 화면으로 이동 (MKT-013)
  • 찜 아이콘:
    • 로그인 사용자 → 아이콘 클릭 시 찜 상태 토글
    • 비로그인 사용자
      • 탭 클릭 시 → 로그인 안내 모달(LOG-009) 노출
    • 아이콘 클릭 시 찜
      • 아이콘 색상 변경
      • 로그인 안내 모달(LOG-009) 노출
2 공통 규칙
  • 홈 화면 내 콘텐츠 노출 우선순위는 다음과 같음
    • 1순위 찜한 작품 영역
    • 2순위 최근 본 작품 영역
    • 본 화면(HOM-003)
  • 최근 본 작품만이 존재하는 경우 노출되는 홈 상태
    • 찜한 작품이 1개 이상 존재할 경우
      • 최근 본 작품 영역이 있더라도 HOM-002 화면 구성으로 전환
    • 최근 본 작품 이외의 나머지 홈 영역은
      • 홈 영역이 노출되지 않으면 HOM-001 화면 구성
  • 홈 화면은 앱 기본 진입 화면으로 사용 가능
    • 비로그인 시 사용하는 앱 상태 변경 제한 유지
  • 찜 관련 동작에 대한 별도 토스트 메시지는 노출되지 않음

Design Output

UI 디자인 산출물

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

9:41

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

최근 본 작품 1

김작가 원화

이작가 판화

미술품 찾는 방법

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

김작가 원화

이작가 판화

비공개 작품

김작가 원화

차트 PICK

김작가 원화

이작가 판화

AD BANNER
홈
마켓
PS
MY
Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 로고 CHRT 모노그램 SVG --charcoal + --red-brand dot
안심영역 카피 --sans · 20px · 700 Pretendard, --charcoal, letter-spacing: -0.03em
섹션 타이틀 --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
이동 화살표 chevron-right · square/miter --charcoal, 1.5px stroke
탭바 활성 --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초기 디자인 작성
0 화면 접근 조건
  • 앱 상태 및 정보 시 노출
  • 메인 네비게이션을 사용 선택 시 접근
  • 로그인/비로그인 사용자 모두 접근 가능
  • 최근 본 작품목의 있을 경우, 최상단 화면 노출
1 사용자 최근 본 작품 영역
  • 사용자가 최근 열람한 작품이 1개 이상 존재할 경우 노출
    • 최대 5개의 작품 카드 노출
    • 최신 열람순 기준으로 정렬 → ○
  • 작품 카드 구성:
    • 작품 썸네일
    • 작가명
    • 우측 상단 찜 아이콘
  • 카드 클릭시:
    • 해당 작품 상세 화면으로 이동 (MKT-013)
  • 찜 아이콘:
    • 로그인 사용자 → 아이콘 클릭 시 찜 상태 토글
    • 비로그인 사용자
      • 탭 클릭 시 → 로그인 안내 모달(LOG-009) 노출
    • 아이콘 클릭 시 찜
      • 아이콘 색상 변경
      • 로그인 안내 모달(LOG-009) 노출
2 공통 규칙
  • 홈 화면 내 콘텐츠 노출 우선순위는 다음과 같음
    • 1순위 찜한 작품 영역
    • 2순위 최근 본 작품 영역
    • 본 화면(HOM-003)
  • 최근 본 작품만이 존재하는 경우 노출되는 홈 상태
    • 찜한 작품이 1개 이상 존재할 경우
      • 최근 본 작품 영역이 있더라도 HOM-002 화면 구성으로 전환
    • 최근 본 작품 이외의 나머지 홈 영역은
      • 홈 영역이 노출되지 않으면 HOM-001 화면 구성
  • 홈 화면은 앱 기본 진입 화면으로 사용 가능
    • 비로그인 시 사용하는 앱 상태 변경 제한 유지
  • 찜 관련 동작에 대한 별도 토스트 메시지는 노출되지 않음
← 이전 화면: HOM-002 다음 화면: HOM-004 →