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

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

MKT-002 · 2026. 03. 23

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

화면 위치 마켓

화면 ID MKT-002

작성일 2026. 03. 23

Description

0	화면 접근 조건	MKT-001(마켓 메인 화면)에서 검색 입력 필드 클릭 시 → 검색창 활성화 화면(1번) 노출 검색 필터 영역 우측 필터 버튼 클릭 시 → 상세 필터 바텀시트(2번) 노출
1	검색창 활성화 화면 - 최근 인기 검색어	검색창 활성화 영역 구성 작가명 입력용 검색 입력 필드 입력 필드 우측: 검색 아이콘 입력 필드 우측 또는 영역 내: 닫기(X) 버튼 검색 입력 필드 포커스 시 키보드 활성화 검색창 활성화 화면으로 전환 검색창 비활성화 이전 마켓 화면(MKT-001)으로 복귀 구성 최근 검색한 작가명 리스트 5개 노출 동작 최근 검색어 클릭 시 해당 검색어가 검색 입력 필드에 자동 입력 검색 실행 해당 영역 미노출 글자 입력 시, ③ 자동완성으로 하단 변경 우측 X 버튼 클릭 시, 최근 검색어 단일 삭제 동작 검색어 입력 후 검색 실행 시 작가명 기준으로 작품 리스트 필터링 결과는 MKT-001의 작품 카드 영역에 반영 작품 카드 영역에 결과 없음 상태 노출
2	세부 정렬 바텀시트	바텀시트 기본 구성 구성 화면 하단에서 슬라이드 업 형태로 노출 상단 우측 닫기(X) 버튼 필터 옵션 리스트 버튼 형태로 노출 구성 최신순 오래된 순 높은 가격 순 낮은 가격 순 인기순(찜) 옵션 버튼 클릭 시 해당 정렬 조건 선택 즉시 바텀시트 닫힘 마켓 작품 리스트 정렬 기준 변경 이후 마켓 화면에서 유지 동작 닫기(X) 버튼 클릭 시 선택 변경 없이 바텀시트 닫힘 바텀시트 닫힘 (선택 변경 없음)
3	(추가) 검색창 활성화 화면 - 자동완성	노출 조건 검색창 활성화 화면에서 검색어를 입력한 상태 한글 기준 1자 이상 입력 시 자동완성 리스트 노출 검색 입력 영역 입력된 검색어 표시 우측 검색 아이콘 버튼 우측 닫기(X) 버튼 입력값 기준 연관 키워드 리스트 노출 최대 5개 노출 각 항목 우측에 최근 검색 아이콘 노출 가능 배경 영역 검색 결과 리스트 영역은 유지 자동완성 영역이 상단 오버레이 형태로 노출 사용자가 검색창에 한글 1자 이상 입력 시 최근 검색어 리스트 대신 자동완성 리스트로 변경 입력값이 변경될 때마다 자동완성 리스트 재조회 자동완성 항목 클릭 시 해당 키워드가 검색창에 반영되고 검색 결과 화면으로 이동 검색 아이콘 클릭 시 현재 입력값 기준으로 검색 결과 화면 이동 닫기(X) 버튼 클릭 시 입력값 삭제 후 검색창 활성화 초기 상태로 복귀 최근 검색어 리스트 다시 노출 최근 검색어 리스트 노출 규칙 자동완성은 한글 입력 기준 1자 이상부터 동작 자동완성 리스트는 입력값과 일치하거나 연관도 높은 키워드 기준으로 노출 자동완성 항목이 없는 경우 리스트 미노출 가능 자동완성 선택 또는 검색 실행 시 검색어는 검색 기록에 저장 가능
4	토스트 메시지 정의	검색 결과 없음 검색 결과가 없습니다. 노출 가능 별도 토스트 미노출 자동완성 조회 실패 시 자동완성 결과를 불러오지 못했습니다. 일시적인 오류가 발생했습니다.
5	공통 규칙	검색 및 필터 기능은 로그인 여부와 관계없이 사용 가능 검색창 활성화 상태에서 검색어 미입력 시 최근 검색어 리스트 노출 검색어 한글 1자 이상 입력 시 자동완성 리스트 노출 검색어, 정렬 조건, 선택 필터는 사용자가 변경하지 않는 한 유지 자동완성 리스트는 최근 검색어 리스트와 동시에 노출하지 않음 검색어 입력값이 비워지면 자동완성 리스트는 제거되고 최근 검색어 리스트가 다시 노출됨

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원

홈

마켓

9:41

마켓

작가 이름을 입력해주세요

전체

판화

원화

아트토이

기타

아야코 록카쿠판화

53.0 × 45.5cm

68,000,000원

요시토모 나라판화

45.5 × 38.0cm

92,000,000원

