[G1-Sync] Manual knowledge update

10_Wiki/Topics/Frontend_Mastery/성능 중심의 웹 애니메이션 및 인터랙션 구현.md

@@ -1,6 +1,6 @@
 # [[성능 중심의 웹 애니메이션 및 인터랙션 구현]]
 
-## 📌 Brief 시Summary
+## 📌[[ brief]] 시Summary
 웹 애니메이션과 인터랙션은 사용자 경험을 향상시키고 인지된 성능(Perceived Performance)을 높이는 강력한 도구이지만, 잘못 구현될 경우 브라우저 렌더링 성능을 심각하게 저하시킬 수 있습니다. 성능 중심의 구현을 위해서는 리플로우(Reflow)와 리페인트(Repaint)를 유발하는 속성의 사용을 피하고, GPU 가속을 활용할 수 있는 `transform`이나 `opacity` 위주로 애니메이션을 작성해야 합니다. 또한, 애니메이션의 지속 시간과 실행 조건을 제어하여 시스템 리소스 소모를 최소화하고 유지보수 가능한 CSS 구조를 만드는 것이 실무적인 핵심입니다.
 
 ## 📖 Core Content
@@ -15,11 +15,11 @@
 
 *   **효율적인 애니메이션 제어 및 리소스 관리**
     *   동시에 수백 개의 요소에 애니메이션을 적용하거나, 크고 복잡한 비트맵 배경 이미지를 애니메이션하는 것은 프레임 속도(FPS)를 저하시킵니다. 복잡한 그래픽은 SVG나 CSS 그레이디언트를 사용하는 것이 성능에 유리합니다 [11, 12].
-    *   무한히 반복되는 애니메이션 루프는 시스템 리소스를 지속적으로 고갈시킵니다. 꼭 필요한 경우가 아니라면 유한한 반복 횟수를 지정하거나, 요소가 화면 밖에 있을 때는 `animation-play-state`를 이용해 애니메이션을 일시 정지시켜야 합니다 [13].
+    *   무한히 반복되는 애니메이션 루프는 시스템 리소스를 지속적으로 고갈시킵니다. 꼭 필요한 경우가 아니라면 유한한 반복 횟수를 지정하거나, 요소가 화면 밖에 있을 때는 `animation-play-[[State]]`를 이용해 애니메이션을 일시 정지시켜야 합니다 [13].
     *   애니메이션 지속 시간은 200ms ~ 500ms 사이로 짧게 유지하고, 선형(Linear)보다는 `ease-in-out` 같은 자연스러운 이징(Easing) 함수를 적용하여 빠르고 매끄러운 느낌을 주어야 합니다 [14].
 
-*   **성능 테스트 및 접근성(Accessibility) 고려**
-    *   애니메이션 코드를 작성한 후에는 반드시 Chrome DevTools의 Performance Panel, Layer Profiler 등을 활용해 병목 현상을 파악하고, 저사양 기기에서도 원활히 동작하는지 테스트해야 합니다 [14, 15].
+*   **성능 테스트 및 접근성([[Accessibility]]) 고려**
+    *   애니메이션 코드를 작성한 후에는 반드시 [[Chrome DevTools]]의 [[Performance Panel]], Layer Profiler 등을 활용해 병목 현상을 파악하고, 저사양 기기에서도 원활히 동작하는지 테스트해야 합니다 [14, 15].
     *   전정기관 장애가 있는 사용자는 과도한 움직임에 어지러움을 느낄 수 있으므로, `prefers-reduced-motion` 미디어 쿼리를 활용해 애니메이션을 최소화하거나 끌 수 있는 방안을 마련해야 합니다 [14, 16, 17].
 
 ## 🔗 Knowledge Connections