[웹 퍼블리싱 69] 접근성 - 모션과 애니메이션 배려

애니메이션은 웹을 생동감 있게 만든다. 부드럽게 나타나는 요소, 스르륵 넘어가는 화면, 시선을 따라 움직이는 배경은 보기에 좋다. 그런데 이 움직임이 누군가에게는 어지럼이나 멀미, 심하면 발작을 일으킨다는 사실을 나는 오래 몰랐다. 이번 편은 움직임을 좋아하는 사람과 힘들어하는 사람 모두를 배려하는 법을 다룬다.

나는 화면 전체가 스크롤을 따라 움직이는 효과를 자랑스럽게 넣은 적이 있다. 그런데 한 사용자가 그 화면을 보면 멀미가 난다고 했다. 나는 그 말을 듣기 전까지 움직임이 누군가를 아프게 할 수 있다는 걸 상상도 못 했다. 그 뒤로 나는 애니메이션을 넣을 때 이 움직임이 누군가에게 해롭지 않을지를 함께 묻게 됐다.

1. 움직임이 불편한 사람들

화면의 움직임은 어떤 사람들에게 실제로 몸의 반응을 일으킨다. 균형을 담당하는 기관에 문제가 있는 사람은 큰 움직임을 보면 어지럽고 메스껍다. 멀미에 약한 사람도 마찬가지다. 나는 움직임이 단지 취향의 문제가 아니라 어떤 사용자에게는 건강의 문제라는 걸 알고 나서, 애니메이션을 훨씬 조심스럽게 다루게 됐다.

특히 큰 면적이 움직이는 효과가 문제다. 화면 전체가 스크롤을 따라 밀리거나, 넓은 배경이 시차를 두고 움직이는 효과는 어지럼을 크게 일으킨다. 작은 버튼 하나가 살짝 커지는 정도와는 차원이 다르다. 나는 움직이는 면적이 클수록 배려가 더 필요하다는 걸 알고, 큰 움직임을 넣을 때 특히 신중해진다. 크기가 위험을 키운다.

주의력에 어려움이 있는 사람에게도 움직임은 방해가 된다. 끊임없이 움직이거나 깜빡이는 요소는 집중을 흩뜨려, 정작 읽어야 할 내용에 집중하지 못하게 한다. 나는 자동으로 움직이는 요소가 사용자의 시선을 자꾸 빼앗는다는 걸 알고, 본문 곁에서 쉼 없이 움직이는 요소를 두지 않으려 한다. 조용함도 배려의 하나다.

빠르게 깜빡이는 것은 더 심각한 위험을 부른다. 일정 빈도 이상으로 번쩍이는 화면은 빛에 민감한 사람에게 발작을 일으킬 수 있다. 이것은 불편을 넘어 안전의 문제다. 나는 화면에 빠르게 깜빡이는 효과를 넣지 않는 것을 절대적인 선으로 지킨다. 어떤 시각적 효과도 사용자의 안전보다 앞설 수는 없기 때문이다.

이런 사용자들은 특별한 소수가 아니다. 멀미에 약하거나 주의력이 산만한 것은 흔한 일이고, 누구나 컨디션에 따라 움직임에 예민해질 수 있다. 나는 움직임 배려를 극소수를 위한 것이 아니라 넓은 사용자를 위한 것으로 이해하게 됐다. 움직임을 다스리면 아픈 사람도, 그저 산만한 화면이 싫은 사람도 함께 편해진다.

정리하면 화면의 움직임은 어지럼과 멀미, 집중 방해, 심하면 발작까지 일으킬 수 있고, 큰 면적일수록 위험하며, 이런 사용자는 결코 드물지 않다. 나는 움직임을 건강과 안전의 문제로 대한다. 그렇다면 움직임을 힘들어하는 사용자를 어떻게 알아채고 배려할까. 그 열쇠가 사용자 설정이다.

2. 사용자 설정을 존중한다

운영체제에는 움직임을 줄이고 싶은 사용자를 위한 설정이 있다. 움직임에 예민한 사용자는 이 설정을 켜서, 기기 전체의 애니메이션을 줄여 달라고 미리 선언해 둔다. 웹도 이 설정을 감지해 존중할 수 있다. 나는 이 설정을 사용자가 미리 건네는 부탁으로 이해한다. 움직임을 줄여 달라는 그 부탁을 웹이 알아듣는 것이다.

이 설정을 감지하는 조건이 prefers-reduced-motion이다. 사용자가 움직임 줄이기를 켜두었다면 이 조건이 움직임을 줄이라는 뜻의 reduce 상태가 되고, 켜지 않았다면 특별한 선호가 없다는 상태가 된다. 나는 이 조건을 스타일에 걸어, 움직임을 줄이려는 사용자에게는 애니메이션을 걷어낸 화면을 보여준다. 조건 하나로 부탁에 응답한다.

이 조건을 감지하면 애니메이션을 끄거나 즉시 전환으로 바꾼다. 부드럽게 움직이던 전환 transition과 반복되는 애니메이션 animation을 이 조건 안에서 없애거나 아주 짧게 만들면, 움직임 없이 결과만 바뀐다. 나는 이 설정이 켜진 사용자에게는 움직임의 과정을 생략하고 최종 상태만 보여주어, 어지럼 없이 화면을 쓰게 한다.

