CSS will-change 속성 – 성능 최적화를 위한 예비 준비

CSS `will-change` 속성이란 무엇인가?

특정 CSS 작업(특히 CSS transition 및 animation)을 수행하는 동안 브라우저에서 "깜빡임"이나 "떨림" 현상을 경험한 적이 있었을 것입니다.

CSS의 will-change 속성은 브라우저에게 요소의 예상 변경 사항을 알려주는 역할을 합니다.

이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할 때 필요한 리소스를 사전에 최적화하여 요소의 스타일 변경과 렌더링을 더 빠르고 최적화된 방식으로 처리할 수 있습니다. 이를 통해 "깜빡임"이나 "떨림"과 같은 시각적인 현상을 줄이거나 제거하여 웹 페이지를 시각적으로 더 부드럽게 처리할 수 있습니다. 이는 웹 사이트의 스타일 성능을 향상시킬 수 있는 장점을 제공합니다.

CSS 작업에서의 "깜빡임"과 "떨림" 현상과 CPU, GPU, 하드웨어 가속의 관계 이해하기

CSS 작업(특히 CSS 변형 및 애니메이션)을 수행하는 동안 브라우저에서 발생하는 "깜빡임"과 "떨림" 현상은 CPU, GPU, 그리고 하드웨어 가속과 관련이 있습니다. 아래에서 각 용어에 대한 설명을 제공하겠습니다.

"깜빡임"과 "떨림" 현상

CSS 작업 중에 요소가 부드럽게 변하는 대신 갑작스러운 변화로 인해 브라우저 화면이 깜빡이거나 떨리는 현상을 의미합니다. 이는 사용자 경험을 저하시킬 수 있는 시각적인 문제입니다.

CPU(Central Processing Unit)

컴퓨터의 중앙 처리 장치로, CSS 작업에서 스타일 계산, 레이아웃 처리, 애니메이션 프레임 계산 등을 담당합니다. CPU가 과도하게 사용되거나 최적화되지 않은 경우, "깜빡임"이나 "떨림"과 같은 시각적인 현상이 발생할 수 있습니다.

GPU(Graphics Processing Unit)

그래픽 처리에 특화된 장치로, CSS 변형 및 애니메이션의 그래픽적인 부분을 처리합니다. GPU는 병렬 처리를 통해 대량의 그래픽 작업을 처리할 수 있어 브라우저에서 부드러운 애니메이션과 그래픽 효과를 제공하는 데 중요한 역할을 합니다. GPU의 성능이 부족하거나 제한된 경우, "깜빡임"이나 "떨림"과 같은 현상이 발생할 수 있습니다.

하드웨어 가속(Hardware Acceleration)

'GPU 가속'이라고도 하며, GPU를 활용하여 CSS 작업을 가속화하는 기술입니다. 하드웨어 가속을 사용하면 GPU가 그래픽 작업을 전담하고, CPU는 다른 작업에 집중함으로써 웹 페이지의 부드러운 렌더링과 빠른 반응 속도를 제공할 수 있습니다. 하드웨어 가속을 사용하지 않거나 올바르게 구성되지 않은 경우, "깜빡임"이나 "떨림"과 같은 시각적인 현상이 발생할 수 있습니다.

CPU, GPU, 그리고 하드웨어 가속은 CSS 작업을 수행하는 동안 "깜빡임"과 "떨림" 현상에 영향을 미치는 요소입니다.

일부 브라우저에서는 CSS animation, transform 및 transition에 대해 자동으로 GPU 가속을 제공하지 않습니다. 이 경우, 해당 작업은 브라우저의 소프트웨어 렌더링 엔진에서 처리됩니다. 그러나 일부 CSS 속성은 브라우저에서 하드웨어 가속을 제공함으로써 더 나은 렌더링 성능을 제공할 수 있습니다.

