고르면 바로 반영

KRDS SP-044 — 정렬, 필터 적용 결과는 사용자가 값을 선택하였을 때 적용하고 있다.

0. 들어가며 — 정렬을 골랐는데 반영이 안 되면

이번 718편은 정렬, 필터 적용 결과는 사용자가 값을 선택하였을 때 적용하라는 규칙입니다.

검색 결과의 정렬·필터를 — 골랐는데, 바로 반영 안 되면 답답하죠. SP-044는 값 선택 시 즉각 적용을 규정합니다. BP-100 (필터·정렬 즉각 표시)의 검색 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 값 선택 시 적용

SP-044 (서비스 패턴 > 검색 > 상세 검색) “정렬, 필터 적용 결과는 사용자가 값을 선택하였을 때 적용하고 있다.”

정렬·필터를 사용자가 값을 선택하는 즉시 적용하라는 뜻입니다.

정리: 정렬·필터를 값 선택 시 즉각 적용하라. 이게 SP-044입니다.

2. 왜 값 선택 시 적용인가

검색 결과의 정렬·필터(SP-041)를, 사용자가 선택하면, 그 즉시 결과에 반영돼야 직관적입니다. SP-044는 값 선택 시 적용을 요구합니다. BP-100(필터·정렬 즉각 표시)의 검색 버전이죠.

값 선택해도 바로 안 될 때의 문제:

반응 없음 정렬을 ‘최신순’으로 골랐는데, 결과가 바뀌지 않으면, 사용자는 ’됐나?’ 헷갈립니다. 별도 ‘적용’ 버튼을 또 눌러야 하면 번거롭죠.

단계 증가 선택 → (적용 버튼) → 반영의 단계가 늘면, 직관성이 떨어집니다.

그래서 SP-044는 — 값 선택 시 적용을 요구합니다:

선택 즉시 반영 사용자가 정렬·필터 값을 선택(드롭다운에서 ‘최신순’ 클릭, 기간 필터 선택)하면, 그 즉시 결과를 다시 정렬·필터해 보여줍니다. 별도 버튼 없이요(BP-100 즉각 표시).

직관적 탐색 값을 바꾸면 바로 결과가 바뀌니, 사용자는 이것저것 바꿔보며 원하는 결과를 찾죠. 즉각 피드백 으로요.

로딩 표시 결과를 다시 불러오는 동안, 로딩 상태를(SP-031). 즉각이라도 약간의 시간이 걸리면 알리죠.

즉각 적용의 접근성(SP-046·BP-103·104). 값 선택 — 즉시 결과가 바뀔 때:

결과 수 변경을 — 스크린 리더에 알리고(aria-live, SP-046),

키보드 초점을 — 변경한 옵션에 유지합니다(BP-104).

시각 — 사용자는 결과를 보지만, 스크린 리더 사용자는 — 안내받아야 하죠.

즉각 vs 일괄(검색 맥락). 검색 정렬·필터는, 보통 한 번에 하나씩 바꾸므로(정렬 하나, 필터 하나), 즉각 적용 (SP-044)이 적합합니다. 여러 조건을 동시에 거는 고급 검색은, 일괄 적용(BP-101)일 수도 있죠. SP-044는 기본 정렬· 필터의 즉각 적용을 정합니다.

BP-100의 검색 적용. BP-100(필터·정렬 즉각 표시)을, 검색 결과에 적용한 게 SP-044입니다. 검색 결과도 목록 이므로, 정렬·필터 즉각 적용 원칙이 같죠.

이 규칙은 검색(SP)의 ’정렬·필터 즉각 적용’을 담당합니다 — 값 선택 시 즉각 적용해(044), 사용자가 직관적으로 검색 결과 를 정렬·필터하게 하죠. SP-041(컨트롤)·SP-045(적용 단서)·SP-046(접근성)과 함께 갑니다.

정리하면 — 정렬·필터를 골랐는데 바로 반영 안 되면 답답하고 단계가 늘므로, 값 선택 시 즉각 적용하고(로딩 표시·접근성 포함) 직관적 탐색을 도와야 합니다.

3. 점검 / 개선

무엇을 점검하나

즉각 적용 — 정렬·필터 값 선택 시 결과가 즉각 반영되는가.

로딩·접근성 — 갱신 중 로딩 표시 + 결과 수 안내(SP-046)·초점 유지(BP-104)가 되는가.

버튼 불필요 — 별도 ‘적용’ 버튼 없이 선택만으로 되는가(기본 정렬·필터).

개선 방향

정렬·필터 값 선택 시 즉각 적용(BP-100). 로딩 표시(SP-031).

aria-live(SP-046)·초점 유지(BP-104). 고급 검색은 일괄(BP-101) 가능.

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

역할	책임
퍼블리셔/개발	즉각 적용·접근성 구현
기획/UX	즉각/일괄 방식 결정

기관 유형	SP-044 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (검색 정렬·필터 제공 시)

검색 정렬·필터를 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 정렬·필터 값 선택 시 결과가 즉각 반영되나요?

□ 갱신 중 로딩 표시 + 결과 수 안내·초점 유지가 되나요?

□ 별도 ‘적용’ 버튼 없이 선택만으로 되나요(기본 정렬·필터)?

❓ FAQ

Q1. 값을 골랐는데 바로 안 되면 왜 문제인가요? ‘됐나?’ 헷갈리고 별도 ‘적용’ 버튼을 또 눌러야 하면 번거롭습니다. 선택 즉시 반영되면 직관적이죠(BP-100). Q2. 즉각 적용 시 접근성은요? 결과 수 변경을 aria-live로 알리고(SP-046), 키보드 초점을 변경한 옵션에 유지합니다 (BP-104). 시각 사용자만 변화를 보면 안 되죠. Q3. 고급 검색도 즉각 적용인가요? 기본 정렬·필터(하나씩 바꿈)는 즉각 적용이 적합합니다. 여러 조건을 동시에 거는 고급 검색은 일괄 적용(BP-101)일 수 있죠. SP-044는 기본 정렬·필터를 정합니다.

6. 마무리

SP-044의 메시지:

고르면 바로 반영 — 정렬·필터를 값 선택 시 즉각 적용하라.

정렬·필터를 골랐는데 바로 반영 안 되면 답답하고 단계가 늡니다. 값 선택 시 즉각 적용해 직관적 탐색을 돕는 게 핵심이죠. 다음 편은 검색 조건 적용 시각 단서입니다.

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

ViewCheck는 정렬·필터가 값 선택 시 즉각 적용되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 검색 가이드 — https://www.krds.go.kr/html/site/service/service_02.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컴포넌트,웹표준