prefers-reduced-motion 미디어 쿼리 활용법

prefers-reduced-motion은 사용자가 OS나 브라우저 설정을 통해 애니메이션과 같은 시각적 효과를 최소화하려는 의도를 나타냅니다. 이 미디어 쿼리를 활용하면 특정 사용자 환경에 맞춘 콘텐츠를 제공할 수 있어 접근성을 크게 개선할 수 있습니다.

주요 사용 사례

1. 사용자 접근성 개선: 모션 효과로 인해 어지러움이나 불편함을 느끼는 사용자 보호.
2. 웹 성능 최적화: 불필요한 애니메이션을 줄여 리소스 사용 감소.
3. 사용자 환경 맞춤화: 개인 설정을 존중한 사용자 중심 디자인.

---

기본 문법

@media (prefers-reduced-motion: reduce) {
  /* 애니메이션 최소화 또는 제거 */
}

@media (prefers-reduced-motion: no-preference) {
  /* 기본 애니메이션 유지 */
}

• reduce: 사용자가 애니메이션을 줄이길 원함.
• no-preference: 기본 애니메이션 유지.

---

애니메이션을 제어하는 방법

1. CSS로 애니메이션 제거

애니메이션 효과가 불필요한 환경에서 이를 비활성화하려면 아래 코드를 활용합니다.

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

2. 특정 애니메이션에만 적용하기

애니메이션을 전체적으로 비활성화하는 대신, 특정 효과만 줄일 수도 있습니다.

@media (prefers-reduced-motion: reduce) {
  .banner {
    animation: fade-in 2s ease-in-out; /* 애니메이션 유지 */
  }

  .scroll-effect {
    animation: none; /* 애니메이션 제거 */
  }
}

---

JavaScript와 결합한 활용 사례

1. 사용자 환경 감지

JavaScript를 사용해 prefers reduced motion 상태를 감지하고, 애니메이션을 동적으로 제어할 수 있습니다.

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (prefersReducedMotion) {
  console.log('애니메이션을 줄이는 환경입니다.');
  // 애니메이션 관련 설정을 변경합니다.
} else {
  console.log('애니메이션에 대한 제한이 없습니다.');
}

2. 애니메이션 실행 여부 동적 설정

const element = document.querySelector('.animation');

if (prefersReducedMotion) {
  element.style.animation = 'none';
} else {
  element.style.animation = 'slide-in 3s ease-in-out';
}

---

활용 예제

애니메이션 최소화된 페이지

사용자의 환경 설정에 따라 배너 애니메이션을 활성화하거나 비활성화합니다.

<div class="banner">환영합니다!</div>

<style>
  .banner {
    animation: slide-in 2s ease-in-out;
  }

  @media (prefers-reduced-motion: reduce) {
    .banner {
      animation: none;
    }
  }

  @keyframes slide-in {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
</style>

---

모션을 최소화할 때 주의할 점

1. 대체 콘텐츠 제공: 애니메이션이 제거되더라도 주요 정보 전달이 가능해야 합니다.
2. 단순한 시각적 효과 유지: 애니메이션을 완전히 없애기보다는 최소화하거나 단순화하는 것이 바람직합니다.
3. 사용자 환경 테스트: 다양한 설정과 디바이스에서 동작을 확인하세요.

---

prefers reduced motion 미디어 쿼리는 사용자의 환경 설정을 존중하며 접근성을 크게 향상시킬 수 있는 도구입니다. 단순히 애니메이션을 줄이는 데 그치지 않고, 사용자 경험을 최적화하는 전략으로 활용해 보세요. 이를 통해 모든 사용자가 편안하게 이용할 수 있는 웹사이트를 구축할 수 있습니다.