중요한 것은 사용자의 선언을 웹이 먼저 존중한다는 점이다. 사용자가 이미 기기에 부탁을 남겼는데 웹이 그것을 무시하고 움직임을 밀어붙이면, 그 부탁은 헛것이 된다. 나는 이 설정을 감지하는 것을 선택이 아니라 예의로 여긴다. 사용자가 힘들다고 미리 말해 둔 것을 알아듣고 응답하는 것이 웹의 도리라고 생각한다.

이 설정을 존중하는 데 큰 비용이 들지도 않는다. 조건 하나를 걸어 움직임을 걷어내는 것뿐이라 코드가 크게 늘지 않는다. 나는 애니메이션을 넣을 때 이 조건 처리를 함께 짜두는 것을 습관으로 삼았다. 움직임을 넣는 코드와 그것을 걷어내는 코드를 짝으로 두면, 어느 사용자도 소외되지 않는 화면이 된다.

정리하면 운영체제의 움직임 줄이기 설정을 감지하는 조건으로 사용자의 부탁을 알아듣고, 그 설정이 켜진 사용자에게는 애니메이션을 걷어내며, 이는 큰 비용 없이 지킬 수 있는 예의다. 나는 이 설정을 먼저 존중한다. 그런데 모든 움직임을 똑같이 없애면 될까. 그렇지 않다. 움직임에도 종류가 있다.

3. 장식은 없애고 정보는 남긴다

움직임을 줄일 때는 그 움직임이 장식인지 정보인지를 가려야 한다. 순수하게 보기 좋으라고 넣은 장식 움직임은 없애도 아무것도 잃지 않는다. 부드럽게 나타나는 효과나 시선을 끄는 배경 움직임이 그렇다. 나는 움직임 줄이기 설정에서 이런 장식 움직임을 과감히 걷어낸다. 없어도 정보가 그대로 전해지기 때문이다.

그러나 정보를 전하는 움직임은 함부로 없애면 안 된다. 무언가 진행 중임을 알리는 회전 표시가 대표적이다. 이 움직임을 통째로 없애 버리면, 사용자는 지금 로딩 중인지 멈춘 것인지 알 수 없게 된다. 나는 정보를 담은 움직임은 없애는 대신, 움직임 없이도 같은 정보를 전하는 대안으로 바꾼다. 정보는 지키되 움직임만 덜어내는 것이다.

회전하는 로딩 표시라면, 움직임 줄이기 설정에서 회전을 멈추되 불러오는 중이라는 글자를 함께 보여주는 식이다. 움직임은 사라져도 지금 무슨 일이 일어나는지는 여전히 전해진다. 나는 정보 움직임마다 이런 정적 대안을 마련해, 움직임을 못 보는 상황에서도 사용자가 상황을 알 수 있게 한다. 움직임은 하나의 표현일 뿐, 유일한 통로가 아니다.

이 구분은 움직임을 넣는 단계에서부터 생각해 두는 것이 좋다. 이 움직임이 사라지면 사용자가 놓치는 정보가 있는지를 미리 물으면, 장식인지 정보인지가 정해진다. 나는 애니메이션을 넣을 때 이 질문을 함께 던지고, 정보 움직임에는 정적 대안을 미리 준비한다. 나중에 급히 대안을 만드는 것보다 처음부터 챙기는 것이 쉽다.

움직임을 줄인다고 화면이 죽은 듯 정지해야 하는 것은 아니다. 아주 짧고 은은한 전환은 어지럼을 거의 일으키지 않으면서 상태 변화를 부드럽게 전한다. 나는 움직임 줄이기 설정에서도 꼭 필요한 최소한의 전환은 아주 짧게 남겨, 화면이 뚝뚝 끊기지 않게 한다. 없애는 것과 줄이는 것 사이에서 알맞은 지점을 찾는 것이다.

정리하면 움직임을 줄일 때 장식 움직임은 없애도 되지만 정보 움직임은 정적 대안으로 바꿔 정보를 지키고, 이 구분은 움직임을 넣는 단계에서 미리 정하며, 최소한의 전환은 은은하게 남긴다. 나는 장식과 정보를 가려 다룬다. 그런데 이 모든 것을 더 안전하게 하는 설계 방향이 하나 있다.

4. 기본은 정적, 움직임은 더하기

움직임을 다루는 더 안전한 방향은 기본을 정적으로 두고 움직임을 더하는 방식이다. 흔히 하듯 움직임을 기본으로 두고 설정이 켜지면 없애는 대신, 처음부터 움직임 없는 화면을 기본으로 삼고 특별한 선호가 없는 사용자에게만 움직임을 더하는 것이다. 나는 이 뒤집힌 방향이 실수를 줄여 준다는 걸 알게 됐다.

