# [[GPU Acceleration (Compositing)|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|Optimization]]) 전략:**
  CSS 실전 설계 시 유지보수성과 성능을 동시에 잡으려면 애니메이션 구현 시 `transform`과 `opacity` 위주로 사용하여 GPU 가속을 적극 활용해야 한다 [2, 8]. 또한, 거대한 백그라운드 이미지나 무거운 `box-shadow` 등의 애니메이션은 GPU/CPU 자원을 많이 소모하므로 사용을 최소화해야 한다 [5, 9].

## 🔗 Knowledge Connections
- **Related Topics:** [[CSS Animations|CSS Animations]], [[Reflow and Repaint|Reflow and Repaint]], will-change
- **Projects/Contexts:** [[Performance Optimization|Performance Optimization]], UI/UX Motion Design
- **Contradictions/Notes:** 소스 문헌들은 `will-change` 속성이 브라우저가 요소를 GPU에서 처리하도록 미리 준비시켜 애니메이션 성능을 높이는 데 유용하다고 설명하지만, 동시에 이를 예상되는 성능 문제를 방지하기 위해 너무 많은 요소에 남용해서는 안 된다고 경고한다. 불필요한 `will-change` 남용은 오히려 시스템 리소스를 고갈시키고 성능 문제를 악화시킬 수 있으므로, 기존에 발생한 성능 문제를 해결하기 위한 최후의 수단(last resort)으로만 제한적으로 사용해야 한다 [7, 9, 10].

---
*Last updated: 2026-04-26*