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

검색창 활성화 / 상세 필터 바텀시트

MKT-002 · 2026. 03. 04

화면 이름 검색창 활성화 / 상세 필터 바텀시트

화면 위치 마켓

화면 ID MKT-002

작성일 2026. 03. 04

9:41

작가명

최근 검색

작가명

김작가 판화

₩350,000

이작가 원화

₩1,200,000

홈

마켓

9:41

마켓

전체

판화

원화

정렬

최신순

오래된 순

높은 가격 순

낮은 가격 순

인기순(찜)

Description

0	화면 접근 조건	MKT-001 마켓 메인 화면에서 검색 입력 필드 클릭 시 검색창 활성화 화면(1번) 노출 같은 화면 상세 필터 바텀 클릭 시 상세 정렬 바텀시트(2번) 노출 로그인/비로그인 모두 접근
1	검색창 활성화 화면	검색창 활성화 영역 작가명 입력 시 연관 검색어 리스트 노출 최근 검색어가 있을 경우 리스트 노출 검색 결과 있으면 목록 노출 없으면 "검색 결과가 없습니다" 표시
2	세부 정렬 바텀시트	바텀시트 기본 구성 화면 하단에서 슬라이드 업 딤 처리 배경 정렬 옵션 최신순 오래된순 높은가격순 낮은가격순 인기순(찜) 선택 버튼 클릭 시 정렬 적용 및 리스트 반영 바텀시트 닫기(X 또는 배경 클릭)
3	토스트 메시지 정의	검색 결과가 없는 경우 토스트 노출 가능 필터/정렬 변경 시에는 토스트 미노출
4	공통 규칙	검색 및 필터 기능은 로그인 여부와 관계없이 사용 가능 검색창 활성 상태에서 배너 노출 없음 단독 화면이 아닌 오버레이/상태 전환으로 처리

Design Output

UI 디자인 산출물

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

9:41

작가명

최근 검색

작가명

김작가 판화

₩350,000

이작가 원화

₩1,200,000

홈

마켓

9:41

마켓

전체

판화

정렬

최신순

오래된 순

높은 가격 순

낮은 가격 순

인기순(찜)

Applied Design Tokens

요소	Token	값
전체 배경	`--bg`	#FAFAF8
검색 필드 활성	`--charcoal` border · `--sans` 14px	직각 (R=0), 1px solid
최근 검색어	`--sans` · 13px · `--text-secondary`	#6B6B6B
바텀시트 배경	`--bg` · 직각	#FAFAF8 (R=0)
딤 오버레이	`--charcoal` 45%	rgba(26,26,26,0.45)
정렬 옵션	`--sans` · 15px · 500 · `--charcoal`	50px height, border-bottom 구분선
X 닫기 버튼	`--text-muted` · square/miter	22px, stroke 1.5px
좌우 패딩	24px	전체 콘텐츠 마진

Design Description

Update History

2026.03.04초기 디자인 작성

0	화면 접근 조건	MKT-001 마켓 메인 화면에서 검색 입력 필드 클릭 시 검색창 활성화 화면(1번) 노출 같은 화면 상세 필터 바텀 클릭 시 상세 정렬 바텀시트(2번) 노출 로그인/비로그인 모두 접근
1	검색창 활성화 화면	검색창 활성화 영역 작가명 입력 시 연관 검색어 리스트 노출 최근 검색어가 있을 경우 리스트 노출 검색 결과 있으면 목록 노출 없으면 "검색 결과가 없습니다" 표시
2	세부 정렬 바텀시트	바텀시트 기본 구성 화면 하단에서 슬라이드 업 딤 처리 배경 정렬 옵션 최신순 오래된순 높은가격순 낮은가격순 인기순(찜) 선택 버튼 클릭 시 정렬 적용 및 리스트 반영 바텀시트 닫기(X 또는 배경 클릭)
3	토스트 메시지 정의	검색 결과가 없는 경우 토스트 노출 가능 필터/정렬 변경 시에는 토스트 미노출
4	공통 규칙	검색 및 필터 기능은 로그인 여부와 관계없이 사용 가능 검색창 활성 상태에서 배너 노출 없음 단독 화면이 아닌 오버레이/상태 전환으로 처리

← 이전 화면: MKT-001 다음 화면: MKT-003 →