# [[GPU 가속 및 Compositing]]

## 📌 Brief Summary
GPU 가속 및 Compositing(합성)은 브라우저가 렌더링 및 애니메이션 작업의 일부를 메인 스레드에서 디바이스의 그래픽 처리 장치(GPU)로 오프로드(offload)하여 처리하는 성능 최적화 기법입니다. 이 과정을 통해 브라우저는 연산 비용이 높은 레이아웃(Reflow)과 페인트(Repaint) 단계를 건너뛰고 '합성(Composite)' 단계만 실행하게 됩니다. 이는 모바일 환경을 포함한 다양한 디바이스에서 초당 60 프레임(60 FPS)의 부드러운 UI 애니메이션을 구현하고 전반적인 프론트엔드 성능을 높이는 데 필수적인 역할을 합니다.

## 📖 Core Content
*   **픽셀 파이프라인과 Compositing의 역할**: DOM 요소의 변경은 브라우저에서 '스타일 계산(Recalculate Style) -> 레이아웃(Reflow) -> 페인트(Repaint) -> 합성(Composite)'이라는 픽셀 파이프라인을 거치게 됩니다. 고성능 애니메이션을 달성하기 위해 개발자는 브라우저가 값비싼 레이아웃과 페인트 단계를 우회하고, 오직 '합성' 단계만 트리거하도록 유도해야 합니다 [1, 2].
*   **GPU 가속을 트리거하는 속성 및 요소**: 브라우저는 특정 유형의 애니메이션을 자동으로 GPU로 보내 처리하며(Compositing), 이를 통해 렌더링 레이아웃 재계산을 줄입니다. 대표적으로 다음과 같은 속성 및 요소들이 자체적인 레이어에서 렌더링되어 GPU 가속의 이점을 얻습니다 [3, 4]:
    *   `transform` (예: `translateZ()`, `rotate3d()`, `scale` 등) 및 `opacity` 속성 [3, 4].
    *   `position: fixed`가 적용된 요소 [3].
    *   브라우저에 변경을 미리 알려주어 최적화를 돕는 `will-change` 속성이 적용된 요소 [3, 5].
    *   `<video>`, `<canvas>`, `<iframe>` 등과 같이 자체 레이어에서 렌더링되는 특정 요소들 [3].
*   **주의가 필요한 무거운 속성**: `box-shadow`, `filter`, `border-radius`와 같은 속성을 애니메이션에 적용하면 합성 레이어 구성이나 블렌딩 과정에서 추가적인 리소스를 강제로 소모하게 되어 성능이 크게 저하될 수 있으므로 애니메이션 시 사용을 최소화해야 합니다 [6].
*   **성능 테스트 도구**: 렌더링 및 애니메이션 성능 병목 현상을 파악하기 위해 개발자 도구의 'Layer Profiler'를 사용할 수 있습니다. 이를 통해 어떤 요소가 합성 레이어(composite layer)에서 렌더링되고 있는지 식별하여 성능 문제를 진단할 수 있습니다 [7].

## 🔗 Knowledge Connections
- **Related Topics:** CSS 애니메이션 성능 최적화, [[Reflow와 Repaint]], will-change 속성
- **Projects/Contexts:** 대규모 프론트엔드 시스템의 렌더링 파이프라인 최적화 프로젝트
- **Contradictions/Notes:** GPU 가속을 돕는 `will-change` 속성은 렌더링 성능을 개선할 수 있는 강력한 도구이지만, 불필요하게 너무 많은 요소에 남용할 경우 도리어 심각한 성능 저하를 일으킬 수 있으므로 꼭 필요한 경우에만 제한적으로 사용해야 합니다 [5].

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