Search Bar Usage

사용자가 특정 검색어를 입력해 검색어를 포함하는 콘텐츠를 선별하여 볼 수 있도록 합니다.

Layout

Placement

Search bar는 페이지 상단 또는 주요 탐색 영역에서 사용됩니다. 사용자의 시선 흐름과 탐색 경로 상에서 가장 빠르게 접근 가능한 영역에 위치시키는 것이 권장됩니다. 여러 데이터 그리드가 한 화면에 사용되는 경우처럼, 다양한 검색 맥락이 존재할 때에는 검색 범위를 분명히 알 수 있도록 결과가 나타나는 곳과 인접한 곳에 배치해야 합니다.

데이터 그리드 내에서 검색을 활용할 때, narrow view에서는 search icon button을 클릭해 search bar를 활성화할 수 있습니다. 검색어가 입력되지 않은 상태에서 search bar 외부 영역을 클릭하면 search bar가 닫힙니다.

Content

Placeholder Text

입력 값이 비어 있는 경우, 플레이스홀더 텍스트를 필드 내부에 표시합니다. 검색 대상 컬럼이 별도로 지정되지 않은 상황에서는 “Search by keyword…”로 표기합니다.

특정 컬럼을 대상으로 검색 범위가 한정되는 경우에는 플레이스홀더 텍스트에 해당 데이터 범위를 함께 명시하여 사용자가 검색 조건을 직관적으로 이해할 수 있도록 돕습니다. 검색 대상 컬럼이 여러 개인 경우에는 모든 컬럼명이 포함되도록 표기하여 사용자가 검색 가능한 데이터 범위를 한눈에 파악할 수 있도록 합니다.

Clearing Input

입력 값이 존재할 때는 필드 내부 우측에 Clear 아이콘 버튼이 노출됩니다. 클릭 시 입력 값을 제거합니다.

Behaviors

Interactions

Search bar를 통한 데이터 검색은 증분 검색(incremental search) 방식을 기반으로 작동하며, 사용자가 입력하는 순간부터 결과가 점진적으로 갱신됩니다. 불필요한 네트워크 요청을 방지하기 위해 짧은 지연 시간 후에 결과가 표시됩니다.