모션 감소

화면이 미끄러지고 확대되는 움직임은 대체로 이해를 돕습니다. 어디에서 왔고 어디로 갔는지를 말 없이 보여 주기 때문입니다. 문제는 이 움직임이 모두에게 같게 느껴지지 않는다는 데 있었습니다.

균형 감각을 담당하는 기관에 이상이 있는 사람은 화면이 크게 움직일 때 실제로 어지럼과 메스꺼움을 느낍니다. 편두통이 있는 사람도 배경이 스크롤과 다른 속도로 흐르는 화면에서 두통이 심해집니다. 겪는 쪽에서는 제품을 못 쓸 수준인데, 만드는 쪽에서는 화면이 잘 도니 문제로 잡히지 않았습니다.

그래서 운영체제가 이 사정을 대신 알리게 했습니다. 사용자가 설정에서 동작 줄이기를 한 번 켜 두면 제품마다 다시 부탁하지 않아도 되고, 제품은 그 표시를 읽어 움직임을 줄입니다.

운영체제에 켜 둔 값을 화면 쪽에서 읽습니다. 웹에서는 prefers-reduced-motion 조건으로 확인하고, 켜져 있을 때 적용할 규칙을 따로 적어 둡니다.

줄인다는 것이 없애는 것은 아닙니다. 상태가 바뀌었다는 사실은 여전히 보여야 하므로 대개 세 가지로 바꿉니다.

1. 위치 변화를 밝기 변화로 바꿉니다. 옆에서 밀려 들어오던 창을 제자리에서 서서히 드러나게 합니다.
2. 크기 변화와 회전을 뺍니다. 화면 넓이의 큰 부분이 움직이는 것이 어지럼의 주된 원인이라, 작은 마이크로 인터랙션은 대개 남겨 둡니다. 마이크로 인터랙션은 작은 조작에 붙는 짧은 반응을 말합니다.
3. 저절로 반복되는 움직임을 멈춥니다. 스크롤과 다른 속도로 흐르는 배경, 자동으로 넘어가는 배너처럼 사용자가 시작하지 않은 움직임이 여기 해당합니다.

기본값을 어디에 두느냐도 결정 사항입니다. 움직임을 넣고 설정이 켜진 사람에게만 줄이는 쪽이 일반적이지만, 전체 화면이 크게 움직이는 연출은 아예 안 쓰는 팀도 있습니다.

"이 화면 전환 모션 감소 켜면 어떻게 되는지 확인했어요?"

설정을 켠 상태에서도 화면이 제대로 도는지 물은 것입니다.

"패럴랙스는 모션 감소에서 통째로 끄고 배경을 고정하기로 했습니다."

배경이 다른 속도로 흐르는 연출을 조건부로 빼겠다는 뜻입니다.

"줄이라고 했는데 아예 사라져서 저장됐는지 알 수가 없어요."

움직임을 없애면서 상태 변화 신호까지 지워졌다는 지적입니다.

페이지덱은 문서 목록에서 카드가 순서대로 올라오는 연출을 넣었다가 이 설정을 붙였습니다. 민서가 설정을 켜고 보니 카드가 아무 표시 없이 한 번에 나타나, 저장이 끝난 것인지 화면이 덜 그려진 것인지 구분되지 않았습니다. 태오가 위치 변화만 빼고 밝기 변화는 남기는 쪽으로 고쳤습니다. 이 항목은 접근성 점검 목록에 들어가 있어 새 연출을 넣을 때마다 함께 확인합니다.