June 25, 2025

🚀 레이아웃을 유발하는 CSS 애니메이션

CSS

성능

애니메이션/UI

Summary

CSS 애니메이션 시 width, height, top, left 등 레이아웃을 유발하는 속성 대신 transform과 opacity를 사용하여 성능 저하 없이 부드러운 애니메이션을 구현해야 합니다.

Why Wrong?

프론트엔드에서 애니메이션 성능은 사용자 경험에 큰 영향을 미칩니다. CSS 애니메이션을 구현할 때 width, height, top, left, margin, padding과 같이 **레이아웃(Layout)**을 유발하는 속성을 애니메이션하는 것은 대표적인 안티패턴입니다.

브라우저는 웹 페이지를 렌더링할 때 다음과 같은 단계를 거칩니다:

Style (스타일 계산): CSS 스타일을 요소에 적용합니다.
Layout (레이아웃 / Reflow): 각 요소의 크기와 위치를 계산합니다. width, height, top, left 등 기하학적 속성이 변경되면 이 단계가 다시 발생하며, 종속된 모든 요소들의 위치를 재계산해야 합니다. 이는 CPU를 많이 사용하는 고비용 작업입니다.
Paint (페인트 / Repaint): 요소의 배경, 색상, 그림자 등 시각적 부분을 픽셀로 채웁니다.
Composite (합성): 각각의 레이어를 결합하여 최종 화면을 만듭니다.

width, height, left, top 등의 속성을 애니메이션하면 매 프레임마다 Layout 단계가 강제로 재실행됩니다. 이를 '레이아웃 스래싱(Layout Thrashing)'이라고 부르며, 특히 복잡한 페이지에서는 **성능 저하(Jank, 버벅거림)**와 프레임 드롭을 유발하여 부자연스러운 애니메이션처럼 보이게 됩니다.

반면 transform (예: translateX, translateY, scale, rotate)이나 opacity와 같은 속성은 Layout이나 Paint 단계를 건너뛰고 대부분 Composite 단계에서 GPU의 도움을 받아 직접 처리될 수 있습니다. 이는 브라우저의 렌더링 파이프라인에서 가장 효율적인 경로이며, 부드러운 60fps 애니메이션을 가능하게 합니다.

How to Fix?

width, height, top, left 대신 transform 속성을 사용하여 요소의 크기나 위치를 변경해야 합니다. opacity는 페이드 인/아웃 효과에 사용합니다. 이러한 속성들은 레이아웃을 재계산하지 않으므로 훨씬 높은 성능을 기대할 수 있습니다.

위치 변경: left/top 대신 transform: translateX(), translateY() 사용.
크기 변경: width/height 대신 transform: scale() 사용.
페이드 효과: opacity 사용.

또한, 애니메이션이 적용될 요소에 will-change CSS 속성을 사용하여 브라우저에 해당 요소의 특정 속성이 변경될 것임을 미리 알려주는 것도 성능 최적화에 도움이 될 수 있습니다. 하지만 will-change는 남용될 경우 오히려 성능 저하를 일으킬 수 있으므로 필요한 경우에만 신중하게 사용해야 합니다.

Before Code (Bad)

.animated-box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
  position: relative;
  animation: slide-left-bad 2s infinite alternate;
}

@keyframes slide-left-bad {
  from { left: 0; }
  to { left: 200px; }
}

.resizable-box {
  width: 50px;
  height: 50px;
  background-color: tomato;
  animation: resize-bad 2s infinite alternate;
}

@keyframes resize-bad {
  from { width: 50px; height: 50px; }
  to { width: 200px; height: 200px; }
}
```
```html
<div class="animated-box"></div>
<div class="resizable-box"></div>

After Code (Good)

.animated-box {
  width: 100px; /* 고정 값 */
  height: 100px; /* 고정 값 */
  background-color: dodgerblue;
  /* position: relative; */ /* transform 사용 시 불필요 */
  animation: slide-right-good 2s infinite alternate;
  /* will-change: transform; /* 필요시 추가 */
}

@keyframes slide-right-good {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

.resizable-box {
  width: 50px; /* 고정 값 */
  height: 50px; /* 고정 값 */
  background-color: tomato;
  animation: resize-good 2s infinite alternate;
  /* will-change: transform; /* 필요시 추가 */
}

@keyframes resize-good {
  from { transform: scale(1); }
  to { transform: scale(4); } /* 50px * 4 = 200px */
}

.fade-element {
  background-color: lightgreen;
  width: 100px;
  height: 100px;
  animation: fade-good 2s infinite alternate;
  /* will-change: opacity; /* 필요시 추가 */
}

@keyframes fade-good {
  from { opacity: 0; }
  to { opacity: 1; }
}
```
```html
<div class="animated-box"></div>
<div class="resizable-box"></div>
<div class="fade-element"></div>