Search

Search (검색)

검색은 탐색 또는 발견을 위한 필수 패턴이에요. 우리는 검색 엔진이 종종 인터넷의 주요 진입점인 검색의 시대에 살고 있습니다. 사용자의 검색 작동 방식에 대한 기대는 높으며, 일관성이 매우 중요해요.

출처: Search

본문

개요 (Overview)

검색은 발견의 직관적인 방법으로, 사용자에게 키워드를 사용해 웹사이트나 애플리케이션을 탐색하는 방법을 제공해요. 대부분의 검색은 광범위하게 시작하며, 필터가 적용되면서 범위가 좁아집니다.

사용하는 검색 방법은 검색되는 데이터 세트의 크기와 제품 내 검색의 위치에 따라 달라집니다.

검색 필드의 배치는 애플리케이션의 구성과 검색 범위에 따라 달라져요. 글로벌 검색의 경우 배치 안내는 글로벌 헤더 패턴을 참고하세요. 데이터 테이블 내 검색 배치는 데이터 테이블 컴포넌트를 참고하세요.

구조 (Anatomy)

  • 범위 필터(Scope filter, 선택): 선택적인 범위 지정 검색은 사용자가 웹사이트의 섹션이나 카테고리로 검색을 한정할 수 있게 해줘요.
  • 검색 아이콘(Search icon): 검색 필드를 나타냅니다. 돋보기 아이콘은 검색을 나타내는 보편적인 방법이에요.
  • 플레이스홀더 텍스트(Placeholder text): 사용자가 무엇을 검색할 수 있는지 힌트하는 유용하고 짧은 텍스트예요. 예: "네트워크나 장치를 검색해 보세요."
  • 텍스트 입력 필드(Text entry field): 사용자가 검색어를 입력하는 곳이에요.
Type When to use Use cases
Basic search 사용자가 검색을 수행하고 별개의 결과 페이지로 라우팅될 때. 글로벌 검색, 또는 사용자를 별개의 결과 페이지로 라우팅하는 어떤 검색
Active search 단일 페이지, 웹사이트, 테이블 같은 작은 데이터 세트에 가장 좋아요. 사용자가 검색어에 기반한 지속적인 피드백으로 혜택을 받고, 서버가 상당한 검색어 부하를 처리할 수 있을 때. 데이터베이스를 적극적으로 검색하고 결과 패널이나 현재 페이지에 상위 결과를 나열. 예: 카탈로그 검색, 작은 웹사이트 검색, 테이블 안의 작은 데이터 세트 검색, 제품·애플리케이션 페이지에 내장된 정보의 하위 집합 검색
Focused search 검색이 활성 사용자에게 특정한 태스크나 정보에 집중될 때. 광범위한 기본 검색의 힘을 제공하면서 검색 범위를 집중해 서버 부하를 제한. 할당된 태스크, 제품 카탈로그, 개인 저장소, 활성 사용자가 만든 작업

모범 사례 (Best practices)

막다른 길 피하기 (Avoid dead ends)

검색이 "No results"를 반환하면 후속 동작을 제안하세요. 사용자가 찾고 있는 것을 찾도록 돕는 제안과 유용한 리소스를 제공하세요. 검색 무결과에 대한 더 자세한 내용은 빈 상태 패턴을 참고하세요.

로딩 표시자 포함하기 (Include a loading indicator)

검색이 잠시보다 더 걸린다면 로딩 표시자를 포함하세요. 로딩 상태는 검색이 여전히 진행 중임을 알리는 유용한 도움말 텍스트로 빈 상태를 반영해야 해요. 고급 리소스 집약적 검색에는 프로그레스 바를 포함하세요. 사용자가 검색이 얼마나 진행되었는지, 완료까지 대략 얼마나 걸릴지 알게 하세요.

결과 수 표시하기 (Display the number of results)

결과 없는 검색을 포함해 항상 검색 결과 수를 포함하세요. 범위 필터를 제공할 계획이라면 각 범위 선택기에도 결과 수를 포함하세요.