예를 들어, opacity 속성은 GPU에서 쉽게 조작할 수 있는 속성 중 하나입니다. 브라우저는 불투명도 속성을 가진 요소에 적용되는 CSS transition이나 opacity을 처리할 때, 해당 요소의 레이어를 실제로 GPU에 전달하고 GPU에서 조작합니다. 이렇게 하면 GPU의 성능을 최대한 활용하여 부드럽고 빠른 효과를 제공할 수 있습니다. 따라서 불투명도 속성은 일반적으로 가장 효율적인 하드웨어 가속 작업 중 하나입니다.

또 다른 일반적인 하드웨어 가속 작업은 CSS 3D 변환(transform)입니다. 3D 변환은 GPU에서 효율적으로 처리될 수 있으며, 특히 3D 공간에서 요소의 위치, 회전, 크기 조정 등을 변경하는 경우에 많이 사용됩니다. 3D 변환은 웹 페이지에서 시각적인 깊이와 입체감을 구현하는 데 도움이 되며, GPU의 성능을 최대한 활용하여 부드러운 애니메이션을 제공할 수 있습니다.

이처럼, 일부 CSS 속성은 브라우저에서 하드웨어 가속을 통해 렌더링 성능을 향상시킬 수 있습니다. 하지만 모든 CSS 속성이 자동으로 GPU 가속을 받는 것은 아니며, 브라우저와 환경에 따라 다를 수 있습니다. 개발자는 적절한 CSS 속성을 선택하여 하드웨어 가속을 최대한 활용하고, 브라우저의 성능을 최적화하는 작업을 수행할 수 있습니다.

이와 같은 상황에서 CSS의 will-change 속성이 유용합니다. will-change 속성을 사용하면 개발자는 브라우저에게 요소의 예상 변경 사항을 알려주고, 브라우저는 해당 변경 사항을 GPU 가속을 활용하여 최적화된 방식으로 처리할 수 있습니다. 이를 통해 "깜빡임"이나 "떨림" 현상을 줄이거나 제거하여 시각적으로 더 부드럽고 성능이 향상된 경험을 제공할 수 있습니다.

`will-change` 속성

will-change 속성은
개발자가 요소에 어떤 변경 사항을 예상하는지에 대한 렌더링 힌트를 사용자 에이전트(브라우저를 의미함)에게 제공합니다. 이를 통해 사용자 에이전트는 해당 변경 사항을 부드럽게 렌더링하기 위해 필요한 최적화 작업을 미리 수행할 수 있으며, 개발자가 해당 기능을 변경하거나 애니메이션화할 때 '지체 현상(jank)'을 피할 수 있습니다.

각각의 브라우저는 will-change 속성의 정보를 다른 방식으로 활용하며, 동일한 브라우저라도 서로 다른 시간에 다른 방식으로 사용할 수 있습니다. 예를 들어, transform 속성에 will-change를 지정한 경우 해당 요소를 브라우저가 자체적으로 "GPU 레이어"로 승격시키는데, 너무 많은 요소에서 이를 선언하면 GPU 메모리 부족으로 인한 문제가 발생할 수 있어서 해당 방식을 피하게 됩니다. 즉, will-change 속성은 브라우저에게 요소의 변경 사항을 알려주는 역할을 하며, 각 브라우저는 이 정보를 다양한 최적화 방식에 활용하여 렌더링 성능을 향상시킬 수 있습니다.

정의와 구문

will-change 속성 정의
초깃값	`auto`
적용 요소	모든 요소
상속	아니오

CSS 출처링크: https://developer.mozilla.org/ko/docs/Web/CSS/will-change

/* 키워드 값 */
will-change: auto;
will-change: scroll-position;
will-change: transform;
will-change: contents;
will-change: opacity;
will-change: left, bottom;

/* 전역 값 */
will-change: inherit;
will-change: initial;
will-change: unset;

값

