[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/GPU Acceleration (Compositing).md

@@ -1,6 +1,6 @@
 # [[GPU Acceleration (Compositing)]]
 
-## 📌 Brief Summary
+## 📌[[ brief]] Summary
 GPU 가속(또는 합성, Compositing)은 브라우저가 메인 스레드에서 수행하던 애니메이션 등 렌더링 작업을 그래픽 처리 장치(GPU)로 오프로드(Offload)하여 처리하는 성능 최적화 기법이다 [1, 2]. 이를 통해 브라우저는 값비싼 레이아웃 재계산(Reflow) 및 다시 그리기(Repaint) 단계를 건너뛰고 오직 합성(Composite) 단계만 트리거하게 된다 [2]. 결과적으로 특히 성능이 제한적인 모바일 기기 환경에서도 60FPS의 부드럽고 끊김 없는 애니메이션을 구현하는 데 핵심적인 역할을 한다 [2, 3].
 
 ## 📖 Core Content
@@ -15,7 +15,7 @@ GPU 가속(또는 합성, Compositing)은 브라우저가 메인 스레드에서
   * `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