멈출 수 있어야 한다

KRDS CP-209 — 자동 회전 애니메이션에 민감한 사용자를 위해 자동 회전을 정지할 수 있는 컨트롤을 제공하고 있다.

0. 들어가며 — 움직임을 멈추고 싶은 사용자

이번 329편은 자동 회전을 정지할 수 있는 컨트롤을 제공하라는 규칙입니다.

자동 회전 캐러셀은 화면이 계속 움직입니다. 그런데 이 움직임이 — 천천히 읽고 싶은 사용자, 움직임에 어지러움을 느끼는 사용자(전정 장애 등), 집중을 방해받는 사용자에게는 불편하죠. CP-209는 사용자가 자동 회전을 멈출 수 있는 컨트롤(정지/일시정지 버튼)을 제공하라고 규정합니다. WCAG 필수 요건(SC 2.2.2)이기도 하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 자동 회전 정지 컨트롤 제공

CP-209 (컴포넌트 > 캐러셀) “자동 회전 애니메이션에 민감한 사용자를 위해 자동 회전을 정지할 수 있는 컨트롤을 제공하고 있다.”

자동 회전하는 캐러셀에, 사용자가 그 움직임을 멈출 수 있는 정지(또는 일시정지) 컨트롤을 제공하라는 뜻입니다.

정리: 자동 회전을 멈출 수 있는 정지 컨트롤을 제공하라. 이게 CP-209입니다.

2. 왜 정지 컨트롤이 필요한가

자동으로 움직이는 콘텐츠는 사용자의 ’통제권’을 빼앗습니다 — 사용자가 원하지 않아도 화면이 계속 바뀌죠. 이는 여러 사용자에게 실질적 장벽이 됩니다.

정지가 필요한 사용자들:

천천히 읽는 사용자 — 고령자, 인지 장애, 비모국어 사용자는 읽는 데 더 오래 걸립니다. 자동 회전이 넘어가 버리면 읽던 내용을 놓치죠. 멈춰서 천천히 보고 싶습니다.

움직임에 민감한 사용자 — 전정 장애(vestibular disorder)가 있는 사용자는 화면의 움직임에 어지러움·메스 꺼움을 느낍니다. 깜빡임·움직임은 발작을 유발할 수도 있죠(광과민성). 이들에게 끊임없는 자동 회전은 신체적 고통입니다.

주의력·집중 — ADHD 등 주의력 관련 사용자, 또는 본문에 집중하려는 모든 사용자에게 움직이는 캐러셀은 시선을 뺏는 방해 요소죠.

이들에게 — 움직임을 멈출 수단이 있어야 합니다. 정지 컨트롤이 있으면, 사용자는 자동 회전을 멈추고 자기 속도 로 슬라이드를 보거나, 움직임을 없애 어지러움·방해를 피하죠. 통제권을 사용자에게 돌려주는 것입니다.

WCAG 필수 요건. 이것은 권장이 아니라 필수입니다. WCAG 2.1 SC 2.2.2(Pause, Stop, Hide)는 — ‘자동으로 움직이고, 5초 이상 지속되며, 다른 콘텐츠와 함께 제시되는’ 콘텐츠에는 일시정지·정지·숨김 수단을 반드시 제공하라고 규정하죠. 자동 회전 캐러셀이 정확히 이 대상입니다. 정지 컨트롤이 없으면 접근성 위반이죠.

구현 — 정지/일시정지 버튼:

명확한 정지 버튼 — 캐러셀에 ‘정지(■)’ 또는 ‘일시정지(⏸)’ 버튼을 두어, 누르면 자동 회전이 멈춥니다. 멈춘 뒤 ’재생(▶)’으로 바뀌어 다시 시작할 수도 있게 하죠.

접근 가능한 위치·우선순위 — 이 정지 버튼은 사용자가 쉽게 찾고, 키보드로도 닿아야 합니다. 특히 상호작용 가능한 첫 요소로 두는 것이 권장되죠 — 이는 CP-222에서 별도로 다룹니다(정지 버튼을 우선 접근하게). 자동 회전을 멈추려는 사용자가 캐러셀 진입 즉시 정지 버튼에 닿게요.

