사용자 화면 · 홈

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

HOM-002 · 2026. 03. 04

화면 이름 홈 화면 (찜한 작품이 있을 경우)
화면 위치 홈
화면 ID HOM-002
작성일 2026. 03. 04
9:41
CHRT.

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

아무개님이 찜한 작품 1

김작가 원화

이작가 원화

미술품 찾는 방법

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

김작가 원화

이작가 판화

비공개 작품

김작가 원화

차트 PICK

김작가 원화

이작가 판화

홈
마켓
PS
MY
1
2
3
4
5
6
7
8
Description
0 화면 접근 조건
  • 로그인 상태인 경우 기능
  • 사용자가 찜한 작품이 1개 이상 존재하는 경우 노출되는 홈 화면
  • 비로그인 사용자는 본 화면 접근불가
  • 첫 화면 시 HOM-001(default) 화면 노출
  • 하단내비게이션의 '홈' 탭 클릭 시 조건에 따라 본 화면 진입
1 사용자 찜한 작품 영역
  • 노출 조건:
    • 로그인 상태
    • 찜한 작품 데이터가 1개 이상 존재할 경우
  • 구성:
    • 헤더 타이틀: {닉네임}님이 찜한 작품
    • 로그인 사용자 정보 기준으로 노출
    • 작품 카드 최대 5개 노출
    • 작품카드 구성:
      • 작품 썸네일
      • 작가명
      • 찜 아이콘(활성 상태)
  • 동작:
    • 작품카드 클릭 시 작품 상세 화면으로 이동 (MKT-013)
    • 찜아이콘 클릭 시 찜 해제
    • 해제 시 UI 변경
    • 찜 작품이 0개가 될 경우 홈 구조는 HOM-001로 전환
2 공통 규칙
  • 찜한 작품 영역을 제외한 하위 콘텐츠는 HOM-001 설명 우선 노출
  • 찜한 작품 영역은 홈 화면 최상단 우선 노출
  • 타 데이터는 서버 기준 실시간 반영
  • 비로그인 시 나타나는 찜 관련 UI 영역 노출 불가
  • 찜한 작품의 나머지 홈 구성은 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, 직각 철학
찜 아이콘 활성 bookmark · filled --charcoal, 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개 이상 존재하는 경우 노출되는 홈 화면
  • 비로그인 사용자는 본 화면 접근불가
  • 첫 화면 시 HOM-001(default) 화면 노출
  • 하단내비게이션의 '홈' 탭 클릭 시 조건에 따라 본 화면 진입
1 사용자 찜한 작품 영역
  • 노출 조건:
    • 로그인 상태
    • 찜한 작품 데이터가 1개 이상 존재할 경우
  • 구성:
    • 헤더 타이틀: {닉네임}님이 찜한 작품
    • 로그인 사용자 정보 기준으로 노출
    • 작품 카드 최대 5개 노출
    • 작품카드 구성:
      • 작품 썸네일
      • 작가명
      • 찜 아이콘(활성 상태)
  • 동작:
    • 작품카드 클릭 시 작품 상세 화면으로 이동 (MKT-013)
    • 찜아이콘 클릭 시 찜 해제
    • 해제 시 UI 변경
    • 찜 작품이 0개가 될 경우 홈 구조는 HOM-001로 전환
2 공통 규칙
  • 찜한 작품 영역을 제외한 하위 콘텐츠는 HOM-001 설명 우선 노출
  • 찜한 작품 영역은 홈 화면 최상단 우선 노출
  • 타 데이터는 서버 기준 실시간 반영
  • 비로그인 시 나타나는 찜 관련 UI 영역 노출 불가
  • 찜한 작품의 나머지 홈 구성은 HOM-001 규칙을 따른다
← 이전 화면: HOM-001 다음 화면: HOM-003 →