지금 몇 페이지인지 표시하라

KRDS CP-116 — 번호 링크에 현재 화면 숫자를 강조하여 표현하고 있다.

0. 들어가며 — 똑같은 숫자들 속 ‘지금 여기’

이번 236편은 페이지네이션 번호 링크에서 현재 화면 숫자를 강조하라는 규칙입니다.

“1 2 3 4 5” 숫자 링크들이 모두 똑같이 생기면, 사용자는 ’지금 내가 몇 페이지에 있는지’를 알 수 없죠. 3페이지를 보고 있는데 1~5가 다 같으면, 방금 뭘 눌렀는지, 다음에 뭘 누를지 헷갈립니다. CP-116은 현재 페이지 번호를 다른 번호와 구별되게 강조해 ’지금 여기’를 보여주라고 규정합니다. 사이드 메뉴의 현재 화면 강조(CP-091)와 같은 원리죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 현재 번호 강조

CP-116 (컴포넌트 > 페이지네이션) “번호 링크에 현재 화면 숫자를 강조하여 표현하고 있다.”

페이지네이션의 숫자 링크 중 현재 보고 있는 페이지에 해당하는 번호를, 다른 번호와 시각적으로 구별되게 강조 해 사용자가 현재 위치를 알게 하라는 뜻입니다.

정리: 현재 페이지 번호를 강조해 ’지금 여기’를 표시하라. 이게 CP-116입니다.

2. 왜 현재 번호를 강조하나

페이지네이션은 숫자들의 나열입니다. 그런데 이 숫자들이 다 똑같이 보이면, ’클릭 가능한 다른 페이지’와 ’지금 보고 있는 현재 페이지’가 구별되지 않죠. 이는 내비게이션의 두 기능 중 ’위치 표시’가 빠진 상태입니다(사이드 메뉴 CP-091에서 본 논리와 동일). 현재 번호를 강조하면 사용자는 세 가지를 얻습니다:

① 위치 인지. “아, 지금 3페이지구나”를 한눈에 압니다. 강조 없이는 방금 누른 번호를 기억에 의존해야 하죠.

② 이동 기준점. 현재가 3페이지임을 알면, ‘다음은 4’, ’앞은 2’를 바로 가늠합니다. 현재를 기준으로 다음 행동을 정하죠. 현재가 어딘지 모르면 어디로 가야 할지도 막연합니다.

③ 헛클릭 방지. 현재 페이지 번호를 다시 눌러도 같은 페이지라 의미가 없죠. 강조로 ’여긴 현재라 누를 필요 없음’을 알려 불필요한 클릭을 줄입니다. 실제로 현재 번호는 보통 링크 기능을 빼고(클릭 불가) 강조만 하는 것이 권장됩니다 — 이건 뒤의 CP-126(현재 링크 href 삭제 + aria-current)에서 구체적으로 다룹니다.

강조 방식은 다양합니다 — 배경 반전(현재만 배경색을 채우고 글자색 반전), 굵게, 테두리, 크기 조정, 밑줄 등이죠. 바로 다음 편 CP-127이 이 방식들(밑줄·배경 반전·텍스트 크기 조정 등)을 구체적으로 규정합니다. 핵심은 현재 번호가 다른 번호와 명확히 구별되어야 한다는 점입니다 — 미세한 차이는 강조 효과가 약하죠.

주의할 접근성 측면 — 이 강조가 시각에만 머물면 안 됩니다. 색·배경만으로 현재를 표시하면 스크린 리더 사용자는 알 수 없죠. 그래서 현재 번호에는 aria-current="true"(또는 page)를 부여해 보조기술에도 ‘현재’임을 전달해야 합니다 — 이는 CP-126에서 다룹니다(시각 강조 CP-116·127 + ARIA 전달 CP-126의 조합). 또 색에만 의존하지 말고(KWCAG ’색 무관 인식’) 배경 반전·굵기 등 형태 단서를 함께 써야 색각 이상 사용자도 구별합니다.

정리하면 — CP-116은 페이지네이션에서 ’현재 위치를 시각적으로 표시’하는 출발 규칙이고, CP-126(ARIA)·CP-127 (구체 방식)이 이를 보강해 모든 사용자에게 명확한 현재 표시를 완성합니다. 페이지네이션 = 위치 표시가 핵심인 내비게이션이라, 현재 강조는 필수입니다.

3. 점검 / 개선

무엇을 점검하나

현재 강조 — 현재 페이지 번호가 다른 번호와 구별되게 강조되는가.

명확성 — 강조가 한눈에 보일 만큼 분명한가(미세하지 않음).

색 비의존 — 색만이 아니라 배경 반전·굵기 등 형태 단서도 쓰는가.

ARIA 병행 — 현재 번호에 aria-current가 함께 적용되는가(CP-126).

개선 방향

현재 번호에 배경 반전·굵기·테두리 등 분명한 강조(CP-127).

aria-current="true" 부여(CP-126)로 보조기술 전달.

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

역할	책임
디자이너	현재 번호 강조 스타일 정의
퍼블리셔/개발	현재 페이지 판별·강조·aria-current 적용

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

페이지네이션을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 현재 페이지 번호가 다른 번호와 구별되게 강조되나요?

□ 강조가 한눈에 보일 만큼 분명한가요?

□ 색만이 아니라 배경 반전·굵기 등도 쓰나요?

□ 현재 번호에 aria-current가 함께 적용되나요(CP-126)?

❓ FAQ

Q1. 색만 살짝 바꾸면 되나요? 미세하면 강조 효과가 약하고, 색만 쓰면 색각 이상 사용자에게 안 보입니다. 배경 반전·굵기 등을 함께 씁니다. Q2. 스크린 리더에도 현재가 전달되나요? 시각 강조만으론 부족합니다. aria-current(CP-126)로 보조기술에도 전달해야 합니다. Q3. 현재 번호도 클릭되게 둬야 하나요? 같은 페이지라 의미가 없어, 보통 링크를 빼고 강조만 합니다(CP-126).

6. 마무리

CP-116의 메시지:

지금 몇 페이지인지 표시하라 — 현재 화면 숫자를 강조한다.

똑같은 숫자들 속에서 현재 페이지를 강조하면, 사용자는 위치를 인지하고 다음 이동을 가늠하며 헛클릭을 줄입니다. 색만이 아니라 형태 단서를 함께 쓰고, aria-current(CP-126)로 보조기술에도 전달해야 완전하죠. 다음 편은 그 배치 — 목록 하단 중앙 정렬입니다.

다음 편 예고 ▶ 「237. (CP-117) 유형에 상관없이 목록 하단에 중앙 정렬하여 제공하고 있다.」

ViewCheck는 페이지네이션의 현재 화면 번호 강조와 aria-current 적용을 진단합니다.

📚 참고 출처

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

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

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