애니메이션 및 모션

자동차, 배 또는 비행기를 타고 가다가 갑자기 세상이 빙글빙글 도는 느낌을 받은 적이 있나요? 또는 '즐거움'을 주기 위해 만들어진 휴대전화나 태블릿의 애니메이션이 갑자기 속을 불편하게 한 적이 있나요? 아니면 모든 유형의 움직임에 항상 민감한가요? 다음은 다양한 유형의 전정 장애의 예입니다.

40세가 되면 성인의 35% 이상이 어떤 형태로든 전정 기능 장애를 경험하게 됩니다. 이로 인해 일시적인 어지럼증, 편두통으로 인한 현기증 또는 더 영구적인 전정 장애가 발생할 수 있습니다.

현기증을 유발하는 것 외에도 움직이거나 깜박이거나 스크롤되는 콘텐츠가 주의를 산만하게 한다고 생각하는 사람이 많습니다. ADHD 및 기타 주의력 결핍 장애가 있는 사용자는 애니메이션 요소에 너무 정신이 팔려 웹사이트나 앱을 방문한 이유를 잊을 수 있습니다.

이 모듈에서는 모든 유형의 움직임 유발 장애가 있는 사용자를 더 잘 지원할 수 있는 몇 가지 방법을 살펴봅니다.

깜박이는 콘텐츠 및 움직이는 콘텐츠

애니메이션과 모션을 빌드할 때 요소의 움직임이 과도한지 자문해 보세요. 예를 들어 어두운색에서 밝은색으로 깜박이는 색상이나 화면의 빠른 움직임은 광민감간질 환자에게 발작을 일으킬 수 있습니다. 간질 환자의 3%가 광과민성인 것으로 추정되며, 여성과 젊은층에서 더 흔합니다.

WCAG의 깜박임에 관한 가이드라인에서는 다음을 권장하지 않습니다.

• 1초에 3회 이상 깜박임
• 일반 깜박임 및 빨간색 깜박임 기준 아래에서 깜박입니다.

이러한 깜박임은 최악의 경우 질환을 유발할 수 있으며, 최상의 경우 웹페이지를 사용하지 못하게 할 수 있습니다.

극단적인 움직임의 경우 광과민성 발작 분석 도구 (PEAT)를 사용하여 테스트해야 합니다. PEAT는 화면의 콘텐츠, 동영상 또는 애니메이션이 발작을 일으킬 가능성이 있는지 식별하는 무료 도구입니다. 모든 콘텐츠를 PEAT로 평가할 필요는 없지만, 밝은색과 어두운색 배경 간의 깜박임이나 빠른 전환이 포함된 콘텐츠는 안전을 위해 평가하는 것이 좋습니다.

애니메이션과 동작에 관해 자문해야 할 또 다른 질문은 요소의 움직임이 화면의 콘텐츠나 작업을 이해하는 데 필수적인지입니다. 필수적이지 않다면 빌드하거나 디자인하는 요소에서 미세한 움직임까지 포함한 모든 움직임을 삭제하는 것이 좋습니다.

요소의 움직임이 필수적이지는 않지만 사용자의 전반적인 환경을 개선할 수 있다고 생각하거나 다른 이유로 움직임을 삭제할 수 없는 경우를 가정해 보겠습니다. 이 경우 WCAG의 동작에 관한 가이드라인을 따라야 합니다. 가이드라인에 따르면 자동으로 시작되고 5초 이상 지속되며 다른 페이지 요소의 일부인 필수적이지 않은 움직이는 요소, 깜박이는 요소 또는 스크롤 요소의 움직임을 사용자가 일시중지하거나 중지하거나 숨길 수 있는 옵션을 빌드해야 합니다.

움직임 일시중지, 중지 또는 숨기기

사용자가 문제가 될 수 있는 모션 애니메이션을 사용 중지할 수 있도록 페이지에 일시중지, 중지 또는 숨기기 메커니즘을 추가합니다. 화면 수준 또는 요소 수준에서 이 작업을 수행할 수 있습니다.

예를 들어 디지털 제품에 애니메이션이 많이 포함되어 있다고 가정해 보겠습니다. 사용자가 환경을 제어할 수 있도록 접근 가능한 JavaScript 전환 버튼을 추가하는 것이 좋습니다. 버튼을 '모션 끄기'로 전환하면 해당 화면과 다른 모든 화면에서 애니메이션이 고정됩니다.