이 방식을 쓰려면 특별한 선호가 없다는 상태 no-preference를 조건으로 삼는다. 사용자가 움직임 줄이기를 켜지 않았을 때만 이 조건 안에서 애니메이션을 더하는 것이다. 그러면 움직임 줄이기를 켠 사용자에게는 아무 움직임도 가지 않는다. 나는 애니메이션을 이 조건 안에 넣어, 움직임이 기본이 아니라 선택으로 얹히게 한다.

이 방향이 안전한 이유는 빠뜨림의 결과가 다르기 때문이다. 움직임을 기본으로 두는 방식에서는 설정 처리를 깜빡하면 예민한 사용자에게 움직임이 그대로 쏟아진다. 반대로 정적을 기본으로 두면, 조건을 깜빡해도 최악의 경우 움직임이 안 생길 뿐 아무도 아프지 않다. 나는 실수해도 안전한 쪽을 택하는 것을 원칙으로 삼는다.

이렇게 하면 움직임에 예민한 사용자가 항상 보호받는다. 그들은 설정을 켜두기만 하면, 웹이 실수를 하든 안 하든 움직임 없는 화면을 받는다. 나는 가장 취약한 사용자를 기본값으로 보호하는 이 방향이 접근성의 정신에 맞는다고 느낀다. 기본이 안전하면, 나머지는 그 위에 얹는 즐거움일 뿐이다.

물론 이 방식은 코드를 짜는 방향을 바꿔야 해서 처음엔 낯설다. 그러나 익숙해지면 움직임을 다루는 마음가짐 자체가 달라진다. 움직임이 당연한 것이 아니라 조심스럽게 더하는 것이 되기 때문이다. 나는 이 방향으로 옮기고 나서, 애니메이션을 넣을 때마다 자연스럽게 예민한 사용자를 먼저 떠올리게 됐다. 설계가 습관을 바꾼 것이다.

정리하면 움직임을 기본으로 두고 없애기보다 정적을 기본으로 두고 움직임을 더하는 방향이 더 안전한데, 조건을 빠뜨려도 아무도 아프지 않기 때문이며, 가장 취약한 사용자를 기본값으로 보호한다. 나는 안전한 쪽을 기본으로 삼는다. 마지막으로, 사용자 설정과 무관하게 늘 조심해야 할 움직임을 짚어 보자.

5. 깜빡임과 자동 움직임

사용자 설정과 무관하게 언제나 피해야 할 움직임이 있다. 첫째가 빠른 깜빡임이다. 일정 빈도 이상으로 번쩍이는 화면은 빛에 민감한 사람에게 발작을 일으킬 수 있어, 어떤 경우에도 넣지 않는다. 나는 깜빡이는 효과를 넣을 일이 있으면, 그 속도가 위험한 수준이 아닌지 반드시 확인한다. 이것은 취향이 아니라 안전의 절대선이다.

둘째가 저절로 움직이며 사용자가 멈출 수 없는 콘텐츠다. 자동으로 넘어가는 슬라이드나 끊임없이 흐르는 배너가 그렇다. 이런 콘텐츠에는 멈춤 수단을 반드시 둔다. 나는 자동으로 움직이는 모든 콘텐츠에 멈추고 다시 시작하는 조작을 마련해, 원하는 사용자는 언제든 움직임을 세울 수 있게 한다. 멈출 자유가 없는 움직임은 폭력이 된다.

자동으로 넘어가는 슬라이드는 특히 문제가 많다. 사용자가 읽는 중에 내용이 저절로 바뀌면, 읽던 것을 잃고 집중이 끊긴다. 나는 자동 전환 슬라이드를 되도록 피하고, 쓰더라도 사용자가 스스로 넘기는 것을 기본으로 둔다. 자동은 사용자가 원할 때만 켜지게 한다. 내용을 언제 넘길지는 콘텐츠가 아니라 사용자가 정해야 한다.

마우스를 올리거나 포커스했을 때 움직임을 멈추는 배려도 좋다. 사용자가 어떤 항목에 관심을 두는 순간에는 그 움직임을 멈춰, 천천히 살펴볼 수 있게 하는 것이다. 나는 움직이는 목록이나 흐르는 콘텐츠에 이런 멈춤을 더해, 사용자가 관심을 둔 순간 움직임이 방해하지 않게 한다. 관심에 반응해 멈추는 것도 세심한 배려다.

이런 움직임들은 사용자 설정을 존중하는 것과 별개로 챙겨야 한다. 움직임 줄이기 설정을 켜지 않은 사용자에게도 위험한 깜빡임이나 멈출 수 없는 자동 움직임은 해롭기 때문이다. 나는 설정 존중을 기본으로 하되, 그와 무관하게 위험하거나 통제할 수 없는 움직임 자체를 애초에 넣지 않는 것을 더 근본적인 원칙으로 지킨다.

정리하면 사용자 설정과 무관하게 빠른 깜빡임은 넣지 않고, 자동으로 움직이는 콘텐츠에는 멈춤 수단을 두며, 자동 전환보다 사용자 조작을 기본으로 하고, 관심을 둔 순간에는 움직임을 멈춘다. 나는 위험한 움직임 자체를 피한다. 다음 편에서는 사용자가 화면을 자기에게 맞게 바꾸는 확대와 사용자 설정을 다룬다.