hover/focus 시 정지 — 보조적으로, 사용자가 캐러셀에 마우스를 올리거나 키보드 초점을 두면 자동으로 일시 정지되게 하기도 합니다(읽는 동안 안 넘어가게). 단 이건 보조 장치이고, 명시적 정지 버튼이 기본입니다.

prefers-reduced-motion 존중 — 사용자가 OS에서 ’움직임 줄이기’를 켜뒀으면, 그 설정을 감지해 자동 회전을 아예 안 하거나 멈춘 상태로 시작하는 것이 바람직하죠(움직임 민감 사용자 자동 배려).

이 규칙은 CP-208(적절 간격)·CP-222(정지 버튼 우선)와 함께 자동 회전의 안전장치를 이룹니다 — 간격을 충분히 (208), 멈출 수 있게(209), 정지 버튼에 먼저 닿게(222). 자동 움직임이라는 강한 개입에 사용자 통제권을 보장하는 것이죠.

정리하면 — 자동 회전은 사용자 통제권을 빼앗으므로, 멈출 수 있는 정지 컨트롤을 (WCAG 필수 요건으로) 제공해 천천히 읽는·움직임에 민감한·집중이 필요한 사용자를 배려해야 합니다.

3. 점검 / 개선

무엇을 점검하나

정지 컨트롤 존재 — 자동 회전을 멈출 수 있는 정지/일시정지 버튼이 있는가.

접근성 — 그 버튼이 명확하고 키보드로 닿으며 쉽게 찾을 수 있는가(CP-222).

움직임 설정 존중 — prefers-reduced-motion을 감지해 배려하는가.

개선 방향

명확한 정지/일시정지 버튼 제공. 상호작용 첫 요소로(CP-222).

prefers-reduced-motion 존중. hover/focus 시 일시정지 보조.

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

역할	책임
디자이너	정지 컨트롤 디자인·위치 정의
퍼블리셔/개발	정지 버튼·prefers-reduced-motion 구현

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

자동 회전 캐러셀을 쓰는 모든 사이트가 해당됩니다(WCAG 필수).

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 자동 회전을 멈출 수 있는 정지/일시정지 버튼이 있나요?

□ 그 버튼이 명확하고 키보드로 닿으며 쉽게 찾을 수 있나요?

□ prefers-reduced-motion을 감지해 배려하나요?

❓ FAQ

Q1. 자동 회전 간격(CP-208)만 잘 두면 안 되나요? 읽기 속도·움직임 민감도는 사람마다 다릅니다. 멈출 수단이 WCAG 필수 요건입니다. Q2. 누가 정지가 필요한가요? 천천히 읽는 사용자, 움직임에 어지러운 사용자(전정 장애), 집중이 필요한 사용자 입니다. Q3. prefers-reduced-motion이 뭔가요? 사용자가 OS에서 켠 ‘움직임 줄이기’ 설정입니다. 이를 감지해 자동 회전을 멈추면 움직임 민감 사용자를 자동 배려하죠.

6. 마무리

CP-209의 메시지:

멈출 수 있어야 한다 — 자동 회전을 정지할 수 있는 컨트롤을 제공하라.

자동 회전은 사용자 통제권을 빼앗아, 천천히 읽는·움직임에 민감한·집중이 필요한 사용자에게 장벽이 됩니다. 멈출 수 있는 정지 컨트롤은 WCAG 필수 요건이죠. prefers-reduced-motion도 존중해야 합니다. 다음 편은 슬라이드 개수 제한입니다.

다음 편 예고 ▶ 「330. (CP-210) 슬라이드 수를 5개 이내로 사용하고 있다.」

ViewCheck는 자동 회전 캐러셀에 정지 컨트롤이 제공되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.2.2 Pause, Stop, Hide — https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

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

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