라벨 포함하지 않기 (Don't include a label)

검색 필드에 라벨을 추가하지 마세요. 사용자는 검색 필드를 기대하고 이해하며 라벨이 필요하지 않습니다. 검색 아이콘과 유용한 플레이스홀더 텍스트가 필드가 검색용임을 명확히 나타내야 해요.

유용한 플레이스홀더 텍스트를 제공하고 검색 아이콘을 포함하세요. 검색 필드에 라벨을 포함하지 마세요.

검색 필드 지역화하기 (Localize the search field)

오른쪽에서 왼쪽으로 읽는 언어의 경우 다음 예시처럼 검색 상자의 레이아웃을 뒤집으세요.

검색 아이콘은 언어와 국가에 걸쳐 인식되고 수용됩니다.

검색 필드에 범위 필터 추가하기 (Add a scope filter to your search field)

선택적인 범위 지정 검색은 사용자가 한 번에 모든 것을 검색하는 글로벌 검색 대신 웹사이트의 섹션이나 카테고리로 검색을 한정할 수 있게 해줘요. 한 번에 하나의 범위 카테고리만 선택할 수 있지만, 드롭다운은 항상 "All" 또는 "Any" 옵션을 포함해야 하고 이 옵션이 기본으로 선택되어야 합니다. "All" 또는 "Any"가 선택되면 필드는 기본 글로벌 검색으로 기능합니다.

기본 검색은 사용자를 별개의 결과 페이지로 안내하는 모든 검색을 수반합니다. 이런 경우 활성 사용자의 키워드와 일치하는 인기 검색, 활성 사용자의 최근 검색, 또는 둘 다를 제공하세요.

기본 검색은 사용자가 검색을 실행할 때까지 실제로 데이터 세트를 쿼리하지 않아요.

When to use
검색이 비쌀 때 대량의 정보를 검색하는 것은 리소스 집약적이고 비쌀 수 있으며, 특히 많은 사용자가 동시에 정보를 검색할 때 그렇습니다. 문자가 입력되거나 제거될 때마다 검색을 적극적으로 실행하는 것은 비현실적일 수 있어요.
검색이 느릴 때 정보의 본문이 방대하면 적극적 검색은 실용성이 없을 만큼 느려질 수 있어요. 각 문자 입력 뒤의 긴 처리 시간은 애플리케이션이나 웹사이트가 응답하지 않는 것처럼 보이게 만듭니다.
정보가 낯설 때 사용자가 낯선 애플리케이션이나 웹사이트를 검색할 때 전용 검색 결과 페이지는 데이터 구조와 사용 가능한 리소스에 대한 더 나은 아이디어를 줄 수 있어요.

동작 (Behaviors)

최근 검색 제안 (Recent search suggestions)

사용자가 검색 필드를 클릭하거나 탭하면 사용자의 최근 검색, 인기 검색, 또는 둘 다의 메뉴가 보여집니다. 사용자가 필드에 입력하면 이 메뉴는 검색어에 기반한 제안으로 대체됩니다.

자동완성 제안 (Type-ahead suggestions)

자동완성 제안은 사용 검색 패턴의 지속적 분석에서 생성되며 서버에 최소한의 부하를 둡니다. 검색에 전념하지 않고도 사용자는 결과 미리보기를 보고, 추가 검색어 제안을 보거나, 찾고 있던 것을 정확히 좁힐 수 있어요.

자동완성 제안은 사용자가 검색 필드에 입력을 시작하자마자 나타납니다.

결과 페이지 (Results page)

사용자가 검색을 실행하면 별개의 결과 페이지로 안내됩니다. 이 페이지에서 사용자는 검색 결과를 좁히기 위해 필터를 선택하는 옵션이 있어야 해요. 사용자가 검색하기 전에 필터를 제공하는 것을 선호한다면 범위 필터를 추가하는 것을 고려하세요.

결과 페이지의 디자인은 제품의 필요에 크게 의존하며, 검색 결과 페이지에 대한 더 구체적인 디자인 안내는 미래 패턴 안내에서 다룰 것입니다.

활성 검색은 애플리케이션이나 데이터 세트를 검색하는 빠른 방법이에요. 각 문자가 입력된 후 검색이 실행되며 결과는 검색 필드 바로 아래에 즉시 표시됩니다. 활성 검색을 키워드로 데이터 세트를 필터링하는 방법으로 생각할 수 있습니다.

활성 검색은 검색 필드, 검색 아이콘, 지우기/취소 버튼 역할을 하는 X로 구성됩니다. 검색이 적극적으로 실행되고 사용자가 결과 페이지로 라우팅되지 않으므로 Search나 Go 버튼이 없어요.

When to use
데이터가 제한적일 때 활성 검색은 검색이 정확한 결과를 반환할 가능성이 높은 경우, 작은 웹사이트나 데이터가 제한된 데이터 테이블 같은 곳에 사용해야 합니다. 제품 카탈로그나 도서관 같은 항목 카탈로그를 훑어볼 때도 활성 검색을 사용할 수 있어요.
사용자가 무엇을 찾을지 알 때 사용자가 웹사이트나 애플리케이션에 익숙하다면 검색은 사용자가 존재를 아는 리소스를 찾는 데 사용될 가능성이 높아요. 검색 결과 패널에서 결과를 적극적으로 반환하면 사용자가 페이지나 리소스로 직접 탐색할 수 있습니다.
페이지 내 카탈로그를 필터링할 때 제품이 페이지에 카탈로그를 제시한다면 활성 검색을 사용해 검색어에 기반해 옵션을 정제할 수 있어요.

동작 (Behaviors)

검색 필드 (Search field)

활성 검색 플레이스홀더 텍스트는 기본 검색보다 더 구체적이어야 하며 사용자가 검색 필드에 입력을 시작할 때까지 보여야 해요. 결과 패널에 클릭하면 기본 검색처럼 작동하는 "See all results" 항목을 선택적으로 추가할 수 있습니다.

카탈로그나 도서관에 활성 검색을 사용한다면 사용자가 입력할 때 페이지 내 결과를 정제하세요.

결과 제시하기 (Presenting results)

활성 검색은 더 빠른 검색 인플레이스 경험으로 의도됩니다. 사용자는 결과 패널에서 찾는 것을 찾아야 해요. 활성 사용자의 최근 검색은 검색 필드 아래 패널에 나타나야 하며, 사용자가 입력을 시작하면 일치하는 검색 결과로 대체되어야 합니다.

오퍼링 카탈로그처럼 전체 페이지에 표시되는 작은 정보 집합에 활성 검색을 구현할 수도 있습니다. 검색이 실행되기 전에는 모든 항목이 표시되어야 해요. 사용자가 입력을 시작하면 사용자 검색과 일치하는 항목만 표시하세요.

집중 검색은 기본 검색과 활성 검색의 결합이에요. 사용자는 자신의 즉각적인 페이지, 제품, 또는 범위 내에서 결과가 활발히 표시됩니다. 그 결과 아래에서 사용자는 모든 사용 가능한 데이터를 검색하도록 범위를 넓힐 수 있는 옵션이 있습니다.

집중 검색은 카탈로그나 제품군의 일부인 특정 도구를 사용하는 사용자에게 이상적입니다.

When to use
제품군 내에서 집중 검색은 활성 사용자와 관련된 결과를 적극적으로 제시할 수 있어요. 이는 검색에 필요한 리소스를 제한하면서도 사용자에게 범위를 전체 제품 카탈로그나 데이터베이스로 넓힐 옵션을 계속 제공합니다.
폴더나 데이터 세트 내에서 집중 검색은 폴더나 버킷 안을 검색하는 데 이상적이며, 사용자는 데이터 구조를 통해 검색을 더 집중하거나 확장할 수 있어요. 결과 패널이 사용자에게 필요한 것을 전달하지 못하면 검색 필드에서 탐색하지 않고 다른 곳을 검색할 수 있습니다.

동작 (Behaviors)

검색 필드 (Search field)

집중 검색은 그 검색의 초점(사용자, 카테고리, 데이터 세트)과 관련된 결과를 쿼리합니다. 검색 결과는 활성 검색처럼 패널에 제시되지만, 결과 아래에는 범위를 넓혀 전체 페이지 검색 결과를 보는 옵션이 포함됩니다.

사용자가 결과 패널에서 하위 카테고리를 선택하면 검색은 필터가 적용된 기본 검색처럼 기능합니다. 선택된 필터는 사용자가 필터를 버리거나 새 세션을 시작할 때까지 이후 검색 중에 지속되어야 합니다.

결과 제시하기 (Presenting results)

사용자가 집중 검색 필드를 클릭하거나 탭하면 활성 사용자의 최근 검색, 사용자나 세션에 특정한 제안, 또는 둘 다 있는 메뉴가 나타납니다. 사용자가 입력을 시작하면 제안이 사라지고 각 문자가 입력됨에 따라 결과가 정제됩니다.

카테고리 내 "View all" 옵션으로 활성 결과를 카테고리별로 묶을 수도 있습니다. 이는 정보가 어디에 사는지 모르고 여러 비슷한 데이터 세트 내에서 검색할 수 있는 사용자에게 이상적입니다. 사용자가 데이터의 위치를 알 가능성이 높다면 범위 필터를 제공하세요.

성공적인 집중 검색은 사용자를 페이지나 리소스로 직접 라우팅합니다. 사용자가 "See all results"를 선택하는 경우 결과 페이지를 제시하세요. 결과 없는 검색을 포함해 항상 검색 결과 수를 포함하세요.

접근성 (Accessibility)

사용자는 검색 상자의 입력 필드로 TAB해 입력을 시작하고 ENTER를 눌러 검색어를 실행할 수 있어야 합니다.

범위 드롭다운 및/또는 자동완성 제안을 사용한다면 그것들도 키보드로 탐색 가능해야 해요. 범위의 경우 TAB이 드롭다운을 선택하고 ARROW 키가 그것을 열어 메뉴를 순환하게 합니다. ENTER는 드롭다운에서 선택을 하고 사용자를 검색 상자의 입력 필드로 진행시켜야 합니다.

자동완성 제안의 경우 ARROW 키가 표시된 제안을 순환하고, ENTER가 제안을 선택하며, ESCAPE가 아무것도 선택하지 않고 자동완성 메뉴에서 나가게 합니다.

패싯 필터링 (Faceted filtering)

사용자는 필터 패널로 TAB해 서로 다른 그룹을 순환할 수 있어야 합니다. ENTER를 누르면 그룹 안의 패싯으로 선택이 이동해 사용자가 ARROW 키로 패싯을 이동할 수 있습니다. 패싯이 포커스된 동안 ENTER를 누르면 패싯을 선택하거나 선택 해제하게 토글합니다.

패싯이 선택되거나 선택 해제된 후 콘텐츠가 다시 로드될 때 포커스 상태가 유지되어야 하므로, 사용자가 리스트를 따라 내려가며 모든 것을 다시 TAB할 필요가 없습니다.

컴포넌트 (Components)

  • 체크박스 (Checkbox)
  • 날짜 선택기 (Date picker)
  • 모달 (Modal)
  • 페이지네이션 (Pagination)
  • 검색 (Search)
  • 선택 (Select)
  • 텍스트 입력 (Text input)
  • UI 셸 (UI shell)

패턴 (Patterns)

  • 빈 상태 (Empty states)
  • 필터링 (Filtering)

참고 자료 (References)

  • Apple Human Interface Guidelines, Search Fields (2019)
  • Nick Babich, Best Practices for Search Results (2017)
  • Think with Google, In-App Search (2016)

더 알아보기 (Learn more)

검색은 데이터 세트 크기와 위치에 따라 기본·활성·집중 검색으로 나뉘어요. 기본 검색은 별개 결과 페이지로, 활성 검색은 작은 데이터에 즉시 결과, 집중 검색은 그 둘을 결합해 범위를 집중·확장합니다. 막다른 길을 피해 무결과에 후속 제안을 하고, 로딩 표시자와 결과 수를 포함하며, 검색 필드에는 라벨 대신 아이콘과 플레이스홀더를, RTL 언어에는 레이아웃 뒤집기를 사용하는 게 좋습니다.