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

10_Wiki/Topics/Frontend_Mastery/리플로우 및 리페인트 (Reflow & Repaint).md

@@ -1,6 +1,6 @@
-# [[리플로우 및 리페인트 ([[Reflow & Repaint]])]]
+# [[리플로우 및 리페인트 (Reflow & Repaint)|리플로우 및 리페인트 (Reflow & Repaint]]
 
-## 📌[[ brief]] Summary
+## 📌 Brief Summary
 리플로우(Reflow)는 브라우저가 페이지의 레이아웃 변경 사항을 감지하여 문서 내 요소들의 크기, 위치 등 기하학적 구조를 재계산하는 과정입니다. 리페인트(Repaint)는 레이아웃에는 영향을 주지 않고 색상, 가시성 등 시각적인 껍데기(skin)만 변경될 때 발생하는 렌더링 과정입니다. 두 과정 모두 브라우저의 연산 비용이 매우 높으며 잦은 발생은 웹 페이지 및 애니메이션의 성능 저하(버벅거림 등)로 직결되므로, 실무 CSS 설계 시 이를 최소화하는 구조와 스타일 작성 전략이 필수적입니다.
 
 ## 📖 Core Content
@@ -18,10 +18,10 @@
 **애니메이션 성능 최적화 방법**
 *   **GPU 가속 활용:** `width`나 `height` 대신 `transform`과 `scale`, `opacity`, `filter`와 같은 속성을 애니메이션에 활용해야 합니다 [6, 14, 15]. 이러한 속성들은 레이아웃 변경(리플로우)을 일으키지 않고 렌더링 계층에서만 처리되므로 GPU 가속을 유도하여 렌더링 성능을 획기적으로 높일 수 있습니다 [15].
 *   **`position: fixed` 또는 `absolute` 활용:** 애니메이션이 적용되는 요소에 절대 위치(`absolute` 또는 `fixed`)를 부여하면 해당 요소가 다른 요소의 레이아웃에 영향을 미치지 않기 때문에, 무거운 리플로우 대신 비교적 가벼운 리페인트만 발생합니다 [8, 16].
-*   **`will-change` 속성과 레이아웃 스래싱([[Layout Thrashing]]) 방지:** 브라우저가 애니메이션을 최적화할 수 있도록 `will-change` 속성을 통해 변경 사항을 미리 힌트로 제공할 수 있습니다 [17, 18]. 또한 DOM 읽기와 쓰기를 분리하고, `requestAnimationFrame`을 사용하여 애니메이션과 DOM 업데이트를 브라우저 렌더링 주기에 맞춰 일괄 처리(batch)해야 합니다 [19, 20].
+*   **`will-change` 속성과 레이아웃 스래싱([[Layout Thrashing|Layout Thrashing]]) 방지:** 브라우저가 애니메이션을 최적화할 수 있도록 `will-change` 속성을 통해 변경 사항을 미리 힌트로 제공할 수 있습니다 [17, 18]. 또한 DOM 읽기와 쓰기를 분리하고, `requestAnimationFrame`을 사용하여 애니메이션과 DOM 업데이트를 브라우저 렌더링 주기에 맞춰 일괄 처리(batch)해야 합니다 [19, 20].
 
 ## 🔗 Knowledge Connections
-- **Related Topics:** [[실무에서 CSS 관리하는 방법]], 애니메이션 (transition / keyframes), CSS 구조 설계 방식 BEM
+- **Related Topics:** [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]], 애니메이션 (transition / keyframes), CSS 구조 설계 방식 BEM
 - **Projects/Contexts:** 실무에서 대규모 프론트엔드 프로젝트의 CSS를 설계하거나 인터랙티브 UI 애니메이션을 구현할 때, 화려함("예쁘게")에 치중하여 성능을 저하시키는 코드를 피하고, 성능 최적화 및 유지보수성이 확보된 코드를 작성하기 위한 지침으로 사용됩니다.
 - **Contradictions/Notes:** 성능을 높이기 위해 사용하는 `will-change` 속성의 경우, 브라우저의 최적화를 돕는 좋은 힌트가 되지만 필요 이상으로 많은 요소에 남용하면 오히려 시스템 리소스를 과도하게 소모하여 성능 문제를 유발할 수 있으므로 최후의 수단으로 신중히 사용해야 합니다 [17, 18]. 또한, 극한의 상황에서는 애니메이션의 시각적 부드러움을 다소 희생하더라도 한 번에 이동하는 픽셀 폭을 넓혀 CPU의 부하(리플로우 과부하)를 줄이는 것이 모바일 기기 등에서 유리할 수 있습니다 [16].