Filtering
Filtering (필터링)
필터링은 사용자가 특정 사전 정의 속성을 켜고 끔으로써 표시된 데이터 세트에서 데이터 항목을 추가하거나 제거할 수 있게 해주는 패턴이에요.
출처: Filtering
본문
개요 (Overview)
필터링은 사용자가 큰 데이터 세트를 작업할 때 보이는 항목을 줄일 수 있게 해줘요. 필터는 사용자가 찾고 있는 것을 찾고, 특정 기준 집합 내에서 사용 가능한 옵션을 보며, 많은 수의 옵션에 직면했을 때 결정을 내리도록 도와줍니다.
선택 방법 (Selection methods)
올바른 필터 선택 방법을 고르는 것은 사용성과 사용자 효율성을 개선해요. Carbon은 서로 다른 상황에 적절한 여러 선택 방법을 지원합니다. 사용자가 보고 있는 데이터, 달성하려는 것, 그리고 어떻게 직관적으로 데이터를 좁힐 수 있을지 고려하세요.
| Selection method | Description |
|---|---|
| Single selection | 사용자는 데이터 결과를 수정하는 단 하나의 속성만 고를 수 있어요. |
| Multiselection | 사용자는 데이터 결과를 수정하는 둘 이상의 속성을 고를 수 있는 옵션이 있어요. |
| Multiple categories | 사용자는 여러 데이터 카테고리에 걸쳐 속성을 선택할 수 있는 옵션이 있어요. |
| Multiple filters with batch updates | 사용자는 여러 필터를 선택한 다음 필터를 적용하는 추가 동작을 취해요. |
| Multiple filters with instant updates | 사용자가 각 필터를 선택할 때 데이터가 업데이트돼요. |
단일 선택 (Single selection)
사용자가 데이터 결과를 수정하기 위해 단 하나의 속성만 고를 수 있을 때 단일 선택 필터를 사용하세요. 내부적으로 단일 선택은 라디오 버튼처럼 동작합니다. 단일 선택 필터의 유형:
- 기본 드롭다운 (Basic dropdown)
- 인라인 드롭다운 (Inline dropdown)
- 라디오 버튼 세트 (단독 또는 메뉴 안)
다중 선택 (Multiselect)
사용자가 데이터 결과를 수정하기 위해 둘 이상의 속성을 고를 수 있는 옵션이 있을 때 다중 선택 필터를 사용하세요. 내부적으로 다중 선택은 체크박스처럼 동작합니다. 다중 선택 필터의 유형:
- 다중 선택 드롭다운 (Multiselect dropdown)
- 인라인 다중 선택 드롭다운 (Inline multiselect dropdown)
- 체크박스 세트 (단독 또는 메뉴 안)
여러 카테고리 선택 (Selecting multiple categories)
카테고리는 같은 주제 안의 필터 항목 집합이에요. 예를 들어 "size"는 카테고리이고 small, medium, large, extra large가 그것의 필터 선택지입니다. 여러 필터 카테고리가 같은 데이터 세트에 적용될 수 있어요. 예를 들어 사용자는 크기, 색상, 가격대별로 필터링할 수 있습니다.
여러 카테고리 선택은 보통 페이지 왼쪽에 세로로, 또는 데이터 세트 상단에 가로로 배치됩니다. 여러 카테고리는 메뉴나 드롭다운 안에 넣어서는 안 됩니다.
일괄 업데이트가 있는 여러 필터 (Multiple filters with batch updates)
모든 필터가 선택 프로세스 끝에 함께 적용될 때 일괄 필터를 사용하세요. 데이터 세트는 사용자 동작 시 한 번만 새로고침됩니다. 트리거는 대부분 "Apply filters" 버튼입니다.
일괄 필터는 사용자가 정신적으로 처리하는 데 더 오래 걸릴 수 있는 여러 카테고리에 걸쳐 여러 필터링 선택을 할 때 가장 잘 작동해요. 일괄 필터링은 느린 데이터 반환 속도에도 좋은 해결책입니다. 이렇게 하면 사용자가 모든 선택 후 데이터 로드를 기다리지 않아도 됩니다.
즉시 업데이트가 있는 여러 필터 (Multiple filters with instant updates)
이 방법은 각 개별 선택이 이루어진 후 결과를 반환해요. 트리거는 개별 선택이며 필터는 데이터를 실시간으로 조작합니다. 이는 사용자가 한 카테고리에서만 선택하거나, 사용자가 한 번의 필터 선택만 할 것으로 예상될 때 좋은 해결책입니다.
필터 상태 (Filter states)
각 카테고리 안의 필터는 모두 선택되지 않거나 모두 선택된 상태로 시작해야 해요. 여러 카테고리를 사용할 때 시작 상태는 카테고리마다 다를 수 있습니다. 사용자가 보통 결과에서 제외하려는 기준이 하나 또는 몇 개뿐이라면 시작 시 모든 필터가 선택되어야 하고, 사용자가 보통 특정 기준 하나와 관련된 결과만 보려 한다면 모든 필터가 선택되지 않은 상태로 시작해야 합니다.
필터가 서랍, 드롭다운, 또는 메뉴 안에 숨겨질 수 있다면 닫힌 필터 상태에 필터가 적용되었음을 사용자에게 알리는 표시자가 보여야 해요. 표시자는 최소한 적용된 필터 수를 포함하고, 필터 컨테이너를 다시 열지 않고 필터를 지우는 옵션을 가져야 합니다.
필터 리셋 (Resetting filters)
각 카테고리는 개별 항목마다 상호작용하지 않고 한 번에 적용된 모든 필터를 지우는 방법이 있어야 해요. 필터 지우기는 필터를 원래 기본 시작 상태로 되돌립니다.
여러 카테고리가 같은 데이터 세트에 적용되었다면 모든 카테고리 전체의 모든 필터를 한 번에 해제하는 방법도 있어야 합니다.
관련 (Related)
컴포넌트 (Components)
- 라디오 버튼 (Radio button)
- 드롭다운 (Dropdown)
- 체크박스 (Checkbox)
- 데이터 테이블 (Data table)
패턴 (Patterns)
- 지우기 (Clear)
- 알림 (Notifications)
- 검색 (Search)
참고 자료 (References)
- Patternfly, Filters (2019)
- Nick Babich, Best Practices for Search Results (2017)
- Think with Google, In-App Search (2016)
더 알아보기 (Learn more)
필터링은 큰 데이터 세트에서 보이는 항목을 좁히는 핵심 패턴이에요. 선택 방법은 단일·다중 선택, 여러 카테고리, 일괄·즉시 업데이트 중 상황에 맞게 고르고, 각 카테고리는 시작 상태를 일관되게 설정하세요. 필터가 숨겨져 있을 때는 적용된 필터 수를 보이는 표시자를 두고, 각 카테고리와 전체에 걸쳐 한 번에 지울 수 있는 리셋 방법을 제공하는 게 좋습니다.