사용자 화면 · 마켓 / 판매등록

마켓 메인 화면

MKT-001 · 2026. 02. 02

화면 이름 마켓 메인 화면
화면 위치 마켓
화면 ID MKT-001
작성일 2026. 02. 02
MKT-001 MKT-001 MKT-001
Description
0 화면 접근 조건
  • 하단 내비게이션의 마켓 탭 클릭 시 진입
  • 홈 화면 내 마켓 관련 CTA 클릭 시 진입
  • 로그인 / 비로그인 사용자 모두 접근 가능
  • 찜 기능, 판매 등록 버튼은 로그인 사용자만 사용 가능
    • 비로그인 사용자가 찜/판매 등록 버튼 클릭 시 로그인 안내 모달(LOG-008) 노출
1-1 헤더
  • 구성
    • 좌측: 타이틀 마켓
    • 우측: 없음 (기본 상태)
    • 스크롤 전 기본 노출 상태
    • 검색 버튼은 노출되지 않음 (3번 화면에서 노출)
1-2 검색창 영역
  • 구성
    • 작가 이름을 입력할 수 있는 검색 입력 필드
    • 입력 필드 우측 검색 아이콘
    • 작가명 입력 후 검색 실행 시
      • 입력값 기준으로 작품 리스트 필터링
      • 전체 작품 리스트 유지
    • 검색창 정책은 추후 논의 후 작성 예정
1-3 필터 영역
  • 구성
    • 카테고리 탭 리스트
      • 전체 / 판화 / 원화 / 아트토이 / 기타
    • 카테고리 탭 클릭 시
      • 해당 카테고리 기준으로 작품 리스트 갱신
      • 검색 필터 카테고리 선택 화면으로 이동 (MKT-002)
1-4 작품 카드 영역
  • 구성
    • 작품 카드 그리드 형태 노출
    • 카드 구성 요소
      • 작품 이미지
      • 작품명
      • 작가명
      • 사이즈
      • 가격
      • 찜 아이콘
    • 작품 카드 클릭 시
      • 작품 상세 화면으로 이동 (MKT-013)
      • 로그인 사용자: 찜 상태 토글
      • 비로그인 사용자: 로그인 안내 모달(LOG-008) 노출
    • 찜 동작에 대한 별도 토스트 메시지는 노출하지 않음
1-5 판매등록 버튼
  • 구성
    • 화면 하단 플로팅 형태의 판매 등록 버튼
    • 로그인 사용자 클릭 시
      • 판매 등록 플로우 진입 (MKT-003)
      • 로그인 안내 모달(LOG-008) 노출
2 검색 필터 작품 카테고리 탭 활성화 화면
  • 구성
    • 검색 필터 영역에서 선택된 카테고리 탭이 활성화된 상태로 유지
    • 작품 리스트는 선택된 필터 조건에 맞게 갱신된 상태로 노출
    • 필터 조건 변경 시
      • 실시간으로 작품 리스트 갱신
3 마켓 스크롤 다운 시, 검색창 숨김 및 헤더 버튼 추가 화면
  • 헤더 변경
    • 구성
      • 좌측: 타이틀 마켓
      • 우측: 검색 버튼 아이콘 노출
      • 화면 스크롤 시
        • 검색 입력 필드 영역은 화면에서 사라짐
        • 헤더 우측에 검색 버튼 노출
        • 검색 입력 영역이 다시 노출되거나
        • 검색 전용 화면으로 이동 (구현 방식 추후 결정)
    • 구성
      • 작품 카드 영역은 동일한 구조 유지
      • 스크롤 상태에서도
        • 작품 클릭 / 찜 / 판매 등록 버튼 동작은 동일하게 유지
4 토스트 메시지 정의
  • 검색 결과가 없는 경우
    • 검색 결과가 없습니다. 토스트 노출 가능
5 공통 규칙
  • 마켓 화면 내 작품 노출 순서는 기본 정렬 기준 적용
  • 필터, 검색, 스크롤 상태에 따라 UI만 변경되며
    • 작품 카드의 기능 및 동작은 모든 상태에서 동일
  • 비로그인 사용자는 찜 상태 변경 및 판매 등록 불가

Design Output

UI 디자인 산출물

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

9:41
마켓
전체
판화
원화
아트토이
기타
이배 작품

이배 원화

130.3 × 97.0cm

45,000,000원

김창열 작품

김창열 원화

72.7 × 60.6cm

28,000,000원

남춘모 작품

남춘모 원화

100.0 × 80.3cm

18,500,000원

김선우 작품

김선우 원화

53.0 × 45.5cm

8,200,000원

아야코 록카쿠 작품

아야코 록카쿠 원화

162.0 × 130.3cm

120,000,000원

요시토모 나라 작품

요시토모 나라 아트토이

H 25.0cm

3,500,000원

홈
마켓
PS
MY
9:41
마켓
전체
판화
원화
아트토이
기타
남춘모 작품

