동작 감소 설정

개념 이해하기

일부 사용자는 큰 이동과 반복 애니메이션에서 어지럼증이나 집중 어려움을 겪습니다. 기본 UI가 애니메이션 없이도 이해되게 만든 뒤, prefers-reduced-motion:reduce에서 장식 이동과 자동 스크롤을 제거하거나 매우 짧게 줄입니다.

이번 예제의 출발점은 @media (prefers-reduced-motion: reduce) { ... }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.

상태와 조작 가능성을 누구나 알아볼 수 있게 표현할 때 필요한 규칙입니다. 색상과 움직임은 사용자 설정, 키보드 포커스와 명도 대비를 함께 확인하세요.

처음에는 예제를 그대로 확인한 다음 운영체제의 동작 감소 설정을 켜고 hover 결과를 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.