사용자 화면 · 홈

차트 PICK 화면

HOM-005 · 2026. 03. 04

화면 이름 차트 PICK 화면
화면 위치 홈 > 차트 PICK
화면 ID HOM-005
작성일 2026. 03. 04
9:41
차트 PICK
판매

김작가 · 53x45cm

12,345,678원

찜

이작가 · 72x60cm

12,345,678원

판매

박작가 · 91x72cm

12,345,678원

판매

최작가 · 45x38cm

12,345,678원

1
2
3
Description
0 화면 접근 조건
  • 홈 화면 내 "차트 PICK" 영역의 이동 버튼 클릭 시 진입
  • 로그인 / 비로그인 사용자 모두 접근 가능
  • 찜 기능은 로그인 사용자만 사용 가능
    • 비로그인 사용자가 찜 아이콘 클릭 시 로그인 안내 모달 (LOG-009) 노출
1 헤더
  • 구성
    • 좌측: 뒤로가기 아이콘
    • 중앙: 타이틀 기획전
  • 동작
    • 뒤로가기 버튼 클릭 시
      • 홈화면으로 이동
2 차트 PICK 대배너
  • 구성
    • "차트 PICK" 대표 이미지 영역
    • "차트 PICK" 성격을 설명하는 시각적 배너 (이미지 또는 이미지+텍스트 구성)
  • 동작
    • 배너는 스크롤 시 상단 고정되지 않음
    • 배너 자체는 액션 없음 (단순 정보 제공 영역)
3 작품 리스트 영역
  • 구성
    • "차트 PICK"에 포함된 작품 카드 리스트
    • 카드 각 요소:
      • 작품 이미지
      • 작가명
      • 작품명
      • 작품 사이즈
      • 가격
      • 찜 아이콘
  • 동작
    • 작품 카드 클릭 시
      • 해당 작품 상세 화면으로 이동 (MKT-013)
    • 찜 아이콘 클릭 시
      • 로그인 사용자
        • 찜 상태 토글 처리
      • 비로그인 사용자
        • 로그인 안내 모달(LOG-009) 노출
    • 찜 동작에 대한 별도 토스트 메시지는 노출하지 않음
4 공통 규칙
  • "차트 PICK" 화면 내 작품 노출 순서는 "차트 PICK" 설정값 기준
  • 작품 리스트는 페이징 또는 무한 스크롤 방식 적용 가능 (구현 방식 추후 결정)
  • 화면 내 모든 찜 기능은 로그인 사용자만 사용 가능
  • 비로그인 사용자는 앱 상태 변경 불가

Design Output

UI 디자인 산출물

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

9:41
차트 PICK
CHAART PICK COLLECTION
판매

김작가 53x45cm

12,345,678원

판매

이작가 72x60cm

12,345,678원

판매

박작가 91x72cm

12,345,678원

판매

최작가 45x38cm

12,345,678원

Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 --sans · 17px · 700 back arrow square/miter
대배너 --paper + linen CHRT watermark, full-width
작품 썸네일 --paper + linen Paper-Catalog 메타포
판매 뱃지 --mono · 9px TASA Orbiter, rgba(26,26,26,0.12) border
작가명 --sans · 12px · 500 Pretendard, --charcoal
가격 --sans · 13px · 700 Pretendard, --charcoal
찜 아이콘 bookmark · square/miter --text-muted (outline) / --charcoal (filled)
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 홈 화면 내 "차트 PICK" 영역의 이동 버튼 클릭 시 진입
  • 로그인 / 비로그인 사용자 모두 접근 가능
  • 찜 기능은 로그인 사용자만 사용 가능
    • 비로그인 사용자가 찜 아이콘 클릭 시 로그인 안내 모달 (LOG-009) 노출
1 헤더
  • 구성
    • 좌측: 뒤로가기 아이콘
    • 중앙: 타이틀 기획전
  • 동작
    • 뒤로가기 버튼 클릭 시
      • 홈화면으로 이동
2 차트 PICK 대배너
  • 구성
    • "차트 PICK" 대표 이미지 영역
    • "차트 PICK" 성격을 설명하는 시각적 배너 (이미지 또는 이미지+텍스트 구성)
  • 동작
    • 배너는 스크롤 시 상단 고정되지 않음
    • 배너 자체는 액션 없음 (단순 정보 제공 영역)
3 작품 리스트 영역
  • 구성
    • "차트 PICK"에 포함된 작품 카드 리스트
    • 카드 각 요소:
      • 작품 이미지
      • 작가명
      • 작품명
      • 작품 사이즈
      • 가격
      • 찜 아이콘
  • 동작
    • 작품 카드 클릭 시
      • 해당 작품 상세 화면으로 이동 (MKT-013)
    • 찜 아이콘 클릭 시
      • 로그인 사용자
        • 찜 상태 토글 처리
      • 비로그인 사용자
        • 로그인 안내 모달(LOG-009) 노출
    • 찜 동작에 대한 별도 토스트 메시지는 노출하지 않음
4 공통 규칙
  • "차트 PICK" 화면 내 작품 노출 순서는 "차트 PICK" 설정값 기준
  • 작품 리스트는 페이징 또는 무한 스크롤 방식 적용 가능 (구현 방식 추후 결정)
  • 화면 내 모든 찜 기능은 로그인 사용자만 사용 가능
  • 비로그인 사용자는 앱 상태 변경 불가
← 이전 화면: HOM-004 다음 화면: MKT-001 →