남춘모 판화

100.0 × 80.3cm

18,500,000원

김선우 작품

김선우 판화

53.0 × 45.5cm

8,200,000원

이배 작품

이배 판화

130.3 × 97.0cm

45,000,000원

김창열 작품

김창열 판화

72.7 × 60.6cm

28,000,000원

홈
마켓
PS
MY
9:41
마켓
전체
판화
원화
아트토이
기타

이배 원화

130.3 × 97.0cm

45,000,000원

김창열 원화

72.7 × 60.6cm

28,000,000원

아야코 록카쿠 원화

162.0 × 130.3cm

120,000,000원

요시토모 나라 아트토이

H 25.0cm

3,500,000원

홈
마켓
PS
MY
개발 구현 가이드 — MKT-001 마켓 메인 화면
디자인 상태
완료
최종 승인
류우상 ✅
승인일
2026-03-27

Update History

2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.11구현 가이드 추가 (7섹션), 판매등록 FAB 토큰 테이블 --red-brand→--charcoal 수정(Figma 일치)
2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

  • 화면 유형: 전체 화면 (Full Screen), 뷰포트 393 x 852px
  • 3가지 상태: 기본(Default) / 필터 선택(Filter Active) / 스크롤 다운(Scrolled)
  • 진입 경로: 하단 탭바 > 마켓 탭 / 홈 화면 내 마켓 CTA
  • 접근 권한: 로그인·비로그인 모두 열람 가능 (찜·판매등록은 로그인 필요)
  • 배경색: --bg #FAFAF8 (Warm Paper)
  • 전체 콘텐츠 좌우 패딩: 24px

2. 레이어 구조 + 치수

Z 영역 높이 / 위치 스타일 상세
1iOS 상태바44px, top:0시스템 제공, bg: --bg #FAFAF8
2헤더48px타이틀 "마켓" — font: --sans Pretendard 17px/700, color: --charcoal #1A1A1A, letter-spacing:var(--ls-tight), padding: 0 28px, border-bottom: 1px solid rgba(26,26,26,0.07), bg: --bg
3검색창40px (inner) + padding 10px 24pxinner bg: rgba(26,26,26,0.05), inner padding: 0 14px, gap: 8px, placeholder: --sans 13px color rgba(26,26,26,0.35), 검색 SVG 16px stroke rgba(26,26,26,0.35), border-bottom: 1px solid rgba(26,26,26,0.07), R=0
4필터 탭auto, padding: 8px 24pxflex row, gap: 8px, overflow-x: auto, scrollbar-width: none. 활성 탭: bg --cta-gradient, color #fff, 600, R=0. 비활성 탭: transparent, color --charcoal, border 1px solid rgba(26,26,26,0.12). 탭 padding: 6px 14px, font: --sans 12px. 우측 정렬 아이콘: 32x32px border 1px solid rgba(26,26,26,0.12), SVG 16px stroke --charcoal
5작품 카드 그리드flex:1 (확장), padding: 8px 24px 16pxCSS Grid 2열, grid-template-columns: 1fr 1fr, gap: 28px 16px (row 28px, col 16px). 각 카드 상세 아래 참조
6판매등록 FAB56 x 56px, position: absolute, bottom: 16px, right: 24pxbg: --red-brand #961E23, + 아이콘 SVG 20px stroke #fff stroke-width 2 stroke-linecap: square stroke-linejoin: miter, R=0, z-index 위
7하단 탭바80px, bottom: 0bg: --bg #FAFAF8, border-top: 1px solid rgba(26,26,26,0.06), 4탭(홈/마켓/PS/MY), 활성 마켓: stroke --red-brand #961E23 1.8px + label 600, 비활성: stroke --text-muted 1.5px + label 500, label: --sans 10px, gap: 3px

3. 핵심 인터랙션

  • 필터 탭 전환: 전체/판화/원화/아트토이/기타 탭 클릭 → 활성 탭 bg를 --cta-gradient로 전환, 비활성 탭은 transparent + border 1px solid rgba(26,26,26,0.12). 작품 카드 리스트 실시간 필터링
  • 정렬 아이콘: 필터 탭 우측 32x32px 버튼 → MKT-002 정렬/상세 필터 바텀시트로 이동
  • 검색창 탭: 검색 필드 탭 → MKT-002 검색 활성화 화면으로 전환
  • 작품 카드 탭: 카드 영역 탭 → MKT-013 작품 상세 화면으로 이동
  • 찜(북마크) 토글: 카드 우상단 bookmark SVG 18px, stroke rgba(255,255,255,0.9), filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35)). 탭 시 fill --red-brand #961E23 + stroke --red-brand로 전환. 해제 시 fill none 복원
  • 판매등록 FAB 탭: 로그인 → MKT-003 판매등록 플로우, 비로그인 → LOG-009 로그인 안내 모달

