검색 필드, '검색 바'만 만드셨나요?

검색 필드의 사용방법과 좋은 사례

Jan 16. 2025

검색 바

검색 필드

검색 필드(Search Field)는 사용자가 키워드나 문구를 입력하여 원하는 정보를 검색할 수 있도록 하는 컴포넌트입니다. 이러한 검색 필드는 일반적으로 알고 있는 검색 바(Search Bar)와 더불어 검색 뷰(Search View)라는 형태로 표현됩니다. 본 글에서는 검색 필드 두 가지의 특징과 사용방법, 좋은 예시에 대해 알아보겠습니다.

검색 바 · 검색 뷰

검색 필드는 일반적으로 검색 바(Search Bar)와 검색 뷰(Search View)가 포함됩니다. 둘의 자세한 구성과 사용방법은 아래에 이어 설명하겠습니다.

➊ Search Bar (검색 바)

➋ Search View (검색 뷰)

검색 바

검색 바는 일반적으로 화면 상단에 지속적으로 존재하는 검색 필드입니다. 검색이 앱의 주요 기능인 경우 검색 바를 사용합니다. 검색 바는 다음과 같이 구성됩니다.

➊ Container (컨테이너)

➋ Leading icon button (선행 아이콘 버튼)

➌ Supporting text (지원 텍스트 · 플레이스 홀더)

➍ Avatar or trailing icon (프로필 · 후행 아이콘, 선택사항)

검색 바 사용 시 고려사항

다음 내용은 검색 바 사용 시 고려해야 할 사항입니다.

사용자는 검색 바나 검색 뷰의 텍스트 필드에 텍스트를 입력한 관련 결과를 볼 수 있습니다.

검색이 앱의 주요 기능일 때 검색 바를 사용할 수 있습니다.

검색 바는 일반적으로 화면 중앙 및 상단에 위치합니다. 검색 바를 눈에 띄는 위치에 배치하면, 사용자가 검색을 시작할 진입점을 쉽게 찾을 수 있습니다.

레이아웃을 확장할 때, 검색 바의 위치와 정렬이 어떻게 확장될지 고려해야 합니다. 대부분의 경우, 검색 바는 자신의 레이아웃 영역 내에 유지되며, 너비가 비례적으로 확장되는 것이 권장됩니다. 내부 요소는 부모 컨테이너가 확장됨에 따라 좌우에 고정됩니다.

검색 바는 포커스 되면 검색 뷰로 확장되어 이전 검색 제안을 표시할 수 있습니다. 뒤로 가기 아이콘을 탭 하면 검색 뷰의 포커스가 해제되고 검색 제안이 닫힙니다.

검색 뷰는 일반적으로 사용자가 검색 바를 탭할 후에 표시되지만, 검색이 사용자의 주요 작업일 경우 검색 뷰를 기본 포커스 상태로 설정할 수도 있습니다.

필요에 따라 검색 바는 콘텐츠를 스크롤할 때 사라지게 할 수도 있고, 화면 상단에 고정해 둘 수도 있습니다.

검색 뷰

검색 뷰는 일반적으로 검색 아이콘을 선택하여 열리는 전체화면 모달입니다. 검색이 앱의 주요 기능이 아닌 경우 검색 뷰를 사용합니다. 검색 뷰는 다음과 같이 구성됩니다.

➊ Container (컨테이너)

➋ Header (헤더 영역)

➌ Leading icon button (선행 아이콘 버튼)

➍ Supporting text, Input text (지원 텍스트, 입력 텍스트)

➎ Trailing icon button (후행 아이콘 버튼)

➏ Divider (디바이더)

검색 뷰 사용 시 고려사항

다음 내용은 검색 바 사용 시 고려해야 할 사항입니다.

검색 바의 Focus 상태인 검색 뷰는 자동완성, 추천과 같은 동적인 제안을 표시할 수 있습니다.

검색 뷰는 작은 창 크기에서는 전체 화면 모달로 표시되며, 중간 또는 확장된 창 크기에서는 검색 바와 연결된 모달로 표시될 수 있습니다.

레이아웃을 확장할 때, 검색 바의 위치와 정렬이 어떻게 조정되어야 할지 고려해야 합니다.

검색 바의 좋은 사례

검색 바의 좋은 사례를 다양한 특징별로 선별해 보았으니, 참고하여 활용하면 좋겠습니다.

Coinbase

선행 아이콘과 검색 레이블이 포함된 검색바입니다. 양 옆의 아이콘은 검색 바 외부에 위치해 있습니다.

검색 바가 화면 중앙에 정렬되어 있습니다. 선행 아이콘과 검색 레이블 역시 중앙에 정렬되어 있습니다.

Tripadvisor

선행 아이콘과 플레이스 홀더가 배치되어 있습니다. 가고 싶은 곳, 하고 싶은 것, 호텔 등 앱에서 검색할 수 있는 소재에 대한 예시를 제공해 줍니다.

Substack

중앙에 정렬된 검색 바는 텔레그램과 동일하나, 아래에 검색을 보조하는 필터가 존재합니다.

Evernote

중앙 정렬된 검색 바 내에 보조 텍스트가 있으며, 검색 아이콘이 후행 아이콘으로 존재합니다.

마치며

검색 필드는 검색 바만을 생각했을 땐 비교적 단순한 컴포넌트지만, 검색 뷰와 반응형 레이아웃을 표현할 때는 고려해야 할 점이 많습니다. 굳이 검색 기능이 큰 비중을 차지 않는 경우, 아이콘만 배치한 뒤 탭 하였을 때 검색 뷰로 진입하는 것을 고려해야 합니다.

본 내용은 Material Design 3의 내용을 주로 담고 있으나, Human Interface Guideline에도 검색 필드의 유사한 내용을 포함하고 있습니다. HIG의 경우 텍스트 위주의 지침을 주로 담고 있기 때문에, 디테일한 가이드는 Material Design 3을 참고하면 도움이 될 것 같습니다.