운영체제에는 “동작 줄이기” 설정이 있습니다. 이 설정을 켜는 사람들이 있는 이유는 취향이 아니라 증상입니다. 큰 면적이 움직이거나 화면이 미끄러지듯 흐르는 연출은 어떤 사람들에게 어지러움 · 메스꺼움 · 두통을 일으킵니다.
여기에 더해 실무적인 이유도 있습니다. 원격 데스크톱, 저전력 모드, 회사에서 일괄 설정한 환경에서도 이 설정이 켜져 있습니다. 즉 생각보다 많은 사람이 그 상태로 우리 화면을 봅니다.
가장 위험한 실수 — 콘텐츠가 함께 사라진다
이 항목에서 나는 사고는 대개 접근성을 신경 쓴 코드에서 납니다. 진입 애니메이션을 이렇게 만드는 경우가 많기 때문입니다 — 요소를 투명하게 시작시켜 두고, 스크롤이 닿으면 서서히 나타나게 하고, 그 애니메이션 전체를 “모션 축소가 아닐 때” 조건 안에 넣습니다.
모션 축소가 켜지면 애니메이션이 실행되지 않습니다. 그런데 투명하게 시작시켜 둔 상태는 그대로 남습니다. 결과는 애니메이션이 없는 화면이 아니라 내용이 보이지 않는 화면입니다.
규칙은 한 줄입니다. 기본값이 최종 상태여야 합니다. 애니메이션은 그 위에 얹는 장식이고, 걷어 냈을 때 남는 것이 완성된 화면이어야 합니다. 우리 사이트의 스크롤 연출도 같은 규칙으로 만들었습니다 — 지원하지 않는 브라우저와 모션 축소 사용자는 “이미 완료된” 화면을 봅니다.
줄인다는 것은 없앤다는 뜻이 아닙니다
설정 이름이 “동작 줄이기” 인 데에는 이유가 있습니다. 전부 없앨 필요는 없고, 남겨야 하는 것도 있습니다 — 무엇이 열렸는지, 어디로 이동했는지 같은 상태 변화의 신호는 오히려 없으면 혼란스럽습니다.
자동 재생 슬라이드는 설정과 무관하게 재검토할 가치가 있습니다. 읽는 도중에 내용이 바뀌면 누구에게나 방해가 되고, 최소한 멈춤 수단은 있어야 합니다.
시안 단계에서 정해 둘 것
디자이너가 할 일은 간단합니다. 시안을 그릴 때 정지 상태를 먼저 완성하고, 모션은 그 위에 주석으로 붙입니다. “이 카드는 아래에서 올라오며 나타난다” 는 설명은 정지 상태 시안 옆에 있을 때만 안전합니다 — 그래야 구현하는 쪽도 무엇이 최종 상태인지 헷갈리지 않습니다.
스크롤 연출을 코드로 어떻게 다루는지는 테마 · 플러그인 아카이브에서 더 다루고, 실제 작업에서 어떤 순서로 검증하는지는 작업 과정에 정리돼 있습니다.
다음 회차
다음 회차는 제목 계층입니다. 크기로 정한 제목과 구조로 정한 제목이 어긋나면, 화면의 읽는 순서와 검색 색인이 함께 흐려집니다.