이용자의 조작으로 시작되는 움직임 효과는 꼭 필요한 경우가 아니면 끌 수 있어야 W3C 웹 접근성 기준 2.3.3을 충족합니다. 단체 홈페이지는 스크롤할 때 날아 들어오는 활동 사진이나 배경 효과를 운영체제의 움직임 줄이기 설정에 맞춰 멈추는지 확인해 보세요.
이용자의 조작으로 시작되는 움직임 효과는 꼭 필요한 경우가 아니면 끌 수 있어야 W3C 웹 접근성 기준 2.3.3을 충족합니다. 단체 홈페이지를 새로 만들 때 나눔 행사 같은 활동 사진이 스크롤에 맞춰 옆에서 날아 들어오거나, 배경이 앞쪽 글과 다른 속도로 움직이는 효과를 넣는 경우가 있습니다. 보기에는 생동감이 있지만 어떤 방문자에게는 어지러움과 메스꺼움을 일으킬 수 있습니다. 이 글은 움직임 효과를 모두 없애자는 이야기가 아니라, 움직임을 원하지 않는 방문자가 끌 수 있게 하는 방법을 W3C와 MDN 문서로 정리한 것입니다.
AI로 생성한 개념 이미지. 실제 단체 사진이 아닙니다.
기준이 말하는 움직임과 그 이유
W3C의 성공 기준 2.3.3 상호작용으로 인한 애니메이션 해설(수준 AAA)에 실린 기준 문장은 상호작용으로 시작되는 움직임 애니메이션을 끌 수 있어야 하고, 그 애니메이션이 기능이나 전달하는 정보에 꼭 필요한 경우만 예외라는 것입니다. 해설은 페이지를 스크롤할 때 스크롤 자체의 움직임 말고 다른 요소가 따라 움직이면 전정기관 장애 반응을 일으킬 수 있고, 그 반응에는 어지러움, 메스꺼움, 두통이 있다고 설명합니다. 배경이 앞쪽 내용과 다른 속도로 움직이는 패럴랙스 스크롤도 대개 꼭 필요하지 않은 애니메이션의 예로 듭니다.
해설은 이용자가 스크롤해서 새 내용이 화면에 들어오는 움직임은 스크롤에 꼭 필요한 것이고 이용자가 직접 조절하므로 허용된다고 구분합니다. 그 위에 꼭 필요하지 않은 움직임을 덧붙인다면 신중하게 넣고, 이용자가 언제든 그런 움직임을 끌 수 있게 하라고 안내합니다. 또 자동으로 시작되는 움직임은 별도의 기준인 2.2.2 일시 정지, 정지, 숨기기가 다룬다고 설명합니다.
위험을 줄이는 방법으로 해설은 다음 가운데 하나를 고르라고 안내합니다.
- 불필요한 애니메이션을 쓰지 않습니다.
- 상호작용으로 생기는 불필요한 애니메이션을 끄는 조작 장치를 제공합니다.
- 브라우저나 운영체제의 움직임 줄이기 기능을 활용합니다.
운영체제의 움직임 줄이기 설정을 따르는 방법
MDN의 prefers-reduced-motion 문서는 이 CSS 미디어 기능이 이용자가 기기에서 꼭 필요하지 않은 움직임을 줄이는 설정을 켰는지 알아내는 데 쓰인다고 설명합니다. 값은 설정이 없음을 뜻하는 no-preference와 설정을 켰음을 뜻하는 reduce 두 가지입니다. 문서는 크게 확대하거나 화면을 넓게 이동시키는 애니메이션이 전정기관 장애가 있는 사람에게 불편을 줄 수 있다고 덧붙입니다.
W3C의 기법 C39는 이 미디어 기능으로 움직임을 막는 방법을 기준 2.3.3을 충족하는 기법으로 소개합니다. 움직임 효과를 기본으로 두고 reduce일 때 효과를 끄는 방식과, 반대로 정지된 화면을 기본으로 두고 no-preference일 때만 효과를 켜는 방식 두 가지를 예로 듭니다. C39의 점검 절차는 시스템에서 움직임 줄이기 설정을 켠 뒤, 조작으로 생기는 애니메이션마다 꼭 필요한 움직임인지 또는 실제로 멈추는지 확인하는 것입니다.
MDN 문서는 기기별로 이 설정을 켜는 위치도 적고 있습니다. 예를 들어 Windows 11은 설정의 접근성 아래 시각 효과에서 애니메이션 효과를, iOS는 설정의 손쉬운 사용 아래 동작 항목을, Android 9 이상은 설정의 접근성에서 애니메이션 삭제를 찾으면 됩니다. MDN의 영문 메뉴 이름을 옮긴 것이라 실제 메뉴 이름은 기기 제조사, 운영체제 버전, 언어 설정에 따라 다를 수 있습니다.
단체 홈페이지에서 점검하는 순서
나누지오의 운영 권장은 담당자가 직접 움직임 줄이기 설정을 켜 놓고 자주 보는 페이지를 끝까지 스크롤해 보는 것입니다.
- 담당자의 휴대폰이나 컴퓨터에서 움직임 줄이기 설정을 켭니다.
- 첫 화면, 단체 소개, 활동 소식, 후원 안내 페이지를 차례로 열고 끝까지 스크롤합니다.
- 스크롤에 맞춰 사진이나 글 상자가 날아 들어오거나 커지는 효과, 배경이 다른 속도로 움직이는 효과가 그대로 남아 있는지 기록합니다.
- 남아 있는 효과마다 내용을 전달하는 데 꼭 필요한지 따져 보고, 꼭 필요하지 않다면 설정을 켰을 때 멈추도록 제작 담당자에게 요청합니다.
- 움직임이 멈춘 상태에서도 활동 사진과 글이 모두 보이는지 확인합니다. 효과가 끝나야 내용이 나타나도록 만든 페이지라면, 효과를 끈 뒤 내용이 숨겨진 채로 남지 않는지 함께 봅니다.
AI로 생성한 개념 이미지. 실제 단체 사진이 아닙니다.
기준 2.3.3은 수준 AAA에 속합니다. 그래도 어르신과 가족이 함께 찾는 돌봄 단체나 여러 연령의 자원활동가가 드나드는 단체라면, 움직임을 끌 수 있게 해 두는 것을 나누지오는 운영 기본값으로 권합니다. 이 글은 청주·충북 지역 비영리 단체를 포함한 일반적인 홈페이지 점검 방법을 W3C·MDN 문서에 따라 정리한 것이며 특정 단체 홈페이지를 진단한 결과가 아닙니다.