액세스할 수 있는 애니메이션 - 브라우저에서 디자인하기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
Google의 호스트인 Una Kravets와 함께 브라우저에서 디자인하기에 오신 것을 환영합니다. 상호작용은 디지털 환경에서 사용자가 이해하는 데 효과적일 수 있지만, 일부 사용자가 혼란스러워하고 좌절감을 느끼게 할 수도 있습니다. 이는 의도된 효과와는 정반대입니다.
이제 이러한 상황을 피할 수 있는 방법과 귀여운 애니메이션 SVG와 버튼 마우스 오버를 포함하는 동시에 너무 많은 애니메이션을 볼 때 약간 어지러울 수 있는 사용자가 사이트를 즐길 수 있도록 하는 방법에 대해 이야기해 보겠습니다. 'prefers-reduced-motion' 미디어 쿼리를 사용하여 웹사이트의 애니메이션을 점진적으로 개선하는 방법과 간단한 '애니메이션 줄이기' 스위치를 빌드하는 방법을 보여드리겠습니다.
링크:
브라우저에서 디자인하기 → https://goo.gle/2NeLxjI
Chrome 개발자 구독하기 → https://goo.gle/ChromeDevs
arrow_back 모든 에피소드로 돌아가기
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2020-09-28(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2020-09-28(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2020-09-28(UTC)"]]