안녕하세요! AT WEB 36기 OB 이진혁입니다. 이번에 블로그 과제를 구현하면서 애니메이션에 transform을 활용을 하게 되었습니다. 구현을 하고 나니 이전에 transform을 사용하면 position을 활용한 애니메이션 구현보다 성능이 좋다는 글이 떠올랐고, 대충 그렇구나 하고 넘어간 부분에 대해 정확한 이유를 파악하기 위해 학습 후 아티클을 작성해보았습니다!
결론부터 말해 애니메이션을 구현할 때 position이 아닌 transform 속성을 활용하면 더 성능이 좋다고 한다. 그 이유가 무엇일까?
이를 직접 확인하기 전에 알아야하는 브라우저 렌더링 과정에 대해 간단하게 알아보자.
브라우저 렌더링 과정
브라우저의 렌더링 과정을 그림으로 표현하면 다음과 같다.
- 렌더링 엔진이 (전달받은) HTML 문서를 파싱하여 DOM 트리를 구축한다.
- CSS 또한 파싱을 통해 CSSOM 트리를 생성한다.
- 생성한 DOM과 CSSOM으로 렌더링 트리를 생성한다.
- 렌더 트리를 기반으로 화면에 그려질 노드와 스타일, 크기 등을 계산한다. (=Layout)
- 실제로 그리는 작업을 실행한다.
우리는 여기서 4,5번에 주목해야 한다.
4번은 화면에 그려질 요소를 계산하는 과정으로 그림에서는 Layout 과정을 의미한다. 또한 5번은 계산된 값을 이용해 각 노드들을 화면 상의 실제 픽셀로 변환해 렌더링 하는 과정으로 그림에서 Paint 과정을 의미한다고 볼 수 있다.
이때 변경이 일어날 경우에는 리렌더링을 통해 Reflow, Repaint 과정을 실행하게 되는데, 여기서 Reflow는 Layout 과정을 다시 하는 것이고 Repaint는 Paint 과정을 다시 하는 것이다.
- Reflow: 레이아웃 계산을 다시하는 것. 즉 Layout 과정을 반복.
- Repaint: 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것. 즉 Paint 과정을 반복
이 개념이 도대체 우리 주제인 애니메이션에서 transform이 성능에 미치는 영향과 무슨 관계가 있는걸까?
이론을 계속 언급하기보다 예시 코드를 통해 눈으로 직접 확인해보자.
Transform과 position을 활용한 애니메이션 구현
1. position(left)을 활용한 애니메이션
먼저 position, 그 중 left를 활용한 애니메이션 구현 예제를 살펴보자. 예시 코드는 아래와 같다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animation1</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<div class="box left-animation"></div>
</div>
</body>
</html>
.container {
position: relative;
display: inline-block;
width: 100%;
height: 150px;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: rgb(8, 35, 154);
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
@keyframes leftAnimation {
from {
left: 0;
}
to {
left: 100px;
}
}
.left-animation {
animation-delay: 250ms;
animation-direction: normal;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: leftAnimation;
}
@keyframes로 애니메이션을 구현했고, left 속성을 활용한 것을 볼 수 있다.
이렇게 구현하면 브라우저에서는 어떤 일이 벌어질까?
한 번 애니메이션을 실행하고 개발자 도구 - 성능 탭에서 5초 정도 녹화를 하고 결과를 살펴보자.
성능 탭의 호출 트리를 보면 레이아웃이라는 항목이 존재하는 것을 볼 수 있다. 또한 이벤트 로그 탭을 가면 레이아웃이라는 항목이 굉장히 많은 것을 볼 수 있다. 5초 동안 이 레이아웃이라는 항목이 실행된 것이다.
바로 이 레이아웃이 브라우저 렌더링 Layout 과정이다. 즉 Reflow가 계속해서 일어나는 것이다.
그렇다면 transform으로 애니메이션을 구현하면 어떨까?
2. transform을 활용한 애니메이션
<!-- HTML 코드는 class명 제외 동일하므로 생략한다. -->/* 애니메이션 코드 제외 코드는 동일하므로 생략한다. */
.transform-animation {
animation-delay: 250ms;
animation-direction: normal;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: transformAnimation;
}
@keyframes transformAnimation {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
이 또한 동일한 환경에서 확인을 해야하기 때문에 성능 탭을 통해 5초를 측정해보았다.
바로 차이가 보이지 않는가? position으로 애니메이션을 구현한 것과는 다르게 호출 트리에서 레이아웃이라는 항목을 찾을 수 없다.
또한 이벤트 로그에서도 '레이아웃'이라는 항목은 검색해도 찾을 수 없다. 즉 transform으로 애니메이션을 구현하면 reflow가 발생하지 않는다는 것을 의미한다.
이제 transform이 position으로 애니메이션을 구현하는 것과 다르게 reflow를 발생하지 않으므로 성능상 이점이 있다는 것까지 알게 되었다. 하지만 아직 궁금증이 남아있다. 왜, 대체 왜 transform은 reflow를 발생하지 않을까?
Transform은 Reflow, Repaint를 발생하지 않는다?
부제목이 참 자극적이다. 애니메이션이 발생하면 뭔가 변경사항이 생길 것 같고, 그렇다면 자연스럽게 Reflow와 Repaint가 일어나는 것이 정상 아닌가라고 생각할 수 있다. 사실 맞는 말이다. 하지만 transform 속성에 대해서는 틀린 말이다. transform은 요소의 크기나 위치를 변경하는 것이 아니라 이미 결정된 요소의 시각적인 표현만을 변형하는 것이기 때문이다.
즉, Transform은 크기나 위치를 변경하지 않기 때문에 reflow가 필요 없고, 그렇기 때문에 화면에 다시 그려지는 repaint 과정 또한 필요 없다. 따라서 transform은 reflow와 repaint 과정을 건너뛰고 composite라는 과정을 실행한다.
🤔composite이 무엇인가?
위에서 브라우저 렌더링 그림을 보기는 했지만, 사실 그 렌더링 그림의 맨 뒤에 Composite이라는 과정이 더 있다.
앞서 언급한 Paint 단계는 화면에 그리는 단계인데, 자세히 풀어말하자면 레이아웃 단계에서 계산된 값을 Render Tree의 각 Node를 실제 화면에 전달을 하는 것이다. 이때, Node들을 한꺼번에 하나의 레이어로 화면을 만드는 것이 아니라 겹겹이 레이어로 만들어 화면에 그린다. 이렇게 레이어를 분리해두면 다시 Paint 해야하는 일이 발생하면 모든 레이어가 아니라 하나의 레이어만 Paint해도 된다는 장점을 갖는다.
그리고 Composite(합성) 단계는 위 Paint 단계에서 여러 레이어로 나누어진 픽셀 값들을 우리가 실제로 보는 화면처럼 합성해주는 단계이다. Paint 단계에서 그러진 여러 레이어들을 순서에 맞추어 합성해서 유저가 보는 화면을 만드는 과정인 것이다.
[ 요약 ]
- transform은 레이아웃을 그대로 유지한다.
- 요소의 위치나 크기를 실제로 변경하지 않고, 화면에서 보이는 위치만 조정하기 때문에 Reflow가 발생하지 않는다.
- transform은 화면에 다시 paint하지 않는다. (= Repaint가 발생하지 않는다.)
따라서 transform은 Reflow와 Repaint 과정을 건너뛰고, Composite 과정을 실행하는 것이다. 그렇기 때문에 성능 상의 이점이 있다고 하는 것이다!!
물론 단점도 존재한다.
모든 기술에 장점이 있다면 단점도 같이 존재하듯이 transform도 단점이 존재한다.
Composite과정은 GPU가 담당을 하는데 GPU가 일을 처리하기 위해서는 많은 준비 작업이 필요하다. CPU가 처리하던 일을 GPU가 처리하도록 메모리를 이동시켜야 하는데 그 과정에 들어가는 리소스를 고려해야 한다는 것이다. 무작정 transform을 남용하게 되면 메모리의 과도한 사용을 불러올 수 있다.
해당 글의 주제에서는 조금 벗어날 수 있으므로 잘 정리된 아티클을 첨부한다!
https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
CSS GPU Animation: Doing It Right — Smashing Magazine
Sometimes animation that is nice and smooth in a simple demo runs very slowly on a real website, introduces visual artefacts or even crashes the browser. Why does this happen? How do we fix it? In this article, Sergey Chikuyonok aims to help you to better
www.smashingmagazine.com
결론적으로 transform이 다른 애니메이션 구현 방식보다 Reflow와 Repaint를 건너 뛰는 방식이기 때문에 성능상의 이점이 있을 수는 있지만, 무작정 남용하는 것은 오히려 부작용을 부른다. 따라서 상황을 잘 판단하고 적절히 사용하는 것이 중요할 것 같다.
참고 자료
https://velog.io/@sarang_daddy/CSS-translateX-vs-left
https://ssocoit.tistory.com/258
https://mingule.tistory.com/62
'1주차' 카테고리의 다른 글
| SEO를 위한 HTML 태그 및 속성 활용법 (0) | 2025.04.11 |
|---|---|
| JS 엔진 동작 원리/ 구성요소 (0) | 2025.04.11 |
| meta 태그 정리 (0) | 2025.04.11 |
| Scroll-based CSS 애니메이션 (1) | 2025.04.11 |
| SEO를 알고 나의 성공시대 시작됐다 (0) | 2025.04.11 |
