전체가 몇 페이지인지 알려라

KRDS CP-115 — 전체 화면 수를 표시하고 있다.

0. 들어가며 — 끝이 어딘지 알아야 한다

이번 235편은 페이지네이션에 전체 화면 수(총 페이지 수)를 표시하라는 규칙입니다.

게시판에서 “1 2 3 … 다음”만 보이고 전체가 몇 페이지인지 안 나오면 — 사용자는 ‘이 목록이 얼마나 긴 거지?’, ’끝이 어디지?’를 알 수 없죠. 자료가 5페이지인지 500페이지인지에 따라 탐색 전략이 완전히 달라집니다. CP-115는 전체 화면 수를 표시해 사용자가 목록의 규모와 자기 위치를 파악하게 합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 전체 화면 수 표시

CP-115 (컴포넌트 > 페이지네이션) “전체 화면 수를 표시하고 있다.”

페이지네이션에 전체 페이지가 몇 개인지(총 페이지 수, 또는 그에 준하는 마지막 페이지 번호)를 사용자가 알 수 있게 표시하라는 뜻입니다.

정리: 전체가 몇 페이지인지 사용자에게 보여라. 이게 CP-115입니다.

2. 왜 전체 화면 수를 표시하나

전체 페이지 수는 사용자에게 ‘목록의 규모’와 ’내 현재 위치’ 라는 두 가지 핵심 맥락을 줍니다.

① 규모 파악 = 탐색 전략 결정. 사람은 어떤 목록을 탐색할 때, 그 규모를 알아야 전략을 세웁니다. 전체가 3페이지면 — ‘몇 번 넘기면 다 보겠네’ 하고 가볍게 훑죠. 그런데 전체가 200페이지면 — ‘다 보긴 무리니 검색·필터를 쓰거나, 필요한 부분만 봐야겠다’ 하고 전략을 바꿉니다. 전체 수를 모르면 이 판단을 못 해, ’다음’을 계속 누르며 끝이 안 보이는 막막함에 빠지거나, 자료가 얼마 없는데도 검색을 헤매죠.

② 위치 감각 = 진행 상황 인지. “3페이지”만 보면 내가 어디쯤인지 모르지만, “3 / 50페이지”를 보면 ’아직 초반이구나’를 압니다. 전체 수는 현재 페이지 번호와 결합해 ’진행률’을 만들죠 — 마치 책의 ’23 / 300쪽’처럼요. 이 위치 감각은 사용자에게 ’얼마나 더 가야 하는지’를 알려 탐색의 답답함을 줄입니다.

③ ‘마지막’ 이동의 의미 부여. CP-114에서 본 ‘마지막 화면’ 이동 수단도 전체 수를 알 때 더 유용합니다 — 마지막이 50페이지임을 알면 ’끝으로 점프’의 의미가 분명하죠.

표시 방식은 여러 가지입니다 — 숫자 링크 자체에 마지막 번호가 보이게 하거나(“1 2 3 … 50”의 50), “3 / 50 페이지” 같은 명시적 텍스트를 두거나, “전체 1,234건 (50페이지)” 처럼 항목 수와 함께 보여주기도 하죠. 핵심은 사용자가 전체 규모를 인지할 수 있으면 된다는 것입니다.

주의할 접근성 측면 — 이 전체 수 정보는 시각뿐 아니라 스크린 리더 사용자에게도 전달돼야 합니다. 숫자 링크 목록을 <ul>/<li>로 마크업하면(CP-125) 스크린 리더가 “목록, 항목 N개”로 개수를 읽어 규모 파악을 돕고, 별도 텍스트(“전체 50페이지”)도 낭독되죠. 또 한 가지 — 사용자 설정이나 디바이스가 바뀌어도 이 전체 수가 들쭉날쭉 하면 안 되는데(같은 목록인데 기기마다 페이지 수가 다르면 혼란), 이는 모바일 규칙 CP-123(전체 화면 수 일정 유지)에서 별도로 다룹니다.

정리하면 — 전체 화면 수는 사용자가 목록의 규모와 자기 위치를 파악해 합리적으로 탐색하게 하는 필수 정보입니다.

3. 점검 / 개선

무엇을 점검하나

전체 수 노출 — 전체 페이지 수(또는 마지막 번호)가 표시되는가.

위치 결합 — 현재 페이지와 전체 수가 함께 보여 진행 상황을 알 수 있는가.

접근성 전달 — 전체 수가 스크린 리더에도 전달되는가.

개선 방향

“현재 / 전체페이지” 또는 마지막 번호 노출, “전체 N건(M페이지)” 텍스트 병기.

숫자 링크 <ul>/<li> 마크업(CP-125)으로 개수 낭독.

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

역할	책임
디자이너	전체 수·위치 표시 방식 설계
퍼블리셔/개발	총 페이지 계산·표시·접근성 전달 구현

기관 유형	CP-115 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (페이지네이션 사용 시)

목록을 페이지로 나누는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 전체 페이지 수(또는 마지막 번호)가 표시되나요?

□ 현재 페이지와 전체 수가 함께 보여 진행 상황을 알 수 있나요?

□ 전체 수가 스크린 리더에도 전달되나요?

❓ FAQ

Q1. 숫자 링크에 마지막 번호가 보이면 충분한가요? 그것도 한 방법입니다. 다만 “현재/전체” 텍스트를 병기하면 위치 감각이 더 분명합니다. Q2. 전체 건수만 보여줘도 되나요? 건수도 유용하지만, 페이지 단위 탐색이므로 전체 ’페이지 수’도 알 수 있게 하는 게 좋습니다. Q3. 데이터가 실시간으로 바뀌면요? 가능한 한 일관되게 유지하고, 특히 같은 목록이 기기마다 다른 페이지 수로 보이지 않게 합니다(CP-123).

6. 마무리

CP-115의 메시지:

전체가 몇 페이지인지 알려라 — 규모와 위치를 함께 보여준다.

전체 화면 수는 사용자가 목록의 규모를 알고 탐색 전략을 세우며, 자기 위치(진행률)를 파악하게 하는 필수 정보 입니다. 현재 페이지와 결합해 ’몇 / 몇’으로 보여주고, 스크린 리더에도 전달해야 하죠. 다음 편은 현재 페이지 번호의 강조입니다.

다음 편 예고 ▶ 「236. (CP-116) 번호 링크에 현재 화면 숫자를 강조하여 표현하고 있다.」

ViewCheck는 페이지네이션이 전체 화면 수를 표시하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 페이지네이션(Pagination) 가이드 — https://www.krds.go.kr/html/site/component/component_10.html

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

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