Google의 호스트인 Una Kravets와 함께 브라우저에서 디자인하기에 오신 것을 환영합니다. 상호작용은 디지털 환경에서 사용자가 이해하는 데 효과적일 수 있지만, 일부 사용자가 혼란스러워하고 좌절감을 느끼게 할 수도 있습니다. 이는 의도된 효과와는 정반대입니다.
이제 이러한 상황을 피할 수 있는 방법과 귀여운 애니메이션 SVG와 버튼 마우스 오버를 포함하는 동시에 너무 많은 애니메이션을 볼 때 약간 어지러울 수 있는 사용자가 사이트를 즐길 수 있도록 하는 방법에 대해 이야기해 보겠습니다. 'prefers-reduced-motion' 미디어 쿼리를 사용하여 웹사이트의 애니메이션을 점진적으로 개선하는 방법과 간단한 '애니메이션 줄이기' 스위치를 빌드하는 방법을 보여드리겠습니다.
링크:
- 미디어 쿼리 5 → https://goo.gle/2RVQxLw
- 기본 카드 플립 데모 → https://goo.gle/3mSd1vf
- 축소된 모션 환경설정 데모 →https://goo.gle/2G9hgl8
- 모션 감소 체크박스 데모 → https://goo.gle/306S1XM
브라우저에서 디자인하기 → https://goo.gle/2NeLxjI
Chrome 개발자 구독하기 → https://goo.gle/ChromeDevs