안녕하세요. 엔비전스 입니다.

컴퓨터나 휴대폰에서 프로그램이나 애플리케이션을 실행할 때, 알게 모르게 애니메이션 효과가 사용되고 있습니다. 화면의 중심부부터 바깥쪽으로 날아오는 효과, 애플리케이션 페이지를 넘길 때 슬라이드 애니메이션과 같이 평소에 별생각없이 봐오던 것들에도 하나하나 애니메이션이 제공되고 있습니다.
분명 애니메이션은 UI를 동적이고 아름답게 만드는 데에 큰 기여를 하는 기능이며, 애니메이션이 있기에 화면이 자연스럽고 부드럽게 전환되는 것임을 알 수 있습니다. 하지만 이 애니메이션 기능이 불편한 사용자도 분명 존재합니다.

위와 같이 애니메이션을 축소하거나 없애는 것을 원하는 사용자의 욕구가 증가함에 따라 운영체제에 애니메이션 동작 축소 기능을 제공하게 되었습니다. 이에 맞추어 일부 웹 브라우저에서는 웹 페이지에서 운영체제의 설정에 반응하여 애니메이션 동작을 축소해주는 prefers-reduced-motion 미디어쿼리 속성을 제공하고 있습니다.

하여 이번 아티클에서는 애니메이션 동작 줄이기 기능과 prefers-reduced-motion을 사용하여 운영체제의 애니메이션 동작 줄이기 설정 상태에 따라 반응하는 웹 페이지 제작방법을 소개하고자 합니다.

 

애니메이션 동작 줄이기 기능 알아보기

애니메이션 동작 줄이기 기능은 말 그대로 눈의 애니메이션 동작을 간소화하거나 없애는 기능을 이야기합니다.

주로 창 확대/축소 동작과 같이 애니메이션 효과를 동반한 UI의 애니메이션 효과를 삭제하거나, 단축시켜줍니다.

 

애니메이션 동작 줄이기 기능의 필요성

애니메이션 동작 줄이기 기능은 아래와 같은 사용자들에게 필요합니다.

1. 애니메이션 효과 사용 시 눈이 쉽게 피로해지는 사용자 및 저시력 시각장애인 사용자
2. 인식 장애를 가진 사용자 및 애니메이션으로 인한 광과민성 발작, 간질, 편두통 등이 발생할 수 있는 사용자
3. 저사양(보급형) PC 및 모바일 기기 사용자

1: 애니메이션 효과 사용 시 눈이 쉽게 피로해지는 사용자 및 저시력 시각장애인 사용자

애니메이션 효과는 콘텐츠를 자연스럽게 만들어주지만, 눈에 피로감을 쉽게 느끼게 되는 원인이 되기도 합니다. 특히 장시간 컴퓨터를 사용하는 직종이거나, 시력이 낮은 시각장애인의 경우에 이를 많이 느끼게 되며, 심한 경우에는 아래의 사례로 이어져 편두통이 올 수 있습니다. 따라서 애니메이션 동작 줄이기 사용자를 위해 별도의 스타일을 제공할 경우, 사용자의 선택에 따라 시각적 애니메이션 효과를 제어할 수 있어, 눈에 피로를 덜 수 있습니다.

 

2: 인식 장애를 가진 사용자 및 애니메이션으로 인한 광과민성 발작, 간질, 편두통 증상이 자주 발생하는 사용자

애니메이션 동작이 많거나, 애니메이션 효과의 정도가 지나치게 빠르고 반복적일 경우, 특히 어린아이의 경우 광과민성 발작을 일으킬 가능성이 존재하며, 간질이나 편두통 증상이 올 수 있으며, ADHD와 같은 학습장애를 가진 사용자의 집중력을 악화시키기도 합니다. 따라서 해당 기능을 제공할 경우, 사용자가 자신의 신체적 특징에 맞게 애니메이션 동작 줄이기를 사용하여 위에 설명한 증상을 예방할 수 있습니다.

 

3: 저사양(보급형) PC 및 모바일 기기 사용자

애니메이션 효과는 기계에 많은 작업량을 요구하고, 많은 전력을 요구합니다. 따라서 사양이 낮은 보급형 컴퓨터 및 스마트폰을 사용하는 사용자의 경우, 기기의 성능이 저하되거나, 배터리 사용량이 늘어나는 문제가 발생하게 되어 기기의 성능 향상을 위해 애니메이션 동작 줄이기 기능을 사용합니다.
 

운영체제별 애니메이션 동작 줄이기 설정 방법: PC