will-change 속성 값
`auto`	변경 예정인 속성에 대한 최적화를 자동으로 처리하기 위해 브라우저가 결정함.
`scroll-position`	스크롤 위치에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리함.
`contents`	요소 내용의 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리함.
`opacity`	투명도 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리함.
`transform`	변환(Transform) 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리함.
`perspective`	원근(Perspective) 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리함.
`left/top/right/bottom`	지정된 속성에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리함.
`filter`	필터( Filter) 속성에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리함
`color/background-color`	색상 또는 배경 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리함.
`all`	모든 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리함.

위 표는 will-change 속성의 일부 예시를 보여주며, 각 속성 값이 어떤 변경에 대한 최적화를 수행하는지를 설명합니다. 실제로 사용되는 속성 값은 브라우저와 환경에 따라 다를 수 있으며, 개발자는 변경할 요소에 맞는 적절한 속성 값을 선택하여 하드웨어 가속을 최대한 활용할 수 있습니다.

브라우저 호환성

will-change 속성에 대한 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`will-change`	36	79	36	9.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

will-change 속성에 대한 명세서
명세서 사양
`will-change`	CSS Will Change Module Level 1 #will-change

`will-change` 속성을 사용할 때 몇 가지 주의해야 할 사항

will-change 속성의 동작 방식을 알게 되면 "브라우저가 모든 것을 최적화하도록 해보자!"라고 생각하는 유혹을 느낄 수 있습니다. 말이 맞는 것 같죠? 모든 변경 사항이 최적화되어 필요할 때 언제든 실행될 수 있으면 좋겠는데요. will-change 속성은 강력하고 훌륭한 도구이지만, 다른 종류의 힘과 다르지 않으므로 사용에는 책임이 따릅니다. 적절하게 will-change를 사용하지 않으면 성능 저하가 발생하여 페이지가 실제로 충돌할 수 있습니다.

성능 향상을 위한 모든 힌트와 마찬가지로 will-change 속성에는 직접적으로 감지할 수 없는 부작용이 있을 수 있으므로 사용하기가 까다로울 수 있습니다. 이 속성을 사용할 때 염두에 두어야 할 몇 가지 사항이 있습니다. 이를 통해 최대한의 성능을 얻으면서 잘못 사용하여 발생할 수 있는 피해를 피할 수 있습니다.

남용하지 마세요!

will-change 속성은 성능 향상을 위한 도구로 강력하지만, 모든 요소에 대해 적용하는 것은 좋지 않습니다. 필요한 요소에만 적용하여 필요한 최적화를 수행하는 것이 좋습니다. 너무 많은 요소에 will-change 속성을 적용하면 메모리 사용량이 증가하고 브라우저 성능에 부정적인 영향을 미칠 수 있습니다.

불필요한 최적화를 피하세요!

will-change 속성을 사용하면 브라우저는 요소의 변경을 예상하고 최적화를 수행합니다. 그러나 변경이 실제로 발생하지 않는 경우에도 리소스를 사용하여 최적화를 수행할 수 있습니다. 따라서 will-change 속성은 변경이 예상되는 요소에만 적용해야 합니다.

브라우저에 작업할 충분한 시간 제공해 주세요!

will-change 속성의 이름은 분명한 이유로 지정되었습니다. 그 이유는 변경 사항이 발생 중인 것이 아니라 발생할 변경 사항에 대해 브라우저에 알리기 위해서입니다. 우리는 will-change 속성을 사용하여 특정 최적화를 요청하여 선언한 변경 사항에 대해 브라우저가 이를 수행하도록 하고 있습니다. 그러나 이러한 최적화를 실제로 수행하기 위해서는 브라우저가 약간의 시간이 필요합니다.

다음의 예제코드는 will-change 속성을 사용해도 효과가 없는 경우입니다.

CSS

  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: transform 0.3s;
  }
  .box:hover {
    will-change: transform;
    transform: scale(1.2);
  }

이미 스타일이 적용되어 있는 요소에 hover를 했을 경우 바로 will-change 속성을 사용하면, 브라우저가 실제로 이러한 최적화를 수행하는 데에는 약간의 시간이 필요함에도 불구하고 지체없이 적용되어야 하기 때문에 will-change 속성의 효과가 거의 혹은 전혀 없습니다. 이는 will-change 속성을 사용하는 목적에 쓸모가 없어집니다.

