CSS will-change 스타일 속성 알아보기

CSS 속성 중 하나인 will-change 속성에 대하여 알아보겠습니다.

CSS will-change 스타일 속성

이 속성은 CSS level 4 스펙 중 하나로 비교적 최근 스타일 속성입니다. will-change CSS 속성은 DOM 요소에 변화가 생길 수 있음을 브라우저에 대하여 미리 알려주어 실제로 변경되기 전에 적절한 최적화를 설정할 수 있게끔 도와주는 성능과 관련된 속성입니다. 예를들면 특정 요서에  transform 또는 opacity와 같이 변경된다면 이를 미리 will-change를 적용하여 브라우저로 하게끔 렌더링을 최적화하기 위한 일종의 "알림"으로 사용될 의도가 있습니다.

간단한 사용 문법은 다음과 같을 수 있습니다.

will-change: transform, opacity;

위와 같이 will-change의 값으로 사용될 스타일 속성을 콤마와 함께 사용하여 적용하게 됩니다.

Repainting 또는 Reflow 등과 사용하기

DOM 요소가 다시 그려지는 경우 repainting, reflow 등이 일어나게 됩니다. 이 경우 성능에 큰 영향을 미치게 되고 부드러운 움직임 등을 저해할 수 있습니다. 이 경우 will-change를 적절하게 사용하여 브라우저의 성능 부분을 올릴 수 있게 됩니다. 예를들어 아래와 같이 사용 가능합니다.

@ Repainting에 사용하기
Repainting은 레이아웃에 영향을 주지 않는 방식으로 변경될 때를 의미하죠. will-change에 특정 속성(예: `color` 또는 `background`)으로 미래에 변경될 가능성이 있음을 브라우저에 알려서 다시 그리기 프로세스를 최적화하는 데 사용할 수 있습니다.


@ Reflow에 사용하기
비슷하지만 변경 사항이 요소의 레이아웃에 영향을 주는 경우에 reflow가 발생합니다. 이런 경우에도 will-change를 사용하여 레이아웃 변경(예: `width`, `height`, `top`, `left`)을 영향 받을 수 있는 속성이 무엇인지 브라우저에 알려주어 레이아웃 조정을 최적화하는 데 사용할 수 있습니다.

마치면서

이 속성 will-change는 사용에 주의가 필요한 속성 중 하나입니다. 가장 중요한 부분은 과도한 사용시 부적정 영향을 미칠 수 있으므로 사용이 필요한 부분에만 적절히 사용하는 것이 필요합니다. 이 외에도 아래와 같은 사항도 함께 고려되는 것이 좋습니다.

- 동적 적용: 성능을 최적화하기 위해 `will-change`를 동적으로 적용하고, 변경이 시작되기 직전에 추가하며 변경이 끝난 후에 제거해야 합니다.
- 레이아웃 속성 피하기: 가능하다면, reflow를 유발하고 일반적으로 성능이 더 집중적인 레이아웃 속성(너비와 높이와 같은)에 대한 변경을 트리거하지 마십시오.

여기까지 will-change css 속성에 대하여 간략히 알아봤습니다.