접근성을 위한 미디어 쿼리 사용하기
CSS 미디어 쿼리는 장애가 있는 사용자들이 여러분의 웹사이트를 더 잘 경험할 수 있도록 도와주는 데 사용될 수 있어요.
이 글에서 다룰 내용
감소된 모션 (Reduced Motion)
깜빡이고 번쩍이는 애니메이션은 주의력 결핍 과잉행동 장애(ADHD)와 같은 인지적 문제를 가진 사람들에게 문제가 될 수 있어요. 게다가, 특정 종류의 모션은 전정 장애(vestibular disorders, 귀의 평형감각 관련 질환), 간질, 편두통, 그리고 암점 민감성(Scotopic sensitivity, 특정 시각 패턴에 대한 민감성)을 가진 사람들에게 유발 요인이 될 수 있답니다. 사용자의 선호도에 따라 애니메이션을 줄이거나 완전히 끄는 것은 배터리가 부족하거나 저사양 기기를 사용하는 사용자들에게도 도움이 될 수 있어요.
prefers-reduced-motion 미디어 쿼리는 운영체제의 접근성 설정에서 모션을 줄이도록 설정한 사용자들에게 더 적은 애니메이션과 전환 효과를 제공하는 경험을 가능하게 해줘요. 이 쿼리는 두 가지 가능한 값을 가지고 있어요:
no-preference
사용자가 시스템에 특별한 선호도를 설정하지 않았음을 나타내요.
reduce
사용자가 시스템에 움직임이나 애니메이션의 양을 최소화하는 인터페이스를 선호한다고 알렸음을 나타내요. 가능하면 필수적이지 않은 모든 움직임이 제거되는 수준까지 말이죠.
💡 강사의 팁:
실무에서는prefers-reduced-motion을 항상 고려하는 것이 좋아요. 특히 복잡한 애니메이션이나 페이지 전환 효과를 구현할 때는 필수적이에요. 사용자 경험뿐만 아니라 접근성 측면에서도 매우 중요한 기능이랍니다. 저는 항상 프로젝트 초기에 이 미디어 쿼리를 전역 스타일에 포함시키는 습관을 들이고 있어요.
예제
이 예제는 여러분이 접근성 설정에서 모션 감소(Reduce Motion)를 켜지 않는 한 성가신 애니메이션을 보여줘요.
HTML
<div class="animation">animated box</div>CSS
.animation {
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}prefers-reduced-motion의 값은 reduce이지, "none"이 아니에요. 이 설정은 모든 애니메이션이 제거되어야 한다는 의미는 아니에요. 그런 건 * {animation: none !important;}로 달성할 수 있겠죠. 오히려 사용자는 사용자 상호작용에 의해 트리거되는 것을 포함한 모션 애니메이션이 비활성화되기를 기대해요. 단, 그 애니메이션이 기능이나 전달되는 정보에 필수적인 경우는 예외랍니다 (WCAG: 상호작용으로부터의 애니메이션 참조).
💡 강사의 팁:
실전에서 이 기능을 테스트하려면 운영체제의 설정을 변경해야 해요:
- Windows: 설정 > 접근성 > 시각 효과 > 애니메이션 효과
- macOS: 시스템 환경설정 > 손쉬운 사용 > 디스플레이 > 동작 줄이기
- iOS/iPadOS: 설정 > 손쉬운 사용 > 동작 > 동작 줄이기
- Android: 설정 > 접근성 > 애니메이션 삭제
개발할 때 이 설정을 자주 켜고 끄면서 양쪽 경험을 모두 확인하는 것이 중요해요!
참고 자료
prefers-contrast: 사용자의 대비 선호도에 따라 페이지 스타일을 조정하기 위한 것prefers-reduced-transparency: 사용자가 투명도 감소를 선호하는지 확인prefers-color-scheme: 사용자의 색상 테마 선호도(라이트/다크 모드) 확인inverted-colors: 사용자가 색상 반전을 사용하는지 확인- 동작 민감성을 고려한 감소된 모션 디자인하기
💡 강사의 팁:
위에 나열된 미디어 쿼리들은 모두 현대적인 웹 접근성의 핵심 요소들이에요. 특히prefers-color-scheme은 다크 모드 구현에 필수적이고,prefers-contrast는 시각 장애가 있는 사용자들을 위해 매우 중요해요.제 경험상, 이러한 접근성 기능들을 처음부터 고려해서 개발하는 것이 나중에 추가하는 것보다 훨씬 효율적이에요. 또한, 이런 기능들은 단순히 장애가 있는 사용자만을 위한 것이 아니라, 밝은 햇빛 아래에서 스마트폰을 사용하거나, 야간에 눈의 피로를 줄이고 싶어하는 등 모든 사용자에게 이점을 제공한답니다. 이를 "접근성의 연쇄 효과(accessibility cascade)"라고 부르기도 해요!
이 페이지가 도움이 되었나요?
이 페이지는 2025년 11월 7일에 MDN 기여자들에 의해 마지막으로 수정되었어요.
