docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links

This commit is contained in:
Antigravity Agent
2026-05-02 09:18:34 +09:00
parent c84dcb8371
commit 6445fcc05b
13150 changed files with 55394 additions and 100862 deletions
@@ -1,6 +1,6 @@
# [[GPU Acceleration (Compositing)]]
# [[GPU Acceleration (Compositing)|GPU Acceleration (Compositing]]
## 📌[[ brief]] Summary
## 📌 Brief Summary
GPU 가속(또는 합성, Compositing)은 브라우저가 메인 스레드에서 수행하던 애니메이션 등 렌더링 작업을 그래픽 처리 장치(GPU)로 오프로드(Offload)하여 처리하는 성능 최적화 기법이다 [1, 2]. 이를 통해 브라우저는 값비싼 레이아웃 재계산(Reflow) 및 다시 그리기(Repaint) 단계를 건너뛰고 오직 합성(Composite) 단계만 트리거하게 된다 [2]. 결과적으로 특히 성능이 제한적인 모바일 기기 환경에서도 60FPS의 부드럽고 끊김 없는 애니메이션을 구현하는 데 핵심적인 역할을 한다 [2, 3].
## 📖 Core Content
@@ -15,12 +15,12 @@ GPU 가속(또는 합성, Compositing)은 브라우저가 메인 스레드에서
* `position: fixed`와 같이 특정 속성이 적용되어 애니메이션되는 요소 [3].
* 브라우저에 요소가 변경될 것임을 미리 알려주는 `will-change` 속성이 적용된 요소 [3, 7].
* `<video>`, `<canvas>`, `<iframe>`처럼 자체적인 독립 레이어에서 렌더링되는 요소들 [3].
* **성능 최적화([[Optimization]]) 전략:**
* **성능 최적화([[Optimization|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
- **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].
---