페이지는 공중제비를 돌았다. 독자는 앉아 달라고 했다.

요약

• W3C의 2018년 WCAG 2.1 권고는 사용자의 조작으로 시작되는 움직임이 기능이나 정보 전달에 꼭 필요하지 않다면 끌 수 있어야 한다고 정했다.
• 2020년 3월 Media Queries Level 5 첫 공개 초안은 prefers-reduced-motion의 두 값 reduce와 no-preference를 설명했다. 이후 WAI 기술 문서는 움직임을 끄는 방식과 고요한 화면에서 시작해 조건에 맞을 때만 움직임을 더하는 방식을 모두 보여 준다.

카드 한 장 넘기는 데 페이지가 매번 체육대회를 열었다. 오래된 카드는 한 바퀴 돌아 퇴장하고 새 카드는 뛰어 들어왔다. 만든 사람에게는 장난기였지만 글을 읽는 사람에게는 열 번째 반복되는 장애물일 수 있다. 그 사람은 운영체제나 브라우저에서 이미 움직임을 줄이겠다고 설정했다. 이제 페이지 차례다. 그 말을 듣고 자기 연출을 바꿀 것인가.

W3C가 2018년 6월 5일 발표한 WCAG 2.1 권고에는 상호작용으로 인한 애니메이션을 다룬 성공 기준 2.3.3이 있다. 사용자의 행동이 시작시킨 움직임이 기능이나 정보에 필수적이지 않다면, 그 움직임을 끌 수 있어야 한다는 내용이다. 문서는 카드가 등장하는 모양을 대신 디자인하지 않는다. 읽는 데 필요한 내용 앞에서 불필요한 공중제비를 건너뛸 선택권을 독자에게 준다.

2020년 3월 3일 공개된 Media Queries Level 5 첫 작업 초안은 CSS가 물을 수 있는 질문을 적었다. prefers-reduced-motion이다. reduce는 사용자가 움직임을 줄이려는 뜻을 시스템에 알렸다는 의미다. no-preference는 시스템이 그런 선호를 전달받지 못했다는 의미다. 값 없이 이 기능을 참거짓 조건으로 검사하면 후자는 거짓으로 평가된다. 아무 말이 없다는 것을 공중제비 세 번 추가 요청으로 읽을 수는 없다.

브라우저는 독자의 환경에서 온 신호를 페이지로 전달한다. 실제 CSS를 어떻게 쓸지는 사이트가 정한다. 새 카드를 즉시 보여 줄 수도 있고, 이동 폭을 줄일 수도 있고, 특정 조건에서만 효과를 더할 수도 있다. 독자가 한 번 표현한 선택은 여러 웹사이트로 이어진다. 각 사이트는 자기가 만든 움직임을 책임진다. 작은 미디어 쿼리 하나가 말할 순서를 다시 정리한 셈이다.

2021년 12월 18일 작업 초안은 사용자 선호 기능 가운데 reduce와 no-preference의 구분을 이어 갔다. W3C 발행 이력에는 2020년 첫 공개 초안과 이후의 작업 초안이 기록돼 있다. 기기 설정 메뉴에 있던 독자의 선택이 스타일시트 안에서 읽을 수 있는 조건이 됐다.

WAI가 2026년 1월 갱신한 C39 기술 문서는 두 가지 방법을 보여 준다. 먼저 움직이는 효과를 만들고 @media (prefers-reduced-motion: reduce)에서 끄는 방법이 있다. 처음부터 정적인 화면을 만들고 @media (prefers-reduced-motion: no-preference)일 때만 움직임을 더하는 방법도 있다. 두 번째 방법으로 카드를 만든다면 먼저 묻게 된다. 새 카드가 제자리에 나타나는 것보다 공중제비가 더 전하는 정보가 있는가?

C39는 클릭이나 스크롤처럼 사용자의 행동 뒤에 일어나는 CSS 움직임을 다룬다. WAI는 이런 효과가 일부 사람에게 불편함이나 집중 방해를 줄 수 있다고 설명한다. 2018년 성공 기준은 기능과 정보에 꼭 필요한 움직임을 고려한다. 독자는 사이트마다 개인 사정을 설명할 필요 없이 설정에서 자기 뜻을 밝힐 수 있다.

연출을 맡은 쪽은 여전히 사이트이고, 브라우저는 독자의 뜻을 전달한다. 다음 카드는 나타나고 내용은 계속 읽힌다. 독자가 앉아 달라고 했을 때 페이지가 의자에 앉아서도 재미있는 이야기를 할 수 있다면, 좋은 공연은 이미 시작된 것이다.