한 페이지에 몇 개를 담을까

KRDS CP-120 — 화면당 항목 수를 화면 로딩시간, 성능, 사용자의 스크롤 기본 설정 등을 고려하여 제공하고 있다.

0. 들어가며 — 페이지 나누기의 분량 결정

이번 240편은 한 화면(페이지)당 항목 수를 로딩 시간·성능·사용자 스크롤 선호를 고려해 정하라는 규칙입니다.

페이지네이션은 긴 목록을 여러 페이지로 나눕니다. 그럼 ‘한 페이지에 몇 개씩’ 담을까요? 10개? 50개? 100개? 너무 적으면 페이지를 자주 넘겨야 하고, 너무 많으면 한 페이지 로딩이 느리고 스크롤이 길어지죠. CP-120은 이 ’화면당 항목 수’를 성능과 사용성을 함께 따져 적절히 정하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 화면당 항목 수 고려 설정

CP-120 (컴포넌트 > 페이지네이션) “화면당 항목 수를 화면 로딩시간, 성능, 사용자의 스크롤 기본 설정 등을 고려하여 제공하고 있다.”

한 페이지에 표시할 항목 개수를, 페이지 로딩 속도·렌더링 성능·사용자의 스크롤 선호 등을 종합적으로 고려해 적정 수준으로 정하라는 뜻입니다.

정리: 화면당 항목 수를 성능·사용성 균형에 맞게 정하라. 이게 CP-120입니다.

2. 왜 화면당 항목 수를 따지나

’한 페이지에 몇 개를 담느냐’는 단순해 보이지만, 성능과 사용성의 트레이드오프를 결정하는 중요한 선택입니다. 양극단을 보면 분명하죠.

너무 적게 담으면(예: 페이지당 5개). 한 페이지 로딩은 가볍지만 — 목록을 보려면 페이지를 끝없이 넘겨야 합니다. 전체 100개 항목이면 20페이지를 클릭해야 하죠. 페이지 이동마다 새 요청·로딩이 일어나 누적 대기 시간이 길어지고, 사용자는 ‘왜 이렇게 자주 넘기지?’ 하고 답답해합니다.

너무 많이 담으면(예: 페이지당 500개). 페이지 이동은 적지만 — 한 페이지에 500개 항목(특히 이미지·썸네일 포함)을 한꺼번에 로딩·렌더링하면 로딩 시간이 길어지고, DOM 요소가 많아 렌더링 성능이 떨어지며, 저사양 기기·느린 네트워크에서 화면이 버벅이죠. 또 스크롤이 한없이 길어져 원하는 항목을 찾기 어렵습니다.

그래서 CP-120은 세 가지 요소를 함께 고려해 균형점을 찾으라고 합니다:

로딩 시간 — 한 페이지가 빠르게 뜨는 분량인가. 항목이 무거우면(이미지 많음) 적게, 가벼우면(텍스트) 더 담을 수 있죠.

성능 — 렌더링·메모리 부담이 과하지 않은가. DOM 요소 수, 기기 사양, 네트워크를 감안합니다.

사용자의 스크롤 기본 설정/선호 — 사용자가 ‘페이지를 자주 넘기기’를 선호하는지 ’한 페이지에서 길게 스크롤’ 하기를 선호하는지. 콘텐츠 성격(빠르게 훑는 목록 vs 자세히 보는 항목)에 따라 다릅니다.

이 균형 덕에 보통 공공 게시판은 페이지당 10~20개 수준을 많이 쓰지만, 정답은 콘텐츠·항목 무게·사용 맥락에 따라 다릅니다. 핵심은 ’아무 생각 없이 정하지 말고, 성능과 사용성을 측정·고려해 정하라’는 것이죠. 가능하면 사용자가 화면당 항목 수를 직접 선택(10/20/50개 보기)하게 하는 옵션을 제공하면, 각자 선호와 환경에 맞출 수 있어 더 좋습니다.

이 규칙은 페이지네이션의 다른 규칙들과 결이 조금 다릅니다 — 대부분은 ’UI를 어떻게 보이고 조작하느냐’인데, CP-120은 ’데이터를 얼마나 나누느냐(성능·정보 설계)’에 가깝죠. 그만큼 백엔드·성능 관점이 함께 들어갑니다. 그리고 이 항목 수가 정해지면 전체 페이지 수(CP-115)도 결정되고, 모바일에서 기기·설정이 바뀌어도 전체 페이지 수가 일정해야 한다는 CP-123과도 연결됩니다.

3. 점검 / 개선

무엇을 점검하나

로딩 적정성 — 한 페이지가 과한 로딩 없이 빠르게 뜨는 항목 수인가.

성능 부담 — DOM·렌더링·메모리가 저사양/느린 환경에서도 무리 없는가.

사용성 균형 — 너무 자주 넘기지도, 너무 길게 스크롤하지도 않는 분량인가.

(선택) 사용자 선택 — 화면당 항목 수를 사용자가 고를 수 있는가.

개선 방향

항목 무게(이미지 등)·기기·네트워크를 고려해 적정 분량 설정(흔히 10~20).

‘10/20/50개씩 보기’ 옵션 제공으로 사용자 맞춤.

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

역할	책임
기획/IA	콘텐츠·사용 맥락 기반 항목 수 정책
백엔드/개발	페이징 분량·성능 최적화·선택 옵션 구현

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

대용량 목록·이미지 목록을 가진 사이트에서 특히 중요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 한 페이지가 과한 로딩 없이 빠르게 뜨는 항목 수인가요?

□ 저사양·느린 환경에서도 렌더링 부담이 없나요?

□ 너무 자주 넘기지도, 너무 길게 스크롤하지도 않는 분량인가요?

□ (선택) 사용자가 화면당 항목 수를 고를 수 있나요?

❓ FAQ

Q1. 페이지당 몇 개가 정답인가요? 콘텐츠·항목 무게·맥락에 따라 다릅니다. 흔히 10~20개를 쓰지만, 성능·사용 성을 측정해 정하는 게 핵심입니다. Q2. 많이 담으면 페이지 이동이 줄어 좋지 않나요? 로딩·렌더링 부담이 커지고 스크롤이 길어집니다. 균형이 중요합니다. Q3. 사용자가 직접 고르게 하면요? ‘10/20/50개 보기’ 옵션은 각자 환경·선호에 맞춰 좋은 방법입니다.

6. 마무리

CP-120의 메시지:

한 페이지에 몇 개를 담을까 — 로딩·성능·스크롤 선호를 함께 따져 정한다.

화면당 항목 수는 성능과 사용성의 트레이드오프를 결정합니다. 너무 적으면 자주 넘기고, 너무 많으면 느리고 길죠. 로딩·성능·사용자 선호를 고려해 적정 분량을 정하고, 가능하면 사용자 선택 옵션을 주는 게 좋습니다. 다음 편은 모바일에서의 수직 배치입니다.

다음 편 예고 ▶ 「241. (CP-121) [모바일] 화면 너비가 충분하지 않은 경우 이전/다음 버튼, 숫자 링크 목록을 수직으로 배치하여 제공하고 있다.」

ViewCheck는 페이지네이션 화면당 항목 수가 성능·사용성을 고려해 설정됐는지를 진단합니다.

📚 참고 출처

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

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

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