[CSS] 하드웨어 가속을 적극 활용하자 (translate3d)

이채현

💡 CSS 하드웨어 가속

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

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

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

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

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

translate3d

translate3d()는 x, y, z 3차원의 값을 조정할 수 있다.

translate3d의 동작원리는 translate와 동일하다.

Y축으로 100% 원한다면 아래와 같이 작성가능하다.

.anim {
	transform: translate3d(0, 100%, 0 );
}

.anim2 {
	transform: translateY(100%);
}

translate3d vs translateX, translateY

translate3d는 하드웨어 가속, 즉 GPU를 사용하기 때문에 CSS 퍼포먼스가 일반적인 translate()보다 더 좋다. 따라서 더 좋은 퍼포먼스를 원한다면 translate3d를 사용하는 것이 좋을 듯 싶다.

하드웨어 가속 사용 시 고려 사항

하드웨어 가속을 사용하면 웹 페이지의 렌더링 속도가 빨라지지만 잘못 사용하면 오히려 렌더링 속도가 느려지거나 브라우저에 문제가 일어날 수 있다.

주의 사항

하드웨어 가속을 사용하면 다양한 성능 향상을 기대할 수 있지만, 그렇다고 모든 요소를 대상으로 적용하면 안 된다. 하드웨어 가속 대상을 지정할 때 다음의 사항을 기억하기 바란다.

• 무분별한 하드웨어 가속은 오히려 브라우저를 느리게 한다.
• 요소에 하드웨어 가속 속성이 부여되면 즉시 대상 영역이 GPU에 업로드되며, 이때 업로드되는 영역이 크면 화면이 깜빡이는 현상이 발생될 수 있다.
• 요소에 하드웨어 가속 속성이 부여되면 레이어로 분리되며, 레이어는 변경되는 내용이 없는 한 요소를 GPU 메모리에 다시 업로드하지 않는다.
• 하드웨어 가속 속성을 사용한 요소의 내용이 변경되면 GPU 메모리가 갱신되므로 요소의 내용을 미리 변경한 다음 하드웨어 가속 속성을 부여한다.
• 성능이 낮은 기기에서 하드웨어 가속을 사용하면 오히려 성능 저하를 가져올 수 있다.

적용 시 고려 사항

하드웨어 가속을 사용할 때는 다음과 같은 점을 고려한다.

1. 하드웨어 가속을 적용하는 요소의 크기는 작을수록 좋고, 요소의 개수는 화면에서 5~6개로 구성하는 것이 좋다.특히, 요소의 속성값에 따라 요소의 영역이 커질 수 있기 때문에 주의해서 적용해야 한다. 예를 들어 text-indent나 left 같은 속성에 999em이나 9999px과 같이 화면 영역을 지나치게 벗어나게 값을 설정하면, 콘텐츠 영역의 크기가 늘어나고 하드웨어 가속에 의해 구성된 레이어도 커지게 돼 불필요한 메모리를 사용하게 된다.
2. DOM 요소의 내용이 자주 변경되지 않는 영역에 하드웨어 가속을 적용한다.내용 변경이 아닌 이동이나 크기 변경이 자주 발생하는 영역에 하드웨어 가속을 적용하고, 이동이나 크기 변경은 transform 속성을 사용한다.
3. 기기에 따라 선별적으로 하드웨어 가속을 적용한다.JMC(Jindo Mobile Component)는 기기가 하드웨어 가속에 적합한 기기인지 확인할 수 있게 useCss3d() 메서드를 제공한다.

---

참고 자료:

카카오웹툰은 하드웨어 가속과 IntersectionObserver를 어떻게 사용했을까?

NAVER D2