중요한 필터를 먼저

KRDS BP-094 — 필터링 컨트롤은 우선순위에 따라 좌측 또는 상단부터 순차적으로 배치하고 있다.

0. 들어가며 — 중요한 필터가 구석에 있으면

이번 660편은 필터링 컨트롤을 우선순위에 따라 좌측 또는 상단부터 순차적으로 배치하라는 규칙입니다.

자주 쓰거나 중요한 필터가 — 화면 구석·끝에 있으면, 사용자는 찾기 어렵죠. BP-094는 우선순위 높은 필터를 좌측·상단부터 배치하라고 규정합니다. 시선 흐름에 맞춘 배치죠. 이번 편을 풀어냅니다.

1. 원문 — 우선순위 순차 배치

BP-094 (기본 패턴 > 필터링·정렬) “필터링 컨트롤은 우선순위에 따라 좌측 또는 상단부터 순차적으로 배치하고 있다.”

필터 컨트롤을 우선순위 순으로 좌측·상단부터 순차 배치하라는 뜻입니다.

정리: 필터를 우선순위 순으로 좌측·상단부터 배치하라. 이게 BP-094입니다.

2. 왜 우선순위 배치인가

필터가 여러 개일 때, 그 순서·위치가 사용성을 좌우합니다. 사용자는 시선이 자연스럽게 닿는 곳(좌측·상단)을 먼저 보죠. 중요한 필터가 거기 있어야 빨리 찾습니다. BP-094는 우선순위 배치를 요구합니다.

우선순위 없이 배치할 때의 문제:

중요 필터 못 찾음 자주 쓰는·중요한 필터가 화면 끝·구석에 있으면, 사용자는 그걸 찾느라 시간이 걸립니다. 덜 중요한 게 앞에 있으면 비효율적이죠.

시선 역행 시선은 좌→우, 위→아래로 흐릅니다(한국어 읽기 방향). 우선순위가 이와 반대로 배치되면, 시선이 역행해 부자연스럽죠.

그래서 BP-094는 — 우선순위 순차 배치를 요구합니다:

우선순위 판단 어떤 필터가 더 중요·자주 쓰이는지 판단합니다. 데이터 특성·사용 빈도를 고려해서요(BP-097 데이터 특성).

좌측·상단부터 우선순위 높은 필터를 좌측(가로 배치) 또는 상단(세로 배치)부터 둡니다. 사용자가 먼저 보는 자리에요. 시선 흐름(좌→우, 위→아래)을 따르죠.

순차 배치 우선순위 순으로 순차적으로 이어 배치합니다. 중요 → 덜 중요 순으로요. 무작위가 아니라 일관된 순서죠.

시선 흐름의 활용. 사용자의 시선은 좌상단에서 시작해 우하단으로 흐릅니다(F자·Z자 패턴). 중요한 걸 좌상단에 두면, 자연스럽게 먼저 보게 되죠. 필터 배치도 이 자연스러운 흐름을 활용합니다.

그룹화(BP-095)와 함께. 우선순위 배치(BP-094)는 관련 필터 군집화(BP-095)와 함께 갑니다. 관련 필터를 묶고 (095), 그 묶음·필터를 우선순위로 배치(094)하죠. 둘이 함께 논리적이고 효율적인 필터 레이아웃을 만듭니다.

정렬 컨트롤은 별도(BP-096). 정렬 컨트롤은 BP-096에서, 목록 오른쪽 상단에 배치하라고 별도로 다룹니다. BP-094는 필터링 컨트롤의 배치죠. 필터는 우선순위 순(094), 정렬은 목록 우상단(096)으로 역할이 나뉩니다.

이 규칙은 필터링·정렬의 ’필터 배치 순서’를 담당합니다 — 우선순위에 따라 좌측·상단부터 배치해(094), 사용자가 중요한 필터를 시선 흐름에 맞춰 빨리 찾게 하죠.

정리하면 — 중요한 필터가 구석에 있으면 찾기 어렵고 시선이 역행하므로, 우선순위 높은 필터를 좌측·상단부터 순차적으로 (시선 흐름에 맞춰) 배치해야 합니다.

3. 점검 / 개선

무엇을 점검하나

우선순위 판단 — 자주 쓰는·중요한 필터가 식별되는가.

좌측·상단 배치 — 우선순위 높은 필터가 좌측·상단부터 배치되는가.

순차성 — 중요→덜 중요 순으로 일관되게 이어지는가.

개선 방향

사용 빈도·데이터 특성(BP-097)으로 우선순위 판단.

우선순위 높은 필터를 좌측·상단부터(시선 흐름). 그룹화(BP-095)와 함께.

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

역할	책임
기획/UX	필터 우선순위·배치 설계
퍼블리셔	배치 구현

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

목록에 필터를 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 자주 쓰는·중요한 필터가 식별되나요?

□ 우선순위 높은 필터가 좌측·상단부터 배치되나요?

□ 중요→덜 중요 순으로 일관되게 이어지나요?

❓ FAQ

Q1. 우선순위를 어떻게 정하나요? 사용 빈도와 데이터 특성(BP-097)으로요. 자주 쓰고 결과를 효과적으로 좁히는 필터를 우선합니다. Q2. 왜 좌측·상단인가요? 시선이 좌상단에서 시작해 우하단으로 흐릅니다(F·Z 패턴). 중요한 걸 좌상단에 두면 자연 스럽게 먼저 보게 되죠. Q3. 정렬 컨트롤도 같이 배치하나요? 정렬은 BP-096에서 목록 우상단에 별도 배치합니다. BP-094는 필터링 컨트롤의 우선순위 배치죠.

6. 마무리

BP-094의 메시지:

중요한 필터를 먼저 — 필터를 우선순위에 따라 좌측·상단부터 순차 배치하라.

중요한 필터가 구석에 있으면 찾기 어렵고 시선이 역행합니다. 우선순위 높은 필터를 좌측·상단부터 시선 흐름에 맞춰 배치 하는 게 핵심이죠. 다음 편은 관련 필터 군집화입니다.

다음 편 예고 ▶ 「661. (BP-095) 관련 있거나 유사한 필터링 컨트롤을 군집화하여 제공하고 있다.」

ViewCheck는 필터가 우선순위에 따라 좌측·상단부터 배치되는지를 진단합니다.

📚 참고 출처

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

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

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