Search Bar

Written By Heesun .

GUIDE

검색을 통해 사용자는 서비스에서 제공하는 정보를 빠르게 찾을 수 있습니다.
Search bar는 검색 쿼리를 입력할 수 있는 필드 형태의 컴포넌트를 말합니다.

 

ANATOMY

    • 사용자가 text area를 클릭했을 때 search bar가 focused되며 cursor가 보여지기 시작합니다.

    • cursor는 사용자가 입력을 시작할 수 있음을 알리고, 입력 중인 위치를 보여줍니다.

  • 검색할 내용을 입력하는 영역입니다.

    • placeholder : 입력 전 기본으로 노출되는 문구이며, 검색을 유도하는 힌트 텍스트를 노출할 수 있습니다.

    • query : 검색을 위해 사용자가 입력한 텍스트입니다.

  • text area에 입력어가 발생하면 버튼이 노출되며 선택 시 text area가 초기화(focused state) 됩니다.

    • 검색 기능을 즉각적으로 알 수 있는 기능에 대한 대표성을 띈 아이콘이며, 
states 마다 다른 칼라를 보여줘 사용자에게 상태 변화를 알립니다.

    • 검색 아이콘 버튼을 누르면 DB에 쿼리가 전달되고 검색 결과가 본문에 보여집니다.

    • 마찬가지로 focused 상태에서 enter key를 누르면 검색이 실행됩니다.

SIZE

화면 구성에 따라 길이 조절이 가능합니다.

STATES

Search bar의 상태별 정의는 다음과 같습니다.

USAGE

Search History
검색 히스토리에 보여지는 키워드는 이전에 사용자가 검색한 목록 중에 선택해서 페이지 전환이 이루어진 경우 관련 검색 키워드들이 보여집니다.


  • option의 개수는 최대 5개까지 보여집니다.

  • 최근 검색한 키워드는 리스트 상단에 나열되며, 순차적으로 아래로 내려가다가 6번째에 사라집니다.

  • list container의 width는 search bar와 동일하지만, text 길이가 초과될 경우 [...]으로 처리됩니다.

  • 키워드 유효 기간은 최대 3개월 입니다.

 

Empty State

search history가 empty state로 보여지는 경우는 다음과 같습니다.

  • 이전에 검색한 결과에서 리스트를 선택해 페이지 전환을 한 기록이 없는 경우

  • 계정 로그아웃 상태

  • 새로운 브라우저 또는 신규 디바이스로 접근한 경우

  • secret mode로 접근한 경우

minimum width

Heesun .
Previous

Dropdown
Next

Slider