Antigravity Agent
3.6 KiB
3.6 KiB
GPU Acceleration (Compositing)
📌 Brief Summary
GPU 가속(또는 합성, Compositing)은 브라우저가 메인 스레드에서 수행하던 애니메이션 등 렌더링 작업을 그래픽 처리 장치(GPU)로 오프로드(Offload)하여 처리하는 성능 최적화 기법이다 [1, 2]. 이를 통해 브라우저는 값비싼 레이아웃 재계산(Reflow) 및 다시 그리기(Repaint) 단계를 건너뛰고 오직 합성(Composite) 단계만 트리거하게 된다 [2]. 결과적으로 특히 성능이 제한적인 모바일 기기 환경에서도 60FPS의 부드럽고 끊김 없는 애니메이션을 구현하는 데 핵심적인 역할을 한다 [2, 3].
📖 Core Content
- 작동 원리 및 이점: 모던 브라우저의 렌더링 파이프라인은 '스타일 계산 -> 레이아웃(Reflow) -> 페인트(Repaint) -> 합성(Composite)' 순으로 이루어진다 [4]. 복잡한 애니메이션에서 60FPS의 부드러운 성능을 달성하려면 비용이 많이 드는 레이아웃과 페인트 단계를 우회해야 하는데, 이때 연산을 GPU로 위임하여 합성 단계만 실행하게 하는 것이 GPU 가속의 원리이다 [2]. 이는 렌더링 레이어에만 영향을 주기 때문에 성능이 크게 향상된다 [5].
- GPU 가속을 트리거하는 주요 CSS 속성:
브라우저가 자동으로 애니메이션을 GPU로 보내 처리하도록 하려면 올바른 CSS 속성을 선택해야 한다 [1].
transform: translateZ(),rotate3d(),scale과 같은 3D 및 2D 변형(Transform) 애니메이션 [3, 5].- 투명도를 조절하는
opacity속성 [2]. - 반면,
width,height,margin,padding,top/left/right/bottom과 같은 레이아웃 속성을 애니메이션화하면 GPU 가속을 받지 못하고 레이아웃 스래싱(Reflow)과 Repaint가 발생해 화면이 끊기거나 성능이 심각하게 저하된다 [2, 6].
- GPU에서 처리되는 기타 요소:
position: fixed와 같이 특정 속성이 적용되어 애니메이션되는 요소 [3].- 브라우저에 요소가 변경될 것임을 미리 알려주는
will-change속성이 적용된 요소 [3, 7]. <video>,<canvas>,<iframe>처럼 자체적인 독립 레이어에서 렌더링되는 요소들 [3].
- 성능 최적화(Optimization) 전략:
CSS 실전 설계 시 유지보수성과 성능을 동시에 잡으려면 애니메이션 구현 시
transform과opacity위주로 사용하여 GPU 가속을 적극 활용해야 한다 [2, 8]. 또한, 거대한 백그라운드 이미지나 무거운box-shadow등의 애니메이션은 GPU/CPU 자원을 많이 소모하므로 사용을 최소화해야 한다 [5, 9].
🔗 Knowledge Connections
- Related Topics: CSS Animations, Reflow and Repaint, will-change
- Projects/Contexts: Performance Optimization, UI/UX Motion Design
- Contradictions/Notes: 소스 문헌들은
will-change속성이 브라우저가 요소를 GPU에서 처리하도록 미리 준비시켜 애니메이션 성능을 높이는 데 유용하다고 설명하지만, 동시에 이를 예상되는 성능 문제를 방지하기 위해 너무 많은 요소에 남용해서는 안 된다고 경고한다. 불필요한will-change남용은 오히려 시스템 리소스를 고갈시키고 성능 문제를 악화시킬 수 있으므로, 기존에 발생한 성능 문제를 해결하기 위한 최후의 수단(last resort)으로만 제한적으로 사용해야 한다 [7, 9, 10].
Last updated: 2026-04-26