원하는 순서로 보게

KRDS CP-241 — 사용자가 원하는 대로 데이터를 정렬할 수 있는 기능을 제공하고 있다.

0. 들어가며 — 내가 보고 싶은 순서로

이번 361편은 사용자가 원하는 대로 데이터를 정렬할 수 있는 기능을 제공하라는 규칙입니다.

표에 데이터가 많으면 — 사용자마다 보고 싶은 순서가 다르죠. 어떤 사람은 금액 높은 순, 어떤 사람은 날짜 최신 순, 어떤 사람은 이름 가나다순으로요. 표가 고정된 순서로만 보이면 — 사용자가 원하는 비교를 못 합니다. CP-241은 열 헤더 클릭 등으로 사용자가 정렬을 바꿀 수 있게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 사용자 정렬 기능 제공

CP-241 (컴포넌트 > 표) “사용자가 원하는 대로 데이터를 정렬할 수 있는 기능을 제공하고 있다.”

표의 데이터를 사용자가 원하는 기준(열)과 순서(오름/내림차순)로 정렬할 수 있는 기능을 제공하라는 뜻입니다.

정리: 사용자가 원하는 기준·순서로 정렬할 수 있게 하라. 이게 CP-241입니다.

2. 왜 사용자 정렬 기능이 필요한가

표는 데이터를 비교·탐색하는 도구입니다. 그런데 ’어떤 순서로 보고 싶은가’는 사용자와 목적에 따라 다르죠. 같은 데이터라도:

민원 내역을 — 최신순으로 보고 싶은 사람, 처리 상태순으로 보고 싶은 사람, 기관명 가나다순으로 보고 싶은 사람.

통계 표를 — 값 큰 순으로 보고 싶은 사람, 항목 이름순으로 보고 싶은 사람.

표가 고정된 하나의 순서로만 보이면 — 사용자는 원하는 비교를 못 합니다. 예를 들어 ’가장 금액이 큰 항목’을 찾으려는데 표가 이름순으로만 정렬돼 있으면, 사용자가 직접 눈으로 훑어 찾아야 하죠. 데이터가 많으면 거의 불가능 합니다.

그래서 CP-241은 — 사용자가 원하는 대로 정렬할 수 있는 기능을 제공하라고 합니다. 표준 방식:

열 헤더 클릭 정렬 — 각 열 헤더를 클릭하면 그 열 기준으로 정렬됩니다. 한 번 클릭하면 오름차순, 다시 클릭 하면 내림차순으로 토글되죠. ‘금액’ 헤더를 클릭하면 금액순으로, ‘날짜’ 헤더를 클릭하면 날짜순으로 재정렬 됩니다.

정렬 방향 표시 — 현재 어느 열이 어느 방향(오름/내림)으로 정렬됐는지 — 헤더에 화살표(▲▼) 등으로 표시해 사용자가 현재 정렬 상태를 알게 하죠.

이러면 — 사용자가 자기 목적에 맞는 순서로 데이터를 재배열해 원하는 비교·탐색을 하죠. 데이터가 많을수록 정렬 기능의 가치가 커집니다.

접근성 — 정렬 가능 표시·상태 전달. 정렬 기능은 모든 사용자가 쓸 수 있어야 합니다:

정렬 가능 인지 — 정렬 가능한 헤더가 클릭 가능함을 시각적으로 알리고(커서·아이콘), 헤더를 <button>이나 적절한 마크업으로 만들어 키보드로도 정렬되게(구조화 목록 CP-148, 표 기능도 키보드).

aria-sort — WAI-ARIA의 aria-sort 속성으로 현재 정렬된 열과 방향(ascending/descending/none)을 스크린 리더에 전달하죠. 비시각 사용자도 ’어느 열이 어떻게 정렬됐는지’를 압니다. 헤더에 aria-sort="ascending" 같은 식으로요.

