깜빡임과 번쩍임 사용 제한

무엇을 요구하나요?

광과민성 발작을 일으킬 수 있는 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 합니다. 이 항목은 사용자의 건강과 직결되므로 가장 우선해서 지켜야 합니다.

지침의 세부 기준은 다음과 같습니다.

• 번쩍이는 콘텐츠: 초당 3~50회 번쩍이는 콘텐츠가 10인치 이상 화면에서 차지하는 면적의 합이 화면 전체의 10%를 넘지 않아야 합니다.
• 깜빡이는 콘텐츠: 초당 3~50회로 깜빡이게 만든 콘텐츠는 깜빡임을 멈출 수 있어야 합니다.
• 번쩍이는 시간을 3초 미만으로 제한하면 발작 위험을 줄이면서 중요한 내용을 알릴 수 있습니다.

특히 위험한 것은 밝기 차이가 큰 깜빡임(검정↔흰색), 빨간색 번쩍임, 화면의 넓은 영역을 차지하는 깜빡임입니다.

자주 틀리는 예

1. 빠르게 깜빡이는 강조 효과

.hot { animation: blink 0.2s steps(1) infinite; } /* 초당 5번 깜빡임 */
@keyframes blink { 50% { opacity: 0; } }

.hot { color: #d22030; font-weight: 700; } /* 깜빡임 대신 색·굵기·아이콘으로 강조 */

2. 번쩍이는 이벤트 배너·GIF

번쩍이는 GIF·영상은 만들 때 피하는 것이 가장 좋습니다. 이미 있다면 자동 재생을 멈추고 재생 전 경고를 두세요.

<video src="flash-event.mp4" autoplay loop muted></video>

<p class="warning">⚠ 이 영상에는 빠르게 번쩍이는 장면이 있습니다.</p>
<video src="flash-event.mp4" controls preload="none"></video>

3. 동작 줄이기 설정 무시

@media (prefers-reduced-motion: reduce) {
  .hot, .flash { animation: none; }
}

확인하는 방법

1. 페이지의 애니메이션, GIF, 동영상에서 1초에 3번 이상 깜빡이는 부분이 있는지 확인하세요. 개발자 도구의 애니메이션 패널로 주기를 볼 수 있습니다.
2. 동영상은 번쩍임 분석 도구(예: PEAT 같은 광과민성 분석 도구)로 검사하는 방법도 있습니다.
3. 깜빡이는 콘텐츠가 있다면 경고와 정지 수단이 있는지 확인하세요.