게임 정보와 장식 효과를 구분하세요
CSS의 prefers-reduced-motion 미디어 기능으로 사용자 설정을 감지하고, 필요하면 스크립트로 구현한 효과에도 같은 설정을 적용하세요. 예를 들어 반복되는 배경 확대 효과는 없애되 성공한 동작을 알리는 짧은 색상이나 텍스트 표시는 유지할 수 있습니다. 동작을 줄인 뒤 필요한 정보까지 눈에 띄지 않게 사라지지 않도록 하세요. 플레이어는 무엇이 바뀌었고 다음에 무엇을 해야 하는지 여전히 이해할 수 있어야 합니다.
모든 애니메이션을 기계적으로 제거하지 마십시오. 움직이는 표적은 게임 플레이일 수 있지만 충돌 후 카메라 흔들림은 장식일 수 있습니다. 위치나 타이밍에 필요한 동작을 유지하고 가능한 경우 또 다른 명확한 신호를 제공합니다. MDN은 기본 설정이 불필요한 모션을 줄이거나 교체하도록 요청한다고 설명합니다.
전환 및 반복 효과 테스트
메뉴, 로딩, 카메라 전환, 승패 상태, 장기적으로 반복되는 효과 등 전체 경험에 걸쳐 모션을 검토합니다. 하나의 CSS 애니메이션만 비활성화하는 설정은 JavaScript 또는 캔버스 모션을 놓칠 수 있습니다. 렌더링 레이어 전반에 걸쳐 기본 설정을 일관되게 유지하고 게임이 활성화된 동안 시스템 설정이 변경되는 경우 갑작스러운 변경을 피하십시오.
운영 체제에서 동작 줄이기 설정을 켜고 플레이어가 여전히 목표를 찾고, 명중을 알아보고, 전환을 이해할 수 있는지 확인하세요. CSS, 스크립트, 캔버스 효과를 함께 테스트하세요. MDN은 이 미디어 기능과 설정이 활성화되었을 때 대체 스타일을 제공하는 방법을 설명합니다.
브라우저 게임의 움직임 감소 관련 질문
움직임이 줄어들면 게임의 모든 움직임이 중단되어야 합니까?
아니요. 플레이하거나 상태를 전달하는 데 꼭 필요한 움직임도 있습니다. 불필요한 효과는 줄이거나 다른 표시로 대체하되, 타이밍과 위치, 행동 결과를 이해할 수 있는 명확한 단서는 유지하세요.
페이지는 기본 설정을 어떻게 감지합니까?
CSS는 prefers-reduced-motion 미디어 기능을 사용할 수 있습니다. 스크립트나 캔버스로 그리는 효과도 이에 맞는 설정 경로를 사용해야 시각적 표현이 일관되게 유지됩니다.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보