스크롤 기반 애니메이션 성능에 관한 우수사례

Yuriko Hirota
Yuriko Hirota

스크롤 기반 애니메이션의 새로운 기능은 무엇인가요?

스크롤 기반 애니메이션은 사용자의 스크롤 위치에 의해 트리거되어 웹사이트 또는 웹 애플리케이션에 상호작용성과 시각적 관심을 더하는 방법입니다. 이렇게 하면 사용자의 관심을 끌고 웹사이트를 시각적으로 더 매력적으로 만들 수 있습니다.

이전에는 스크롤 기반 애니메이션을 만드는 유일한 방법은 기본 스레드의 스크롤 이벤트에 응답하는 것이었습니다. 이로 인해 다음과 같은 두 가지 큰 문제가 발생했습니다.

따라서 스크롤과 동기화되는 성능이 우수한 스크롤 기반 애니메이션을 만들기가 불가능하거나 매우 어렵습니다.

이제 CSS 또는 JavaScript에서 사용할 수 있는 스크롤 기반 애니메이션을 지원하는 새로운 API 집합이 도입됩니다. 이 API는 최대한 적은 수의 기본 스레드 리소스를 사용하려고 하므로 스크롤 기반 애니메이션을 훨씬 더 쉽게 구현할 수 있고 훨씬 더 원활하게 실행할 수 있습니다. 스크롤 기반 애니메이션 API는 현재 다음 브라우저에서 지원됩니다.

브라우저 지원

  • Chrome: 115. <ph type="x-smartling-placeholder">
  • Edge: 115. <ph type="x-smartling-placeholder">
  • Firefox: 플래그 뒤에 있습니다.
  • Safari: 지원되지 않음 <ph type="x-smartling-placeholder">

소스

이 도움말에서는 새로운 접근 방식을 기존 JavaScript 기법과 비교하여 새 API를 사용하면 얼마나 쉽고 부드럽게 스크롤 기반 애니메이션을 만들 수 있는지 보여줍니다.

스크롤 기반 애니메이션 CSS API와 기존 JavaScript 비교

다음 예제 진행률 표시줄은 클래스 JavaScript 기법을 사용하여 빌드되었습니다.

문서는 scroll 이벤트가 발생할 때마다 응답하여 사용자가 스크롤한 scrollHeight의 비율을 계산합니다.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

다음 데모는 CSS와 함께 새 API를 사용하는 동일한 진행률 표시줄을 보여줍니다.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

새로운 animation-timeline CSS 기능은 스크롤 범위의 위치를 진행률(%)로 자동 변환하므로 모든 작업을 처리합니다.

여기에서 흥미로운 부분을 하나 살펴보겠습니다. 두 웹사이트 버전에서 모두 매우 어려운 계산을 실행했는데, 이로 인해 기본 스레드 리소스의 대부분이 소모되었습니다. 

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

예상하셨을 수도 있겠지만, 기존 JavaScript 버전은 기본 스레드 리소스 접합으로 인해 버벅거림과 속도가 느려집니다. 반면 CSS 버전은 과도한 JavaScript 작업의 영향을 전혀 받지 않으며 사용자의 스크롤 상호작용에 응답할 수 있습니다.

를 참고하세요.

다음 스크린샷과 같이 DevTools의 CPU 사용량은 완전히 다릅니다.

기본 스레드 비교

다음 데모는 CyberAgent에 의해 생성된 스크롤 기반 애니메이션의 애플리케이션을 보여줍니다. 스크롤할 때 사진이 페이드인되는 것을 확인할 수 있습니다.

새로운 스크롤 기반 애니메이션 JavaScript API와 기존 JavaScript 비교

새로운 API의 이점은 CSS에 국한되지 않습니다. 자바스크립트를 사용하여 부드러운 스크롤 기반 애니메이션을 만들 수도 있습니다. 다음 예를 살펴보세요.

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

이렇게 하면 자바스크립트만 사용하여 이전 CSS 데모에서 보여준 것과 동일한 진행률 표시줄 애니메이션을 만들 수 있습니다. 기본 기술은 CSS 버전과 동일합니다. 이 API는 기본 스레드 리소스를 최대한 적게 사용하려고 하므로 기존 JavaScript 접근 방식에 비해 애니메이션이 훨씬 더 부드럽게 재생됩니다.

또한 이 새로운 API는 기존 Web Animations API (WAAPI) 및 CSS Animations API와 함께 작동하여 선언적 스크롤 기반 애니메이션을 사용 설정합니다.

데모 및 리소스 더보기

스크롤 기반 애니메이션의 다양한 구현은 이 데모 사이트에서 확인할 수 있습니다. CSS 및 JavaScript에서 새로운 API를 사용하는 데모를 비교할 수 있습니다.

새로운 스크롤 기반 애니메이션에 대해 자세히 알아보려면 이 도움말과 I/O 2023 강연을 확인하세요.