디자인 아틀라스
EN
◉ 접근성

모션 줄이기

Reduced Motion

전정 장애가 있는 사용자를 위해 OS 설정이 동작 줄임일 때 애니메이션을 억제하는 CSS 미디어 쿼리.

다른 이름: prefers-reduced-motion
···
html
<div class="stage">
  <div class="pane">
    <div class="tag">no-preference</div>
    <div class="box b1"></div>
  </div>
  <div class="pane">
    <div class="tag">reduce</div>
    <div class="box b2"></div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 10.5px/1 ui-monospace,monospace;color:var(--muted)}
.box{width:26%;aspect-ratio:1;border-radius:12px;background:var(--accent)}
.b1{animation:bounce 1.8s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes bounce{0%,100%{transform:translateY(30%) scale(.7) rotate(0deg);opacity:.5}50%{transform:translateY(-30%) scale(1.15) rotate(180deg);opacity:1}}
.b2{animation:fade 1.8s ease-in-out infinite}
@keyframes fade{0%,100%{opacity:.35}50%{opacity:1}}

큰 움직임(패럴랙스, 확대·축소, 흔들림)은 전정 장애가 있는 사용자에게 어지럼증·메스꺼움을 유발할 수 있습니다. macOS·iOS·Windows·Android는 모두 시스템 설정에 "동작 줄이기"가 있고, `@media (prefers-reduced-motion: reduce)`로 그 설정을 CSS에서 읽을 수 있습니다.

완전히 애니메이션을 없애기보다는 **거리와 크기를 줄이는** 방향이 낫습니다 — 슬라이드 대신 페이드, 큰 확대 대신 즉시 전환. 로딩 스피너처럼 진행 상태를 알려주는 기능적으로 중요한 움직임까지 지우면 오히려 정보가 사라지니 구분이 필요합니다.

데모 왼쪽은 기본 애니메이션(크게 튀어오르고 회전), 오른쪽은 같은 상태 변화를 `prefers-reduced-motion: reduce`로 감지해 제자리에서 짧게 페이드만 하는 버전입니다.

언제 쓰나

인터페이스 전체를 감싸는 공통 트랜지션 유틸에 미디어쿼리를 한 번만 넣으면 모든 곳에 적용됩니다. 개별 컴포넌트마다 따로 챙기지 말고 토큰·유틸 레벨에서 해결하세요.