Microsoft Windows 10

1. 시작 버튼(Windows 키)를 눌러 시작 메뉴를 열고, "설정"을 검색하여 설정 창을 열거나, Windows 키 + X를 눌러 컨텍스트 메뉴를 연 다음, N 키를 눌러 설정 창에 진입하기.
2. 설정 창에서 Tab 키를 눌러 목록으로 이동한 뒤, 화살표 키로 접근성 항목을 찾아 열기.
3. 접근성 창에서 Tab 키를 눌러 목록으로 이동한 뒤, 디스플레이 항목을 찾아 열기.
4. 디스플레이 창에서 Tab 키를 눌러 하위분류 중 Windows 단순화 및 개인화의 항목 중, Windows에서 애니메이션 표시 토글 버튼을 눌러 기능 끄기.

Apple MacOS

1. Apple 메뉴를 확장하여 시스템 환경설정을 열기:
   • 마우스 사용자: 화면 상단에 위치한 메뉴 바의 Apple 로고를 클릭하여 메뉴 목록을 확장하고, 시스템 환경설정 메뉴 항목을 엽니다.
   • 키보드 사용자 및 VoiceOver 사용자: CTRL + F2를 눌러 메뉴 바로 접근할 수 있으며 VoiceOver 사용자는 VO + M을 눌러 메뉴 바에 접근하고 메뉴 바에 접근했다면 Apple 메뉴에 초점을 두고, 아래 화살표 키를 눌러 확장하고, 시스템 환경설정 메뉴 항목 찾아 Enter로 활성화합니다.
2. 환경 설정 패널에서 손쉬운 사용 메뉴 항목에 접근하기:
   • 마우스 사용자: 패널 하단에 위치한 손쉬운 사용 아이콘을 클릭하여 손쉬운 사용 창을 엽니다.
   • 일반 키보드 사용자: Tab 키나 화살표 키로 탐색하거나 가장 첫 번째 메뉴 항목인 "일반"에서 왼쪽 화살표 키나 Shift + Tab 키를 눌러 마지막 항목인 손쉬운 사용 메뉴 항목을 열 수 있습니다.
   • VoiceOver 사용자: Tab키로 도구 막대 다음에 위치한 메뉴 항목 영역에 접근한 뒤, Tab키로 탐색하거나 VO + End 키를 눌러 항목 마지막에 위치한 손쉬운 사용 메뉴 항목을 열 수 있습니다.
3. 손쉬운 사용 창에서 디스플레이 도구 항목을 선택하고 동작 줄이기 체크하기
   • 마우스 사용자: 손쉬운 사용 창 좌측에 위치한 수직 구조로 나열된 손쉬운 사용 항목 표 중, 디스플레이 항목을 클릭하여 선택하고, 우측에 위치한 패널에서 "동작 줄이기" 체크 상자를 클릭하여 체크할 수 있습니다.
   • 키보드 사용자: Tab 키를 사용하여, 손쉬운 사용 항목 표에 초점을 보낸 뒤, 위/아래 화살표 키로 도구 메뉴를 탐색하여 디스플레이 항목을 선택한 다음, "동작 줄이기" 체크박스에 초점을 보내어 선택할 수 있습니다.
   • VoiceOver 사용자: 손쉬운 사용 항목 표에 초점을 보낸 뒤, VO + 위/아래 화살표 키로 탐색하여 시각 지원 목록에 위치한 디스플레이 항목에 초점을 보낸 다음, Tab 키를 사용하여 "동작 줄이기" 체크박스에 초점을 보내어 선택할 수 있습니다.

<주의>

1. VO 키란? Ctrl + Option 조합을 VoiceOver 키, 줄여서 VO 키라고 부릅니다. Ctrl + Option 외에도 CapsLock으로도 대체가 가능합니다.
2. MacOS의 UI 내에서 보이스 오버를 사용하지 않고 키보드를 사용할 경우, CTRL + F1을 사용하여 별도로 키보드 사용 설정을 해주어야 합니다. 만약, 탐색 중 문제가 발생하여 도구막대로 이동해야 할 경우, CTRL + F5를 눌러 활성 창의 도구 막대부터 순차적으로 재탐색이 가능하므로 참고 바랍니다.

운영체제별 애니메이션 동작 줄이기 설정 방법 : 모바일

Apple iOS

1. 설정 앱 열기.
2. 일반 항목 열기.
3. 손쉬운 사용 항목 열기.
4. 동작 줄이기 항목을 찾고 '동작 줄이기' 켜기

Android

