카드가 옆에서 미끄러져 들어오고 배경은 다른 속도로 움직입니다. 이런 연출을 원하지 않는 사용자가 기기에서 동작 줄이기를 켰다면 페이지도 그 선택을 반영할 필요가 있습니다. 문제는 애니메이션을 모두 없애는 한 줄을 넣었을 때 저장 완료 안내나 펼친 내용까지 함께 사라질 수 있다는 점입니다.
동작을 줄이는 작업은 화면이 움직이는 방식과 사용자가 알아야 할 상태를 분리하는 데서 시작합니다. 이 글에서는 상품 소개 카드와 저장 버튼을 가상 예로 사용합니다. 실제 사용자 실험이나 특정 사이트의 개선 성과를 보고하는 내용은 아닙니다.
reduce는 운영체제에서 전달한 선호입니다
MDN은 prefers-reduced-motion을 기기에서 불필요한 움직임을 줄이도록 설정했는지 감지하는 CSS 미디어 기능으로 설명합니다. reduce일 때 움직임을 없애거나 줄이거나 다른 표현으로 바꿀 수 있습니다. no-preference는 별도 선호가 알려지지 않았다는 뜻이지 사용자가 모든 강한 효과를 좋아한다는 확인은 아닙니다.
가상 사이트에서 설정을 켜면 카드의 이동과 배경의 시차 효과는 끄되, 상품명·현재 선택·저장 결과는 남긴다고 정할 수 있습니다. 단순히 실행 시간을 아주 짧게 줄이는 것보다 어떤 요소가 최종 상태로 나타나야 하는지 명시하는 편이 오류를 찾기 쉽습니다.
| 기능 | 원래 효과 | 동작 축소 상태 |
|---|---|---|
| 상품 카드 등장 | 아래에서 위로 이동하며 표시 | 제자리에서 전체 내용 표시 |
| 섹션 바로가기 | 긴 거리를 부드럽게 스크롤 | 목적지로 즉시 이동하고 문맥 유지 |
| 저장 완료 | 버튼이 튀며 체크 표시 | 정적인 체크와 저장 완료 문장 |
| 파일 처리 중 | 반복 회전 표시 | 처리 중 문장과 실제 완료·오류 상태 |
| 사용자가 재생하는 시연 영상 | 동작 자체가 설명의 대상 | 명확한 재생 제어와 대체 설명 검토 |
기본 화면이 먼저 읽히도록 만듭니다
등장 효과를 만들기 위해 모든 카드를 처음부터 opacity:0으로 숨긴 뒤 애니메이션이 끝나야 보이게 하는 구현이 있습니다. 여기에 animation:none만 적용하면 카드는 영원히 안 보일 수 있습니다. 동작 축소에서는 최종 표시 상태도 함께 지정해야 합니다.
다음 CSS는 읽을 수 있는 상태를 기본값으로 두고, 별도 선호가 없을 때만 작은 등장 효과를 더하는 예입니다. 거리와 시간은 설명용 값이며 어떤 사용자에게도 편안함을 보장하는 수치는 아닙니다.
.feature-card {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.feature-card {
animation: card-enter 180ms ease-out both;
}
@keyframes card-enter {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}기존 코드가 transition으로 이동한다면 그 전환도 별도로 다룹니다. animation만 껐다고 CSS 전환, 자바스크립트 스크롤, 영상 재생까지 멈추는 것은 아닙니다. 전체 선택자에 무조건 같은 값을 덮기보다 효과가 있는 컴포넌트부터 역할을 확인합니다.
저장 결과를 animationend에만 맡기지 않습니다
사용자가 저장을 누른 뒤 화면에서는 카드가 튀고, 그 애니메이션이 끝나는 이벤트에서 “저장 완료”를 표시한다고 가정해 보겠습니다. 애니메이션이 실행되지 않는 조건에서는 완료 문장이 나오지 않을 수 있습니다. 실제 저장 성공과 장식 효과의 종료를 같은 사건으로 묶은 것이 문제입니다.
저장 응답이 확인되면 상태 문장은 즉시 바꾸고, 장식 효과는 별도로 선택해서 실행하는 구조가 좋습니다. 서버 처리가 진행 중이면 진행 중이라고 표시하고, 실패하면 오류와 다시 시도할 경로를 제공합니다. 회전 아이콘을 멈췄다는 이유로 저장이 끝난 것처럼 보이게 해서는 안 됩니다.
비동기 작업에서는 “완료할 때까지 기다리는 상태”와 “로딩처럼 보이는 연출”을 분리합니다. 실제 처리 범위와 화면 문구를 연결하는 사고방식은 문의 전송·수신 단계를 구분하는 글과도 맞닿아 있습니다.
JavaScript에서 시작하는 이동도 설정을 읽습니다
스크립트가 명시적으로 부드러운 스크롤을 요청하면 CSS의 설정만으로 의도대로 바뀌지 않을 수 있습니다. 아래 예시는 실행하는 순간 현재 미디어 질의 값을 읽어 스크롤 방식을 정합니다. 실제 목적지 요소와 호출 위치는 해당 화면의 동작에 맞춰 연결합니다.
const motionPreference = matchMedia('(prefers-reduced-motion: reduce)');
function moveToSection(target) {
target.scrollIntoView({
behavior: motionPreference.matches ? 'instant' : 'smooth',
block: 'start'
});
}이 함수는 스크롤만 수행합니다. 본문 바로가기에서 키보드 초점까지 옮길 필요가 있다면 목적지와 초점 연결을 따로 구현해야 합니다. 스크립트로 지속 실행하는 시차 효과나 캔버스 애니메이션은 질의의 change 이벤트를 듣고 사용자가 중간에 설정을 바꿨을 때 중단·정리하는 처리도 필요합니다.
자동 재생과 사용자 조작으로 시작한 동작을 구분합니다
W3C의 Animation from Interactions는 사용자 조작으로 시작한 비필수 움직임을 끌 수 있게 하는 AAA 기준을 설명합니다. 자동으로 움직이는 콘텐츠는 Pause, Stop, Hide 같은 별도 기준의 적용도 살펴야 합니다. 동작 줄이기 설정 하나를 반영했다고 모든 영상·슬라이더·자동 갱신의 접근성을 충족했다고 판단하지 않습니다.
“브랜드 경험에 중요하다”는 이유만으로 모든 움직임을 필수라고 부를 수도 없습니다. 회전하는 제품을 직접 조작하며 외형을 확인하는 기능이라면 정지 이미지나 단계별 보기로 같은 정보를 전달할 수 있는지 검토합니다. 상품 영상에는 자막·대체 설명·재생 제어처럼 움직임 외의 정보 경로도 필요합니다.
동작이 멈췄는지보다 과업이 남았는지를 봅니다
설정을 켠 채 첫 방문을 시작하고 카드 내용이 처음부터 보이는지 확인합니다. 페이지를 연 상태에서 설정을 바꾸는 경우도 따로 봅니다. 펼침 패널은 내용이 열려야 하고, 저장 버튼은 성공과 실패를 알려야 하며, 바로가기는 목표 위치로 이동해야 합니다. 정적인 화면이 됐다는 이유만으로 과업이 완성된 것은 아닙니다.
검토 메모에는 “애니메이션 제거” 대신 “카드는 제자리 표시, 저장 결과는 텍스트로 유지, 긴 스크롤은 즉시 이동”처럼 기능별 변경을 적습니다. 움직임을 줄이면서도 무엇을 선택했고 지금 어떤 상태인지 알 수 있어야 사용자의 설정을 존중하는 화면이 됩니다.
참고한 공식 자료
- MDN: prefers-reduced-motion
- W3C: Animation from Interactions
- W3C: Pause, Stop, Hide
- MDN: Element.scrollIntoView
원문 확인일: 2026년 10월 4일. 수치와 화면 구성은 설명용 예제이며 실제 고객 사이트의 측정 결과가 아닙니다.