다음의 예제코드는 will-change 속성을 사용해서 기대하는 효과가 생길 수 있는 예제입니다.

JavaScript

 // 페이지 로드 후에 최적화 클래스 추가
 window.addEventListener('load', () => {
    const box = document.querySelector('.box');
    box.classList.add('optimized');
 });

자바스크립트 classList.add()

위의 예제 코드에서는 페이지가 로드된 후에 .box 요소에 optimized 클래스를 추가하여 변환 효과를 활성화합니다. 이렇게 함으로써 페이지 로드 시점에 will-change 속성이 적용된 상태에서 변환 효과가 적용됩니다.

따라서, will-change 속성을 제대로 활용하려면 변경이 발생하기 전에 요소에 속성을 설정하고, 필요한 최적화를 요청하는 방식으로 코드를 구성해야 합니다. 지연을 통해 will-change 속성이 제대로 작동되지 않으므로, 올바른 방법을 사용하시기 바랍니다.

`will-change` 속성을 사용한 후 제거해 주세요!

will-change 속성은 브라우저의 리소스를 많이 차지합니다. 최적화를 위한 일반적인 브라우저 동작은 이러한 최적화를 제거하고 가능한 한 빨리 정상 동작으로 되돌리는 것입니다. 따라서, 요소에 will-change 속성을 사용하여 최적화를 요청한 후, 해당 요소가 변경되지 않거나 변경이 더 이상 필요하지 않을 때 속성을 제거하는 것은 불필요한 리소스 소모를 줄이고 브라우저 성능을 개선하는 데 도움이 됩니다.

JavaScript will-change 속성을 사용한 후 제거하는 대략적인 일반적인 예제입니다.

// 예를 들어 클릭 시 애니메이션을 적용할 요소를 가져옵니다.
var el = document.getElementById('element');

// 요소에 마우스를 올렸을 때 will-change 속성을 설정합니다.
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
	// 애니메이션의 keyframes 블록에서 변경될 수 있는 최적화가 가능한 속성들
	this.style.willChange = 'transform, opacity';
}

function removeHint() {
    // will-change 속성의 설정값을 초깃값으로 지정하여 제거합니다.
	this.style.willChange = 'auto';
}

결론

will-change 속성은 웹 개발자가 브라우저에게 요소의 예상 변경 사항을 알려주는 역할을 합니다. 이를 통해 브라우저는 해당 변경 사항에 대한 최적화 작업을 예비로 수행할 수 있습니다. will-change 속성을 올바르게 활용하면 웹 애플리케이션의 성능을 향상시킬 수 있습니다. will-change 속성의 주요 장점은 다음과 같습니다.

렌더링 성능 개선: will-change 속성을 사용하여 브라우저에 변경 사항을 사전에 알리면, 브라우저는 최적화 작업을 미리 준비하여 변경 사항을 부드럽게 처리할 수 있습니다. 이를 통해 렌더링 성능이 향상됩니다.
애니메이션 효과 최적화: will-change 속성은 애니메이션 효과에 특히 유용합니다. 변형(transform), 불투명도(opacity) 등 애니메이션에 관련된 속성을 will-change로 지정하면, 브라우저는 GPU를 활용하여 효율적인 애니메이션 렌더링을 수행합니다.

will-change 속성은 성능 최적화를 위한 필수 도구로 활용될 수 있습니다. 하지만 올바르게 사용해야 합니다. 일부 요소에 대해서만 필요한 변경 사항을 명시하는 것이 좋으며, 모든 요소에 일괄적으로 적용하는 것은 효율적이지 않을 수 있습니다. 또한, will-change 속성은 변경이 예상되는 시기에 적용해야 하며, 변경이 발생한 후에는 적절히 제거하는 것이 좋습니다.

성능 최적화를 위한 필수 도구로 will-change 속성을 활용하면 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.

CSS will-change 속성이란 무엇인가?