콘텐츠로 이동

[YETI] 검색 오버레이

Screen ID Screen Title 진입 조건
SRCH-OVR-01 검색 오버레이 (입력 전) 헤더 검색 아이콘 클릭, 검색창에 검색어 없음
SRCH-RES-01 검색 오버레이 (입력 후) 검색창에 검색어 입력됨

Jordan 미팅에서 최종 확정. 본사(HQ)와 동일한 구성으로 간다 — 최근 검색어·최근 본 상품 등 부가 영역 없이 인기 상품 바로가기, 둘러보기 2개 영역만 노출.


SRCH-OVR-01 — 검색 오버레이 (입력 전)

섹션 제목: “SRCH-OVR-01 — 검색 오버레이 (입력 전)”

헤더 검색 아이콘 클릭 시 표시되는 초기 상태. 단일 컬럼, 2개 영역만 노출.

┌──────────────────────────────────────────────────────┐
│ [🔍 검색어를 입력하세요 ✕] │
├──────────────────────────────────────────────────────┤
│ 지금 가장 인기 있는 상품 │
│ ───────────────── │
│ [상품1] [상품2] [상품3] [상품4] [상품5] │
│ │
│ 상품 둘러보기 및 비교 │
│ ───────────────── │
│ Drinkware · Coolers · Bags · Cases & Storage · │
│ Outdoor Living · ... │
└──────────────────────────────────────────────────────┘
항목 내용
데이터 기준 인기 상품 표시 API (신규 개발 필요 — 기존 API 없음)
노출 수 최대 5개
상품 카드 구성 상품 이미지 · 상품명 · +N Colors
클릭 시 해당 상품 PDP로 이동

메가 메뉴에 표시되는 카테고리와 동일하게 노출.

카테고리
Drinkware
Coolers
Bags
Cases & Storage
Outdoor Living
(메가 메뉴 카테고리 변경 시 자동 반영)

SRCH-RES-01 — 검색 오버레이 (입력 후)

섹션 제목: “SRCH-RES-01 — 검색 오버레이 (입력 후)”

검색창에 검색어 입력 시 실시간 결과 표시. 검색결과와 연관검색어만 노출.

┌──────────────────────────────────────────────────────┐
│ [🔍 {검색어} ✕] │
├──────────────────────────────────────────────────────┤
│ 연관 검색어: {연관검색어1} {연관검색어2} ... │
│ │
│ "{검색어}" 검색 결과 N개 │
│ ───────────────── │
│ [상품1] │
│ [상품2] │
│ [상품3] │
│ [상품4] │
│ [상품5] │
│ [전체보기 →] │
│ │
│ (결과 없음 시, 오버레이 내 실시간 미리보기) │
│ 검색 결과가 없습니다. │
└──────────────────────────────────────────────────────┘
항목 내용
결과 수 표시 "{검색어}" 검색 결과 N개 형식으로 상단 표시
노출 상품 검색 결과 상위 5개
상품 정렬 검색 결과 기본 정렬 순서 그대로
상품 카드 구성 상품 이미지 · 상품명 · +N Colors
상품 클릭 시 해당 상품 PDP로 이동
전체보기 클릭 시 검색 결과 전체 페이지(/search?q={검색어})로 이동
Enter 입력 시 검색 결과 전체 페이지(/search?q={검색어})로 이동
결과 없음 페이지 이동 없이 오버레이 내에서 “검색 결과가 없습니다.” 실시간 미리 표시
항목 내용
노출 조건 검색어 입력 시 검색 결과 유무와 무관하게 표시
클릭 시 해당 연관 검색어로 검색 결과 갱신 (오버레이 내에서 즉시 갱신, 페이지 이동 없음)
데이터 기준 TBD — API/알고리즘 확정 필요

두 화면(SRCH-OVR-01, SRCH-RES-01) 모두 동일한 상품 카드 규격을 사용한다.

요소 규격
상품 이미지 대표 이미지 1장
상품명 상품 이름 텍스트
컬러 표시 +N Colors 형식
  • N = 해당 상품이 보유한 전체 컬러 수 (자기 자신 포함)
  • 컬러가 1개인 상품도 +1 Colors 표시
  • 최솟값: +1 Colors

항목 담당 내용
인기 상품 표시 API 개발팀 신규 개발 필요 — 기존 API 없음, 데이터 기준(구매량/조회수 등) 추가 기획 필요
연관 검색어 데이터 소스 개발팀 API/알고리즘 확정 필요
모바일 레이아웃 디자인 피그마 참고

버전 날짜 변경 내용
v2.0 2026-07-28 Jordan 미팅 확정 — 본사(HQ) 동일 구성으로 전면 재작성. 최근 검색어·최근 본 상품 섹션 제거. SRCH-OVR-01은 인기 상품 바로가기·둘러보기 2영역만 노출(인기상품 API 신규 개발 필요). SRCH-RES-01은 검색결과·연관검색어만 노출, 결과 없음 시 오버레이 내 실시간 미리보기
v1.2 2026-07-08 최근 검색어 추가(없으면 숨김). 최근 본 상품 5개·없으면 숨김 확정. 상품 클릭→PDP, 전체보기/Enter→검색결과 페이지 확정. 자동완성 제거
v1.1 2026-07-08 전면 재작성 — SRCH-OVR-01 초기 상태(인기 상품 5개·카테고리·최근 본 상품), SRCH-RES-01 검색어 입력 후(결과 수·상위 5개·빈 결과), 상품 카드 +N Colors 규격
v1.0 2026-06-24 최초 작성