05 · Service Patterns · 탐색 · 발견
검색Search
사용자가 이미 무엇을 찾을지 알고 있을 때 꺼내 드는 가장 효율적인 도구. 검색창 자체보다 ‘결과가 나오기 전/직후’의 경험이 품질을 결정합니다.
검색 여정 3단계
1
진입
검색창을 눌러 커서가 들어간 순간. 최근 검색어 · 추천 설교 노출.
2
타이핑
자동완성 · 오타 교정 · 엔티티 프리뷰. 결과가 실시간으로 좁혀지는 체감.
3
결과
정확도 · 필터 · 정렬. 0건일 때 대안 제시가 진짜 실력.
검색창 설계
무엇을 찾으세요?⌘K
- placeholder는 “검색”보다 맥락 있는 한 문장. “설교, 찬양, 성경 구절로 검색”.
- 아이콘은 돋보기. 위치는 왼쪽이 기본, 모바일 풀폭은 오른쪽 돋보기 + 왼쪽 ‘뒤로’도 가능.
- ⌘K / Ctrl+K 단축키. 자주 쓰는 이용자를 위한 최소한의 접근성.
타이핑 중 경험
- 자동완성: 최근 검색 + 추천 + 엔티티 그룹(설교·찬양·성경 구절)으로 구분해서.
- 오타 교정: “혹시 "요한복음"을 찾으시나요?” 링크. 자동 치환은 공격적이니 ‘제안’에 그치게.
- 즉시 반영: 100~200ms 디바운스. 너무 빠르면 타이핑 중 흔들리고, 느리면 답답합니다.
Do· 엔티티별 그룹 자동완성
“은혜” 입력 시 설교 3개, 찬양 5개로 나누어 보여주세요. 사용자는 자신이 찾는 종류를 빠르게 고를 수 있습니다.
Don't· 뒤죽박죽 리스트
설교·찬양·공지를 한 덩어리로 뿌리면 사용자는 15개 중에서 시선을 헤매게 됩니다.
결과 화면
- 상단에 검색어 + 결과 개수: “‘은혜’ 검색 결과 47개”.
- 적용된 필터 · 정렬을 항상 노출. 결과가 이상하면 사용자가 이유를 바로 찾을 수 있도록.
- 하이라이트: 검색어와 일치한 부분에
<mark>를 씌우면 인지 속도가 올라갑니다.
결과 0건
일반 빈 상태와 다릅니다. 검색의 0건은 항상 “대안 제시”가 따라야 합니다.
- 오타 교정 링크.
- 필터를 완화했을 때의 결과(“필터 없이 전체 검색 시 24건”).
- 인기 검색어 · 카테고리 추천.
조합되는 컴포넌트
접근성
- 검색창은
role="searchbox"또는type="search". - 자동완성 목록은
role="listbox", 각 항목role="option",aria-activedescendant로 키보드 포커스 표시. - 결과 개수 변경은
aria-live="polite"로 “47개 결과” 안내.