몇 개 중 몇 번째인지

KRDS CP-216 — 전체 슬라이드 수와 사용자의 탐색 위치를 표시하고 있다.

0. 들어가며 — 끝이 어딘지 알아야 한다

이번 336편은 전체 슬라이드 수와 사용자의 탐색 위치를 표시하라는 규칙입니다.

캐러셀에서 ’전체가 몇 개고 지금 몇 번째인지’가 안 보이면 — 사용자는 ’슬라이드가 더 있나? 끝났나? 처음으로 돌아온 건가?’를 알 수 없죠. 끝없이 도는 것 같아 답답합니다. CP-216은 전체 수와 현재 위치를 표시해 사용자가 규모와 진행 상황을 파악하게 하라고 규정합니다. 페이지네이션 전체 수(CP-115) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 전체 수·탐색 위치 표시

CP-216 (컴포넌트 > 캐러셀) “전체 슬라이드 수와 사용자의 탐색 위치를 표시하고 있다.”

캐러셀에 전체 슬라이드가 몇 개인지와 사용자가 지금 몇 번째 슬라이드를 보고 있는지를 표시해, 규모와 현재 위치를 알게 하라는 뜻입니다.

정리: 전체 슬라이드 수와 현재 위치(몇 개 중 몇 번째)를 표시하라. 이게 CP-216입니다.

2. 왜 전체 수와 위치를 표시하나

캐러셀은 한 번에 슬라이드 하나만 보여주므로, 사용자는 ’전체가 몇 개 있는지’를 직접 볼 수 없습니다. 그래서 전체 수와 현재 위치를 별도로 표시해야, 사용자가 캐러셀의 규모와 자기 위치를 파악하죠. 페이지네이션 전체 수 표시(CP-115)와 같은 원리입니다.

표시가 없을 때:

규모 모름 — 슬라이드가 몇 개인지 모르면, 사용자는 ’얼마나 더 봐야 하나’를 알 수 없죠. 끝없이 도는 것 같아 탐색을 포기하거나, 다 봤는지 확신 못 합니다.

위치 상실 — 지금 몇 번째인지 모르면, ’처음으로 돌아온 건가? 아직 중간인가?’를 모릅니다. 자동 회전이면 특히 — 같은 슬라이드가 다시 나타나도 한 바퀴 돈 건지 모르죠.

반복 인지 실패 — 봤던 슬라이드인지 새 슬라이드인지 헷갈려, 같은 걸 또 보거나 못 본 걸 놓칩니다.

그래서 CP-216은 — 전체 수와 현재 위치를 함께 표시하라고 합니다. 두 가지가 결합해 ‘몇 개 중 몇 번째’ 라는 완전한 정보를 주죠. 표시 방법:

점 인디케이터(dot indicator) — 가장 흔합니다. 슬라이드 수만큼 점을 나열하고(전체 수 = 점 개수), 현재 슬라이드에 해당하는 점을 강조(채움·색·크기)해 위치를 표시. “● ○ ○ ○ ○” 면 5개 중 1번째죠. 슬라이드가 5개 이내(CP-210)면 점도 5개 이하라 깔끔합니다.

분수형(fraction) — “2 / 5” 같은 텍스트로 현재/전체를 표시. 슬라이드가 많거나 좁은 화면에서 점보다 명확 하죠(모바일 분수형 전환 CP-221과 연결).

숫자·진행 막대 — 번호나 프로그레스 바로 표시하기도.

점 인디케이터의 이중 역할. 점 인디케이터는 ‘전체 수·위치 표시’(CP-216)이면서 동시에 ‘탐색 식별자’(점을 클릭하면 그 슬라이드로 이동, CP-223의 단일 지점 탐색)이기도 하죠 — 표시와 조작을 겸합니다. 그래서 명확히 인지되고(CP-214), 일관된 위치에(CP-215), 충분히 크게(CP-217) 있어야 합니다.

접근성. 이 정보는 스크린 리더에도 전달돼야 하죠 — “슬라이드 2 / 5” 처럼 현재/전체를 보조기술이 읽게 (aria-label이나 라이브 영역). 시각 사용자가 점·분수로 위치를 보듯, 비시각 사용자도 위치를 알아야 합니다 (CP-224·225의 접근성과 연결).

이 규칙은 페이지네이션 전체 수(CP-115)·현재 강조(CP-116)의 캐러셀 버전입니다 — 캐러셀도 ‘여러 항목 중 현재’ 를 탐색하는 도구라, 전체 규모와 현재 위치 표시가 필수죠.

정리하면 — 캐러셀은 한 번에 하나만 보여주므로, 전체 슬라이드 수와 현재 위치를 점 인디케이터·분수 등으로 표시해 사용자가 규모와 진행 상황을 파악하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

전체 수 표시 — 전체 슬라이드가 몇 개인지 알 수 있는가(점 개수·분수 등).

현재 위치 표시 — 지금 몇 번째인지 강조·표시되는가.

접근성 전달 — 전체 수·위치가 스크린 리더에도 전달되는가.

개선 방향

점 인디케이터(전체 수=점 개수, 현재 강조) 또는 분수형(“2/5”) 제공.

스크린 리더에 “슬라이드 N / M” 전달(aria-label·라이브 영역).

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

역할	책임
디자이너	전체 수·위치 표시 방식(점·분수) 정의
퍼블리셔/개발	인디케이터·접근성 전달 구현

기관 유형	CP-216 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (캐러셀 사용 시)

캐러셀을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 전체 슬라이드가 몇 개인지 알 수 있나요(점 개수·분수 등)?

□ 지금 몇 번째인지 강조·표시되나요?

□ 전체 수·위치가 스크린 리더에도 전달되나요?

❓ FAQ

Q1. 점 인디케이터가 그 역할인가요? 네. 점 개수 = 전체 수, 강조된 점 = 현재 위치입니다. 표시와 탐색(점 클릭 이동)을 겸하죠. Q2. 슬라이드가 많으면 점이 너무 많지 않나요? 5개 이내(CP-210)면 점도 적어 깔끔합니다. 많거나 좁은 화면 이면 분수형(“2/5”)으로 전환합니다(CP-221). Q3. 스크린 리더에도 위치를 알려야 하나요? 네. “슬라이드 2 / 5”처럼 현재/전체를 보조기술이 읽게 합니다.

6. 마무리

CP-216의 메시지:

몇 개 중 몇 번째인지 — 전체 슬라이드 수와 현재 위치를 표시하라.

캐러셀은 한 번에 하나만 보여줘 전체 규모가 안 보입니다. 점 인디케이터·분수로 전체 수와 현재 위치를 표시하면, 사용자가 규모와 진행 상황을 파악하죠. 스크린 리더에도 전달해야 합니다. 다음 편은 컨트롤 요소를 충분히 크게 하는 규칙입니다.

다음 편 예고 ▶ 「337. (CP-217) 캐러셀 관련 컨트롤 요소를 쉽게 조작할 수 있도록 충분히 크게 표현하고 있다.」

ViewCheck는 캐러셀이 전체 슬라이드 수와 탐색 위치를 표시하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 캐러셀(Carousel) 가이드 — https://www.krds.go.kr/html/site/component/component_20.html

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

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