[G1-Sync] Manual knowledge update

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

@@ -1,6 +1,6 @@
-# [[리플로우 및 리페인트 (Reflow & Repaint)]]
+# [[리플로우 및 리페인트 ([[Reflow & Repaint]])]]
 
-## 📌 Brief Summary
+## 📌[[ brief]] Summary
 리플로우(Reflow)는 브라우저가 페이지의 레이아웃 변경 사항을 감지하여 문서 내 요소들의 크기, 위치 등 기하학적 구조를 재계산하는 과정입니다. 리페인트(Repaint)는 레이아웃에는 영향을 주지 않고 색상, 가시성 등 시각적인 껍데기(skin)만 변경될 때 발생하는 렌더링 과정입니다. 두 과정 모두 브라우저의 연산 비용이 매우 높으며 잦은 발생은 웹 페이지 및 애니메이션의 성능 저하(버벅거림 등)로 직결되므로, 실무 CSS 설계 시 이를 최소화하는 구조와 스타일 작성 전략이 필수적입니다.
 
 ## 📖 Core Content
@@ -18,7 +18,7 @@
 **애니메이션 성능 최적화 방법**
 *   **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]]) 방지:** 브라우저가 애니메이션을 최적화할 수 있도록 `will-change` 속성을 통해 변경 사항을 미리 힌트로 제공할 수 있습니다 [17, 18]. 또한 DOM 읽기와 쓰기를 분리하고, `requestAnimationFrame`을 사용하여 애니메이션과 DOM 업데이트를 브라우저 렌더링 주기에 맞춰 일괄 처리(batch)해야 합니다 [19, 20].
 
 ## 🔗 Knowledge Connections
 - **Related Topics:** [[실무에서 CSS 관리하는 방법]], 애니메이션 (transition / keyframes), CSS 구조 설계 방식 BEM