김창열판화

72.7 × 60.6cm

28,000,000원

이배판화

130.3 × 97.0cm

45,000,000원

홈

마켓

정렬

최신순

오래된 순

높은 가격 순

낮은 가격 순

인기순 (찜)

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원

홈

마켓

개발 구현 가이드 — MKT-002 검색창 활성화 / 정렬 바텀시트

디자인 상태
완료

최종 승인
류우상 ✅

승인일
2026-03-27

Update History

2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정

2026.03.17디자인 산출물 전면 재구축 — 3폰 모두 MKT-001 베이스 UI 통일, 검색 오버레이 패턴, 정렬 바텀시트 리디자인, 자동완성 정적 뷰

2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성

2026.03.11구현 가이드 추가 (7섹션)

2026.03.04초기 디자인 작성

Implementation Specification

1. 화면 구조 개요

화면 유형: MKT-001 마켓 메인 위에 올라오는 오버레이 상태 전환 (단독 Route 아님)
3가지 상태: Phone 1 검색 활성화 (최근 인기 검색어) / Phone 2 판화 필터 + 정렬 바텀시트 / Phone 3 자동완성 (정적)
모든 폰이 MKT-001 마켓 메인 UI를 베이스로 공유 (statusbar → 마켓 헤더 48px → 스크롤 영역 → 탭바 80px → homebar)
진입 경로: MKT-001 검색 필드 탭 → Phone 1 / 필터 아이콘 탭 → Phone 2 바텀시트 / 검색어 입력 → Phone 3
접근 권한: 로그인·비로그인 모두 사용 가능
배경색: --bg #FAFAF8, 뷰포트 393 × 852px

2. 공통 레이어 구조 (3폰 공유)

순서	영역	치수	스타일
1	상태바	시스템	9:41, 셀룰러/와이파이/배터리 아이콘
2	마켓 헤더	height:48px	`--sans` 17px/700 `--charcoal` letter-spacing -0.02em, padding 0 28px, border-bottom 1px solid var(--border)
3	검색 섹션	40px inner, padding 10px 24px	스크롤 시 올라감. position:relative z-index:12. 검색바: bg var(--alpha-4), padding 0 14px gap 8px. placeholder: `--sans` 13px var(--text-disabled)
4	필터 탭	padding 8px 24px	position:sticky; top:0; z-index:8. 활성 탭: `--cta-gradient` #fff 600. 비활성: border 1px solid var(--alpha-12) `--charcoal`. 모두 `--sans` 12px, padding 6px 14px. 필터 아이콘: 32×32px border 동일
5	카드 그리드	padding 8px 24px 16px	grid 2열 1fr 1fr, gap 28px 16px. 카드: aspect-ratio 1/1, 작가명 14px/600, 크기 12px/400 rgba(6,6,6,0.4), 가격 13px/700
6	FAB	56×56px	position absolute, bottom 16px right 24px, bg `--red-brand` #961E23, + 아이콘 20px stroke #fff 2px
7	탭바	height:80px	마켓 활성: stroke #961E23 1.8px, 10px/600. 나머지: `--text-muted` 1.5px, 10px/500

3. Phone 1 — 검색 오버레이 (최근 인기 검색어)

검색바 클릭 시 활성 상태: border 1px solid --charcoal #1A1A1A, bg var(--alpha-4), placeholder "작가명" --text-muted, X 닫기 SVG 16px 노출
검색 패널: position:absolute; top:100% (검색 섹션 바로 아래 드롭). z-index:20, bg --bg, padding 12px 24px 0, box-shadow 0 4px 16px var(--alpha-8)
라벨: "최근 인기 검색어" --sans 11px/500 --text-muted letter-spacing 0.02em, margin-bottom 8px
검색어 행: height 44px, flex align-items:center. 텍스트: --sans 13px --text-secondary. border-bottom 1px solid var(--alpha-6), 마지막 행 border 없음. X 아이콘/삭제 기능 없음 (표시 전용)
딤 위치: 카드 그리드 래퍼 내부에만 (검색 패널은 딤 밖). position:absolute inset:0, bg rgba(26,26,26,0.25), z-index:4
닫기: X 버튼 또는 딤 클릭 → 검색바 비활성화 + 패널 숨김 + 딤 해제

4. Phone 2 — 판화 필터 + 정렬 바텀시트

