애니메이션 및 모션

1. 모션 민감성 및 관련 장애

• 전정 장애(Vestibular Disorders): 움직임에 민감한 사람들은 어지럼증, 편두통, 또는 전정 장애를 경험할 수 있음.
• 40세 이상 성인의 35%는 전정 기능 장애(vestibular dysfunction)를 경험.

• 많은 사람들이 움직이거나, 깜박이거나, 스크롤되는 콘텐츠를 방해 요소로 생각합니다.

• 주의력 결핍 장애(ADHD): 과도한 움직임이나 깜빡임은 애니메이션 요소에 너무 방해를 받아 애초에 웹사이트나 앱을 방문한 이유를 잊어버릴 수 있습니다.

• 광민감성 간질: 빠르게 깜빡이거나 밝기와 어둠이 급격히 변하는 콘텐츠는 광민감성 간질을 유발할 위험이 있음. 3%의 인구가 광민감성 간질로 고통 받고 있다고 하며 여성과 아이들의 비율이 더 높다.
• WCAG 가이드라인:
• 1초에 3번 이상 깜빡이지 않도록 제작.
• 일반적인 깜빡임과 빨간색 깜빡임 임계값을 초과하지 않도록 설정.
•  Photosensitive Epilepsy Analysis Tool (PEAT) 테스트하기
• 콘텐츠가 발작을 일으킬 수 있는 지 판단하는 도구

2. 애니메이션의 필요 여부 판단

• 애니메이션이 콘텐츠를 이해하거나 동작을 수행하는 데 필수적인지 평가.

• 애니메이션이 너무 과하지 않은 지?

• 필수적이지 않다면 애니메이션(심지어 미세한 움직임)도 제거하는 것을 고려.

3. 모션 문제 해결 방법

(1) 중단, 멈춤, 숨김 기능 제공

• 자동으로 시작되고, 5초 이상 지속되며, 다른 페이지 요소의 일부인 비필수적 움직임, 깜빡임 또는 스크롤링 요소들에 대해 사용자가 일시정지, 중단, 숨김할 수 있는 옵션을 제공해야 함.

• accessible JavaScript toggle 를 참고하자.

• 예시:
• 자바스크립트를 사용해 모션 제어 토글 버튼 추가.
• "모션 끄기"가 활성화되면 모든 애니메이션이 중단.

(2) 미디어 쿼리 사용

• @prefers-reduced-motion:
• 사용자의 OS 설정값 Reduce Motion(모션 줄이기) 값을 가져오는 미디어 쿼리.
• 사용자가 설정을 켰을 경우 애니메이션을 줄일 수 있도록 개발해야 한다.
• 브라우저 지원:
• Chrome 74+, Edge 79+, Firefox 63+, Safari 10.1+.



/* 기본 애니메이션 (Reduce Motion 꺼져 있음) */
.my-element {
  animation: fadeIn 1s ease-in-out;
}

/* Reduce Motion 설정이 켜져 있을 때 */
@media (prefers-reduced-motion: reduce) {
  .my-element {
    animation: none; /* 애니메이션을 아예 제거 */
  }
}

4. 접근성을 위한 디자인 전략

• 기본 상태를 애니메이션 없는 상태로 설정하고, 사용자가 요청할 경우에만 애니메이션 활성화.

• 계층화된 미디어 쿼리:
• 더 많은 미디어 쿼리들을 통해 사용자에게 더 다양한 선택지를 줄 수 있다.
• @prefers-color-scheme,
• @prefers-contrast,
• @prefers-reduced-motion

5. 사용자 선택을 우선시

• 애니메이션은 사용자 경험을 더 즐겁고 흥미롭게 만들 수 있는 요소입니다.

• 하지만 일부 사용자에게는 불편함이나 건강 문제를 초래할 수도 있다는 점을 고려해야 합니다.

• 사용자의 다양성을 존중하며, 여러 옵션들을 제공하고 직접 on/off 할 수 있는 선택권을 제공하는 것이 가장 바람직합니다.
• 기본 설정으로는 off로 해두는 것을 권장.