본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

검색

검색창을 통해 사용자는 키워드나 문구를 입력하여 시스템이나 웹사이트 내에서 관련 정보를 빠르게 찾을 수 있다.

컴포넌트명

검색 (Search)

검색 (Search) 스타일 예시

  1. 1.레이블

    사용자가 검색할 수 있는 내용을 암시하는 유용하고 짧은 텍스트

  2. 2.스코프 필터(선택)

    특정 정보 범주나 섹션에 대한 검색으로 결과를 제한하는 데 사용됨

  3. 3.검색어 입력 필드

    사용자가 검색어를 입력하는 텍스트 입력 영역

  4. 4.플레이스홀더(선택)

    검색을 유도하기 위한 문구

  5. 5.돋보기 아이콘

    검색을 실행하는 버튼

유형

Search

Size콘텐츠 내에서 적합한 계층을 가진 크기로 사용한다.

Large

Small

코드 보기

State사용자의 상호작용 시 컬러가 변경된다.

Default

Focused

Completed

Error

가이드

  • 사용자의 상호작용 시 컬러가 변경된다. 검색 필드를 제외한 나머지 영역의 명도나 불투명도를 낮추어 사용자가 검색어를 입력하는 행동에 집중할 수 있도록 도와야 한다.
  • 통합 검색이 아닌 검색에는 입력 필드에 레이블을 제공한다. 통합 검색 입력 필드는 용도가 명확하여 사용자가 서비스 전체 콘텐츠를 검색하게 됨을 예측할 수 있으므로 레이블을 제공하지 않는 것이 적절하다.
    그러나 범위 검색, 길찾기와 같은 부분 검색인 경우 검색할 수 있는 대상에 대한 단서를 가능한 간결하고 명확하게 명시해야 한다. 이를 통해 사용자는 검색의 목적이 무엇인지 직관적으로 이해할 수 있다.
  • 플레이스홀더를 사용하는 경우, 유도 문구 외에 검색에 대한 단서나 레이블을 포함해서는 안 된다. 플레이스홀더 텍스트는 사용자가 입력을 시도하는 순간 사라지기 때문에 사용자가 검색어를 입력하는 시점에는 도움을 받을 수 없다. 플레이스홀더를 사용하는 경우, 검색어 입력 필드의 레이블에 제공되지 않은 추가적인 정보를 플레이스홀더로 전달하지 않아야 한다.