뭘 골랐는지 보이게

KRDS BP-090 — 선택된 필터링·정렬 옵션이 명확하게 구분되도록 표현하고 있다.

0. 들어가며 — 내가 뭘 선택했는지 모르면

이번 656편은 선택된 필터링·정렬 옵션이 명확하게 구분되도록 표현하라는 규칙입니다.

필터·정렬에서 — 내가 무엇을 선택했는지, 선택 안 한 것과 안 구분되면 헷갈리죠. BP-090은 선택된 옵션을 선택 안 된 것과 명확히 구분하라고 규정합니다. 컴포넌트의 선택 상태 표시를 필터에 적용한 거죠. 이번 편을 풀어냅니다.

1. 원문 — 선택 옵션 명확 구분

BP-090 (기본 패턴 > 필터링·정렬) “선택된 필터링·정렬 옵션이 명확하게 구분되도록 표현하고 있다.”

선택된 필터·정렬 옵션을 선택 안 된 것과 명확히 구분되게 표현하라는 뜻입니다.

정리: 선택된 필터·정렬 옵션을 명확히 구분되게 표현하라. 이게 BP-090입니다.

2. 왜 선택 옵션 구분인가

필터·정렬에서 사용자는 여러 옵션 중 일부를 선택합니다(카테고리 ‘공지’, 정렬 ‘최신순’). 이때 무엇을 선택했는지 가, 선택 안 한 것과 명확히 구분돼야 합니다. BP-090은 이를 요구하죠.

선택 상태가 안 구분될 때의 문제:

선택 인지 못 함 선택된 옵션이 선택 안 된 것과 비슷하게 보이면, 사용자는 자기가 무엇을 골랐는지 모릅니다. ‘정렬을 최신순으로 했나, 안 했나?’ 헷갈리죠.

현재 조건 모름 지금 어떤 필터·정렬이 적용 중인지 안 보이면, 결과가 왜 이렇게 나오는지 이해 못 합니다.

중복·실수 — 이미 — 선택한 걸 또 누르거나, 원하는 걸 안 골랐는데 골랐다고 착각하죠.

그래서 BP-090은 — 명확한 구분을 요구합니다:

선택 상태 시각 강조 선택된 옵션을 시각적으로 강조합니다. 채운 배경·강조 색·체크 표시·굵은 테두리 등으로요. 선택 안 된 것과 한눈에 구분되게요. 칩(태그) 필터면 선택된 칩을 채운 색으로, 미선택은 외곽선으로요.

색만 의존 금지 — 선택을 — 색만으로 표시하면 색각 이상 사용자가 못 구분하니(WCAG 1.4.1), 체크·아이콘·굵기 등 색 외 단서를 함께요.

현재 조건 요약(권장) 적용된 필터·정렬을 요약해 보여주면 좋죠(‘현재: 공지 · 최신순’). 선택 칩을 결과 위에 표시해, 무엇이 적용 중인지 한눈에요(BP-091 적용 단서와 연계).

접근성 선택 상태 전달. 선택 상태는 스크린 리더에도 전달돼야 합니다. aria-pressed(토글 버튼), aria- selected, aria-checked(체크박스·라디오) 등으로 ’선택됨/선택 안 됨’을 알리죠. 시각 강조만으론 스크린 리더가 모릅니다.

컴포넌트 선택 상태의 필터 적용. 토글·체크박스·라디오·칩 등 — 컴포넌트의 선택 상태 표시 규칙을, 필터·정렬 맥락에 적용한 게 BP-090입니다. 어떤 컴포넌트로 필터를 구현하든 — 선택 상태가 명확해야 하죠.

이 규칙은 필터링·정렬의 ’선택 상태 가시성’을 담당합니다 — 선택된 옵션을 명확히 구분해(090), 사용자가 무엇을 선택했고 어떤 조건이 적용 중인지 알게 하죠. 적용 단서(BP-091)와 짝을 이룹니다.

정리하면 — 선택된 필터·정렬 옵션이 안 구분되면 무엇을 골랐는지·어떤 조건인지 모르므로, 시각 강조(색만 아님) + 스크린 리더 상태 전달로 명확히 구분해야 합니다.

3. 점검 / 개선

무엇을 점검하나

선택 강조 — 선택된 옵션이 미선택과 시각적으로 구분되는가.

색 외 단서 — 색만 아닌 체크·아이콘·굵기 단서가 있는가(WCAG 1.4.1).

접근성 — 선택 상태가 스크린 리더에 전달되는가(aria-pressed/selected/checked).

개선 방향

선택 옵션을 채운 배경·체크·강조로 구분. 색만 의존 금지.

aria-pressed/selected/checked로 상태 전달. 현재 조건 요약(BP-091).

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

역할	책임
디자이너	선택 상태 디자인
퍼블리셔/개발	상태 표시·aria 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선택된 옵션이 미선택과 시각적으로 구분되나요?

□ 색만 아닌 체크·아이콘·굵기 단서가 있나요(WCAG 1.4.1)?

□ 선택 상태가 스크린 리더에 전달되나요(aria-pressed/selected/checked)?

❓ FAQ

Q1. 선택을 어떻게 강조하나요? 채운 배경·강조 색·체크 표시·굵은 테두리로요. 칩 필터면 선택된 칩을 채운 색으로, 미선택은 외곽선으로 구분합니다. Q2. 색으로만 표시하면 안 되나요? 색각 이상 사용자가 못 구분하죠(WCAG 1.4.1). 체크·아이콘·굵기 등 색 외 단서를 함께 줍니다. Q3. 스크린 리더엔 어떻게 알리나요? aria-pressed(토글)·aria-selected·aria-checked 등으로 ’선택됨/선택 안 됨’을 전달합니다. 시각 강조만으론 스크린 리더가 모르죠.

6. 마무리

BP-090의 메시지:

뭘 골랐는지 보이게 — 선택된 필터·정렬 옵션을 명확히 구분되게 표현하라.

선택 상태가 안 구분되면 무엇을 골랐는지·어떤 조건인지 모릅니다. 시각 강조(색만 아님) + 스크린 리더 전달로 명확히 구분하는 게 핵심이죠. 다음 편은 조건 적용 시각 단서입니다.

다음 편 예고 ▶ 「657. (BP-091) 조건이 적용되었음을 확인할 수 있는 명확한 시각적 단서를 제공하고 있다.」

ViewCheck는 선택된 필터·정렬 옵션이 명확히 구분되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 1.4.1 Use of Color / 4.1.2 Name, Role, Value — https://www.w3.org/WAI/WCAG21/Understanding/

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

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