비슷한 것끼리 묶기

KRDS BP-095 — 관련 있거나 유사한 필터링 컨트롤을 군집화하여 제공하고 있다.

0. 들어가며 — 필터가 뒤죽박죽 섞여 있으면

이번 661편은 관련 있거나 유사한 필터링 컨트롤을 군집화하여 제공하라는 규칙입니다.

여러 필터가 — 관련 없이 뒤죽박죽 섞여 있으면, 사용자는 무엇끼리 묶이는지 모르고 헤매죠. BP-095는 관련·유사 필터를 묶어(군집화) 제공하라고 규정합니다. 근접성 원리·그룹 헤딩(BP-092)과 연결되죠. 이번 편을 풀어냅니다.

1. 원문 — 필터 군집화

BP-095 (기본 패턴 > 필터링·정렬) “관련 있거나 유사한 필터링 컨트롤을 군집화하여 제공하고 있다.”

관련·유사한 필터 컨트롤을 묶어서(군집화) 제공하라는 뜻입니다.

정리: 관련·유사 필터를 군집화하여 제공하라. 이게 BP-095입니다.

2. 왜 군집화인가

필터가 여러 종류·여러 개일 때, 이들을 어떻게 묶느냐가 이해도를 좌우합니다. 관련된 필터끼리 묶이면, 사용자 가 구조를 파악하고 원하는 필터를 빨리 찾죠. BP-095는 군집화(grouping)를 요구합니다.

군집화가 안 될 때의 문제:

구조 파악 어려움 필터가 관련 없이 뒤섞여 있으면, 사용자는 어떤 게 한 묶음인지 모릅니다. 카테고리 필터와 기간 필터, 상태 필터가 섞여 있으면 혼란스럽죠.

원하는 필터 찾기 어려움 비슷한 필터가 흩어져 있으면, 사용자가 관련 필터를 한 번에 못 찾습니다. 여기저기 흩어진 걸 찾아 헤매죠.

인지 부하 — 구조 없는 필터 더미는 — 인지 부담이 큽니다.

그래서 BP-095는 — 군집화를 요구합니다:

관련·유사 묶기 관련되거나 유사한 필터를 한 그룹으로 묶습니다. 예: ‘카테고리’ 그룹(공지·자료·보도), ‘기간’ 그룹(1개월·3개월·1년), ‘상태’ 그룹(진행·완료). 의미상 한 종류인 것끼리요.

시각적 군집 묶음을 시각적으로 구분합니다. 그룹 헤딩(BP-092)·간격·구분선·박스 등으로요(근접성 원리). 같은 그룹은 가깝게, 다른 그룹은 떨어뜨리죠.

논리적 그룹 순서 그룹들을 우선순위(BP-094)·논리 순으로 배열합니다. 군집화(095) + 우선순위 배치(094)가 함께 질서 있는 필터 구조를 만들죠.

근접성의 원리(게슈탈트). 가까운 것은 한 그룹으로, 먼 것은 다른 그룹으로 인식됩니다. 필터를 관련끼리 가깝게 묶으면, 사용자가 ’이것들은 한 종류’임을 직관적으로 알죠. 폼 간격(BP-071)·그룹 헤딩(BP-092)과 같은 원리입니다.

군집화의 효과:

구조 이해 — 사용자가 — 필터의 종류·구조를 한눈에 파악하죠.

빠른 탐색 — 원하는 종류의 필터를 — 그 그룹에서 바로 찾습니다.

인지 부하 감소 — 묶음 단위로 — 처리하니 부담이 줄죠.

그룹 헤딩(BP-092)과의 관계. BP-092는 각 그룹에 헤딩(이름)을 주라는 것, BP-095는 관련 필터를 그룹으로 묶으라 는 것입니다. 묶고(095) + 이름 붙이고(092) 함께 구조화된 필터를 만들죠.

이 규칙은 필터링·정렬의 ’필터 구조화’를 담당합니다 — 관련·유사 필터를 군집화해(095), 사용자가 필터 구조를 파악하고 원하는 필터를 빨리 찾게 하죠. 우선순위 배치(094)·그룹 헤딩(092)과 함께 갑니다.

정리하면 — 필터가 관련 없이 뒤섞이면 구조 파악·탐색이 어려우므로, 관련·유사한 필터를 군집화하고 시각적으로 구분(근접성 ·그룹 헤딩)해 구조를 명확히 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

관련 묶기 — 관련·유사 필터가 한 그룹으로 묶이는가.

시각 군집 — 그룹이 간격·구분선·헤딩으로 시각 구분되는가(근접성).

그룹 순서 — 그룹이 우선순위·논리 순으로 배열되는가(BP-094).

개선 방향

관련 필터를 그룹으로(카테고리·기간·상태). 시각 군집(간격·헤딩).

그룹 헤딩(BP-092) + 우선순위 배치(BP-094)와 함께 구조화.

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

역할	책임
기획/UX	필터 그룹 구조 설계
퍼블리셔	군집·구분 구현

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

여러 필터를 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 관련·유사 필터가 한 그룹으로 묶이나요?

□ 그룹이 간격·구분선·헤딩으로 시각 구분되나요(근접성)?

□ 그룹이 우선순위·논리 순으로 배열되나요(BP-094)?

❓ FAQ

Q1. 군집화가 왜 중요한가요? 관련 필터끼리 묶이면 사용자가 구조를 파악하고 원하는 필터를 빨리 찾습니다. 뒤섞이면 혼란스럽고 흩어진 걸 찾아 헤매죠. Q2. 어떻게 묶나요? 의미상 한 종류끼리요: ‘카테고리’(공지·자료), ‘기간’(1·3·12개월), ‘상태’(진행·완료). 시각적으로 간격·구분선·박스로 구분하죠(근접성). Q3. BP-092(그룹 헤딩)와 같나요? BP-095는 관련 필터를 묶는 것, BP-092는 그 그룹에 이름(헤딩)을 주는 것입니다. 묶고 + 이름 붙여 함께 구조화하죠.

6. 마무리

BP-095의 메시지:

비슷한 것끼리 묶기 — 관련·유사 필터를 군집화하여 제공하라.

필터가 뒤섞이면 구조 파악·탐색이 어렵습니다. 관련 필터를 군집화하고 시각 구분해 구조를 명확히 하는 게 핵심이죠. 다음 편은 정렬 컨트롤 위치입니다.

다음 편 예고 ▶ 「662. (BP-096) 정렬 컨트롤은 대상 목록 오른쪽 상단에 배치하고 있다.」

ViewCheck는 관련·유사 필터가 군집화되어 제공되는지를 진단합니다.

📚 참고 출처

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

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

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