숨기지 말고 바로 보이게

KRDS BP-089 — 필터링·정렬 컨트롤은 축약된 버튼 형태가 아니라 필터링할 수 있는 주요 옵션이 항상 노출되도록 표현하고 있다.

0. 들어가며 — 필터링·정렬 그룹의 시작

이번 655편부터 필터링·정렬(Filtering & Sorting) 그룹(BP-089~104, 16개)입니다. 목록을 원하는 대로 좁히고 정렬 하는 컨트롤의 규칙들이죠. 첫 편은 — 주요 필터 옵션이 축약 버튼이 아니라 항상 노출되게 표현하라는 규칙입니다.

필터를 — ‘필터’ 버튼 하나로 숨겨두면, 사용자는 어떤 필터가 있는지 모르고 한 번 더 눌러야 하죠. BP-089는 주요 옵션을 항상 노출하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 주요 옵션 항상 노출

BP-089 (기본 패턴 > 필터링·정렬) “필터링·정렬 컨트롤은 축약된 버튼 형태가 아니라 필터링할 수 있는 주요 옵션이 항상 노출되도록 표현하고 있다.”

주요 필터 옵션을 축약 버튼에 숨기지 말고 항상 노출되게 표현하라는 뜻입니다.

정리: 주요 필터 옵션을 항상 노출되게 표현하라. 이게 BP-089입니다.

2. 왜 주요 옵션 항상 노출인가

필터링·정렬은 긴 목록(BP-042)에서 원하는 항목을 좁히는 핵심 도구입니다. 이 컨트롤을 어떻게 보여주느냐가 사용성을 좌우하죠. BP-089는 주요 옵션을 항상 노출하라고 합니다.

필터를 축약 버튼에 숨길 때의 문제:

필터 존재 모름 필터를 ‘필터’ 버튼 하나로 접어두면, 사용자는 어떤 필터가 있는지 모릅니다. 버튼을 눌러봐야 알죠. 필터가 있는 줄도 모르고 긴 목록을 헤맬 수 있습니다.

추가 클릭 부담 필터를 쓰려면 버튼을 누르고(열고), 고르고, 다시 적용하는 여러 단계가 됩니다. 자주 쓰는 필터일수록 번거롭죠.

탐색 효율 저하 주요 필터가 바로 안 보이면, 사용자가 빠르게 목록을 좁히지 못합니다.

그래서 BP-089는 — 주요 옵션 항상 노출을 요구합니다:

주요 필터 노출 가장 자주 쓰거나 중요한 주요 필터 옵션을, 목록 위·옆에 항상 보이게 표현합니다. 사용자가 한눈에 어떤 필터가 있는지 알고, 바로 선택하죠. 카테고리·기간·상태 같은 핵심 필터를요.

축약 버튼 지양 ‘필터’ 버튼 하나로 모든 걸 숨기지 않습니다(데스크톱·넓은 화면 기준). 적어도 주요 옵션은 펼쳐 두죠.

부가 필터는 접기 가능 모든 필터를 다 노출하면 복잡하니, 주요는 노출하되 부가·세부 필터는 ’더보기’나 접이식으로 둘 수 있습니다. 핵심은 주요 옵션의 가시성이죠.

모바일 예외(BP-102). 단, 좁은 화면(모바일)에서는 공간이 부족하므로, 필터를 축약 버튼(우측 상단)으로 제공 할 수 있습니다(BP-102). BP-089는 ‘화면 너비가 충분한’ 경우의 원칙이고, 모바일은 BP-102가 다루죠. 반응형 분기 입니다.

왜 노출이 좋은가. 필터가 바로 보이면, 사용자는 ’아, 이렇게 좁힐 수 있구나’를 즉시 알고 활용합니다. 발견성 (discoverability)이 높아지죠. 숨겨진 기능은 안 쓰이기 마련입니다.

이 규칙은 필터링·정렬의 ’발견성’을 담당합니다 — 주요 옵션을 항상 노출해(089), 사용자가 필터의 존재를 알고 바로 활용 하게 하죠. 필터링·정렬 그룹의 출발점입니다.

정리하면 — 필터를 축약 버튼에 숨기면 사용자가 필터 존재를 모르고 추가 클릭이 필요하므로, 넓은 화면에서는 주요 필터 옵션을 항상 노출되게 표현해야 합니다(모바일은 BP-102 예외).

3. 점검 / 개선

무엇을 점검하나

주요 옵션 노출 — 주요 필터가 항상 보이게 표현되는가(축약 버튼만 아님).

부가 필터 처리 — 세부 필터는 ‘더보기’·접이식으로 정리되는가.

반응형 — 좁은 화면은 BP-102(축약) 분기인가.

개선 방향

넓은 화면에서 주요 필터(카테고리·기간·상태) 항상 노출.

부가 필터는 접기 가능. 모바일은 축약(BP-102). 발견성 우선.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
기획/UX	필터 노출 설계
퍼블리셔/개발	필터 컨트롤 구현

기관 유형	BP-089 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (필터·정렬 사용 시)

목록에 필터·정렬을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 주요 필터가 항상 보이게 표현되나요(축약 버튼만 아님)?

□ 세부 필터는 ‘더보기’·접이식으로 정리되나요?

□ 좁은 화면은 BP-102(축약) 분기인가요?

❓ FAQ

Q1. 필터를 버튼 하나로 숨기면 안 되나요? 넓은 화면에선 안 됩니다. 사용자가 필터 존재를 모르고 추가 클릭이 필요 하죠. 주요 옵션은 항상 노출해 발견성을 높입니다. Q2. 필터가 많으면 다 노출하나요? 주요는 노출, 부가·세부는 ‘더보기’·접이식으로요. 핵심은 주요 옵션의 가시성입니다. Q3. 모바일에서도 노출하나요? 모바일은 공간이 부족해 축약 버튼(우측 상단)을 허용합니다(BP-102). BP-089는 넓은 화면 원칙이고 반응형으로 분기하죠.

6. 마무리

BP-089의 메시지:

숨기지 말고 바로 보이게 — 주요 필터 옵션을 항상 노출되게 표현하라.

필터를 축약 버튼에 숨기면 사용자가 존재를 모르고 추가 클릭이 필요합니다. 넓은 화면에서 주요 옵션을 항상 노출해 발견성 을 높이는 게 핵심이죠. 다음 편은 선택된 옵션 구분입니다.

다음 편 예고 ▶ 「656. (BP-090) 선택된 필터링·정렬 옵션이 명확하게 구분되도록 표현하고 있다.」

ViewCheck는 주요 필터 옵션이 항상 노출되게 표현되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 필터링·정렬 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_10.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준