CH Blog | 기술 블로그

이채현

💡 CSS 하드웨어 가속

하드웨어 가속은 왜 필요할까?

복잡한 계산이 필요한 인터렉션은 렌더링에 많은 시간이 걸리게 된다. 이런 부분을 CPU가 아닌 GPU가 계산하도록 만들면 렌더링 시간을 줄일 수 있게 된다.

*하드웨어 가속을 사용하려면 어떤 스타일을 사용해야 할까?*

대표적으로 animation(keyframes), will-change 속성이 있지만 두 속성은 사용하는 데 있어서 한계가 있다.

다양한 케이스에 대응하기 쉽고 초기 렌더링에도 크게 영향을 주지 않는 방법으로는 transform: translate3d 스타일을 사용하면 된다. will-change, translate3d속성은 브라우저에게 **"얘는 3D 요소니까 하드웨어 가속을 써야 해!"**라고 알려주며 대상이 되는 요소를 자체 레이어로 승격시키고 GPU 메모리에 할당이 되어 하드웨어가 계산을 하게 된다.