1. 환경설정 앱 실행
2. 설정 항목 중, 접근성 항목을 찾아 열기
3. 시인성 향상 항목을 찾아 열기
4. 애니메이션 삭제 스위치 활성화하기

<주의>

Android는 제조사별 UI 구조가 다르므로 텍스트나 위치 경로가 다를 수도 있으니 각 제조사별 접근성 메뉴를 참고해주시기 바랍니다.

위 순서는 삼성 스마트폰의 Android 9 Pi 운영체제에 적용된 One UI 환경설정을 기준으로 작성되었음을 알려드립니다.

 

운영체제에서 설정한 애니메이션 제거 및 동작 줄이기가 적용되는 웹 페이지 제작하기: prefers-reduced-motion

prefers-reduced-motion은 위에서 운영체제에 설정한 애니메이션 동작 줄이기 설정을 웹페이지에서 인식하여 해당 기능이 설정한 사용자에게 애니메이션 요소를 어떻게 표시할 것인지를 지정하는 미디어쿼리 속성입니다.

prefers-reduced-motion 미디어쿼리 사용법:

prefers-reduced-motion 미디어쿼리 속성은 총 두 개의 속성값을 가지고 있습니다. 속성 값은 아래와 같습니다.

1. no-preference: 애니메이션 동작 줄이기 설정 상태가 아닌 경우 보이게 될 스타일
2. reduce: 애니메이션 동작 줄이기 설정 상태에 보이게 될 CSS 스타일

실질적으로 속성값은 reduce만 사용된다고 보아도 무방하며, 미디어쿼리 시트 외부에 작성된 애니메이션을 prefers-reduced-motion 미디어쿼리 시트 내에 none으로 제공하여, 애니메이션이 동작하지 않게끔 웹 사용자에게 스타일을 제공할 수 있습니다. 코드는 다음과 같이 사용합니다.

HTML 소스 코드

<body>

<button id="Test">TEST! 매우 어지럽습니다! </button>

CSS 소스 코드

/*일반 스타일 시트*/

#Test {

         animation: TEST_ANIME 100ms 1 alternate;

}

/*미디어쿼리 스타일 시트*/

@media screen and (prefers-reduced-motion:reduce){

#Test {

         animation: none;

         -webkit-animation: none;

         -moz-animation: none;

         }

}

/애니메이션 코드/

@keyframes TEST_ANIME {

         from{
         //애니메이션 코드

}

         to {

         //애니메이션 코드

         }

}

마크업된 html에 원하는 애니메이션을 적용한 다음, prefers-reduced-motion 미디어 쿼리 코드 영역 내에 애니메이션이 적용된 선택자에 animation: none;을 제공하게 되면 Windows 10의 Windows에서 애니메이션 표시를 해제하거나, MacOS의 동작 줄이기를 사용할 경우, animation: none; Property가 작동하고, 아이디가 Test로 제공된 버튼에서 애니메이션이 더 이상 작동하지 않게 됩니다.

필요에 따라 지난 아티클인 Windows 고대비 모드 사용자를 위한 MS 고대비 반응형 웹 제작하기 1부: MS 고대비 미디어쿼리 소개의 이벤트 사용법 예제를 참고하여 자바스크립트와 함께 사용할 수 있습니다.

 

prefers-reduced-motion 미디어쿼리를 지원하는 브라우저:

prefers-reduced-motion은 다음과 같은 버전의 브라우저를 지원합니다.

PC 브라우저

1. Google Chrome 74
2. Mozilla Firefox 63
3. Apple Safari 10.1

모바일 브라우저

1. Android Webview 74(Chrome)
2. Mozilla Firefox for Android
3. Apple Safari 10.3

prefers-reduced-motion의 올바른 사용방법

prefers-reduced-motion은 위에서 설명했던 바와 같이 개인의 신체적 혹은 의학적인 특징으로 인해 반드시 필요한 기능입니다.

하지만 이를 올바르게 제공하지 않는다면. 사용자의 선택과 무관하게 애니메이션 효과를 보게 되므로 반드시 지양해야 하는 스타일이 있습니다. 이는 아래와 같이 두 개로 압축할 수 있습니다.

1. 적용된 애니메이션 동작의 가지 수가 많으며 빈도가 높고, 반복되는 애니메이션을 prefers-reduced-motion:redce;에 사용해서는 안된다.
2. 특별한 이유가 없다면 애니메이션에 차별을 두어서는 안되며, 애니메이션이 제거되지 않은 상태와 최대한 유사한 디자인을 제공해야 합니다.

