coastdigitalgroup/coastai-skills

검색 인터페이스 시스템

목적

검색 인터페이스 시스템은 일관되고 고성능의 발견(Discovery) 경험을 설계하기 위한 방법론을 제공합니다. internal-search-optimization이 '성장'과 논리 측면에 초점을 맞추는 반면, 이 시스템은 검색 UI의 디자인 패턴과 공간 인체공학을 정의합니다. 사용자가 검색 진입점을 즉시 찾고, (모바일에서도) 쉽게 상호작용하며, 인지 부하를 최소화하고 '정보의 냄새(scent of information)'를 극대화하는 방식으로 결과를 처리할 수 있도록 보장합니다.

사용 사례

• 글로벌 헤더나 고정 툴바에서 검색 진입점 설계
• SaaS 애플리케이션을 위한 'Command Center' 또는 'Omnibox' 경험 생성
• 이커머스 'Visual Search' 및 자동완성 드롭다운 구조화
• 문서 또는 카탈로그를 위한 고밀도 검색 결과 페이지(SERP) 설계
• 모바일 중심 디자인을 위한 'Full-screen Search' 오버레이 구현

사용하지 말아야 할 경우

• 정적 랜딩 페이지: 콘텐츠가 고정되어 있고 발견(Discovery)이 주요 목표가 아닌 경우
• 소규모 사이트(<20페이지): 강력한 내비게이션과 브레드크럼으로 발견성이 충분한 경우
• 순수 관계형 대시보드: 자유 텍스트 검색이 아닌 정의된 필터와 탭을 통해서만 데이터에 접근하는 경우

입력값

1. 사용자 의도 프로필: 사용자가 특정 SKU를 찾고 있는가(정밀 검색) 아니면 주제를 탐색하고 있는가(발견)?
2. 카탈로그 밀도: 시스템에 몇 개의 항목이 있으며, 메타데이터의 다양성은 어떠한가?
3. 주요 기기: 검색이 주로 모바일(터치)에서 사용되는가, 데스크톱(키보드)에서 사용되는가?
4. 기존 시스템: 색상 시스템, 간격 토큰, 타이포그래피 스케일 (fluid-spacing-system 및 fluid-typography-system에서)

출력값

1. 검색 트리거 사양: 검색창(정적, 확장 가능, 또는 아이콘 전용)의 시각적 정의
2. 자동완성 구조: 제안 드롭다운 디자인 (카테고리, 이미지, 키보드 상태 포함)
3. SERP 레이아웃 청사진: 결과 페이지의 공간 구성 (메타데이터 밀도와 가독성 조절)
4. 모바일 상호작용 맵: 검색이 헤더 아이콘에서 전체 화면 집중 인터페이스로 전환되는 방식에 대한 계획

워크플로우

1. 검색 트리거 패턴 정의

사용자 여정에서의 중요도에 따라 트리거를 선택합니다:

• 고정 검색창: 항상 표시되는 고대비 입력 필드. 이커머스 또는 검색 중심 사이트에 가장 적합합니다.
• 확장형 입력 필드: 아이콘 또는 작은 막대로 시작하여 클릭 시 확장됩니다. 검색이 내비게이션에 비해 부차적인 사이트에 가장 적합합니다.
• 'Command + K' 트리거: 모달을 여는 미묘한 힌트 또는 아이콘. 파워 유저용 SaaS 도구 또는 문서에 가장 적합합니다.

2. 자동완성(즉시) 경험 설계

즉각적인 피드백을 제공하여 '결과까지의 거리'를 줄입니다:

• 분류화: 결과를 유형별로 그룹화합니다(예: 제품, 문서, 도움말).
• 풍부한 메타데이터: 드롭다운 내에 작은 썸네일, 가격 또는 상태 배지를 포함합니다.
• 포커스 상태: interactive-state-system을 사용하여 키보드 사용자를 위해 현재 선택된 제안을 명확히 강조 표시합니다.
• ARIA 패턴: 사용자 정의 상호작용 모델을 발명하는 대신 입력/목록 상자 관계를 ARIA APG 콤보박스 패턴(role="combobox"와 aria-expanded, aria-controls, aria-activedescendant가 강조된 role="option"을 가리킴)으로 모델링합니다.

3. 결과 페이지(SERP) 계층 구조 수립

