feat: complete wikification of War Commander batch 1&2 and final grey dot cleanup

10_Wiki/Topics/Frontend_Mastery/애니메이션 (transition - keyframes) 성능 최적화.md

@@ -1,4 +1,4 @@
-# [[애니메이션 (transition / keyframes) 성능 최적화]]
+# 애니메이션 (transition / keyframes) 성능 최적화
 
 ## 📌 Brief Summary
 CSS 애니메이션(transition 및 keyframes) 성능 최적화는 브라우저의 렌더링 부하를 최소화하여 사용자에게 버벅거림(Jank) 없이 부드럽고 반응성 높은 UI를 제공하기 위한 기술적 접근입니다 [1-3]. 브라우저의 리플로우(Reflow)와 리페인트(Repaint)를 심하게 유발하는 속성 사용을 피하고, GPU 가속을 활용할 수 있는 속성 위주로 설계하는 것이 핵심입니다 [4-7]. 이를 통해 모바일 등 컴퓨팅 자원이 제한된 기기에서도 효율적인 인터랙션을 유지할 수 있습니다 [3, 8].
@@ -19,8 +19,8 @@ CSS 애니메이션(transition 및 keyframes) 성능 최적화는 브라우저
     *   애니메이션 요소를 `position: fixed` 혹은 `absolute`로 설정하면 주변 요소 레이아웃에 영향을 주지 않으므로, 페이지 전체의 리플로우를 막고 해당 요소의 리페인트만 발생시켜 연산 비용을 줄일 수 있습니다 [12, 18-20].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[리플로우(Reflow) 및 리페인트(Repaint)]], [[GPU 가속 및 브라우저 컴포지팅]], [[마이크로 인터랙션(Micro-interactions)]]
-- **Projects/Contexts:** [[유지보수 가능하고 확장성 있는 CSS 아키텍처 구축]], [[디자인 시스템 기반의 UI/UX 최적화]]
+- **Related Topics:** 리플로우(Reflow) 및 리페인트(Repaint), GPU 가속 및 브라우저 컴포지팅, [[마이크로 인터랙션(Micro-interactions)]]
+- **Projects/Contexts:** 유지보수 가능하고 확장성 있는 CSS 아키텍처 구축, 디자인 시스템 기반의 UI/UX 최적화
 - **Contradictions/Notes:** `will-change` 속성은 애니메이션 렌더링 최적화에 강력한 힌트를 제공하지만, 너무 많은 요소에 남용할 경우 브라우저가 과도한 메모리를 소모하고 불필요한 사전 연산을 수행하게 되어 오히려 전체적인 성능을 악화시킬 수 있습니다. 따라서 실제 성능 문제가 발생한 곳에 최후의 수단으로만 사용해야 합니다 [13, 15, 17].
 
 ---