모바일 숫자는 일곱까지

KRDS CP-122 — [모바일] 화면 너비가 충분하지 않은 경우 숫자 링크 목록은 말줄임표를 포함하여 최대 7개 링크로 표시하고 있다.

0. 들어가며 — 좁은 화면 숫자 링크 상한

이번 242편은 모바일에서 숫자 링크를 말줄임표 포함 최대 7개로 표시하라는 규칙입니다.

CP-119에서 ’넓으면 11개, 좁으면 7개’를 이미 봤습니다. CP-122는 그중 모바일(좁은 화면) 7개를 별도 규칙으로 재확인·강조하죠. 그만큼 모바일에서 숫자 링크 개수 통제가 중요하다는 뜻입니다. 좁은 화면에 숫자를 많이 넣으면 비좁아 오클릭이 나고 줄바꿈이 일어나니, 양 끝과 현재 주변만 추려 7개로 제한합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 모바일 최대 7개

CP-122 (컴포넌트 > 페이지네이션) [모바일] “화면 너비가 충분하지 않은 경우 숫자 링크 목록은 말줄임표를 포함하여 최대 7개 링크로 표시하고 있다.”

모바일 등 좁은 화면에서 페이지네이션의 숫자 링크를, 말줄임표(…)를 포함한 항목 수 기준 최대 7개로 제한해 한 줄에 여유 있게 담기게 하라는 뜻입니다.

정리: 모바일 숫자 링크는 말줄임 포함 최대 7개로 제한하라. 이게 CP-122입니다.

2. 왜 모바일은 7개인가

CP-119에서 정리했듯, 숫자 링크 개수는 화면 너비에 맞춰 통제됩니다 — 넓으면 11개, 좁으면 7개죠. CP-122는 그중 모바일(좁은 화면) 7개를 명시적으로 못 박는 규칙입니다. 같은 정책을 모바일 관점에서 다시 강조하는 이유는, 좁은 화면에서 개수 통제가 특히 까다롭고 중요하기 때문입니다.

좁은 화면의 제약. 모바일 가로 너비(360~430px)는 데스크톱의 1/3 수준입니다. 여기에 숫자 링크를 많이 넣으면:

오클릭 — 각 링크가 작아지고 붙어 손가락이 옆 번호를 잘못 누릅니다(CP-131의 적절한 크기와 충돌).

줄바꿈 — 한 줄을 넘겨 페이지네이션이 두 줄로 흐트러지죠.

수직 배치와의 조화 — CP-121에서 모바일은 이전/다음과 숫자 링크를 수직으로 나눕니다. 그 숫자 링크 층도 한 줄에 깔끔히 담기려면 개수가 적어야 하죠. 7개가 그 적정선입니다.

7개의 구성. 말줄임표(…)를 포함해 7개이므로, 보통 — 양 끝(1·마지막) 2개 + 말줄임(…) 1~2개 + 현재 주변 3~4개로 구성됩니다. 예: 1 … 24 [25] 26 … 50(양끝 2 + … 2 + 현재 주변 3 = 7). 현재 위치에 따라 배분이 달라지죠 — 현재가 초반(1~4)이면 1 2 3 4 5 … 50 처럼 앞쪽 …가 없고, 끝 근처면 반대입니다. 핵심은 7개 상한 안에서 양 끝과 현재 주변을 보이게 하는 것입니다.

이렇게 좁은 화면에서 7개로 줄이면 — 각 숫자 링크가 충분한 크기·간격을 확보해 정확히 눌리고(CP-131), 한 줄에 깔끔히 담겨 구조가 또렷하며, 수직 배치(CP-121)와도 잘 어울립니다. 적은 개수로도 양 끝 점프와 근처 이동을 커버하므로 기능 손실은 거의 없죠 — 더 먼 페이지는 이전/다음 버튼이나 첫/마지막(CP-114)으로 가면 됩니다.

CP-119와의 관계. CP-119는 넓음 11·좁음 7을 한 규칙에 담았고, CP-122는 좁음 7을 모바일 전용으로 독립 시킨 것입니다. 둘은 모순이 아니라 같은 정책의 두 표현 — CP-119가 전체 반응형 개수 정책, CP-122가 그 모바일 구체 항목이죠. 체크리스트에서 모바일 케이스를 명시적으로 검증하기 위해 분리된 것으로 볼 수 있습니다. 실무 에서는 둘을 함께 충족하면 됩니다 — 데스크톱 ≤11, 모바일 ≤7.

함께 묶이는 모바일 3종 — CP-121(수직 배치), CP-122(숫자 7개), CP-123(전체 페이지 수 일정). CP-122는 그중 ’숫자 개수’를 담당합니다.

3. 점검 / 개선

무엇을 점검하나

모바일 ≤7 — 좁은 화면에서 숫자 링크가 말줄임 포함 7개 이내인가.

구성 — 양 끝 + 현재 주변 + 말줄임(…)으로 구성되는가.

터치·한 줄 — 7개가 한 줄에 여유 있게 담겨 정확히 눌리는가.

개선 방향

반응형 분기로 좁은 화면 window를 줄여 7개 상한 적용.

수직 배치(CP-121)의 숫자 링크 층에 7개 이내로 렌더링.

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

역할	책임
디자이너	모바일 숫자 링크 7개 구성 정의
퍼블리셔/개발	반응형 개수 상한·동적 생성 구현

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

모바일 트래픽이 있고 페이지네이션을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 좁은 화면에서 숫자 링크가 말줄임 포함 7개 이내인가요?

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

□ 7개가 한 줄에 여유 있게 담겨 정확히 눌리나요?

❓ FAQ

Q1. CP-119와 중복 아닌가요? CP-119는 넓음 11·좁음 7을 함께, CP-122는 모바일 7을 별도로 명시합니다. 같은 정책의 모바일 항목이라 함께 충족하면 됩니다. Q2. 7개로 줄이면 먼 페이지로 못 가지 않나요? 더 먼 페이지는 이전/다음·첫/마지막(CP-114)으로 갑니다. 7개는 양 끝·근처를 커버합니다. Q3. 현재 위치마다 구성이 다른가요? 네. 초반이면 앞쪽 …가 없고, 끝 근처면 뒤쪽 …가 없습니다. 7개 상한 안에서 동적으로 구성됩니다.

6. 마무리

CP-122의 메시지:

모바일 숫자는 일곱까지 — 좁은 화면 숫자 링크는 말줄임 포함 최대 7개.

좁은 화면에 숫자를 많이 넣으면 비좁아 오클릭이 나고 줄바꿈이 일어납니다. 양 끝과 현재 주변만 추려 7개로 제한하면 정확히 눌리고 깔끔하죠. CP-119의 반응형 개수 정책을 모바일에서 재확인하는 규칙입니다. 다음 편은 기기·설정이 바뀌어도 전체 페이지 수를 일정하게 유지하는 규칙입니다.

다음 편 예고 ▶ 「243. (CP-123) [모바일] 사용자 설정 및 디바이스 환경에 상관없이 전체 화면 수를 일정하게 유지한다.」

ViewCheck는 모바일 페이지네이션 숫자 링크가 7개 상한을 지키는지를 진단합니다.

📚 참고 출처

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

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

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