처음·끝·앞·뒤로 가는 길

KRDS CP-114 — 페이지네이션에는 첫/마지막 화면, 이전/다음 화면으로 이동할 수 있는 수단을 제공하고 있다.

0. 들어가며 — 페이지네이션 그룹의 첫 규칙

이번 234편부터 페이지네이션(Pagination) 그룹(CP-114~133, 20개)으로 들어갑니다. 첫 규칙은 첫/마지막 화면, 이전/다음 화면으로 이동할 수 있는 수단을 제공하라는 내용이죠.

페이지네이션은 게시판·검색 결과처럼 여러 페이지로 나뉜 목록에서 ‘몇 페이지로 갈지’ 고르는 내비게이션입니다. 보통 “1 2 3 … 10” 같은 숫자 링크로 보이죠. 그런데 숫자만 있으면 — 50페이지짜리 목록에서 맨 끝으로 한 번에 가거나, 바로 앞/뒤로 넘기기가 불편합니다. CP-114는 숫자 링크에 더해 첫/마지막·이전/다음 이동 수단을 갖추 라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 첫/마지막·이전/다음 이동 수단

CP-114 (컴포넌트 > 페이지네이션) “페이지네이션에는 첫/마지막 화면, 이전/다음 화면으로 이동할 수 있는 수단을 제공하고 있다.”

페이지네이션에 숫자 링크뿐 아니라, 맨 처음 페이지(첫)·맨 끝 페이지(마지막) 로 한 번에 가는 수단과, 바로 앞 페이지(이전)·바로 뒤 페이지(다음) 로 한 칸씩 넘기는 수단을 함께 제공하라는 뜻입니다.

정리: 페이지네이션엔 첫·마지막·이전·다음 이동 수단을 갖춰라. 이게 CP-114입니다.

2. 왜 첫·마지막·이전·다음이 필요한가

페이지네이션의 본질은 ’여러 페이지를 효율적으로 오가게 하는 것’입니다. 사용자가 목록 페이지들 사이를 이동하는 패턴은 크게 네 가지이고, 각각에 맞는 수단이 필요하죠:

① 이전/다음 — 한 칸씩 순차 이동. 가장 흔한 패턴입니다. 목록을 page 1, 2, 3… 순서대로 차례로 훑을 때, ‘다음(▶)’ 버튼 하나로 한 칸씩 넘기죠. 숫자를 일일이 찾아 누르는 것보다 빠르고, 특히 ‘쭉 읽어 내려가는’ 탐색에 편합니다. ’이전(◀)’은 방금 본 페이지로 되돌아갈 때 쓰고요. 이 둘은 사용자의 가장 빈번한 행동을 받칩니다.

② 첫/마지막 — 양 끝으로 점프. 50페이지짜리 목록에서 ‘맨 끝(최신/최초 게시물)을 보고 싶다’거나 ’처음으로 돌아가고 싶다’는 경우가 있습니다. 이때 숫자를 하나씩 누르거나 ’다음’을 50번 누를 순 없죠. ’마지막(⏭)’ 버튼 하나로 끝 페이지로, ‘첫(⏮)’ 버튼으로 1페이지로 단번에 점프합니다. 양 끝은 특히 자주 찾는 위치라(최신 글, 첫 글) 전용 수단이 효율적입니다.

이 네 수단이 숫자 링크(CP-119의 최대 11개 등)와 함께 있으면 — 사용자는 상황에 맞는 가장 빠른 방법을 고릅니다. 근처 페이지는 숫자로, 한 칸씩은 이전/다음으로, 양 끝은 첫/마지막으로요. 어느 하나가 빠지면 특정 이동이 불편 해지죠 — 예를 들어 첫/마지막이 없으면 끝 페이지로 가기가 번거롭고, 이전/다음이 없으면 순차 탐색이 불편합니다.

다만 맥락에 따라 — 페이지 수가 적으면(예: 3페이지) 첫/마지막이 큰 의미가 없을 수 있고, 일부 디자인은 이전/ 다음만 강조하기도 합니다. 하지만 KRDS 기준은 네 수단을 갖추는 것을 권장합니다. 특히 화면 수가 많은 공공 게시판(민원·공고·자료실)에서는 양 끝 점프가 실질적으로 유용하죠.

구현 시 주의 — 이 이동 버튼들이 현재 위치에서 의미 없을 때의 처리입니다. 1페이지에서 ‘이전’·‘첫’은 이동할 곳이 없으니, 비활성(disabled) 처리하거나 숨겨 헛클릭을 막죠. 마지막 페이지에서 ’다음’·’마지막’도 마찬가지입니다. 그리고 이 이동 버튼들이 아이콘(◀▶)으로만 돼 있으면 스크린 리더용 이름이 필요한데, 이는 뒤의 CP-130(아이콘 버튼 aria-label)에서 다룹니다.

이 규칙은 페이지네이션 20개 규칙의 출발점으로 — ’어떤 이동 수단을 둘 것인가(기능 구성)’를 정합니다. 이어지는 규칙들은 전체 수 표시(CP-115), 현재 강조(CP-116), 배치(CP-117) 등 세부를 다루죠.

3. 점검 / 개선

무엇을 점검하나

이전/다음 — 바로 앞/뒤 페이지로 넘기는 수단이 있는가.

첫/마지막 — 맨 처음/맨 끝 페이지로 점프하는 수단이 있는가.

경계 처리 — 1페이지에서 이전/첫, 마지막에서 다음/마지막이 비활성·숨김 처리되는가.

개선 방향

숫자 링크에 더해 첫(⏮)·이전(◀)·다음(▶)·마지막(⏭) 수단 추가.

경계 페이지에서 의미 없는 버튼은 disabled 또는 숨김.

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

역할	책임
디자이너	첫·마지막·이전·다음 수단 구성·경계 상태 설계
퍼블리셔/개발	이동 수단·비활성 처리 구현

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

게시판·검색결과·자료실 등 목록을 페이지로 나누는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 이전/다음 페이지 이동 수단이 있나요?

□ 첫/마지막 페이지 점프 수단이 있나요?

□ 1페이지에서 이전/첫, 마지막에서 다음/마지막이 비활성 처리되나요?

❓ FAQ

Q1. 숫자 링크만 있으면 안 되나요? 근처 페이지는 숫자로 가지만, 양 끝 점프와 한 칸 이동엔 첫/마지막·이전/ 다음이 효율적입니다. 함께 갖추는 게 권장됩니다. Q2. 페이지가 몇 개 안 되면요? 페이지 수가 적으면 첫/마지막의 효용이 작지만, KRDS는 네 수단을 권장합니다. 많은 게시판에서 특히 유용합니다. Q3. 1페이지에서 ’이전’을 누르면요? 이동할 곳이 없으므로 비활성(disabled)·숨김 처리해 헛클릭을 막습니다.

6. 마무리

CP-114의 메시지:

처음·끝·앞·뒤로 가는 길 — 첫/마지막·이전/다음 이동 수단을 갖춰라.

페이지네이션은 여러 페이지를 효율적으로 오가는 도구입니다. 한 칸씩(이전/다음)과 양 끝 점프(첫/마지막)는 사용자 이동 패턴의 핵심이라, 숫자 링크와 함께 갖춰야 하죠. 경계 페이지에선 의미 없는 버튼을 비활성 처리합니다. 다음 편은 전체 화면 수 표시입니다.

다음 편 예고 ▶ 「235. (CP-115) 전체 화면 수를 표시하고 있다.」

ViewCheck는 페이지네이션의 첫/마지막·이전/다음 이동 수단 제공을 진단합니다.

📚 참고 출처

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

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

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