누를 만큼 크게, 구분되게

KRDS CP-131 — 구성 요소(이전 버튼, 숫자링크 목록, 다음 버튼 등)를 적절한 크기로 표현하고 영역 간 구분을 제공하고 있다.

0. 들어가며 — 작고 다닥다닥 붙으면 못 누른다

이번 251편은 페이지네이션 구성 요소를 적절한 크기로 표현하고 영역 간 구분을 제공하라는 규칙입니다.

페이지네이션은 이전 버튼·숫자 링크 목록·다음 버튼 등 여러 요소로 이뤄집니다. 이들이 너무 작거나 서로 바짝 붙어 있으면 — 손가락이나 마우스로 정확히 누르기 어렵고, 어디까지가 ’이전 버튼’이고 어디부터 ’숫자’인지 구분도 안 되죠. CP-131은 각 요소를 충분한 크기로, 영역 간 구분이 되게 만들라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 적절한 크기 + 영역 구분

CP-131 (컴포넌트 > 페이지네이션) “구성 요소(이전 버튼, 숫자링크 목록, 다음 버튼 등)를 적절한 크기로 표현하고 영역 간 구분을 제공하고 있다.”

페이지네이션의 각 구성 요소(이전·다음 버튼, 숫자 링크 등)를 정확히 누를 수 있는 충분한 크기로 만들고, 요소·영역들이 서로 구분되게 표현하라는 뜻입니다.

정리: 각 요소를 누를 만큼 크게, 영역끼리 구분되게 만들어라. 이게 CP-131입니다.

2. 왜 크기와 영역 구분이 필요한가

이 규칙은 두 가지를 다룹니다 — 타깃 크기(누를 수 있는가) 와 영역 구분(무엇이 무엇인가).

① 적절한 크기 — 타깃 크기. 클릭/터치 대상이 작으면 정확히 누르기 어렵습니다(피츠의 법칙). 특히 모바일 터치는 손가락 접촉면이 넓어(약 9~10mm) 작은 타깃을 자주 놓치죠. 페이지네이션의 숫자 링크나 화살표 버튼이 작으면 — 옆 번호를 잘못 누르거나, 여러 번 시도해야 합니다. 그래서 각 요소(특히 클릭 영역)를 충분히 크게 만들어야 하죠. 웹 접근성의 타깃 크기 기준(WCAG SC 2.5.5/2.5.8, 보통 최소 24×24~44×44px 권장)이 이 맥락입니다. 숫자 링크의 클릭 영역에 충분한 패딩을 주어, 작은 숫자라도 누르기 쉬운 영역을 확보합니다(브레드크럼 링크 간격 CP-082, 모바일 수직 배치 CP-121과 같은 정신).

② 영역 간 구분. 페이지네이션은 기능이 다른 요소들의 묶음입니다 — ‘이전 버튼’(뒤로), ‘숫자 링크 목록’(특정 페이지로), ‘다음 버튼’(앞으로). 이들이 시각적으로 구분 없이 뭉쳐 있으면, 사용자는 어디가 이전 버튼이고 어디 부터 숫자인지 헷갈리죠. 특히 이전/다음 버튼과 숫자 링크가 같은 모양·간격으로 줄지어 있으면, ‘◀’와 ’1’이 한 덩어리처럼 보입니다. 그래서 영역을 구분합니다 — 이전/다음 버튼과 숫자 목록 사이에 여백을 더 주거나, 버튼은 화살표·다른 스타일로, 숫자는 숫자대로 묶어 시각적 그룹을 만들죠. 그러면 사용자는 ’왼쪽 끝은 이전, 가운데는 숫자들, 오른쪽 끝은 다음’ 이라는 구조를 한눈에 읽습니다.

이 둘이 합쳐져 — 사용자는 원하는 요소를 빠르고 정확하게 찾아 누릅니다. 크기가 충분해 오클릭이 없고, 영역이 구분돼 무엇을 누를지 명확하죠. 반대로 작고 뭉쳐 있으면 페이지 이동이라는 빈번한 조작이 매번 스트레스가 됩니다.

이 규칙은 페이지네이션의 ‘물리적 사용성’을 담당합니다 — 앞선 규칙들이 기능 구성(CP-114)·개수(CP-119)·접근성 (CP-124~130)을 다뤘다면, CP-131은 ’실제로 손으로 쓰기 편한가’를 봅니다. 그리고 다음 편 CP-132(구성 요소를 일관된 순서로)와 짝을 이루죠 — CP-131이 ’크기·구분’, CP-132가 ’순서’로, 함께 페이지네이션의 물리적 배치 완성도를 높입니다. 모바일에서는 이 크기·구분이 특히 중요해, 수직 배치(CP-121)와 결합해 각 요소에 충분한 공간을 줍니다.

3. 점검 / 개선

무엇을 점검하나

타깃 크기 — 각 요소(버튼·숫자 링크)의 클릭 영역이 충분히 큰가.

영역 구분 — 이전/다음 버튼과 숫자 목록이 시각적으로 구분되는가.

오클릭 방지 — 모바일에서 인접 요소를 잘못 누르지 않을 간격인가.

개선 방향

각 링크·버튼에 충분한 패딩으로 클릭/터치 영역 확보(최소 권장 크기).

이전/다음 버튼과 숫자 목록 사이 여백·스타일 차이로 영역 그룹화.

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

역할	책임
디자이너	요소 크기·영역 구분 스타일 정의
퍼블리셔/개발	타깃 크기·간격·그룹화 구현

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

특히 모바일 지원 사이트에서 중요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 요소(버튼·숫자 링크)의 클릭 영역이 충분히 큰가요?

□ 이전/다음 버튼과 숫자 목록이 시각적으로 구분되나요?

□ 모바일에서 인접 요소를 잘못 누르지 않을 간격인가요?

❓ FAQ

Q1. 숫자가 작은데 어떻게 키우나요? 숫자 글자는 작아도 클릭 영역(패딩 포함)을 충분히 키우면 누르기 쉬워 집니다. Q2. 영역 구분은 어떻게 하나요? 이전/다음 버튼과 숫자 목록 사이에 여백을 더 주거나 스타일을 달리해 그룹을 나눕니다. Q3. 데스크톱은 마우스라 괜찮지 않나요? 마우스도 작은 타깃은 놓칩니다. 게다가 같은 페이지가 모바일에서도 쓰이니 크기는 공통으로 확보합니다.

6. 마무리

CP-131의 메시지:

누를 만큼 크게, 구분되게 — 구성 요소를 적절한 크기와 영역 구분으로.

페이지네이션 요소가 작고 뭉쳐 있으면 오클릭이 나고 무엇을 누를지 헷갈립니다. 각 요소의 클릭 영역을 충분히 키우고, 이전/다음과 숫자 목록을 영역으로 구분하면 빠르고 정확하게 쓰죠. 페이지 이동은 빈번한 조작이라 물리적 사용성이 중요합니다. 다음 편은 구성 요소의 일관된 순서입니다.

다음 편 예고 ▶ 「252. (CP-132) 구성 요소(이전 버튼, 숫자링크 목록, 다음 버튼 등)를 일관된 순서로 제공하고 있다.」

ViewCheck는 페이지네이션 구성 요소의 크기와 영역 구분이 적절한지를 진단합니다.

📚 참고 출처

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

WCAG 2.2 SC 2.5.8 Target Size (Minimum) — https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

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

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