판화 탭 활성: background --cta-gradient (레드 그라디언트), color #fff, font-weight 600. 전체 탭은 비활성 (border 스타일)
카드: 판화 카드 4장 (아야코 록카쿠, 요시토모 나라, 김창열, 이배)
필터 아이콘 클릭 → 바텀시트 열기: 딤 opacity 0→1, 시트 translateY(100%)→0
바텀시트 구조: position:absolute bottom:0, z-index:6, bg --bg #FAFAF8
- 핸들바: 36×4px bg var(--alpha-12), padding-top 10px, 중앙 정렬
- 헤더: "정렬" --sans 17px/700 --charcoal letter-spacing -0.02em + X 닫기 20px stroke --charcoal 2px square, padding 14px 24px 16px
- 구분선: 1px var(--border)
- 옵션 리스트: padding 8px 0. 각 행 height 50px, padding 0 24px. 텍스트: --sans 15px/500 --charcoal letter-spacing -0.01em, flex:1
- 현재 선택: 체크마크 SVG 18px stroke --red-brand #961E23 2.5px square/miter (polyline 20 6 9 17 4 12) + font-weight 500 (동일)
- 하단 safe area: 28px
딤: position:absolute inset:0, bg rgba(26,26,26,0.45), z-index:5, transition opacity 0.3s ease
옵션 선택 시: 체크마크 이동 + 터치 피드백 bg rgba(26,26,26,0.04) 200ms → 즉시 바텀시트 닫힘
닫기: X 버튼 / 딤 클릭 → 선택 변경 없이 닫힘

5. Phone 3 — 자동완성 (정적 표시)

검색바 활성 상태: border 1px solid --charcoal, "이" 입력됨 (--sans 14px --charcoal), 검색 아이콘 + X 닫기 모두 표시
자동완성 패널: position:absolute top:100%, z-index:20, bg --bg, padding 12px 24px 4px, box-shadow 동일
라벨: "자동 완성" --sans 11px/500 --text-muted
자동완성 행: 5개 (이배/이하늘/이나라/이금솔/이작가). height 44px, 입력 글자 bold --charcoal + 나머지 --text-secondary. 우측 화살표 SVG 14px --text-muted 1.5px round
딤: 카드 영역만 커버, 동일 rgba(26,26,26,0.25) z-index:4
인터랙션 없음: 정적 상태 표시만 (클릭 이벤트 불필요)

6. 네비게이션 플로우

검색 결과 카드 탭 → MKT-013 작품 상세
자동완성 항목 탭 → 해당 검색어로 검색 실행 → MKT-001 카드 리스트 필터링
검색창 닫기 (X / 딤 클릭) → MKT-001 마켓 메인 복귀
정렬 옵션 선택 → 바텀시트 닫힘 → MKT-001 리스트 재정렬

7. 에러 / 예외 처리

검색 결과 없음: "검색 결과가 없습니다" 안내 문구 중앙 표시
최근 검색어 없음: 해당 영역 미노출
자동완성 조회 실패: "자동완성 결과를 불러오지 못했습니다" 토스트
네트워크 오류: 로컬 최근 검색어만 표시
시스템 오류: "일시적인 오류가 발생했습니다" 토스트

8. 모션 스펙

검색바 활성화: border/background transition 200ms ease
검색 패널 표시: display:none → display:block (즉시)
딤 페이드: opacity transition, 카드 영역만
바텀시트 열기: translateY(100%) → translateY(0), 350ms, cubic-bezier(0.32,0.72,0,1). 딤 opacity 0→1, 300ms ease
바텀시트 닫기: translateY(0) → translateY(100%), 350ms. 딤 opacity 1→0 동시
정렬 터치 피드백: background rgba(26,26,26,0.04) 200ms → 원복 후 닫기

9. 여백 · 간격 요약

구간	값
콘텐츠 좌우 padding	24px
마켓 헤더 padding	0 28px, height 48px
검색 섹션 padding	10px 24px
검색바 inner padding	0 14px, gap 8px, height 40px
필터 탭 padding	8px 24px, gap 8px
카드 그리드	padding 8px 24px 16px, gap 28px 16px
검색 패널 padding	12px 24px 0
검색어 행 height	44px
바텀시트 핸들바	36×4px, padding-top 10px
바텀시트 헤더 padding	14px 24px 16px
정렬 옵션 행	height 50px, padding 0 24px
하단 탭바	height 80px, padding 0 24px

10. 적용 디자인 토큰

배경: --bg → #FAFAF8
텍스트 (primary): --charcoal → #1A1A1A
텍스트 (secondary): --text-secondary → #6B6B6B
텍스트 (muted): --text-muted → #888888
폰트: --sans → Pretendard Variable
활성 필터 탭: --cta-gradient → 레드 그라디언트
FAB / 브랜드: --red-brand → #961E23
체크마크: --red-brand → #961E23, stroke 2.5px
검색 딤: rgba(26,26,26,0.25), z-index:4
바텀시트 딤: rgba(26,26,26,0.45), z-index:5
구분선: var(--border) 또는 0.06
직각: 모든 컴포넌트 border-radius: 0 (R=0)

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