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

마켓 메인 화면

MKT-001 · 2026. 03. 04

화면 이름 마켓 메인 화면
화면 위치 마켓
화면 ID MKT-001
작성일 2026. 03. 04
9:41
마켓
작가 이름을 입력해주세요
전체
판화
원화
아트토이
기타

김작가 판화

30x40cm

₩350,000

이작가 원화

50x60cm

₩1,200,000

박작가 아트토이

15x15cm

₩180,000

최작가 판화

25x30cm

₩450,000

정작가 원화

40x50cm

₩800,000

한작가 기타

20x25cm

₩250,000

홈
마켓
PS
MY
1-1
1-2
1-3
1-4
1-5
9:41
마켓
작가 이름을 입력해주세요
전체
판화
원화
아트토이
기타

김작가 판화

30x40cm

₩350,000

최작가 판화

25x30cm

₩450,000

윤작가 판화

35x45cm

₩520,000

송작가 판화

20x25cm

₩280,000

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

김작가 판화

30x40cm

₩350,000

이작가 원화

50x60cm

₩1,200,000

박작가 아트토이

15x15cm

₩180,000

최작가 판화

25x30cm

₩450,000

홈
마켓
PS
MY
Description
0 화면 접근 조건
  • 하단 내비게이션의 마켓 탭 클릭 시 진입
  • 홈 화면 내 마켓 관련 CTA 클릭 시 진입
  • 로그인/비로그인 사용자 모두 접근 가능
  • 비로그인 사용자가 찜/판매 등록 버튼 클릭 시 로그인 안내 모달
1-1 헤더
  • 좌측 타이틀 마켓
  • 우측 검색(기본 상태)
  • 스크롤 진행 시 노출 상태
  • 검색 버튼은 노출하지 않음(3번 화면에서 노출)
1-2 검색창 영역
  • 작가 이름을 입력할 수 있는 검색 입력 필드
  • 입력 필드 우측 검색 아이콘
  • 탭해서 텍스트 입력 내 '닫기(X)' 버튼
1-3 필터 영역
  • 카테고리 필터 탭(전체/판화/원화/아트토이/기타)
  • 우측 하단 바(정렬/상세 필터 진입점)
  • 카테고리 필터 클릭 시 작품 리스트 갱신
  • 좌측 아이콘 클릭 시 정렬(MKT-002)
1-4 작품 카드 영역
  • 작품 카드 그리드 형태 노출
  • 카드 각 요소
    • 작품 이미지
    • 작품명
    • 작가명
    • 사이즈
    • 가격
    • 찜 아이콘
  • 작품 카드 클릭시 상세(MKT-013)
  • 찜 아이콘 로그인/비로그인 분기
1-5 판매등록 버튼
  • 화면 하단 플로팅 컬러에 따라 판매 등록 버튼
  • 로그인 사용자 클릭 시 MKT-003
  • 비로그인 시 LOG-009
2 검색 필터 적용 카테고리 탭 활성화 화면
  • 검색 필터 영역에서 선택된 카테고리 탭이 활성화된 상태로 유지
  • 작품 리스트는 선택된 필터 조건에 맞게 갱신된 상태로 노출
  • 필터 조건 변경 시 실시간 리스트 갱신
3 마켓 스크롤 다운 시 검색창 숨김, 판매등록 바텀 추가 화면
  • 헤더 구성 변경
  • 검색 배너 노출
  • 판매 등록 바텀 바 노출
  • 검색 전환 화면으로 이동(구현 방식 추후 결정)
4 토스트 메시지 정의
  • 검색 결과가 없는 경우 토스트 노출 가능
  • 찜/판매 등록 동작에서는 별도 토스트 미노출
5 공통 규칙
  • 마켓 영역 내 작품 노출 순서는 기본 정렬 기준 적용
  • 필터/검색/스크롤 상태에 따라 UI만 변경되며, 새로운 진입 시 기본 형식으로 초기화
  • 비로그인 사용자는 상태 변경 및 판매 등록 불가

Design Output

