넓으면 점으로 골라 가게

KRDS CP-220 — [모바일] 화면 크기가 충분한 경우 도형형 항목 탐색 식별자를 버튼으로 제공하고 있다.

0. 들어가며 — 점을 눌러 그 슬라이드로

이번 340편은 화면 크기가 충분한 경우 도형형 항목 탐색 식별자를 버튼으로 제공하라는 규칙입니다.

캐러셀의 ’도형형 항목 탐색 식별자’는 — 슬라이드마다 점(dot) 같은 작은 도형을 나열한 인디케이터입니다. 이 점들이 단순한 ’표시’에 그치지 않고 버튼이면, 사용자가 특정 점을 눌러 그 슬라이드로 바로 갈 수 있죠. CP-220은 화면이 충분할 때 이 도형형 식별자를 클릭 가능한 버튼으로 제공하라고 규정합니다. 이번 편을 풀어 냅니다.

1. 규칙 원문 — 충분한 화면 시 도형형 식별자 버튼

CP-220 (컴포넌트 > 캐러셀) [모바일] “화면 크기가 충분한 경우 도형형 항목 탐색 식별자를 버튼으로 제공하고 있다.”

화면 너비가 충분한 환경에서는 캐러셀의 도형형 탐색 식별자(점 등)를 클릭/탭 가능한 버튼으로 제공해, 사용자가 원하는 슬라이드로 바로 이동하게 하라는 뜻입니다.

정리: 화면이 충분하면 도형형(점) 식별자를 버튼으로 제공하라. 이게 CP-220입니다.

2. 왜 도형형 식별자를 버튼으로 제공하나

캐러셀의 탐색 식별자(점 인디케이터)는 두 가지 형태가 있습니다 — 도형형(점·막대를 슬라이드 수만큼 나열)과 분수형(“2/5” 텍스트). CP-220은 화면이 충분할 때 도형형을 쓰되, 그것을 단순 표시가 아니라 버튼으로 제공하라고 합니다.

도형형 식별자의 두 역할. 점 인디케이터는 — ‘전체 수·현재 위치 표시’(CP-216)이면서, ’탐색 컨트롤’이 될 수 있습니다. 점을 버튼으로 만들면, 사용자가 3번째 점을 클릭해 바로 3번째 슬라이드로 점프하죠. 이전/다음으로 한 칸씩 넘기는 것보다 빠릅니다 — 원하는 슬라이드로 직접 이동하는 단일 지점 상호작용(CP-223)이죠. 이것이 도형형 식별자를 ’표시’에서 ’탐색 버튼’으로 격상시키는 가치입니다.

왜 ’화면이 충분할 때’인가. 도형형 식별자(점들)는 슬라이드 수만큼 점이 필요하므로, 가로 공간을 차지 합니다. 슬라이드가 5개(CP-210)면 점 5개가 한 줄에 들어가야 하고, 각 점은 누를 수 있게 충분히 크고(CP-217) 간격이 있어야 하죠. 화면이 충분히 넓으면(데스크톱·큰 모바일) 이 점들이 여유롭게 들어가 버튼으로 기능합니다. 그런데 화면이 좁으면(작은 모바일) — 점들과 간격이 다 안 들어가거나 너무 작아져 누르기 어렵죠. 그래서 좁은 화면에서는 도형형을 분수형으로 전환합니다(CP-221) — 이는 다음 편에서 다룹니다. 즉 CP-220(넓으면 도형형 버튼)과 CP-221(좁으면 분수형)이 반응형 짝을 이루죠.

버튼으로서의 요건. 도형형 식별자를 버튼으로 제공할 때:

버튼 역할 — 각 점을 <button>(또는 적절한 role)으로 마크업해 클릭·키보드 작동되게(디스클로저 CP-174, 아코디언 CP-201 정신). 단순 <div> 점이 아니라 누를 수 있는 버튼이어야 하죠.

