Search

Search (검색)

검색은 사용자가 내비게이션 없이 관련 콘텐츠를 찾기 위해 단어나 구를 지정할 수 있게 해주는 컴포넌트예요. 키워드를 사용해 웹사이트나 애플리케이션을 탐색하는 방법을 제공합니다.

출처: Search

본문

개요 (Overview)

검색은 사용자에게 키워드를 사용해 웹사이트나 애플리케이션을 탐색하는 방법을 제공해요. 검색은 콘텐츠를 발견하는 주요 수단으로 또는 사용자가 콘텐츠를 찾도록 돕는 필터로 사용될 수 있습니다.

언제 사용할까요 (When to use)

  • 복잡하거나 큰 데이터 세트 안에서 사용자가 데이터를 더 효율적으로 찾도록 도울 때.
  • 전체 사이트를 검색할 때는 전역(global) 수준에서 사용.
  • 한 페이지의 콘텐츠를 구체적으로 검색할 때는 페이지 수준에서 사용.
  • 데이터 테이블 같은 컴포넌트 안의 데이터를 검색할 때는 컴포넌트 수준에서 사용.

언제 사용하지 말아야 할까요 (When not to use)

  • 데이터가 작거나 제한적일 때는 사용하지 마세요.
  • 정보가 단순하고 한 뷰 안에서 쉽게 찾을 수 있을 때는 사용하지 마세요.

포맷 (Formatting)

구조 (Anatomy)

  • 필드(Field): 사용자가 검색어를 입력하는 곳.

  • 검색 아이콘(Search icon): 검색 필드를 나타내요. 돋보기 아이콘은 검색을 나타내는 보편적인 방법입니다.

  • 필드 텍스트(Field text): 사용자가 입력한 검색 텍스트. 필드에 입력하기 전에는 자리 표시자 텍스트가 보입니다.

  • 닫기 아이콘(Close icon): 사용자가 검색 필드에 적극적으로 입력한 후 나타나요. 검색 필드를 지우는 기능을 합니다.

  • Default

  • Fluid

스타일링 (Styling)

검색에는 기본(default)과 플루이드(fluid)의 두 가지 스타일이 있어요. 기능은 같지만 시각적으로 다르며, 어디에 사용할지에 영향을 줍니다.

스타일 (Style) 모양 (Appearance) 사용 사례 (Use case)
Default 라벨이 없는 전통적인 스타일. 컴포넌트 사이에 여백이 필요할 때 사용. 예를 들어 기본 검색 스타일은 보통 전역 또는 페이지 수준에서 사용됨.
Fluid 라벨이 검색 필드 안에 배치되고 사용자 입력 필드 텍스트와 인라인으로 겹쳐지는 대체 스타일. 표현적 순간, 플루이드 폼, 제한된 공간에 사용.

위에 기본 스타일 입력, 아래에 플루이드 스타일.

크기 (Sizing)

기본 입력 높이 (Default input heights)

기본 검색 높이 크기는 small, medium, large의 세 가지가 있어요. 너비는 콘텐츠, 레이아웃, 디자인에 따라 크기가 달라집니다. 세 가지 검색 크기를 지원하면 레이아웃을 구성할 때 더 많은 유연성을 얻을 수 있어요.

크기 (Size) 높이 (px/rem) 사용 사례 (Use case)
Small (sm) 32 / 2 디자인 안에서 공간이 제한될 때 사용.
Medium (md) 40 / 2.5 기본 크기이며 가장 흔히 사용되는 크기. 확신이 없으면 중간 크기를 사용.
Large (lg) 48 / 3 작업할 공간이 많을 때 사용. 큰 크기는 보통 사용자가 페이지 뷰 안의 콘텐츠를 검색할 때 전역 수준에서 사용됨.

플루이드 입력 높이 (Fluid input height)

64px의 입력 높이는 하나뿐이며 기본 높이보다 시각적으로 더 커요.

배치 (Placement)

전역 수준, 페이지 특정 수준, 컴포넌트 안에서든 사용자에게 컨텍스트에 맞는 사용 방식이 적절한 곳에 검색 컴포넌트를 배치하세요.

기본 검색은 컨테이너를 다른 컴포넌트 컨테이너와 정렬하도록 그리드에 배치할 수 있어요. 검색은 사용 사례에 따라 같은 페이지의 다른 행잉 컴포넌트 컨테이너와 정렬되도록 걸칠 수도 있습니다.

기본 검색 컨테이너를 페이지의 다른 텍스트와 세로로 정렬하세요.

플루이드 검색 컨테이너를 다른 행잉 컴포넌트와 걸치게 하세요.

콘텐츠 (Content)

주요 요소 (Main elements)

자리 표시자 텍스트 (Placeholder text)

사용자가 무엇을 검색할 수 있는지 힌트를 주는 유용하고 짧은 텍스트. 예를 들어 "Search for networks or devices."

필드 텍스트 (Field text)

  • 검색 결과를 찾기 위해 사용자가 입력한 키워드.
  • 필드 텍스트를 간결하게 유지하고 필드 텍스트를 찾고 싶은 결과에 최대한 가깝게 연결하세요.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.

동작 (Behaviors)

상태 (States)

검색 컴포넌트에는 enabled, focus, filled, disabled의 네 가지 상태가 있어요.

  • Default
  • Fluid

인터랙션 (Interactions)

마우스 (Mouse)

입력을 시작하려면 검색 필드 입력을 클릭하세요. 사용자가 입력을 시작하면 닫기 아이콘('x')이 나타나며, 닫기 아이콘을 클릭해 입력 필드를 지울 수 있습니다.

키보드 (Keyboard)

Enter를 눌러 텍스트를 검색어로 제출하거나 Esc를 눌러 검색 필드를 지우세요. 사용자가 입력을 시작하면 닫기 아이콘('x')이 나타나며, Space 또는 Enter 키를 눌러 입력 필드를 지울 수 있습니다.

  • Default
  • Fluid

컴포넌트 (Components)

  • Data table
  • UI shell header

패턴 (Patterns)

  • Filtering
  • Search

더 알아보기 (Learn more)

검색은 내비게이션 없이 콘텐츠를 찾는 데 도움을 주는 컴포넌트예요. 복잡하거나 큰 데이터 세트에서 유용하며, 전역·페이지·컴포넌트 수준으로 배치 수준을 정해 사용할 수 있어요. 데이터가 적고 단순할 때는 사용하지 않고, 기본·플루이드 스타일과 크기를 상황에 맞게 고르면 됩니다.