translate3D와 will-change로 렌더링 최적화 하기

최근 진행한 프로젝트에서는 애플의 웹사이트처럼 스크롤 기반 슬라이드 효과를 구현하였는데요.

이 과정에서 풀스크린 모션 이벤트를 적용되다보니 성능상 미세하게 버벅거리는 이슈가 발생하였습니다.


이런 상황에서 CSS의 translate3Dwill-change 속성을 활용한 최적화를 시행하였고, 버벅거리는 현상이 사라지고 훨씬 매끄럽게 사이트가 동작하게 되었는데요.


'translate3d'와 'will-change' 속성은 왜 성능 향상에 기여를 할까요?

이는 브라우저 렌더링 과정중 Composite(합성) 단계에 영향을 미치기 때문인데요.

합성 단계에는 Paint Layer과정과 Graphics Layer 2가지 주요 작업이 있습니다.


'Paint Layer'는 CPU를 활용해 레이어를 이미지로 변환하는 반면, 'Graphics Layer'는 GPU를 사용하여 이 과정을 처리합니다. GPU 사용은 CPU의 그래픽 처리 부담을 덜어주고, 특정 레이어를 주변 요소와 독립적으로 처리할 수 있게 합니다(Ex: 배경과 캐릭터를 분리)


translate3D, video, canvas, will-change와 같은 CSS 속성들을 사용하면, 해당 요소들이 'Graphics Layer'로 분리되어 처리됩니다. 이러한 최적화는 웹사이트의 부드러운 동작을 가능하게 하며, 사용자 경험(UX)을 크게 향상시킵니다. 따라서 고사양의 그래픽 렌더링이 요구되는 작업에서 성능 저하를 경험한다면, 'Graphics Layer'를 활용한 최적화 전략을 고려해 보는 것을 추천드립니다.


https://www.youtube.com/watch?v=TZz9VHjJzMk&t=227s

No title

www.youtube.com

No title

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 2월 15일 오전 1:49

 • 

저장 16조회 2,485

댓글 0