The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

애니메이션

애니메이션은 매력적인 웹 애플리케이션과 사이트를 만드는 주요 수단입니다. 사용자는 반응성이 뛰어난 대화형 사용자 인터페이스를 기대합니다. 하지만 인터페이스에 애니메이션을 적용하는 것은 그다지 간단하지 않습니다. 애니메이션의 적용 대상, 시간 및 느낌은 어떻게 하면 좋을까요?

TL;DR

  • 애니메이션을 프로젝트에 생명력을 불어넣는 수단으로 사용하세요.
  • 애니메이션은 사용자 상호작용을 지원해야 합니다.
  • 각 속성의 비용은 다르므로 어떤 속성에 애니메이션을 적용할지 주의해서 결정하세요.

애니메이션을 적용할 적합한 항목 선택

뛰어난 애니메이션은 사용자에게 즐거움을 선사하고 프로젝트에 대한 몰입도를 높여줍니다. 너비, 높이, 위치, 색 또는 배경 등 원하는 모든 것에 애니메이션을 적용할 수 있지만, 잠재적 성능 병목 현상과 애니메이션이 애플리케이션의 개성에 어떤 영향을 주게 될지 고려해야 합니다. 버벅거리거나 잘못 선택한 애니메이션은 사용자에게 거부감을 줄 수 있으므로, 애니메이션은 성능과 적합성을 모두 갖추어야 합니다.

애니메이션을 사용하여 상호작용 지원

애니메이션을 만들 수 있다는 이유로 애니메이션을 적용하지 마세요. 사용자에게 방해가 되고 성가실 수 있습니다. 대신 효율적으로 배치된 애니메이션을 사용하여 사용자 상호작용을 _강화_하세요. 사용자가 메뉴 아이콘을 누르거나, 스와이프하여 탐색 창을 표시하거나, 버튼을 누르는 경우, 미묘한 후광이나 바운스 효과를 사용하여 상호작용을 승인하세요. 사용자의 활동을 불필요하게 방해하는 애니메이션을 피하세요.

비용이 많이 드는 애니메이션 속성 피하기

잘못 배치된 애니메이션보다 나쁜 것은 페이지를 버벅거리게 만드는 애니메이션입니다. 이 애니메이션 유형은 사용자에게 좌절감과 불만을 주며 애니메이션이 아예 없기를 바랄 것입니다.

일부 속성은 다른 것보다 변경하는 데 더 많은 비용이 들고 따라서 버벅거리게 만듭니다. 예를 들어, 요소의 box-shadow를 변경하려면 가령 텍스트 색상을 변경하는 것보다 휠씬 비싼 페이트 작업이 필요합니다. 마찬가지로, 요소의 width를 변경하는 것은 대개 transform을 변경하는 것보다 휠씬 많은 비용이 듭니다.

애니메이션 및 성능 가이드에서 애니메이션의 성능 고려사항에 대해 많은 정보를 얻을 수 있지만, TL;DR을 원하면 변형 및 불투명도를 고수하고 will-change를 사용하세요. 주어진 속성 애니메이션에 의해 어떤 작업이 트리거되는지 정확히 알고 싶은 경우 CSS 트리거를 참조하세요.