스마트폰이나 PC에서 '동작 줄이기(애니메이션 줄이기)' 설정을 켠 사용자에게는 CSS의 prefers-reduced-motion 미디어 쿼리로 움직임을 빼 줄 수 있습니다.
화려한 등장 효과나 패럴랙스를 넣은 홈페이지에서 "보다 보면 어지럽다"는 의견이 나왔다면, 이 설정 하나로 디자인은 그대로 두고 필요한 사람에게만 차분한 화면을 보여 줄 수 있습니다.

1. CSS 애니메이션은 미디어 쿼리로 끄기

평소처럼 애니메이션을 만들어 두고, @media (prefers-reduced-motion: reduce) 안에서만 꺼 주면 됩니다. 이때 같이 챙길 것이 scroll-behavior: smooth입니다. 메뉴를 누를 때 화면이 길게 미끄러지는 부드러운 스크롤도 이 사용자들에게는 불편한 움직임이라, 함께 auto로 돌려 두는 편이 좋습니다.

/* 기본: 모든 사용자에게 보이는 애니메이션 */
.hero-title {
  animation: slideUp 0.8s ease-out both;
}
html { scroll-behavior: smooth; }

/* 기기에서 '동작 줄이기'를 켠 사용자 */
@media (prefers-reduced-motion: reduce) {
  .hero-title {
    animation: none;
  }
  html { scroll-behavior: auto; }
}

전부 없애기 부담스럽다면 이동·확대 효과만 빼고 투명도(opacity) 전환은 짧게 남기는 방법도 있습니다. 문제가 되는 것은 대개 크게 움직이는 효과이고, 은은하게 나타나는 정도는 괜찮다는 경우가 많습니다.

2. 자바스크립트 슬라이더·자동 재생은 matchMedia로

메인 배너 슬라이더처럼 스크립트로 움직이는 요소는 CSS만으로는 멈추지 않습니다. window.matchMedia로 설정을 읽어서 자동 재생 여부를 정해 주세요.

// 슬라이더 자동 재생 전에 설정 확인
var mq = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
);

if (!mq.matches) {
  slider.autoplay.start();
}

// 사용 중에 설정을 바꾼 경우도 반영
mq.addEventListener('change', function (e) {
  if (e.matches) slider.autoplay.stop();
});

3. 적용했는지 확인하는 방법

기기 설정을 매번 바꿀 필요는 없습니다. 크롬 개발자 도구에서 Rendering 패널 → Emulate CSS media feature prefers-reduced-motion을 reduce로 바꾸면 바로 확인할 수 있습니다. 점검할 때는 아래 항목을 한 번씩 보시면 됩니다.

• 첫 화면 등장 효과, 스크롤할 때 튀어나오는 효과가 멈추는지
• 메인 배너가 자동으로 넘어가지 않는지, 수동 넘김은 정상인지
• 앵커 메뉴를 눌렀을 때 바로 이동하는지
• 애니메이션이 꺼진 상태에서도 글자와 버튼이 제자리에 다 보이는지

마지막 항목이 의외로 자주 놓칩니다. 처음에 opacity: 0으로 숨겼다가 애니메이션으로 나타나게 만든 요소는, 애니메이션만 끄면 영영 안 보일 수 있습니다. 끌 때는 최종 상태(보이는 상태)를 함께 지정해 주세요.