좁으면 위아래로 나눠라

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

0. 들어가며 — 한 줄에 다 안 들어갈 때

이번 241편은 모바일에서 너비가 부족하면 이전/다음 버튼과 숫자 링크 목록을 수직으로 배치하라는 규칙입니다.

데스크톱에선 “◀ 1 2 3 … 10 ▶”이 한 가로줄에 깔끔히 들어갑니다. 하지만 모바일은 가로가 좁아, 이전/다음 버튼과 숫자 링크를 한 줄에 다 넣으면 비좁게 뭉치거나 줄바꿈으로 흐트러지죠. CP-121은 좁은 화면에선 이들을 수직 (위아래) 으로 나눠 배치해 각 요소가 충분한 터치 영역을 갖게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 모바일 수직 배치

CP-121 (컴포넌트 > 페이지네이션) [모바일] “화면 너비가 충분하지 않은 경우 이전/다음 버튼, 숫자 링크 목록을 수직으로 배치하여 제공하고 있다.”

모바일 등 좁은 화면에서는 이전/다음 버튼과 숫자 링크 목록을 가로 한 줄로 욱여넣지 말고, 위아래로 층을 나눠 (수직) 배치해 각 요소를 편히 쓸 수 있게 하라는 뜻입니다.

정리: 좁은 화면에선 이전/다음과 숫자 링크를 수직으로 나눠 배치하라. 이게 CP-121입니다.

2. 왜 수직 배치인가

페이지네이션은 여러 구성 요소로 이뤄집니다 — 이전(◀)·다음(▶) 버튼, 숫자 링크 목록(1~7개), 때로 첫/마지막 버튼까지요. 데스크톱에선 이 모두가 가로로 충분히 펼쳐집니다. 하지만 모바일의 좁은 너비(360~430px)에 이를 한 줄로 넣으면 여러 문제가 생기죠:

① 비좁은 터치 영역. 좁은 가로에 여러 요소를 욱여넣으면 각 버튼·링크가 작아지고 서로 바짝 붙습니다. 손가락 터치는 정밀하지 않아(약 9~10mm), 작고 붙은 타깃은 옆 것을 잘못 누르기 쉽죠(CP-131의 적절한 크기·구분과도 연결). 페이지 이동 같은 빈번한 조작에서 오클릭은 큰 불편입니다.

② 줄바꿈 붕괴. 한 줄에 안 들어가면 자동 줄바꿈이 일어나는데, 통제 없이 줄바꿈되면 “◀ 1 2 3”이 한 줄, “4 5 ▶”가 다음 줄처럼 어색하게 쪼개져 구조가 흐트러집니다.

그래서 CP-121은 좁은 화면에서 페이지네이션을 수직으로 의도적으로 재배치하라고 합니다. 흔한 형태는 — 이전/다음 버튼을 한 층(예: 위 또는 아래)에 두고, 숫자 링크 목록을 다른 층에 두어 위아래로 나누는 것이죠. 예를 들어:

[ ◀ 이전 | 다음 ▶ ] ← 한 층(이전/다음, 양쪽으로 넓게) [ 1 … 24 25 26 … 50 ] ← 다른 층(숫자 링크, 가로 중앙)

이렇게 층을 나누면 각 층 안에서 요소들이 충분한 너비·터치 영역을 확보합니다 — 이전/다음 버튼은 큼직하게, 숫자 링크는 7개 이내(CP-119·122)로 한 줄에 여유 있게요. 사용자는 좁은 화면에서도 정확히 누르고 깔끔한 구조를 봅니다.

이는 사이드 메뉴(CP-096 모바일 미표시)·브레드크럼(CP-084 모바일 축약)·콘텐츠 내 탐색(CP-110 모바일 위치 이동)에서 본 ’좁은 화면 반응형 대응’의 페이지네이션 버전입니다. 다만 페이지네이션은 모바일에서도 반드시 필요한 기능이라(목록 이동) 숨기지 않고, 대신 배치를 수직으로 바꿔 적응시키죠.

함께 묶이는 모바일 규칙들 — CP-121(수직 배치), CP-122(좁은 화면 숫자 7개), CP-123(기기·설정 무관 전체 페이지 수 일정)이 페이지네이션의 모바일 대응 3종 세트를 이룹니다. CP-121은 그중 ’배치 형태’를 담당하죠.

3. 점검 / 개선

무엇을 점검하나

수직 배치 — 좁은 화면에서 이전/다음과 숫자 링크가 위아래로 나뉘는가.

터치 영역 — 각 요소가 충분한 크기·간격을 갖는가(오클릭 방지).

줄바꿈 통제 — 의도치 않은 줄바꿈으로 흐트러지지 않는가.

개선 방향

반응형 분기: 좁은 화면에서 이전/다음 층 + 숫자 링크 층으로 수직 재배치.

각 요소 터치 영역 확보(CP-131), 숫자 링크 7개 이내(CP-122).

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

역할	책임
디자이너	모바일 수직 배치 레이아웃 설계
퍼블리셔/개발	반응형 수직 배치·터치 영역 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 좁은 화면에서 이전/다음과 숫자 링크가 위아래로 나뉘나요?

□ 각 요소가 충분한 크기·간격(터치 영역)을 갖나요?

□ 의도치 않은 줄바꿈으로 흐트러지지 않나요?

❓ FAQ

Q1. 모바일에서도 한 줄로 두면 안 되나요? 좁은 가로에 다 넣으면 비좁고 오클릭이 납니다. 수직으로 나눠 각 요소에 여유를 줍니다. Q2. 페이지네이션을 모바일에서 숨기면 안 되나요? 페이지 이동은 모바일에서도 필수 기능이라 숨기지 않고 배치만 바꿉니다. Q3. 숫자 링크는 몇 개로 줄이나요? 좁은 화면은 말줄임 포함 최대 7개입니다(CP-119·122).

6. 마무리

CP-121의 메시지:

좁으면 위아래로 나눠라 — 모바일 페이지네이션은 수직 배치한다.

좁은 가로에 이전/다음과 숫자 링크를 한 줄로 넣으면 비좁고 오클릭이 납니다. 위아래 층으로 나눠 각 요소에 충분한 너비·터치 영역을 주면 깔끔하고 정확하죠. 모바일에서도 필수인 페이지네이션을 숨기지 않고 배치로 적응시킵니다. 다음 편은 좁은 화면의 숫자 링크 7개 제한입니다.

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

ViewCheck는 모바일에서 페이지네이션이 수직 배치로 적응되는지를 진단합니다.

📚 참고 출처

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

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

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