Search Bar

Anatomy

Search Bar는 Search Input, Back Button, Close Button을 조합해 제공하며, Search Input만 따로 사용하는 것은 권장하지 않습니다.

Properties

Stack

Search Bar는 검색 플로우에서 네비게이션 기능을 제공하기 위해 Use Stack 속성으로 Back Button을 표시할 수 있습니다. Back Button은 검색 플로우에서 네비게이션 동작을 제공하는 경우에만 사용해야 합니다.

Search Input State

Search Input은 Filled 상태로 검색어 입력 여부를 표현하며, Focused 상태도 함께 제공합니다.

Guidelines

Layout

Search Bar는 Top Navigation과 함께 사용하지 않고 단독으로 화면 최상단에 배치하는 것을 권장합니다. Tabs 같은 다른 요소와 조합할 수도 있으며, 이때도 Search Bar는 상단 Fixed 영역에 고정하고 Content만 Scroll되도록 하는 것을 권장합니다.

Stack 사용하기

Don’t

Back Button은 반드시 뒤로가기로 동작해야 합니다. 닫기와 혼용해서 사용하지 않습니다.

Stack을 사용하면 검색 플로우에 Back Button과 Close Button이 항상 함께 표시되어, 사용자가 이전에 검색한 결과 페이지를 다시 확인할 수 있습니다.

• Back Button: 이전 Depth로 이동합니다.
• Close Button: 현재 Depth와 상관없이 검색 화면을 닫습니다.

Back Button을 Close Button처럼 사용하지 않도록 주의해주세요.

매우 긴 검색어를 입력한 경우

Search Input 사용 시 긴 검색어를 입력해도 줄바꿈이 발생하지 않아요.

검색하기

OS Keyboard에서 Submit 버튼을 누르면 입력된 검색어로 검색 결과가 화면에 표시되고 OS Keyboard는 사라집니다.

Keyboard

Search Input에 포커스되면 검색어를 제출할 수 있는 OS Keyboard를 사용해야 하며, Submit 버튼에는 OS에서 권장하는 스타일을 적용해야 합니다.

검색 중에 Content의 빈 영역을 탭하거나 스크롤하면 Keyboard가 내려가고 Search Input의 포커스가 해제됩니다.

검색어 지우기

Search Input에 검색어가 입력되어 있으면 Clear Button으로 지울 수 있습니다. Input에 포커스된 상태였다면 검색어를 지운 뒤에도 포커스를 유지해야 합니다.