정렬 후 안내 — 정렬이 바뀌면 그 결과를 보조기술에 알리는 것도 좋습니다(라이브 영역 등).

정렬과 데이터 정렬(CP-240)의 관계. 사용자가 정렬을 바꿔도 — 각 열의 데이터 유형별 정렬 방향(숫자 우측· 텍스트 좌측, CP-240)은 유지됩니다. CP-240은 ‘셀 안 값의 표시 정렬’, CP-241은 ’행의 순서 정렬’로 다른 차원 이죠. 사용자가 금액순으로 행을 재정렬해도, 금액 값들은 여전히 셀 안에서 오른쪽 정렬됩니다.

모든 표에 필수인가. 정렬 기능은 — 데이터가 많고 다양한 순서로 볼 만한 표에 특히 유용합니다. 데이터가 적고 고정 순서가 명확한 작은 표(예: 2~3행의 비교표)는 정렬 기능이 불필요할 수 있죠. 데이터 규모·성격에 맞게 제공 합니다.

정리하면 — 표의 데이터를 보는 순서는 사용자·목적에 따라 다르므로, 열 헤더 클릭 등으로 사용자가 원하는 기준· 순서로 정렬할 수 있는 기능을 (키보드·스크린 리더 접근성과 함께) 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

정렬 기능 — 사용자가 열 기준으로 데이터를 정렬할 수 있는가(헤더 클릭 등).

방향 표시 — 현재 정렬된 열·방향이 표시되는가(화살표·aria-sort).

접근성 — 정렬이 키보드로 되고 스크린 리더에 상태가 전달되는가.

개선 방향

열 헤더 클릭 정렬(오름/내림 토글) + 방향 표시 제공.

헤더를 키보드 접근 가능하게, aria-sort로 상태 전달.

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

역할	책임
퍼블리셔/개발	정렬 기능·방향 표시·aria-sort 구현
접근성 담당	키보드 정렬·상태 전달 검증

기관 유형	CP-241 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (데이터 많은 표 사용 시)

데이터가 많아 다양한 순서로 볼 만한 표를 쓰는 사이트에서 특히 중요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 사용자가 열 기준으로 데이터를 정렬할 수 있나요(헤더 클릭 등)?

□ 현재 정렬된 열·방향이 표시되나요(화살표·aria-sort)?

□ 정렬이 키보드로 되고 스크린 리더에 상태가 전달되나요?

❓ FAQ

Q1. 모든 표에 정렬 기능이 필요한가요? 데이터가 많고 다양한 순서로 볼 만한 표에 유용합니다. 작은 고정 표는 불필요할 수 있죠. Q2. 정렬 상태를 어떻게 알리나요? 헤더에 화살표(▲▼)로 시각 표시하고, aria-sort로 스크린 리더에 전달 합니다. Q3. 정렬하면 셀 값 정렬(CP-240)도 바뀌나요? 아닙니다. CP-241은 행 순서, CP-240은 셀 안 값의 표시 정렬로 다른 차원입니다. 숫자는 계속 오른쪽 정렬됩니다.

6. 마무리

CP-241의 메시지:

원하는 순서로 보게 — 사용자가 데이터를 정렬할 수 있는 기능을 제공하라.

데이터를 보는 순서는 사용자·목적에 따라 다릅니다. 열 헤더 클릭 등으로 원하는 기준·순서로 정렬하게 하면, 각자 목적에 맞는 비교·탐색을 하죠. 키보드·aria-sort 접근성도 갖춰야 합니다. 다음 편은 빈 셀의 대시 처리입니다.

다음 편 예고 ▶ 「362. (CP-242) 데이터 값이 존재하지 않는 경우 셀을 비워두지 않고 대시(-)를 제공하고 있다.」

ViewCheck는 표에 사용자 정렬 기능이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 표(Table) 가이드 — https://www.krds.go.kr/html/site/component/component_22.html

WAI-ARIA — aria-sort — https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort

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

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