고르면 바로 반영

KRDS BP-100 — 사용자가 옵션 값을 선택하거나 값이 변경되었을 때 해당 속성과 옵션 값을 기준으로 데이터 집합에 대한 조회 또는 정렬을 즉각 표시하고 있다.

0. 들어가며 — 골랐는데 바로 안 바뀌면

이번 666편은 사용자가 옵션 값을 선택·변경했을 때, 그 속성·값 기준으로 데이터 조회·정렬을 즉각 표시하라는 규칙입니다.

필터·정렬을 — 골랐는데, 결과가 바로 안 바뀌면 답답하죠. BP-100은 옵션 선택·변경 시 결과를 즉각 반영하라고 규정합니다. 즉각 피드백으로 직관적 탐색을 주는 거죠. 단, 일괄 적용 방식(BP-101)도 있으니 함께 봅니다. 이번 편을 풀어냅니다.

1. 원문 — 옵션 변경 시 즉각 표시

BP-100 (기본 패턴 > 필터링·정렬) “사용자가 옵션 값을 선택하거나 값이 변경되었을 때 해당 속성과 옵션 값을 기준으로 데이터 집합에 대한 조회 또는 정렬을 즉각 표시하고 있다.”

옵션을 선택·변경하면 그 기준으로 결과를 즉각 표시하라는 뜻입니다.

정리: 옵션 선택·변경 시 결과를 즉각 표시하라. 이게 BP-100입니다.

2. 왜 즉각 표시인가

필터·정렬을 적용하는 방식은 두 가지입니다: ① 옵션을 고르면 즉각 반영(BP-100), ② 옵션들을 고른 뒤 ‘적용/조회’ 버튼으로 일괄 반영(BP-101). BP-100은 즉각 표시 방식을 다룹니다. 사용자가 옵션을 고르면, 바로 결과가 바뀌게요.

즉각 표시가 좋은 경우와 효과:

직관적 탐색 옵션을 고르면 바로 결과가 바뀌면, 사용자는 즉각 그 효과를 봅니다. 이것저것 바꿔보며 탐색 하기 좋죠. ‘카테고리를 공지로 바꾸니 23건이 되네’ 하고 바로 확인합니다.

빠른 피드백 선택 → 결과의 즉각 피드백은, 사용자에게 통제감과 효율을 줍니다. 버튼을 또 누르는 단계가 없죠.

단일 옵션에 적합 — 정렬(하나 고르면 끝)이나, 단일 필터처럼 — 한 번에 하나씩 바꾸는 경우에 특히 좋습니다.

즉각 표시의 구현·주의:

선택 즉시 반영 드롭다운·라디오·체크박스·토글 등 옵션을 선택·변경하면, 그 즉시 데이터를 조회·정렬해 결과를 갱신합니다. 별도 ‘적용’ 버튼 없이요.

로딩 표시 결과를 불러오는 동안, 로딩 상태(스피너 등)를 보여줍니다. 즉각이라도 약간의 시간이 걸리면, ’처리 중’을 알리죠.

접근성(BP-103·104) 즉각 갱신 시 결과 수 변경을 스크린 리더에 알리고(aria-live, BP-103), 키보드 초점을 유지해야(BP-104) 합니다. 시각 사용자는 결과를 보지만, 스크린 리더 사용자는 안내받아야 변경을 알죠.

즉각(BP-100) vs 일괄(BP-101). 두 방식은 — 상황에 맞게 씁니다:

즉각(BP-100) — 단일·소수 옵션, 빠른 탐색에 좋음. 다만 — 옵션마다 결과를 다시 불러와 부하가 있을 수 있죠.

일괄(BP-101) — 여러 옵션을 한꺼번에 정하고 ’적용’으로 한 번에. 옵션이 많거나 — 매 변경마다 조회가 부담일 때 좋음.

데이터·옵션 특성에 맞게 — 적절한 방식을 택하거나, 둘을 — 조합합니다.

WCAG 3.2.2(입력 시 변화) 주의. 옵션 선택만으로 맥락이 크게 바뀌면(예상 못 한 페이지 이동) 안 됩니다(WCAG 3.2.2). 결과 목록 갱신은 예상 가능한 변화라 괜찮지만, 사용자가 변화를 인지하게(BP-103) 해야 하죠.

이 규칙은 필터링·정렬의 ’즉각 반영’을 담당합니다 — 옵션 선택·변경 시 결과를 즉각 표시해(100), 사용자가 직관적으로 빠르게 탐색하게 하죠. 일괄 적용(BP-101)과 함께 적용 방식을 이룹니다.

정리하면 — 옵션을 골랐는데 결과가 바로 안 바뀌면 답답하므로, 옵션 선택·변경 시 그 기준으로 조회·정렬을 즉각 표시해 (로딩 표시·접근성 포함) 직관적 탐색을 도와야 합니다.

3. 점검 / 개선

무엇을 점검하나

즉각 반영 — 옵션 선택·변경 시 결과가 즉각 갱신되는가(즉각 방식인 경우).

로딩 표시 — 갱신 중 로딩 상태를 보여주는가.

접근성 — 결과 변경을 스크린 리더에 알리고(BP-103) 초점을 유지하는가(BP-104).

개선 방향

옵션 변경 시 즉각 조회·정렬 갱신(단일·소수 옵션에 적합).

로딩 표시. aria-live(BP-103)·초점 유지(BP-104). 옵션 많으면 일괄(BP-101).

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

역할	책임
기획/UX	즉각/일괄 방식 결정
개발	즉각 갱신·로딩 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 옵션 선택·변경 시 결과가 즉각 갱신되나요(즉각 방식인 경우)?

□ 갱신 중 로딩 상태를 보여주나요?

□ 결과 변경을 스크린 리더에 알리고(BP-103) 초점을 유지하나요(BP-104)?

❓ FAQ

Q1. 즉각 표시가 항상 좋나요? 단일·소수 옵션, 빠른 탐색엔 좋습니다. 단 옵션이 많거나 매 변경마다 조회가 부담이면 일괄 적용(BP-101)이 나을 수 있죠. 상황에 맞게 택합니다. Q2. 즉각 갱신 시 접근성은요? 결과 수 변경을 aria-live로 스크린 리더에 알리고(BP-103), 키보드 초점을 변경한 옵션에 유지해야(BP-104) 합니다. 시각 사용자만 변화를 보면 안 되죠. Q3. 옵션 선택만으로 화면이 확 바뀌어도 되나요? 결과 목록 갱신은 예상 가능한 변화라 괜찮습니다. 단 예상 못 한 페이지 이동 등 큰 맥락 변화는 안 되죠(WCAG 3.2.2). 변화를 인지하게 합니다.

6. 마무리

BP-100의 메시지:

고르면 바로 반영 — 옵션 선택·변경 시 결과를 즉각 표시하라.

옵션을 골랐는데 결과가 바로 안 바뀌면 답답합니다. 옵션 변경 시 결과를 즉각 표시(로딩·접근성 포함)해 직관적 탐색을 돕는 게 핵심이죠. 다음 편은 적용·조회 버튼 일괄 표시입니다.

다음 편 예고 ▶ 「667. (BP-101) ‘적용’, ‘조회’ 버튼에서 Enter/Space Keyup 또는 Click 이벤트 시 설정한 옵션을 일괄 표시하고 있다.」

ViewCheck는 옵션 변경 시 결과가 즉각 표시되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 3.2.2 On Input — https://www.w3.org/WAI/WCAG21/Understanding/on-input.html

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

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