기기가 달라도 전체는 같아야

KRDS CP-123 — [모바일] 사용자 설정 및 디바이스 환경에 상관없이 전체 화면 수를 일정하게 유지한다.

0. 들어가며 — 같은 목록인데 페이지 수가 다르면

이번 243편은 사용자 설정·디바이스 환경이 달라도 전체 화면 수(총 페이지 수)를 일정하게 유지하라는 규칙 입니다.

같은 게시판을 데스크톱에선 “전체 20페이지”, 모바일에선 “전체 40페이지”로 보여주면 어떨까요? 사용자는 ‘내가 본 그 글이 몇 페이지였더라?’ 하고 헷갈리고, 기기를 바꿔 같은 위치를 찾기 어렵습니다. CP-123은 전체 페이지 수가 기기·설정과 무관하게 동일하게 유지되도록 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 전체 화면 수 일정 유지

CP-123 (컴포넌트 > 페이지네이션) [모바일] “사용자 설정 및 디바이스 환경에 상관없이 전체 화면 수를 일정하게 유지한다.”

화면 크기·기기 종류·사용자 설정(글자 크기 등)이 달라지더라도 목록의 전체 페이지 수(총 화면 수)는 변하지 않게 유지하라는 뜻입니다.

정리: 전체 페이지 수는 기기·설정과 무관하게 일정해야 한다. 이게 CP-123입니다.

2. 왜 전체 화면 수가 일정해야 하나

이 규칙의 핵심은 ‘페이지 분할의 기준은 데이터이지 화면이 아니다’ 라는 원칙입니다. 전체 페이지 수는 ’항목 총수 ÷ 화면당 항목 수(CP-120)’로 결정되는데, 이 두 값은 콘텐츠(데이터)의 속성이지 사용자의 화면 크기나 설정과는 무관해야 합니다. 그래야 같은 목록이 누구에게나 같은 구조로 보이죠.

문제가 생기는 경우 — 화면 크기에 따라 화면당 항목 수가 달라지도록 구현하면, 전체 페이지 수가 기기마다 달라집니다. 예를 들어 ‘한 화면에 보이는 만큼만 한 페이지로’ 식으로 뷰포트 높이에 페이징을 연동하면 — 큰 화면은 페이지당 20개라 전체 20페이지, 작은 화면은 페이지당 10개라 전체 40페이지가 되죠. 또는 사용자가 글자 크기를 키워 항목이 더 큰 공간을 차지하면 페이지당 개수가 줄어 전체 수가 늘기도 합니다. 이렇게 되면:

① 위치 혼란. 사용자가 데스크톱에서 “15페이지에서 본 공고”를 모바일에서 다시 찾으려는데, 모바일에선 그 공고가 30페이지에 있다면 — 페이지 번호로 위치를 기억·공유할 수 없습니다. “15페이지 보세요”라는 안내가 기기 마다 틀려지죠.

② 공유·인용 불가. 페이지 번호가 든 URL(?page=15)을 공유했는데, 받는 사람의 기기에선 그 페이지에 다른 내용이 나오면 — 링크 공유가 무의미해집니다.

③ 신뢰 저하. “전체 20페이지”였다가 기기를 바꾸니 “전체 40페이지”가 되면, 사용자는 ‘데이터가 바뀌었나?’ 하고 시스템을 불신합니다.

그래서 CP-123은 — 화면 크기·기기·사용자 설정이 달라져도 전체 페이지 수와 각 페이지의 내용은 동일하게 유지하라고 합니다. 즉 페이징은 서버/데이터 기준의 고정 분할이어야 하고, 화면 크기는 그 고정된 페이지를 ’어떻게 보여주느냐(레이아웃)’에만 영향을 줘야 하죠. 모바일에서 달라지는 것은 표시 방식입니다 — 숫자 링크 개수(CP-122, 7개), 배치(CP-121, 수직) 등은 화면에 맞춰 바뀌지만, 전체 페이지 수라는 데이터 구조 자체는 불변입니다. 표시(어떻게 보이나)와 구조(전체가 몇 페이지인가)를 분리하는 것이 핵심이죠.

이렇게 하면 — 같은 목록은 누구에게나 같은 페이지 구조로 보이고, 페이지 번호로 위치를 기억·공유·인용할 수 있으며, 기기를 바꿔도 일관됩니다. 이는 CP-115(전체 화면 수 표시)와 짝을 이룹니다 — 전체 수를 표시하되(115), 그 수가 기기와 무관하게 일정해야(123) 표시가 의미를 갖죠.

3. 점검 / 개선

무엇을 점검하나

전체 수 불변 — 데스크톱/모바일/글자 크기 변경 시 전체 페이지 수가 같은가.

페이지 내용 동일 — 같은 페이지 번호가 기기와 무관하게 같은 항목을 보여주는가.

표시/구조 분리 — 화면 크기는 표시 방식만 바꾸고 페이지 분할은 안 바꾸는가.

개선 방향

페이징을 서버/데이터 기준 고정 분할로(화면당 항목 수 = 데이터 속성).

뷰포트 높이에 페이징을 연동하지 않기. 화면 크기는 레이아웃만 조정.

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

역할	책임
백엔드/개발	데이터 기준 고정 페이징(기기 무관) 구현
퍼블리셔	화면 크기는 표시 방식만 변경(구조 불변)

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

여러 기기에서 접근되는 목록을 가진 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 데스크톱·모바일에서 전체 페이지 수가 같은가요?

□ 같은 페이지 번호가 기기와 무관하게 같은 항목을 보여주나요?

□ 글자 크기를 키워도 전체 페이지 수가 그대로인가요?

❓ FAQ

Q1. 모바일은 작으니 페이지당 항목을 줄이면 안 되나요? 그러면 전체 페이지 수가 달라져 위치 혼란이 생깁 니다. 페이징은 데이터 기준 고정, 모바일은 표시 방식만 바꿉니다. Q2. 그럼 모바일에서 뭐가 달라지나요? 숫자 링크 개수(7개, CP-122)·배치(수직, CP-121) 등 표시가 바뀌지, 전체 페이지 수는 안 바뀝니다. Q3. 무한 스크롤은요? 무한 스크롤은 페이지네이션과 다른 패턴입니다. 페이지네이션을 쓴다면 전체 페이지 수가 일정해야 합니다.

6. 마무리

CP-123의 메시지:

기기가 달라도 전체는 같아야 — 전체 페이지 수는 데이터 기준으로 불변.

전체 페이지 수는 콘텐츠의 속성이지 화면 크기의 함수가 아닙니다. 기기·설정에 따라 전체 수가 달라지면 위치 기억·공유가 깨지고 신뢰가 떨어지죠. 페이징은 데이터 기준 고정 분할로 두고, 화면 크기는 표시 방식만 바꿉니다. 다음 편부터는 페이지네이션의 접근성 — 컨테이너 nav 인지입니다.

다음 편 예고 ▶ 「244. (CP-124) 컨테이너가 내비게이션 섹션임을 스크린 리더에서 인지할 수 있도록 구현하고 있다.」

ViewCheck는 페이지네이션 전체 화면 수가 기기·설정과 무관하게 일정한지를 진단합니다.

📚 참고 출처

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

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

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