UI 디자인 산출물

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

3번째 와이어프레임(우측)이 CHAART OS 디자인 토큰이 적용된 최종 디자인 산출물입니다. Paper-Catalog 메타포의 작품 카드, --red-brand 판매등록 FAB, 직각 철학이 반영된 필터 탭 등이 적용되었습니다.

Applied Design Tokens
요소Token값
전체 배경 --bg #FAFAF8
헤더 --sans · 17px · 700 Pretendard, --charcoal
검색 필드 --sans · 13px · --text-muted placeholder 색상, 직각 (R=0)
필터 탭 활성 --charcoal bg · #fff text 직각, 600 weight
필터 탭 비활성 transparent · --charcoal border: 1px solid rgba(26,26,26,0.12)
작품 카드 --paper + linen Paper-Catalog 메타포, CHRT 워터마크
찜 아이콘 bookmark · square/miter --text-muted, 14px, 직각 철학
판매등록 버튼 --red-brand bg · #fff 56px FAB, 직각, + 아이콘 square/miter
탭바 active: --charcoal · inactive: --text-muted 비활성: rgba(26,26,26,0.06) bg
좌우 패딩 24px 전체 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
0 화면 접근 조건
  • 하단 내비게이션의 마켓 탭 클릭 시 진입
  • 홈 화면 내 마켓 관련 CTA 클릭 시 진입
  • 로그인/비로그인 사용자 모두 접근 가능
  • 비로그인 사용자가 찜/판매 등록 버튼 클릭 시 로그인 안내 모달
1-1 헤더
  • 좌측 타이틀 마켓
  • 우측 검색(기본 상태)
  • 스크롤 진행 시 노출 상태
  • 검색 버튼은 노출하지 않음(3번 화면에서 노출)
1-2 검색창 영역
  • 작가 이름을 입력할 수 있는 검색 입력 필드
  • 입력 필드 우측 검색 아이콘
  • 탭해서 텍스트 입력 내 '닫기(X)' 버튼
1-3 필터 영역
  • 카테고리 필터 탭(전체/판화/원화/아트토이/기타)
  • 우측 하단 바(정렬/상세 필터 진입점)
  • 카테고리 필터 클릭 시 작품 리스트 갱신
  • 좌측 아이콘 클릭 시 정렬(MKT-002)
1-4 작품 카드 영역
  • 작품 카드 그리드 형태 노출
  • 카드 각 요소
    • 작품 이미지
    • 작품명
    • 작가명
    • 사이즈
    • 가격
    • 찜 아이콘
  • 작품 카드 클릭시 상세(MKT-013)
  • 찜 아이콘 로그인/비로그인 분기
1-5 판매등록 버튼
  • 화면 하단 플로팅 컬러에 따라 판매 등록 버튼
  • 로그인 사용자 클릭 시 MKT-003
  • 비로그인 시 LOG-009
2 검색 필터 적용 카테고리 탭 활성화 화면
  • 검색 필터 영역에서 선택된 카테고리 탭이 활성화된 상태로 유지
  • 작품 리스트는 선택된 필터 조건에 맞게 갱신된 상태로 노출
  • 필터 조건 변경 시 실시간 리스트 갱신
3 마켓 스크롤 다운 시 검색창 숨김, 판매등록 바텀 추가 화면
  • 헤더 구성 변경
  • 검색 배너 노출
  • 판매 등록 바텀 바 노출
  • 검색 전환 화면으로 이동(구현 방식 추후 결정)
4 토스트 메시지 정의
  • 검색 결과가 없는 경우 토스트 노출 가능
  • 찜/판매 등록 동작에서는 별도 토스트 미노출
5 공통 규칙
  • 마켓 영역 내 작품 노출 순서는 기본 정렬 기준 적용
  • 필터/검색/스크롤 상태에 따라 UI만 변경되며, 새로운 진입 시 기본 형식으로 초기화
  • 비로그인 사용자는 상태 변경 및 판매 등록 불가
← 이전 화면: HOM-005 다음 화면: MKT-002 →