4. 상태 변화

  • Default(기본): 헤더 + 검색창 + 필터 탭(전체 활성) + 카드 그리드 + FAB + 탭바. 검색창 표시, 헤더 우측 검색 아이콘 미표시
  • Filter Active(필터 선택): 선택된 카테고리 탭이 --cta-gradient bg로 활성 상태. 작품 리스트는 해당 카테고리로 필터링. 나머지 구조 동일
  • Scrolled(스크롤 다운): 검색창 영역 숨김(display:none 또는 height:0 transition). 헤더 우측에 검색 아이콘(SVG 20px, stroke --charcoal) 노출. 필터 탭 sticky 유지(border-bottom: 1px solid rgba(26,26,26,0.07) 추가). FAB 위치 유지

5. 네비게이션 플로우

  • 검색창 탭 → MKT-002 검색 활성화 / 상세 필터
  • 정렬 아이콘 탭 → MKT-002 정렬 바텀시트
  • 작품 카드 탭 → MKT-013 작품 상세
  • 판매등록 FAB 탭 (로그인) → MKT-003 판매등록 업로드 방식 선택
  • 판매등록 FAB 탭 (비로그인) → LOG-009 로그인 안내 모달
  • 찜 아이콘 탭 (비로그인) → LOG-009 로그인 안내 모달
  • 탭바 홈 → 홈 화면, PS → PS 화면, MY → MY 화면

6. 에러 / 예외 처리

  • 검색 결과 없음: 빈 상태 안내 메시지 표시 또는 토스트 알림
  • 찜/판매등록 비로그인: LOG-009 로그인 안내 모달 노출
  • 이미지 로드 실패: Paper-Catalog 플레이스홀더 유지 — bg: --paper #F0EDE6 + CHRT 워터마크
  • 네트워크 오류: 토스트 알림 + 재시도 가능 상태 유지
  • 필터 결과 0건: 해당 카테고리 빈 상태 안내 (카드 영역에 "작품이 없습니다" 텍스트)

7. 모션 스펙

  • 필터 탭 전환: bg-color transition 200ms ease-out
  • 검색창 숨김(스크롤): height 0 + opacity 0, duration 250ms, easing ease-out. 검색 아이콘 헤더 노출: opacity 1, duration 200ms
  • 찜 아이콘 토글: fill+stroke transition 250ms ease, 탭 시 scale(0.92) → scale(1) 200ms ease-out
  • 카드 리스트 필터링: opacity 0 → 1, duration 300ms ease-out (필터 변경 시 리스트 교체)
  • FAB 터치 피드백: scale(0.95) 100ms ease-out → scale(1) 150ms ease-out

8. 여백 · 간격 요약

구간 값
콘텐츠 좌우 padding24px (헤더만 28px)
검색창 outer padding10px 24px (상하 10px, 좌우 24px)
검색 필드 inner padding0 14px, gap 8px
필터 탭 영역 padding8px 24px
필터 탭 간 gap8px
필터 탭 inner padding6px 14px
카드 그리드 padding8px 24px 16px
카드 그리드 gaprow 28px, col 16px
카드 썸네일aspect-ratio: 1/1, bg: --paper #F0EDE6, overflow: hidden
카드 텍스트 margin-top10px
카드 작가명--sans 14px/600, color #060606, letter-spacing -0.02em, line-height 1.3
카드 카테고리 배지--sans 10px/500, color rgba(6,6,6,0.35), border 1px solid rgba(6,6,6,0.1), padding 1px 5px, margin-left 4px
카드 사이즈--sans 12px/400, color rgba(6,6,6,0.4), margin-top 3px
카드 가격--sans 13px/700, color #060606, letter-spacing -0.01em, margin-top 4px
찜 아이콘 위치position absolute, top 8px right 8px, 28x28px flex center
FAB → 탭바 간격FAB bottom: 16px (카드 영역 내 absolute)
탭바 padding0 24px, 4탭 space-around

9. 적용 디자인 토큰

  • 전체 배경: --bg → #FAFAF8
  • 헤더: --sans · 17px · 700 → Pretendard, --charcoal
  • 검색 필드: --sans · 13px · rgba(26,26,26,0.35) → placeholder 색상, 직각 (R=0)
  • 필터 탭 활성: --cta-gradient bg · #fff text → 직각, 600 weight
  • 필터 탭 비활성: transparent · --charcoal → border: 1px solid rgba(26,26,26,0.12)
  • 작품 카드: --paper + linen → Paper-Catalog 메타포, CHRT 워터마크
  • 찜 아이콘: bookmark 18px · round → stroke rgba(255,255,255,0.9), drop-shadow
  • 판매등록 FAB: --red-brand #961E23 bg · #fff → 56px, 직각, + 아이콘 20px square/miter
  • 탭바: active: --red-brand #961E23 · inactive: --text-muted → border-top: rgba(26,26,26,0.06)
  • 좌우 패딩: 24px → 전체 콘텐츠 마진
← 이전 화면: LOG-009 다음 화면: MKT-002 →