넓으면 11개, 좁으면 7개

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

0. 들어가며 — 500페이지를 다 나열할 순 없다

이번 239편은 숫자 링크를 넓은 화면에선 말줄임표 포함 최대 11개, 좁은 화면에선 최대 7개 표시하라는 규칙 입니다.

전체가 500페이지인 게시판에서 “1 2 3 … 500”을 다 나열할 순 없죠. 한 줄을 한참 넘기고 사용자도 다 볼 수 없습니다. 그래서 현재 페이지 주변과 양 끝만 보이고 중간은 말줄임표(…)로 접어, 개수를 제한합니다. KRDS는 그 상한을 넓은 화면 11개, 좁은 화면 7개로 정하죠. 브레드크럼의 개수 제한(CP-078)과 같은 발상입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 넓11 / 좁7, 말줄임 포함

CP-119 (컴포넌트 > 페이지네이션) “숫자 링크 목록에는 화면 너비가 충분한 경우 말줄임표를 포함하여 최대 11개, 좁은 화면에서는 최대 7개의 항목을 표시하고 있다.”

페이지네이션의 숫자 링크를, 말줄임표(…)를 포함한 항목 수 기준으로 넓은 화면 최대 11개 / 좁은 화면 최대 7개 로 제한해, 한 줄에 깔끔히 담기게 하라는 뜻입니다.

정리: 숫자 링크는 넓으면 최대 11개, 좁으면 최대 7개(말줄임 포함)로 제한하라. 이게 CP-119입니다.

2. 왜 11개·7개로 제한하나

페이지 수가 많아도 사용자가 한 번에 보고 처리할 수 있는 숫자 링크에는 한계가 있습니다. 모든 페이지 번호를 나열하면 — 한 줄을 넘겨 줄바꿈되고(레이아웃 붕괴), 사용자는 수십·수백 개 숫자 속에서 원하는 걸 찾느라 오히려 헤매죠. 그래서 가장 유용한 번호들만 보여주고 나머지는 접습니다. 어떤 번호가 유용할까요?

현재 페이지 주변 — 사용자가 지금 있는 페이지의 앞뒤(예: 현재가 25면 23·24·25·26·27)는 ’바로 근처로 이동’에 유용합니다.

양 끝(1과 마지막) — 처음(1)과 끝(500)은 자주 찾는 위치라 항상 노출하는 게 좋죠(CP-114의 첫/마지막과 별개로 숫자로도).

중간은 말줄임(…) — 현재 주변과 양 끝 사이의 먼 번호들은 …로 접습니다. “1 … 23 24 25 26 27 … 500” 식 이죠.

이렇게 ’양 끝 + 현재 주변 + 말줄임’으로 구성하면, 적은 개수로도 사용자가 필요로 하는 이동을 대부분 커버합니다. KRDS는 이 구성의 항목 수 상한을 둡니다 — 말줄임표(…)까지 항목 하나로 세어, 넓은 화면 11개, 좁은 화면 7개입니다.

왜 화면 너비에 따라 다른가. 넓은 데스크톱은 가로 공간이 넉넉해 11개까지 한 줄에 담겨, 현재 주변을 더 넓게 (±몇 페이지) 보여줄 수 있죠. 좁은 모바일·태블릿은 7개로 줄여, 양 끝과 현재 바로 근처만 압축해 보여줍니다. 이는 브레드크럼이 데스크톱 4개·모바일 2개로 단계 대응한 것(CP-078·084)과 같은 반응형 원리입니다 — 공간에 맞춰 정보 밀도를 조절하되, 핵심(양 끝·현재)은 항상 살립니다.

11개·7개의 구성 예시.

넓은 화면(11): 1 … 22 23 24 [25] 26 27 28 … 500 (양 끝 2 + … 2 + 현재 주변 7 정도)

좁은 화면(7): 1 … 24 [25] 26 … 500 (양 끝 2 + … 2 + 현재 주변 3 정도)

정확한 배분은 현재 위치(초반/중반/끝)에 따라 달라집니다 — 현재가 1~3페이지면 앞쪽 …가 없고 뒤쪽만 접히는 식이죠. 핵심은 상한(11/7) 안에서 양 끝과 현재 주변을 보이게 하는 것입니다.

이 규칙은 모바일 전용 규칙 CP-122(‘좁은 화면 숫자 링크 말줄임 포함 최대 7개’)와 직접 연결됩니다 — CP-119가 넓음/좁음을 함께 규정하고, CP-122가 모바일(좁음) 7개를 재확인하죠. 함께 페이지네이션의 반응형 개수 정책을 이룹니다.

3. 점검 / 개선

무엇을 점검하나

넓은 화면 ≤11 — 데스크톱에서 숫자 링크 항목(말줄임 포함)이 11개 이내인가.

좁은 화면 ≤7 — 모바일·좁은 화면에서 7개 이내인가.

구성 — 양 끝(1·마지막) + 현재 주변 + 중간 말줄임(…)으로 구성되는가.

개선 방향

현재 페이지 기준 양 끝 + 주변 window + … 로 동적 생성, 상한 11/7 적용.

반응형 분기로 너비에 따라 window 크기 조절.

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

역할	책임
디자이너	넓음/좁음 개수·말줄임 구성 정의
퍼블리셔/개발	동적 숫자 링크 생성·반응형 상한 구현

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

페이지 수가 많은 게시판·검색결과를 가진 사이트에서 특히 중요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 넓은 화면에서 숫자 링크가 최대 11개(말줄임 포함)인가요?

□ 좁은 화면에서 최대 7개인가요?

□ 양 끝 + 현재 주변 + 중간 말줄임(…)으로 구성되나요?

❓ FAQ

Q1. 말줄임표도 개수에 세나요? 네. … 도 항목 하나로 세어 11/7 상한에 포함합니다. Q2. 현재가 1페이지면 앞쪽 …는요? 앞쪽엔 접을 게 없으니 …가 없고, 1 2 3 … 뒤쪽만 접힙니다. 현재 위치에 따라 구성이 달라집니다. Q3. 모바일 7개와 CP-122는 같은 건가요? CP-119가 넓음/좁음을 함께 규정하고, CP-122가 모바일 7개를 재확인 합니다. 같은 정책의 모바일 항목입니다.

6. 마무리

CP-119의 메시지:

넓으면 11개, 좁으면 7개 — 양 끝과 현재 주변만 보이고 중간은 말줄임으로.

페이지가 많아도 숫자 링크를 다 나열할 순 없습니다. 양 끝(1·마지막)과 현재 주변만 보이고 중간을 …로 접어, 적은 개수로 필요한 이동을 커버하죠. 넓은 화면 11개, 좁은 화면 7개로 반응형 제한합니다. 다음 편은 화면당 항목 수(목록 분량) 설정입니다.

다음 편 예고 ▶ 「240. (CP-120) 화면당 항목 수를 화면 로딩시간, 성능, 사용자의 스크롤 기본 설정 등을 고려 하여 제공하고 있다.」

ViewCheck는 페이지네이션 숫자 링크가 넓음 11·좁음 7 상한을 지키는지를 진단합니다.

📚 참고 출처

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

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

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