🦠 치명적인 애니메이션 효과

🧨 치명적인 애니메이션 효과가 뭔데?

깜빡이는(Blinking and Flashing) 애니메이션은 ADHD와 같은 인지 장애가 있는 사람에게 문제가 될 수 있습니다. 또한, 특정 종류의 움직임은 전정 장애(메스꺼움, 어지러움), 간질, 편두통, 광과민성 증후군을 유발할 수 있습니다.

MDN에서는 다음과 같이 설명하고 있습니다.

도대체 깜빡이는 애니메이션이 뭐라고 이런 증상까지 일으키는 걸까요?

🐦 포켓몬 쇼크

실제 방영분 : https://youtu.be/q4dDaxHtQDU (🙈 광과민성 증후군 주의, 책임지지 않습니다)

포켓몬 쇼크라고 들어 보셨나요?

'폴리곤 쇼크'라고도 불리는 이 사건은 1997년 일본에서 방영된 포켓몬스터의 깜빡이는 연출을 시청하던 아이들이 발작, 구토, 어지러움을 호소해 병원으로 후송된 사건이 있었습니다.
파악된 환자만 총 750명이었으며, 그 중 158명이 입원된 사건이죠.

적색 및 청색 점멸이 1초당 12회씩 4.5초간 106컷이나 행해져 '광과민성 증후군'임이 드러났습니다.
이렇게 포켓몬스터는 '가장 많은 사람들에게 발작을 일으킨 TV프로'가 되어버렸죠.

🧬 왜 치명적일까? - 인지 부하

인지 부하 이론은 이 문제를 "병목 현상"으로 설명합니다.
정보는 감각기억 → 작업기억 → 장기기억 순서로 전달되는데요,
작업기억에서 주로 병목 현상이 발생합니다. (작업기억 용량이 제한되어 있기 때문)

작업기억은 세 가지 유형의 인지 부하로 나뉘어 집니다.

• 내재적 인지부하 : 콘텐츠 자체의 난이도에 따른 인지부하
• 본질적 인지부하 : 콘텐츠를 배우는 데 필요한 집중력과 정신적 노력의 양
• 외생적 인지부하 : 콘텐츠와 직접적인 관련이 없는 외부의 산만함

ADHD가 있는 사람은 매우 쉽게 주의가 산만해지고 읽고 있는 내용을 이해하기 위해 더 열심히 집중해야 하므로 본질적 인지부하와 외생적 인지부하가 증가합니다.

난독증이 있는 사람은 콘텐츠를 읽고 해독하기 위해 더 열심히 노력해야 하므로 내재적 인지부하와 본질적 인지부하가 증가합니다.

자페 스팩트럼 장애가 있는 사람은 불필요한 시각 효과와 애니메이션이 원인이 되어 외생적 인지부하가 증가합니다.

전반적으로 인지장애가 있는 사람들은 작업기억력이 감소하고 인지부하가 증가하므로,
인지부하를 증가시키는 요인이 악영향을 미칠 수 있습니다.

---

🪄 치명적인 애니메이션 효과를 예방하는 가이드라인

🚫 깜빡이는 콘텐츠 피하기

디자이너로서 깜빡이는 콘텐츠가 정말 필요한지 신중하게 결정해야 합니다.

깜빡이는 콘텐츠는 두 가지 종류로 나뉘어집니다.

• general flash - 한 쌍의 대비되는 밝기의 상반되는 변화입니다. (흰색→검은색→흰색→검은색)
• red flash - 빨간채도와 대비되는 변화입니다. (빨강→파랑→빨강→파랑 등등)

커서, 아이콘, 작은 블록과 같은 오브젝트는 보통 문제를 일으키지 않습니다.
콘텐츠의 깜빡임은 일정한 크기(size), 빈도(frequency), 휘도(luminance)를 초과하면 문제가 될 수 있습니다.

• Luminance >= 20(cd/m2)
• Frequncy >= 3(Hz)
• 크기는 일반적인 시청 거리에서 중앙 시야의 약 10% 또는 화면 영역의 25% 이상을 차지

🖼️ 1초 동안 깜빡임 빈도를 3회 미만으로 줄이기

깜빡이는 콘텐츠가 진짜 필요하면, 적어도 초당 3회 미만으로 깜빡이는지 확인하세요.

깜빡이는 빈도가 너무 높으면 발작을 일으킬 수 있습니다.

🔪 깜박이는 콘텐츠의 크기 줄이기

중앙 시야의 약 10% 이상 or 일반적인 시청 거리에서 화면 영역의 25% 이상 차지하면 안됩니다.

너무 어려우면 desktop screen 기준으로, 341x256px 보다 작게 줄이세요.
(다만, 크기가 작더라도 깜빡이는 것은 유저에게 불편감을 여전히 줄 수는 있습니다)

🎥 동영상이나 애니메이션을 자동재생 피하기

되도록이면, 자동 재생을 가까이 하지 않도록 합시다.

이동, 변경, 깜빡이는 콘텐츠는 인지 장애가 있는 사용자의 주의를 산만하게 할 수 있습니다.
그리고, 자동 재생 콘텐츠는 접근성 보조 기술을 방해하여 불편함을 느끼게 할 수 있죠.

🏇 5초 이상 재생되는 콘텐츠 자동재생 피하기

콘텐츠 자동재생을 해야한다면, 5초 이상(오디오는 3초 이상) 재생하지 마세요.

주의력 결핍이 있는 유저의 주의를 분산시켜, 페이지의 다른 부분에 집중하기 어렵게 만듭니다.
동영상, 애니메이션, 캐러셀 등등이 포함됩니다.

⏸️ 자동재생 콘텐츠를 일시중지, 중지, 숨길 수 있는 기능 제공

동영상, 음악, 애니메이션이 자동재생되면 인지장애가 있는 유저의 주의가 산만해질 수 있습니다.

짤은 비즈하우스에서 가져왔는데요,
여기에서는 자동재생되는 배너에 일시중지를 따로 제공하고 있습니다. (PC버전)

🗡️ 불필요한 모션 사용 금지

전정 장애가 있는 사람은 컴퓨터 화면의 움직임으로 쇠약해지는 반응을 경험할 수 있습니다.
사용자가 페이지를 위아래로 스크롤 할 때 효과가 발생하는 경우 발생하죠.
(배경이 요소와 다른 속도로 움직이는 효과 등등)

모션 효과는 WCAG에서 금지하지 않았지만, 피하는게 좋겠죠?

🚀 가장 중요한 결론

모션 애니메이션은 되도록 피하는 것을 권장합니다.

하지만, 마케팅과 디자인같이 다른 관점에서는 껄끄러울 수 있는 결론입니다.
그렇다면 모두가 행복할 수 있는 대안은 무엇일까요?

• 애니메이션 콘텐츠 효과를 전혀 사용하지 않는 버전을 따로 마련합니다.
• 사용자가 애니메이션 효과를 켜고 끌 수 있는 컨트롤을 제공합니다.
• prefers-reduced-motion 설정에 대해 대응합니다.

적어도 유저에게 불편함을 주지 않도록 우리 모두 노력해보도록 합시다!

---

📍 레퍼런스

• MDN - Using media queries for accessibility
• IBM Accessibility - Visual design - Flashing and motion
• The impact of motion animation on cognitive disability
• [쓸만한 연구] 인지부하 이론
• 나무위키 - 포켓몬 쇼크