한 번 탭으로 넘어가게

KRDS CP-223 — 단일 지점과의 상호작용을 통해 슬라이드를 탐색할 수 있는 수단을 제공하고 있다.

0. 들어가며 — 복잡한 제스처 없이도

이번 343편은 단일 지점과의 상호작용을 통해 슬라이드를 탐색할 수 있는 수단을 제공하라는 규칙입니다.

캐러셀을 스와이프(드래그)로만 넘길 수 있으면 — 운동 장애가 있거나 정밀한 드래그가 어려운 사용자는 못 쓰죠. 스와이프는 ’여러 지점을 거치는 경로 기반 제스처’입니다. CP-223은 이와 별개로, 한 지점을 탭/클릭하는 단순한 상호작용(버튼 클릭, 점 클릭)으로도 슬라이드를 넘길 수 있게 하라고 규정합니다. CP-218(스와이프)의 접근성 보완이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 단일 지점 상호작용 탐색 수단

CP-223 (컴포넌트 > 캐러셀) “단일 지점과의 상호작용을 통해 슬라이드를 탐색할 수 있는 수단을 제공하고 있다.”

스와이프 같은 경로 기반 제스처 외에, 한 지점을 단순히 탭/클릭하는 상호작용(이전/다음 버튼, 점 인디케이터 클릭)으로도 슬라이드를 탐색할 수 있게 제공하라는 뜻입니다.

정리: 단순 탭/클릭(단일 지점)으로도 슬라이드를 넘길 수 있게 하라. 이게 CP-223입니다.

2. 왜 단일 지점 상호작용이 필요한가

이 규칙은 웹 접근성의 ‘포인터 제스처’ 원칙(WCAG SC 2.5.1)에서 나옵니다. 이 기준은 — ’경로 기반(path-based) 이나 다중 지점(multipoint) 제스처로만 작동하는 기능은, 단일 지점 활성화(single pointer) 대안도 제공해야 한다’고 규정하죠. 캐러셀에 정확히 적용됩니다.

스와이프(경로 기반 제스처)의 한계. 스와이프(CP-218)는 — ‘한 지점에서 다른 지점으로 손가락을 움직이는’ 경로 기반 동작입니다. 직관적이고 편하지만, 모두가 할 수 있는 건 아니죠:

운동 장애 — 손 떨림·근력 약화로 정밀한 드래그(일정 거리·방향·속도)가 어려운 사용자는 스와이프를 못 하거나 자주 실패합니다.

보조기기 사용자 — 스위치, 헤드포인터, 음성 제어 등 보조기기는 ’한 지점 클릭’은 되지만 ’드래그(경로)’는 어렵거나 불가능하죠.

키보드 사용자 — 스와이프는 키보드로 안 됩니다(키보드는 CP-224).

이들에게 스와이프가 유일한 전환 수단이면 — 캐러셀을 아예 못 쓰죠. 그래서 CP-223은 — 단일 지점 활성화 (한 지점을 탭/클릭하는 단순 동작)로도 슬라이드를 탐색할 수단을 제공하라고 합니다:

이전/다음 버튼 — 한 번 탭/클릭으로 한 칸씩 전환. 경로 없이 단일 지점.

점 인디케이터 클릭 — 점을 한 번 탭/클릭해 그 슬라이드로 직접 이동(CP-220의 도형형 버튼). 단일 지점.

(분수형이면) 이전/다음 버튼으로 — 좁은 화면 분수형(CP-221)에서는 버튼으로 넘김.

이 단순 클릭 수단이 있으면 — 스와이프를 못 하는 사용자도 버튼·점을 탭해 슬라이드를 넘기죠. 스와이프는 ‘추가 편의’, 단일 지점 클릭은 ’필수 기본 수단’입니다.

스와이프와 단일 지점의 관계. CP-218(스와이프)과 CP-223(단일 지점)은 충돌이 아니라 보완입니다 — 스와이프 를 제공하되(편의), 단일 지점 클릭도 반드시 병행해(접근성), 다양한 사용자가 각자 가능한 방식으로 조작하게요. CP-218에서도 강조했듯, 스와이프가 유일 수단이어선 안 되죠. 그리고 키보드(CP-224)까지 더하면 — 스와이프(터치 편의) + 클릭(단일 지점) + 키보드(키보드 사용자)로 모든 입력 환경을 포용합니다.

구현 주의. 단일 지점 수단(버튼·점)은 — 충분히 크고(CP-217), 명확히 인지되며(CP-214), 일관된 위치에 (CP-215), 콘텐츠를 안 가리게(CP-213) 제공해야 제 역할을 하죠. 이 컨트롤 규칙들이 단일 지점 탐색의 사용성을 받칩니다.

정리하면 — 스와이프는 경로 기반 제스처라 일부 사용자가 못 하므로, 한 지점을 탭/클릭하는 단순 수단(버튼·점)을 반드시 제공해 모든 사용자가 슬라이드를 탐색하게 해야 합니다(WCAG 2.5.1).

3. 점검 / 개선

무엇을 점검하나

단일 지점 수단 — 버튼·점 클릭 등 단순 탭/클릭으로 슬라이드를 넘길 수 있는가.

스와이프 비의존 — 스와이프가 유일한 전환 수단이 아닌가.

컨트롤 사용성 — 단일 지점 수단이 충분히 크고 명확한가(CP-213·214·217).

개선 방향

이전/다음 버튼·점 클릭 등 단일 지점 탐색 수단 제공(스와이프와 병행).

단일 지점 컨트롤의 크기·인지·위치 확보. 키보드(CP-224) 병행.

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

역할	책임
퍼블리셔/개발	단일 지점 탐색 수단·스와이프 병행 구현
접근성 담당	스와이프 없이도 탐색 가능 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 버튼·점 클릭 등 단순 탭/클릭으로 슬라이드를 넘길 수 있나요?

□ 스와이프가 유일한 전환 수단이 아닌가요?

□ 단일 지점 수단이 충분히 크고 명확한가요?

❓ FAQ

Q1. 스와이프(CP-218)만으론 안 되나요? 스와이프는 경로 기반이라 운동 장애·보조기기·키보드 사용자가 못 합니다. 단일 지점 클릭이 필수입니다(WCAG 2.5.1). Q2. 단일 지점 수단이 뭔가요? 이전/다음 버튼, 점 인디케이터 클릭처럼 한 지점을 탭/클릭하는 단순 동작입니다. Q3. CP-218과 충돌하나요? 아닙니다. 스와이프(편의) + 단일 지점(접근성) 병행입니다. 스와이프가 유일 수단 이면 안 되죠.

6. 마무리

CP-223의 메시지:

한 번 탭으로 넘어가게 — 단일 지점 상호작용 탐색 수단을 제공하라.

스와이프는 경로 기반 제스처라 운동 장애·보조기기·키보드 사용자가 못 합니다. 한 지점을 탭/클릭하는 단순 수단 (버튼·점)을 반드시 병행해, 모든 사용자가 슬라이드를 탐색하게 하죠(WCAG 2.5.1). 다음 편은 모든 기능의 키보드 실행입니다.

다음 편 예고 ▶ 「344. (CP-224) 캐러셀에서 제공되는 모든 기능을 키보드로 실행할 수 있도록 한다.」

ViewCheck는 캐러셀이 단일 지점 상호작용 탐색 수단을 제공하는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.5.1 Pointer Gestures — https://www.w3.org/WAI/WCAG21/Understanding/pointer-gestures.html

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

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