[javascript] 애니메이션 성능 최적화 방법

05 Dec 2023

javascript

애니메이션은 웹사이트나 앱에서 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 그러나 과도한 애니메이션은 성능 저하를 일으킬 수 있으며, 사용자의 기기에서 끊김 현상이 발생할 수 있습니다. 이 때문에 애니메이션의 성능을 최적화하는 것은 매우 중요합니다.

이번 블로그에서는 애니메이션 성능을 최적화하기 위해 고려해야 할 몇 가지 방법을 살펴보겠습니다.

1. requestAnimationFrame 사용하기

requestAnimationFrame은 브라우저가 다음 애니메이션 프레임을 그리기 전에 콜백 함수를 실행하도록 스케줄링하는 메소드입니다. 이는 브라우저의 내부 최적화에 의해 최적의 성능으로 애니메이션을 처리할 수 있도록 합니다.

function animate() {
  // 애니메이션 로직 작성

  requestAnimationFrame(animate);
}

animate();

2. CSS Transitions 및 Transform 사용하기

애니메이션을 구현할 때 CSS Transitions 및 Transform을 사용하는 것이 성능 면에서 좋은 선택입니다. CSS Transitions은 브라우저가 하드웨어 가속을 사용하여 애니메이션을 부드럽게 처리할 수 있도록 도와줍니다. Transform을 사용하면 GPU에 의해 하드웨어 가속되는 효과가 있습니다.

.element {
  transition: transform 0.3s ease;
  transform: translateX(100px);
}

3. 애니메이션 요소를 합성 계층으로 이동하기

애니메이션을 하는 동안 레이아웃이나 페인팅을 수행할 경우 성능 저하가 발생할 수 있습니다. 이를 방지하기 위해 애니메이션 요소를 합성 계층으로 이동시키는 것이 좋습니다. 합성 계층에서 애니메이션을 처리하면 GPU가 직접 렌더링하여 성능이 향상됩니다.

.element {
  will-change: transform;
  transform: translateX(100px);
}

4. 애니메이션 중인 요소 수 줄이기

동시에 많은 요소가 애니메이션 중인 경우 성능에 부정적인 영향을 미칠 수 있습니다. 따라서 가능한 경우 동시에 애니메이션 중인 요소 수를 줄이는 것이 좋습니다. 애니메이션 중인 요소가 많을 경우 애니메이션의 FPS가 낮아질 수 있습니다.

5. 애니메이션 시간 제어하기

애니메이션의 FPS(frame per second)를 낮추는 것은 성능 최적화에 도움이 될 수 있습니다. requestAnimationFrame을 사용하여 애니메이션 주기를 조절하거나, 애니메이션 시간을 줄이는 등의 방법으로 애니메이션의 성능을 개선할 수 있습니다.

결론

애니메이션 성능을 최적화하기 위해서는 requestAnimationFrame을 사용하여 애니메이션을 스케줄링하고, CSS Transitions 및 Transform을 활용하여 하드웨어 가속을 이용하는 것이 좋습니다. 또한 애니메이션 요소를 합성 계층으로 이동시키고, 동시에 애니메이션 중인 요소 수를 제한하여 성능을 향상시킬 수 있습니다.

참고 자료: