웹에서 애니메이션은 사용자 경험을 향상하고, 사용자의 관심을 끌며, 사용자에게 시각적 피드백을 제공하는 데 사용됩니다. 이런 애니메이션을 생성하는 데는 크게 두 가지 접근 방법이 있다: CSS 애니메이션과 JavaScript 애니메이션이다. 이 두 가지 방법은 각각 장점과 단점이 있으며, 프로젝트 정책에 따라 다른 방법이 더 적합할 수 있다.
그렇다면 두 방법의 차이는 무엇이고 어떤 경우에 어떤 방법을 선택해야 하는지, 그리고 이 모든 것을 이해하기 위해 브라우저의 렌더링 원리부터 간단하게 알아보자.
브라우저 렌더링 원리: Reflow와 Repaint
브라우저가 웹페이지를 렌더링하는 과정은 크게 Layout, Paint, Composite 세 단계로 이루어진다.
- Layout(Reflow): 브라우저가 요소의 위치와 크기를 계산.
- Paint(Repaint): 브라우저가 요소의 색상, 텍스트, 이미지 등을 그림.
- Composite: 브라우저가 각 요소를 올바른 순서로 쌓아서 최종 화면을 만듦.
이 중에서 Reflow와 Repaint는 웹페이지의 성능에 큰 영향을 미친다.
- Reflow: 요소의 크기나 위치가 변경될 때 브라우저가 레이아웃을 다시 계산하는 것을 Reflow라고 한다. Reflow는 많은 계산을 필요로 하므로 성능에 부담을 줄 수 있다.
- Repaint: 요소의 색상이나 텍스트가 변경될 때 브라우저가 요소를 다시 그리는 것을 Repaint라고 한다. Repaint는 Reflow보다는 비용이 적지만, 여전히 성능에 영향을 줄 수 있다.
따라서 애니메이션을 만들 때는 가능한 한 Reflow와 Repaint를 최소화해야 한다.
CSS 애니메이션
CSS 애니메이션은 CSS만을 사용하여 웹페이지에서 요소를 애니메이션 화하는 방법이다. 이 방법은 CSS의 transition 및 animation 속성을 사용한다.
간단한 CSS 애니메이션 예제를 보자
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.myElement {
animation: move 2s infinite;
}
위 CSS 코드는 .myElement 클래스를 가진 요소를 오른쪽으로 100픽셀 이동시키는 애니메이션을 생성한다. 애니메이션의 지속 시간은 2초이며, 무한히 반복된다.
CSS 애니메이션의 장점
- 성능: CSS 애니메이션은 브라우저가 GPU(그래픽 처리 장치)를 활용하여 애니메이션을 렌더링 하므로, 복잡한 애니메이션에서도 더 좋은 성능을 제공한다. 또한, transform과 opacity 속성을 변경하는 애니메이션은 Reflow와 Repaint 없이 Composite 단계에서만 처리되므로 성능이 훨씬 좋다.
- 간편성: CSS만으로 애니메이션을 만들 수 있으므로, JavaScript보다 쉽고 빠르게 작성할 수 있다.
- 호환성: CSS 애니메이션은 모든 현대 브라우저에서 지원된다.
CSS 애니메이션의 단점
- 제한적인 기능: CSS는 프로그래밍 언어가 아니므로, 복잡한 상호작용이나 로직을 다루기 어렵다.
- 복잡한 애니메이션: 복잡한 애니메이션을 만들려면 코드가 복잡해지고 관리하기 어려워진다.
JavaScript 애니메이션
JavaScript 애니메이션은 JavaScript를 사용하여 웹페이지에서 요소를 애니메이션 화하는 방법이다. 이 방법은 JavaScript의 requestAnimationFrame API나 JavaScript 애니메이션 라이브러리를 사용한다.
간단한 JavaScript 애니메이션 예제를 보자
let start;
const element = document.getElementById("MyElement");
function step(timestamp) {
if (start === undefined)
start = timestamp;
const elapsed = timestamp - start;
element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 100) + 'px)';
if (elapsed < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);
위 JavaScript 코드는 MyElement ID를 가진 요소를 오른쪽으로 100픽셀 이동시키는 애니메이션을 생성한다. 애니메이션의 지속 시간은 2초이다.
JavaScript 애니메이션의 장점
- 유연성: JavaScript는 프로그래밍 언어이므로, 복잡한 애니메이션과 상호작용을 만들 수 있다.
- 프레임 제어: requestAnimationFrame API를 사용하면 프레임을 정확히 제어할 수 있다.
JavaScript 애니메이션의 단점
- 성능: JavaScript 애니메이션은 CPU를 사용하여 렌더링 되므로, 복잡한 애니메이션에서는 성능이 떨어질 수 있다. 하지만 requestAnimationFrame API를 사용하거나, GPU 가속을 활용하는 라이브러리를 사용하면 이 문제를 해결할 수 있다.
- 복잡성: JavaScript는 CSS보다 복잡하므로, 애니메이션을 작성하고 이해하는 데 더 많은 시간과 노력이 필요할 수 있다.
결론
CSS 애니메이션은 간단하고 성능이 좋지만, 복잡한 애니메이션을 만들기 어렵고, JavaScript 애니메이션은 복잡하고 유연하지만, 성능에 주의해야 한다.
따라서 간단한 애니메이션은 CSS로, 복잡한 애니메이션은 JavaScript로 만드는 것이 좋을 수 있다.
애니메이션을 만들 때는 브라우저의 렌더링 원리를 이해하고,
가능한 한 Reflow와 Repaint를 최소화해야 한다.
'CS > 기타' 카테고리의 다른 글
실제로 내가 사용 중인 VSCode 확장 프로그램 (0) | 2024.03.25 |
---|---|
자바스크립트에서 Event Loop란? (0) | 2023.05.13 |
서버(Server)란 무엇일까? (0) | 2023.05.01 |
자바스크립트(Javascript) 비동기의 역사 (0) | 2023.04.06 |
CSS 애니메이션과 Javascript 애니메이션의 차이? (0) | 2023.04.06 |