이전은 왼쪽, 다음은 오른쪽

KRDS CP-132 — 구성 요소(이전 버튼, 숫자링크 목록, 다음 버튼 등)를 일관된 순서로 제공하고 있다.

0. 들어가며 — 페이지마다 버튼 자리가 바뀌면

이번 252편은 페이지네이션 구성 요소(이전·숫자·다음 등)를 일관된 순서로 제공하라는 규칙입니다.

페이지네이션은 보통 ‘이전(◀) 숫자 링크 다음(▶)’ 순서입니다. 그런데 어떤 페이지는 이 순서고, 어떤 페이지는 ‘다음 숫자 이전’으로 뒤바뀌면? 사용자는 매번 버튼 위치를 다시 찾아야 하죠. CP-132는 구성 요소의 순서를 모든 페이지·목록에서 일관되게 유지하라고 규정합니다. CP-131(크기·구분)과 짝을 이루는 ’배치’ 규칙이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 일관된 순서

CP-132 (컴포넌트 > 페이지네이션) “구성 요소(이전 버튼, 숫자링크 목록, 다음 버튼 등)를 일관된 순서로 제공하고 있다.”

페이지네이션의 구성 요소들을 항상 동일한 순서(예: 이전 — 숫자 링크 — 다음)로 배치해, 사용자가 어느 페이지·목록에서든 같은 위치에서 같은 기능을 찾게 하라는 뜻입니다.

정리: 이전·숫자·다음 등 구성 요소의 순서를 일관되게 유지하라. 이게 CP-132입니다.

2. 왜 일관된 순서여야 하나

내비게이션의 사용성은 예측 가능성에서 나옵니다(브레드크럼 위치 CP-081, 페이지네이션 위치 CP-117에서 반복 강조). 사용자는 페이지네이션을 한 번 쓰면 ‘이전은 왼쪽, 다음은 오른쪽, 숫자는 가운데’ 라는 배치를 학습합니다. 이 학습이 모든 페이지에서 통하면, 사용자는 생각 없이 손이 가는 대로 원하는 버튼을 누르죠 — ‘다음으로 가야지’ 하면 무의식적으로 오른쪽 끝을 누릅니다.

그런데 구성 요소 순서가 페이지마다·목록마다 다르면 이 예측이 깨집니다:

게시판 A는 ’이전 숫자 다음’인데 게시판 B는 ’숫자 이전 다음’이면, 사용자는 B에서 이전 버튼을 찾느라 멈칫합니다.

’다음’이 어떤 데선 오른쪽, 어떤 데선 왼쪽이면 — 방향 감각이 흔들려 반대로 누르는 실수가 생기죠.

매번 위치를 다시 확인하는 것은 작지만 누적되는 인지 부담입니다. 페이지 이동은 빈번한 조작이라, 이 부담이 반복되면 사용 경험이 나빠지죠.

관습적 순서. 일반적이고 권장되는 순서는 이전(◀) 숫자 링크 목록 다음(▶) 입니다(첫/마지막이 있으면 ⏮ 이전 … 다음 ⏭ 식으로 양 끝에). 이는 ’시간/순서의 흐름’을 좌→우로 표현하는 관습과 맞습니다 왼쪽이 과거(이전), 오른쪽이 미래(다음)죠. 이 관습을 따르면 사용자가 이미 학습한 패턴이라 더 직관적입니다. 핵심은 어떤 순서를 택하든 사이트 전체에서 동일하게 유지하는 것입니다.

일관성의 두 층위. 이 ’순서’는 시각적 배치뿐 아니라 DOM/초점 순서(CP-103, CP-133 맥락)와도 맞물려야 합니다 시각적으로 ’이전 숫자 다음’이면 키보드 Tab 초점도 그 순서로 흘러야 하죠. 시각 순서와 초점 순서가 어긋나면 키보드 사용자가 혼란스럽습니다. 그래서 일관된 순서는 ’보이는 순서 = 코드 순서 = 초점 순서’가 모두 일치할 때 완성됩니다.

이 규칙은 CP-131(크기·영역 구분)과 함께 페이지네이션의 ‘배치 완성도’를 이룹니다 — CP-131이 ’각 요소를 누르기 좋게’, CP-132가 ‘요소들을 일관된 순서로’. 둘이 합쳐져 사용자는 어떤 목록에서든 익숙하고 정확하게 페이지네이션을 씁니다. 그리고 페이지네이션 20개 규칙 중 마지막 CP-133(목록 확장 시 초점 순서)으로 자연스럽게 이어지죠 — 순서의 일관성이 동적 상황(목록 확장)에서도 지켜져야 한다는 것입니다.

3. 점검 / 개선

무엇을 점검하나

순서 일관성 — 모든 페이지·목록에서 구성 요소 순서가 동일한가.

관습 부합 이전(왼쪽) 숫자 다음(오른쪽) 등 관습적 순서인가.

초점 순서 일치 — 시각 순서와 키보드 초점 순서가 일치하는가.

개선 방향

페이지네이션을 공통 컴포넌트로 만들어 순서를 사이트 전역 통일.

시각·DOM·초점 순서를 ’이전 — 숫자 — 다음’으로 일치(CP-103·133 연계).

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

역할	책임
디자이너	구성 요소 일관 순서·관습 부합 정의
퍼블리셔/개발	공통 컴포넌트로 순서 통일·초점 일치 구현

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

여러 목록에 페이지네이션을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 페이지·목록에서 구성 요소 순서가 동일한가요?

□ 이전(왼쪽) — 숫자 — 다음(오른쪽) 등 관습적 순서인가요?

□ 시각 순서와 키보드 초점 순서가 일치하나요?

❓ FAQ

Q1. 꼭 ‘이전 — 숫자 — 다음’ 순서여야 하나요? 관습상 권장되지만, 핵심은 어떤 순서든 사이트 전체에서 일관 되게 유지하는 것입니다. Q2. 목록마다 디자인이 달라도 순서는 같아야 하나요? 네. 외형은 달라도 구성 요소 순서는 동일해야 예측 가능합니다. Q3. 초점 순서도 맞춰야 하나요? 시각 순서와 키보드 초점 순서가 일치해야 키보드 사용자가 혼란이 없습니다 (CP-103·133).

6. 마무리

CP-132의 메시지:

이전은 왼쪽, 다음은 오른쪽 — 구성 요소를 일관된 순서로 제공하라.

내비게이션은 예측 가능할 때 빛납니다. 페이지네이션 구성 요소의 순서가 일관되면 사용자는 학습한 패턴으로 빠르고 정확하게 쓰죠. 관습적 순서(이전 숫자 다음)를 따르고 사이트 전역에서 통일하며, 시각·초점 순서를 일치시켜야 합니다. CP-131과 함께 배치 완성도를 이루죠. 다음 편은 페이지네이션 그룹의 마지막 목록 확장 시 초점 순서 입니다.

다음 편 예고 ▶ 「253. (CP-133) 목록 확장 페이지네이션을 사용할 때, 초점 이동 순서를 준수하고 있다.」

ViewCheck는 페이지네이션 구성 요소가 일관된 순서로 제공되는지를 진단합니다.

📚 참고 출처

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

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

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