페이지네이션은 한 화면에 하나

KRDS CP-118 — 한 화면에서 하나만 사용하고 있다.

0. 들어가며 — 둘이면 어느 게 진짜인지 헷갈린다

이번 238편은 한 화면에서 페이지네이션을 하나만 사용하라는 규칙입니다.

한 화면에 페이지네이션이 둘 이상 있으면 — 사용자는 ‘이 둘이 같은 목록을 제어하나? 다른 목록인가?’, ‘둘 중 어느 걸 봐야 하지?’ 하고 헷갈립니다. 특히 둘의 현재 페이지 표시가 어긋나기라도 하면 혼란이 가중되죠. CP-118은 한 화면(한 목록)에 페이지네이션을 하나만 두어 명확성을 지키라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 한 화면에 하나만

CP-118 (컴포넌트 > 페이지네이션) “한 화면에서 하나만 사용하고 있다.”

하나의 화면(하나의 목록)에 대해 페이지네이션을 단 하나만 두고, 같은 목록을 제어하는 페이지네이션을 여러 개 중복 배치하지 말라는 뜻입니다.

정리: 한 화면(목록)에 페이지네이션은 하나만 둬라. 이게 CP-118입니다.

2. 왜 하나만 써야 하나

페이지네이션은 ’이 목록을 페이지 단위로 제어하는 단일 컨트롤’입니다. 한 화면에 같은 목록을 제어하는 페이지 네이션이 둘 이상 있으면 여러 문제가 생기죠:

① 정체성 혼란. 사용자는 페이지네이션을 보면 ‘이게 지금 목록을 제어하는구나’ 하고 인지합니다. 그런데 화면에 페이지네이션이 둘 있으면 — ‘이 둘이 같은 목록을 제어하나? 아니면 서로 다른 목록의 것인가?’ 하는 의문이 생깁 니다. 같은 목록을 가리키는 거라면 둘은 불필요한 중복이고, 다른 목록의 것처럼 보이면 잘못된 기대를 만들죠.

② 상태 불일치 위험. 둘이 같은 목록을 제어한다면, 둘의 ‘현재 페이지 강조’(CP-116)가 항상 동기화돼야 합니다. 한쪽에서 페이지를 바꿨는데 다른 쪽이 안 따라오면 — 한 화면에서 “3페이지”와 “1페이지”가 동시에 강조되는 모순이 생기죠. 사용자는 ‘대체 지금 몇 페이지지?’ 하고 신뢰를 잃습니다. 둘을 완벽히 동기화하는 것도 구현 부담이고, 동기화돼도 중복일 뿐입니다.

③ 시각·인지 부담. 페이지네이션이 둘이면 화면이 복잡해지고, 사용자는 ‘어느 걸 써야 빠르지?’ 하는 불필요한 선택을 합니다. 하나면 고민 없이 그것을 쓰죠.

그래서 CP-118은 한 화면(목록)당 페이지네이션 하나를 원칙으로 합니다. 그 하나를 CP-117에 따라 목록 하단 중앙에 두면, 사용자는 명확하게 ’이게 이 목록의 페이지네이션’임을 인지하죠.

오해 주의 — ‘긴 목록의 상·하단 중복’은?** 매우 긴 목록에서 사용성을 위해 목록 위와 아래에 페이지네이션을 둘 다 두는 패턴이 있습니다. 이는 ’같은 목록의 같은 컨트롤을 편의상 두 곳에 노출’하는 것이라, 둘이 완벽히 동기화되고 시각·접근성 처리가 일관되면 허용될 수 있습니다. 다만 KRDS 기준(CP-117 하단 중앙)의 기본은 하단 하나이며, CP-118의 핵심 금지 대상은’서로 다른/모순되는 페이지네이션이 한 화면에 여러 개 떠 있는 것**’ 입니다. 한 화면에 별개 목록이 여러 개라면 각 목록에 각자의 페이지네이션이 하나씩 붙는 것은 자연스럽고요 — ’한 목록당 하나’라는 본질을 지키면 됩니다.

정리하면 — 페이지네이션의 명확성과 상태 일관성을 위해, 하나의 목록은 하나의 페이지네이션으로 제어합니다. 중복·모순되는 다중 페이지네이션을 피하는 것이 핵심입니다.

3. 점검 / 개선

무엇을 점검하나

단일 사용 — 한 목록을 제어하는 페이지네이션이 하나인가.

중복·모순 없음 — 같은 화면에 모순되는 페이지네이션이 여럿 떠 있지 않은가.

(상·하단 중복 시) 동기화 — 부득이 둘이면 현재 페이지·상태가 완벽히 동기화되는가.

개선 방향

한 목록당 페이지네이션 하나로 정리(기본 하단 중앙, CP-117).

긴 목록의 상·하단 중복은 상태 완전 동기화 + 일관 접근성 처리.

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

역할	책임
디자이너	한 화면 단일 페이지네이션 원칙 설계
퍼블리셔/개발	중복 제거 또는 상태 동기화 구현

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

페이지네이션을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 목록을 제어하는 페이지네이션이 하나인가요?

□ 같은 화면에 모순되는 페이지네이션이 여럿 떠 있지 않나요?

□ (상·하단 중복 시) 현재 페이지·상태가 완벽히 동기화되나요?

❓ FAQ

Q1. 긴 목록이라 위아래 둘 다 두고 싶은데요? 같은 목록의 같은 컨트롤이고 상태가 완벽히 동기화되면 허용될 수 있습니다. 다만 기본은 하단 하나입니다. Q2. 한 화면에 목록이 여러 개면요? 각 목록에 각자의 페이지네이션이 하나씩 붙는 건 자연스럽습니다. ‘한 목록당 하나’를 지키면 됩니다. Q3. 왜 모순이 문제인가요? 둘의 현재 페이지가 어긋나면 사용자가 ’지금 몇 페이지지?’ 헷갈리고 신뢰를 잃 습니다.

6. 마무리

CP-118의 메시지:

페이지네이션은 한 화면에 하나 — 한 목록은 하나의 컨트롤로.

같은 목록에 페이지네이션이 둘 이상이면 정체성 혼란과 상태 불일치가 생깁니다. 한 목록당 하나로 두어 명확성과 일관성을 지키죠. 긴 목록의 상·하단 중복은 완전 동기화 시에만 허용됩니다. 다음 편은 숫자 링크 개수 — 넓으면 11개, 좁으면 7개입니다.

다음 편 예고 ▶ 「239. (CP-119) 숫자 링크 목록에는 화면 너비가 충분한 경우 말줄임표를 포함하여 최대 11개, 좁은 화면에서는 최대 7개의 항목을 표시하고 있다.」

ViewCheck는 한 화면에 페이지네이션이 중복·모순 없이 단일 사용되는지를 진단합니다.

📚 참고 출처

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

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

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