검색 결과에 visual-hierarchy-system을 적용합니다:

• '쿼리 에코': 사용자의 검색어를 눈에 띄게 표시하여 맥락을 확인합니다.
• 결과 카드: card-ui-system을 사용하여 결과 형식을 표준화합니다.
• 메타데이터 가중치: 제목이 가장 두드러지고, 그 다음으로 '스니펫'(쿼리와 일치하는 콘텐츠 부분)이 오도록 보장합니다.

4. 모바일 검색 레이어 구축

모바일의 검색은 위젯이 아닌 전용 모드입니다:

• 모드 전환: 검색을 탭하면 배경의 방해 요소를 제거하기 위해 전체 화면 오버레이가 열려야 합니다.
• 자동 포커스: 입력 필드에 자동으로 포커스를 두고 키보드를 트리거합니다.
• '엄지 영역' 동작: '지우기' 및 '취소' 버튼을 손이 닿기 쉬운 곳(최소 44x44px)에 배치합니다.

5. 로딩 및 빈 상태 정의

• 스켈레톤 결과: skeleton-state-system을 사용하여 결과를 가져오는 동안 레이아웃 안정성을 유지합니다.
• 스마트 '결과 없음': empty-state-system을 사용하여 정확히 일치하는 항목이 없을 때 대체 경로를 제공합니다.

결정 규칙

• 가시성 규칙: 검색을 대상 사용자의 >30%가 사용한다면 데스크톱에서는 항상 표시되는 전체 너비 검색창이어야 합니다.
• '세 단어' 최소: 시각적 지터를 방지하기 위해 사용자가 최소 3자를 입력할 때까지 자동 제안을 표시하지 마십시오.
• 결과 제한: 자동완성 제안을 5-8개 항목으로 제한하십시오. 더 많은 경우 '...에 대한 모든 결과 보기' 링크를 제공하십시오.
• 정보의 냄새: 검색 결과 스니펫에서 일치하는 용어를 굵게 표시하여 사용자가 관련성을 빠르게 스캔할 수 있도록 도와줍니다.

제약 조건

• 접근성: 검색 입력 필드에는 표시 가능한 레이블(또는 aria-label)이 있어야 합니다. 키보드 사용자는 화살표 키로 자동완성 목록을 탐색하고, Enter로 선택하고, Escape로 입력한 쿼리를 잃지 않고 닫을 수 있어야 합니다. 모든 대화형 대상(지우기 버튼, 제안 행)은 WCAG 2.2 24x24px 최소 대상 크기(2.5.8)를 충족해야 합니다.
• 반응형: 자동완성 드롭다운은 뷰포트 너비를 초과해서는 안 됩니다.
• 대비: 일치하는 텍스트의 강조 표시는 WCAG AA 대비 비율을 충족해야 합니다(일반적으로 배경색 변경 또는 굵게 사용).

일반적인 실패 패턴

• '숨겨진 검색': 검색이 주요 내비게이션 방식인데도 사용자가 돋보기 아이콘을 찾도록 강제하는 경우
• '단절된' 드롭다운: 입력 필드의 너비나 정렬과 일치하지 않아 시각적으로 '뜨는' 자동완성 메뉴
• 키보드 트랩: 사용자가 Escape 키로 검색 오버레이나 드롭다운을 종료할 수 없는 경우
• 막다른 결과: 결과 페이지에서 검색창에 검색어를 유지하지 않아 사용자가 재입력해야 하는 경우

검증 기준

• 검색 진입점이 페이지 스캔 후 2초 이내에 보여야 합니다.
• 자동완성 드롭다운에 풍부한 메타데이터(이미지/레이블)가 적절히 포함되어야 합니다.
• 키보드 내비게이션(화살표, Enter, Escape)이 검색에 대해 완전히 정의되고, ARIA APG 콤보박스 패턴을 따라야 합니다.
• 모바일 검색 시 즉시 키보드 포커스가 있는 전체 화면 모드가 열려야 합니다.
• 검색 결과 페이지는 쿼리를 표시하고 일치하는 용어를 강조해야 합니다.
• 결과 로딩 시 스켈레톤 상태가 사용되어야 합니다.
• 모든 대화형 요소가 최소 44x44px 터치 대상을 충족해야 합니다.