읽기도 전에 넘어가면 안 된다

KRDS CP-208 — 자동 회전을 사용하는 경우, 사용자가 콘텐츠를 이해할 수 있는 적절한 시간 간격으로 전환되게 구현하고 있다.

0. 들어가며 — 캐러셀 그룹의 첫 규칙

이번 328편부터 캐러셀(Carousel) 그룹(CP-208~226, 19개)으로 들어갑니다. 846 규칙 중 가장 큰 컴포넌트 그룹이라 2회차로 나눠 다루죠. 첫 규칙은 자동 회전 시 적절한 시간 간격으로 전환하라는 내용입니다.

먼저 ’캐러셀’을 짚겠습니다. 캐러셀은 여러 슬라이드(이미지·배너)를 한 자리에서 좌우로 넘기며 보여주는 컴포 넌트입니다 — 메인 페이지 상단의 회전 배너가 대표적이죠. 자동으로 슬라이드가 넘어가기도(자동 회전) 합니다. 그런데 너무 빨리 넘어가면 사용자가 내용을 읽기 전에 사라지죠. CP-208은 적절한 전환 속도를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 적절한 시간 간격 전환

CP-208 (컴포넌트 > 캐러셀) “자동 회전을 사용하는 경우, 사용자가 콘텐츠를 이해할 수 있는 적절한 시간 간격으로 전환되게 구현하고 있다.”

캐러셀이 자동으로 슬라이드를 넘길 때, 사용자가 각 슬라이드 내용을 읽고 이해할 충분한 시간을 두고 전환하라는 뜻입니다.

정리: 자동 회전은 내용을 읽을 수 있는 충분한 간격으로 전환하라. 이게 CP-208입니다.

2. 왜 적절한 시간 간격이 필요한가

자동 회전 캐러셀은 사용자가 가만히 있어도 슬라이드가 저절로 넘어갑니다. 이때 전환이 너무 빠르면 — 사용자가 한 슬라이드의 내용(제목, 문구, 이미지)을 채 읽기도 전에 다음으로 넘어가죠. 정보 전달이라는 캐러셀의 목적이 무너집니다.

너무 빠른 전환의 문제:

읽기 실패 — 슬라이드에 제목·문구가 있는데(보통 2줄 이내, CP-211), 그걸 읽는 데 몇 초가 걸립니다. 전환이 2~3초마다면 — 긴 문구는 다 못 읽고 넘어가죠. 사용자는 ’뭔가 지나갔는데 못 봤다’는 답답함을 느낍니다.

인지 부담·산만함 — 화면이 계속 빠르게 바뀌면 시선이 분산되고, 본문에 집중하려는 사용자를 방해하죠. 움직임이 잦으면 어지럽기도 합니다.

접근성 — 인지·읽기 속도 차이 — 고령자, 인지 장애 사용자, 비모국어 사용자는 읽는 데 더 오래 걸립니다. 빠른 전환은 이들을 특히 배제하죠. WCAG의 ‘충분한 시간’(SC 2.2 계열) 원칙과 닿습니다.

그래서 CP-208은 — 사용자가 각 슬라이드 내용을 읽고 이해할 충분한 시간을 두고 전환하라고 합니다. 적정 간격은 슬라이드 내용량에 따라 다르지만:

일반적으로 한 슬라이드당 최소 5초 이상(짧은 배너 기준)을 권장하며, 텍스트가 많으면 더 길게 둡니다.

’읽는 데 걸리는 시간 + 여유’를 기준으로 — 텍스트 분량을 읽을 수 있는 시간을 확보하죠.

더 근본적인 보완 — 정지 컨트롤. 시간 간격을 적절히 두는 것에 더해, 사용자가 자동 회전을 멈출 수 있어야 합니다 — 이는 바로 다음 편 CP-209(자동 회전 정지 컨트롤)의 내용이죠. 아무리 간격을 잘 둬도 읽기 속도는 사람 마다 다르므로, ’멈추고 천천히 보기’를 사용자가 선택하게 하는 게 더 확실한 배려입니다. 사실 WCAG는 ’5초 이상 자동으로 움직이는 콘텐츠’에는 일시정지·정지·숨김 수단을 필수로 요구하죠(SC 2.2.2 Pause, Stop, Hide). 그래서 CP-208(적절 간격) + CP-209(정지 컨트롤) + CP-222(정지 버튼 우선 접근)가 함께 자동 회전의 안전장치를 이룹니다.

자동 회전 자체를 재고. 한편 — 자동 회전 캐러셀은 사용성·접근성 논란이 많은 패턴입니다. 사용자가 보려는 슬라이드가 넘어가 버리거나, 잘 안 클릭되거나, 움직임이 산만하다는 비판이 있죠. 그래서 ‘자동 회전을 꼭 써야 하는가’, ’쓰더라도 신중히’라는 관점도 중요합니다. 자동 회전을 쓴다면 — 충분한 간격(208) + 정지 수단(209)을 반드시 갖춰야 합니다.

정리하면 — 자동 회전 캐러셀은 사용자가 각 슬라이드를 읽고 이해할 충분한 시간 간격으로 전환해야 하며, 정지 컨트롤과 함께 사용자의 읽기 속도 차이를 배려해야 합니다.

3. 점검 / 개선

무엇을 점검하나

전환 간격 — 자동 회전 간격이 슬라이드 내용을 읽기에 충분한가(보통 5초 이상).

내용 대비 속도 — 텍스트가 많은 슬라이드는 더 긴 간격인가.

정지 수단 병행 — 정지 컨트롤(CP-209)이 함께 제공되는가.

개선 방향

자동 회전 간격을 충분히(읽기 시간 + 여유). 텍스트 많으면 더 길게.

정지/일시정지 컨트롤(CP-209) 필수 제공.

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

역할	책임
기획/UX	자동 회전 여부·간격 정책
디자이너/개발	적절 간격·정지 컨트롤 구현

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

자동 회전 배너·캐러셀을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 자동 회전 간격이 슬라이드 내용을 읽기에 충분한가요(보통 5초 이상)?

□ 텍스트가 많은 슬라이드는 더 긴 간격인가요?

□ 정지 컨트롤(CP-209)이 함께 제공되나요?

❓ FAQ

Q1. 캐러셀이 뭔가요? 여러 슬라이드를 한 자리에서 좌우로 넘기며 보여주는 컴포넌트입니다 — 메인 회전 배너가 대표적이죠. Q2. 몇 초가 적당한가요? 내용량에 따라 다르지만 보통 최소 5초 이상, 텍스트가 많으면 더 길게 둡니다. Q3. 간격만 잘 두면 되나요? 읽기 속도는 사람마다 달라, 정지 컨트롤(CP-209)을 함께 줘야 확실합니다. WCAG도 5초 이상 자동 움직임엔 정지 수단을 필수로 요구합니다.

6. 마무리

CP-208의 메시지:

읽기도 전에 넘어가면 안 된다 — 자동 회전은 충분한 시간 간격으로 전환하라.

자동 회전이 너무 빠르면 사용자가 내용을 못 읽고 넘어가, 정보 전달이 실패합니다. 읽고 이해할 충분한 간격을 두고, 읽기 속도 차이를 배려해 정지 컨트롤을 함께 줘야 하죠. 다음 편은 그 자동 회전 정지 컨트롤입니다.

다음 편 예고 ▶ 「329. (CP-209) 자동 회전 애니메이션에 민감한 사용자를 위해 자동 회전을 정지할 수 있는 컨트롤을 제공하고 있다.」

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컴포넌트,웹표준