미디어 쿼리 사용

애니메이션을 선택적으로 사용하는 것 외에도 사용자에게 움직임을 일시중지, 중지, 숨기는 옵션을 제공하고 무한 애니메이션 루프를 피하는 것이 좋습니다. 움직임에 초점을 맞춘 미디어 쿼리를 추가하는 것도 고려해 보세요. 이를 통해 사용자는 화면에 표시되는 항목을 더욱 다양하게 선택할 수 있습니다.

@prefers-reduced-motion

색상 모듈의 색상 중심 미디어 쿼리와 마찬가지로 @prefers-reduced-motion 미디어 쿼리는 애니메이션과 관련된 사용자의 OS 설정을 확인합니다.

사용자는 움직임을 줄이도록 디스플레이 환경설정을 설정할 수 있습니다. 이러한 설정은 운영체제마다 다르며 긍정적 또는 부정적으로 표현될 수 있습니다. @prefers-reduced-motion을 사용하면 이러한 환경설정을 준수하는 사이트를 디자인할 수 있습니다.

macOS와 Android에서는 사용자가 설정을 켜서 동작을 줄입니다. macOS에서 사용자는 설정 > 접근성 > 디스플레이에서 동작 줄이기를 설정할 수 있습니다. Android 설정은 애니메이션 삭제입니다. Windows에서는 이 설정이 기본적으로 사용 설정되어 있으며 애니메이션 표시로 긍정적인 프레임이 지정됩니다. 동작을 줄이려면 사용자가 이 설정을 사용 중지해야 합니다.

움직임에 어려움을 겪는 사용자의 접근성을 보장하기 위해 WCAG 2.0 AA 가이드라인에 설명된 5초 기준점보다 짧은 애니메이션도 주의해서 접근해야 하며, 가장 신뢰할 수 있는 방법은 움직임 감소를 선호한다고 표시한 사용자에게 애니메이션에 대한 독점적인 제어 권한을 부여하여 사용자가 각각 재생 버튼과 일시중지 버튼과 같은 전용 컨트롤을 사용하여 애니메이션을 시작하고 중지할 수 있도록 하는 것입니다.

동작의 점진적 개선

디자이너와 개발자는 기본 이동 상태, 표시할 이동량 등 다양한 선택을 해야 합니다. 동작에 관한 마지막 예시를 다시 살펴보세요.

화면의 콘텐츠를 이해하는 데 애니메이션이 불필요하다고 결정한다고 가정해 보겠습니다. 이 경우 기본 상태를 전체 모션 버전이 아닌 동작 감소 애니메이션으로 설정할 수 있습니다. 사용자가 애니메이션을 특별히 요청하지 않는 한 애니메이션은 사용 중지됩니다.

발작, 전정, 기타 시각 장애가 있는 사용자에게 어떤 수준의 움직임이 문제를 일으킬지 예측할 수 없습니다. 화면에 약간의 움직임만 있어도 어지럼증, 시야 흐림 등이 발생할 수 있습니다. 따라서 다음 예에서는 애니메이션이 기본적으로 사용되지 않습니다.

계층화된 미디어 쿼리

여러 미디어 쿼리를 사용하여 사용자에게 더 많은 선택지를 제공할 수 있습니다. @prefers-color-scheme, @prefers-contrast, @prefers-reduced-motion를 모두 함께 사용할 수 있습니다.

사용자가 선택하도록 허용

사용자를 즐겁게 하기 위해 디지털 제품에 애니메이션을 빌드하는 것은 재미있을 수 있지만, 일부 사용자는 이러한 디자인에 영향을 받을 수 있다는 점을 기억해야 합니다. 모션 민감도는 약간의 불편함부터 쇠약해지는 질병이나 발작에 이르기까지 누구에게나 영향을 미칠 수 있습니다.

다양한 도구를 사용하여 사용자가 과도한 동작을 추측하는 대신 자신에게 가장 적합한 동작을 결정할 수 있습니다. 예를 들어 사이트 또는 웹 앱 내에서 애니메이션을 사용 설정하거나 사용 중지하는 전환 버튼을 추가합니다. 이러한 전환 버튼은 기본적으로 사용 중지로 설정하는 것이 좋습니다.