1: 적용된 애니메이션 동작의 가지 수가 많으며 빈도가 높고, 반복되는 애니메이션을 사용해서는 안 된다

prefers-reduced-motion:reduce;는 애니메이션 동작을 단축시키거나, 제거하길 원하는 사용자를 위한 미디어쿼리 입니다. 따라서 애니메이션 동작 줄이기 기능을 실행하기 전보다는 동작 빈도와 속도가 확연히 줄어들거나, 애니메이션이 삭제되어야 바람직합니다.

만약 이를 지키지 않을 경우, 특히 광과민성 발작, 간질 질환을 앓고 있는 사용자나 인식 장애가 있는 사용자, 저시력 사용자는 해당 페이지를 사용할 수 없게 됩니다.

 

2: 특별한 이유가 없다면 애니메이션에 차별을 두어서는 안되며, 애니메이션이 제거되지 않은 상태와 최대한 유사한 디자인을 제공해야 한다

하지만 미디어쿼리는 사용자의 환경 상태에 반응하여 별도의 스타일을 보여주는 것이기 때문에 요소의 넓이/높이, 형태와 같은 모습부터, 콘텐츠의 표시 및 감춤 또한 제어할 수 있습니다. 그렇기 때문에 애니메이션 동작 줄이기를 사용하지 않는 사용자와 사용하는 사용자에게 보이는 콘텐츠가 전혀 다르게 표시할 수도 있습니다. 이는 반드시 지양되어야 하며, 되도록 최대한 유사한 디자인을 애니메이션 동작 줄이기 사용자에게 제공해야 합니다.

간단히 극단적인 코드 예시를 몇 개를 적어보자면 다음과 같습니다.

 

동작 줄이기 사용자에게만 제공되지 않는 콘텐츠 1

#콘텐츠A, #콘텐츠B{

  width:200px;

  height:200px;

}

blockquote.인용문:before,blockquote.인용문:after{ content:"'"; }

@media ( prefers-reduced-motion:reduce ){

#콘텐츠A {display:none;}

 

blockquote:before,blockquote:after{

         content:"";

         }

}

위와 같은 코드를 작성하였을 경우, 애니메이션 동작 줄이기 사용자는 애니메이션 동작을 줄이지 않은 사용자가 #콘텐츠A와 #콘텐츠B 요소를 둘 다 볼 수 있는 반면에 #콘텐츠A 요소를 볼 수 없게 되어 차별된 콘텐츠를 제공받게 됩니다.

또한 blockquote 태그의 경우, 애니메이션 동작 줄이기를 사용하지 않은 사용자에게는 작은따옴표가 표시되지 않아 인용문임을 한눈에 알 수 없게 됩니다.

 

글을 마치며

이번 아티클에서는 단순히 신체적 특징을 가진 사용자 뿐만 아니라 보급형 PC 및 휴대폰 사용자나 모니터를 장시간 보며 일을 해야 하는 직장인들에게 모두 유용한 기능인 애니메이션 동작 줄이기 기능의 소개와 각 OS별 애니메이션 동작 줄이기 설정값에 따라 반응하여 웹 요소의 애니메이션을 제거하거나, 축소시켜주는 prefers-reduced-motion 미디어쿼리를 살펴보았습니다.

다음 아티클에서도 이와 같이 누구나 널리 사용될 수 있는 유익한 기술로 찾아뵙도록 하겠습니다. 읽어주셔서 감사합니다.

 

부록1) prefers-reduced-motion이 적용된 웹페이지

아래 페이지는 애니메이션이 적용된 Tab/Tab panel 로 이루어진 페이지입니다.

상단의 Tab 메뉴에는 prefers-reduced-motion이 적용되어 있지 않으며, Tab 메뉴를 선택할 시 노출되는 Tab panel 영역에는 prefers-reduced-motion이 적용이 되어있습니다. 상단의 Tab 메뉴의 각 Tab 버튼은 선택 시에 색깔이 천천히 변하는 애니메이션이 적용되어 있으며, 하단의 Tab panel 영역은 노출될 때마다, 위에 숨겨져 있다가 아래로 슬라이드 하는 애니메이션이 적용되어 있습니다. 따라서 본문에서 소개한 각 OS별 설정 방법대로 애니메이션 동작 줄이기 옵션을 올바르게 활성화한 경우, Tab panel의 슬라이드 애니메이션은 동작하지 않습니다.

애니메이션 동작 줄이기가 적용된 반응형 웹

 

부록2) MDN - prefers-reduced-motion 사용하기

접근성을 위한 미디어쿼리 사용하기