충분한 크기·간격 — 점이 작아 보여도 클릭/터치 영역을 충분히(CP-217). 점들 사이 간격 확보.

현재 표시 — 현재 슬라이드 점을 강조(CP-216), aria-current나 적절한 상태로 보조기술에도 전달(CP-225).

접근 가능한 이름 — 각 점 버튼에 “슬라이드 3으로 이동” 같은 이름(aria-label)을 줘 스크린 리더가 무엇인지 알게(페이지네이션 CP-128 정신).

이렇게 하면 — 사용자가 점을 보고 전체 수·위치를 알고(CP-216), 원하는 점을 눌러 그 슬라이드로 바로 가죠 (CP-223). 도형형 식별자가 표시와 탐색을 겸하는 효율적 컨트롤이 됩니다.

이 규칙은 캐러셀의 ‘반응형 탐색 식별자’ 짝(CP-220 넓으면 도형형 버튼, CP-221 좁으면 분수형)의 하나로, 화면 크기에 맞는 탐색 수단을 제공합니다. 페이지네이션이 넓으면 숫자 11개·좁으면 7개(CP-119·122)로 대응한 것과 같은 반응형 정신이죠.

정리하면 — 화면이 충분할 때 도형형 탐색 식별자(점)를 클릭 가능한 버튼으로 제공해, 사용자가 전체를 보며 원하는 슬라이드로 직접 이동하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

도형형 버튼 — 충분한 화면에서 점 식별자가 클릭 가능한 버튼인가(단순 표시 아님).

버튼 요건 — 각 점이 <button>·충분한 크기·이름(aria-label)을 갖는가.

반응형 전환 — 좁은 화면에서 분수형으로 전환되는가(CP-221).

개선 방향

점 식별자를 <button>으로 만들어 클릭 시 해당 슬라이드 이동(CP-223).

충분한 크기·간격·접근 가능한 이름 부여. 좁으면 분수형(CP-221).

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

역할	책임
디자이너	도형형 식별자 버튼·반응형 전환 정의
퍼블리셔/개발	점 버튼·이동·접근성 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 충분한 화면에서 점 식별자가 클릭 가능한 버튼인가요?

□ 각 점이 <button>·충분한 크기·이름(aria-label)을 갖나요?

□ 좁은 화면에서 분수형으로 전환되나요(CP-221)?

❓ FAQ

Q1. 점이 표시만 하면 안 되나요? 점을 버튼으로 만들면 원하는 슬라이드로 바로 점프할 수 있어 더 효율적 입니다(CP-223). Q2. 왜 ’화면이 충분할 때’인가요? 도형형(점)은 슬라이드 수만큼 가로 공간이 필요합니다. 좁으면 다 안 들어가 거나 작아져, 분수형으로 전환합니다(CP-221). Q3. 점 버튼에 이름이 필요한가요? 네. “슬라이드 3으로 이동” 같은 aria-label을 줘 스크린 리더가 무엇인지 알게 합니다.

6. 마무리

CP-220의 메시지:

넓으면 점으로 골라 가게 — 도형형 탐색 식별자를 버튼으로 제공하라.

도형형 식별자(점)를 버튼으로 만들면 전체를 보며 원하는 슬라이드로 직접 점프하죠. 화면이 충분할 때 적합하며, 각 점을 충분한 크기·이름의 버튼으로 만듭니다. 좁은 화면은 분수형으로 전환하고요(다음 편). 다음 편은 그 좁은 화면의 분수형 전환입니다.

다음 편 예고 ▶ 「341. (CP-221) [모바일] 화면 크기가 충분하지 않은 경우 도형형 항목 탐색 식별자는 분수형 으로 전환하고 있다. (페이지 너비가 1023px 미만)」

ViewCheck는 도형형 탐색 식별자가 버튼으로 제공되는지를 진단합니다.

📚 참고 출처

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

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

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