지금 걸려 있는 조건을 보이게

KRDS BP-091 — 조건이 적용되었음을 확인할 수 있는 명확한 시각적 단서를 제공하고 있다.

0. 들어가며 — 결과가 왜 이렇게 나오는지 모르면

이번 657편은 조건이 적용되었음을 확인할 수 있는 명확한 시각적 단서를 제공하라는 규칙입니다.

필터를 걸어 목록이 좁혀졌는데 — 지금 어떤 조건이 걸려 있는지 안 보이면, 사용자는 결과가 왜 이런지 모르죠. BP-091은 적용된 조건을 알리는 시각 단서를 규정합니다. BP-090(선택 구분)에서 한 발 더, 결과에 적용된 조건을 보이는 거죠.

1. 원문 — 조건 적용 시각 단서

BP-091 (기본 패턴 > 필터링·정렬) “조건이 적용되었음을 확인할 수 있는 명확한 시각적 단서를 제공하고 있다.”

필터·정렬 조건이 적용됐음을 알리는 명확한 시각 단서를 제공하라는 뜻입니다.

정리: 적용된 조건을 알리는 시각적 단서를 제공하라. 이게 BP-091입니다.

2. 왜 조건 적용 단서인가

사용자가 필터·정렬을 적용하면, 목록(결과)이 그 조건에 맞게 좁혀지거나 정렬됩니다. 그런데 지금 어떤 조건이 적용 중인지가, 결과 화면에서 안 보이면 혼란스럽죠. BP-091은 적용 단서를 요구합니다.

BP-090과의 차이. BP-090은 필터 컨트롤에서 ‘무엇을 선택했나’(선택 상태), BP-091은 결과에 ‘어떤 조건이 적용 중인가’(적용 상태)입니다. 선택 → 적용의 단서죠. 함께 사용자가 조건을 완전히 파악하게 합니다.

적용 단서가 없을 때의 문제:

결과 맥락 상실 목록이 좁혀졌는데, 무슨 조건 때문인지 안 보이면, 사용자는 ‘왜 이것만 나오지?’, ‘내가 뭘 걸었더라?’ 혼란스럽습니다. 결과를 맥락 없이 보게 되죠.

조건 해제 어려움 적용된 조건이 안 보이면, 그걸 어떻게 푸는지(BP-099 해제)도 모릅니다.

빈 결과 오해 필터가 너무 좁아 결과가 0건인데, 조건이 안 보이면 ‘데이터가 없나?’ 오해하죠. 사실은 조건을 풀면 되는데요.

그래서 BP-091은 — 명확한 시각 단서를 요구합니다:

적용 조건 표시(칩 등) 적용된 필터·정렬을 결과 위·옆에 표시합니다. 보통 적용된 조건을 칩(태그)으로요: ‘공지 ✕’, ‘최신순 ✕’. 사용자가 지금 무엇이 걸려 있는지 한눈에 보죠. 각 칩의 ✕로 개별 해제도요.

결과 수 안내 ’필터 결과: 23건’처럼 조건 적용 결과 수를 보여줍니다(BP-103 live-region 연계). 조건이 결과에 미친 영향을 알죠.

필터 활성 표시 필터 버튼·영역에 적용 중임을 표시(활성 색, 적용 개수 배지 ‘필터 3’)합니다. 모바일 축약 버튼(BP-102)에도 ’필터 적용 중’을 알리죠.

적용 단서의 효과:

맥락 이해 — 사용자가 — 결과가 왜 이런지(어떤 조건 때문인지) 이해합니다.

조건 관리 — 적용 조건이 보이니 — 개별·전체 해제(BP-099)가 쉽죠.

빈 결과 대응 — 0건일 때 — 조건이 보이면, ’조건을 완화하자’고 판단합니다.

이 규칙은 필터링·정렬의 ’적용 상태 가시성’을 담당합니다 — 적용 조건의 시각 단서를 제공해(091), 사용자가 결과의 맥락 을 이해하고 조건을 관리하게 하죠. 선택 구분(BP-090)·해제(BP-099)와 연결됩니다.

정리하면 — 적용된 조건이 안 보이면 결과의 맥락을 모르고 조건 관리·빈 결과 대응이 어려우므로, 적용 조건을 칩 등으로 표시하고 결과 수·필터 활성을 알리는 명확한 시각 단서를 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

적용 조건 표시 — 적용된 필터·정렬이 칩 등으로 결과에 표시되는가.

결과 수 — 조건 적용 결과 수가 안내되는가.

필터 활성 — 필터 영역·버튼에 적용 중 표시(활성·배지)가 있는가.

개선 방향

적용 조건을 칩(✕ 개별 해제)으로 결과 위에 표시. 결과 수 안내.

필터 버튼 활성·적용 개수 배지. 모바일 축약 버튼에도 적용 표시.

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

역할	책임
기획/UX	적용 단서 설계
퍼블리셔/개발	칩·결과 수 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 적용된 필터·정렬이 칩 등으로 결과에 표시되나요?

□ 조건 적용 결과 수가 안내되나요?

□ 필터 영역·버튼에 적용 중 표시(활성·배지)가 있나요?

❓ FAQ

Q1. BP-090(선택 구분)과 뭐가 다른가요? BP-090은 필터 컨트롤에서 ‘무엇을 선택했나’, BP-091은 결과에 ‘어떤 조건이 적용 중인가’입니다. 선택 → 적용의 단서죠. Q2. 적용 조건을 어떻게 보여주나요? 보통 칩(태그)으로요: ’공지 ✕’, ‘최신순 ✕’. 각 칩의 ✕로 개별 해제도 되죠. ‘필터 결과: 23건’ 같은 결과 수도 함께요. Q3. 결과가 0건이면요? 적용 조건이 보이면 ’데이터가 없나?’가 아니라 ’조건을 완화하자’고 판단합니다. 조건이 안 보이면 빈 결과를 오해하죠.

6. 마무리

BP-091의 메시지:

지금 걸려 있는 조건을 보이게 — 조건 적용의 명확한 시각적 단서를 제공하라.

적용 조건이 안 보이면 결과의 맥락을 모르고 조건 관리가 어렵습니다. 칩·결과 수·필터 활성으로 적용 상태를 알리는 게 핵심이죠. 다음 편은 컨트롤 레이블·그룹 헤딩입니다.

다음 편 예고 ▶ 「658. (BP-092) 모든 필터링·정렬 컨트롤에 레이블과 그룹 헤딩을 제공하고 있다.」

ViewCheck는 조건 적용의 시각적 단서가 제공되는지를 진단합니다.

📚 참고 출처

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

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

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