August 15, 2025

👻 보이지 않는 성능 하락: CSS `will-change` 오용과 레이어 폭탄

CSS

성능

애니메이션/UI

웹표준

렌더링전략

Summary

will-change를 남용하면 불필요한 레이어가 과도하게 생성되어 성능 저하를 유발합니다. 필요한 속성에만 제한적으로 사용하고, 애니메이션 종료 후에는 초기화하여 리소스를 회수해야 합니다.

Why Wrong?

will-change는 브라우저에게 특정 속성이 변경될 예정임을 미리 알려 최적화를 유도하는 속성입니다. 하지만, 너무 많은 요소에 남용하거나 모든 속성에 적용하면(예: will-change: all;) 브라우저가 불필요한 메모리를 할당하고 레이어를 생성하게 됩니다. 이는 오히려 성능을 저하시키고, 초기 렌더링 시간을 늘리며, 심지어 크래시를 유발할 수 있습니다. 또한, will-change는 예측 가능한 성능 문제를 해결하기 위해 사용되어야 하며, 막연한 성능 향상을 기대하며 사용하는 것은 지양해야 합니다.

How to Fix?

will-change는 필요한 경우에만 제한적으로 사용해야 합니다. 변경될 가능성이 높은 속성을 명확히 지정하고, 해당 요소가 실제로 애니메이션이나 트랜지션이 시작되기 직전에 will-change를 적용하는 것이 좋습니다. 애니메이션이 끝난 후에는 will-change를 제거하거나 will-change: initial;로 초기화하여 브라우저가 할당된 리소스를 회수하도록 해야 합니다. 또한, 개발자 도구를 사용하여 레이어 생성 현황을 모니터링하고, 불필요한 레이어 생성을 줄이는 방법을 찾아야 합니다. transform과 opacity는 레이어를 생성하지 않고 애니메이션을 처리할 수 있는 대표적인 속성이므로 적극적으로 활용해야 합니다.

Before Code (Bad)

/* 과도한 will-change 사용 (안티패턴) */
.element {
  will-change: all;
  transition: transform 0.3s ease-in-out;
}

.another-element {
  will-change: transform, opacity, top, left, width, height; /* 너무 많은 속성 지정 */
}

After Code (Good)

/* 올바른 will-change 사용 */
.element {
  transition: transform 0.3s ease-in-out;
}

.element:hover {
  will-change: transform; /* 호버 시점에 will-change 적용 */
  transform: scale(1.1);
}

/* 애니메이션 종료 후 will-change 초기화 (JavaScript) */
const element = document.querySelector('.element');

element.addEventListener('transitionend', () => {
  element.style.willChange = 'initial';
});

`will-change` 속성의 공식적인 정의와 사용법을 이해하는 데 도움이 됩니다.

https://developer.mozilla.org/ko/docs/Web/CSS/will-change

`contain` 속성은 레이아웃, 스타일, 페인트 격리를 제공하여 성능을 향상시키는데, `will-change`와 함께 사용하여 레이어 생성을 최적화할 수 있습니다. 해당 문서에서 `contain` 속성의 자세한 내용과 사용법을 확인할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/contain