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

# 애니메이션 (transition / keyframes) 성능 최적화

## 📌[[ brief]] Summary
CSS 애니메이션(transition 및 keyframes) 성능 최적화는 브라우저의 렌더링 부하를 최소화하여 사용자에게 버벅거림(Jank) 없이 부드럽고 반응성 높은 UI를 제공하기 위한 기술적 접근입니다 [1-3]. 브라우저의 리플로우(Reflow)와 리페인트(Repaint)를 심하게 유발하는 속성 사용을 피하고, GPU 가속을 활용할 수 있는 속성 위주로 설계하는 것이 핵심입니다 [4-7]. 이를 통해 모바일 등 컴퓨팅 자원이 제한된 기기에서도 효율적인 인터랙션을 유지할 수 있습니다 [3, 8].

## 📖 Core Content
*   **리플로우(Reflow)와 리페인트(Repaint) 방지**
    *   성능 저하의 가장 큰 원인은 `width`, `height`, `margin`, `padding`, `top/left/bottom/right` 등 레이아웃 관련 속성을 애니메이션에 사용하는 것입니다 [4, 6, 9]. 이러한 속성은 브라우저가 전체 페이지의 레이아웃을 다시 계산하게(Reflow/[[Layout Thrashing]]) 만들어 렌더링 비용을 크게 증가시킵니다 [8, 9].
    *   또한 `box-shadow`, `border-radius`, `filter`와 같이 렌더링 비용이 높은 속성을 과도하게 애니메이션 처리하면 빈번한 리페인트(Repaint)가 발생하여 애니메이션이 느려집니다 [4, 10, 11].
*   **안전한 속성을 통한 GPU 가속(Compositing) 활용**
    *   레이아웃 재계산을 피하려면 `transform`과 `opacity` 속성을 사용하여 애니메이션을 구현해야 합니다 [5, 7, 10].
    *   브라우저는 `transform: translateZ()`나 `rotate3d()` 등 특정 속성의 변화를 감지하면, 애니메이션 작업을 메인 스레드에서 분리하여 디바이스의 GPU로 넘겨 처리(Compositing)하므로 성능이 비약적으로 향상됩니다 [5, 10, 12].
*   **애니메이션의 복잡도 제어 및 성능 최적화 기법**
    *   수백 개의 요소에 동시에 애니메이션을 적용하면 브라우저가 압도되어 프레임(FPS)이 떨어지므로 필수적인 UI 요소에만 적용해야 합니다 [11, 13].
    *   무한 반복(`infinite`) 루프 애니메이션을 남용할 경우 지속적으로 시스템 리소스가 낭비됩니다 [14]. 제한된 반복 횟수를 지정하거나, 요소가 화면에 보이지 않을 때는 `animation-play-[[State]]: paused`를 활용해 연산을 중지시키는 것이 좋습니다 [6, 14].
    *   크고 복잡한 배경 이미지를 애니메이션 하는 대신, 가볍고 렌더링이 빠른 SVG나 CSS 그라디언트를 사용해야 합니다 [15, 16].
*   **`will-change` 속성과 문서 흐름(Flow) 분리**
    *   요소에 `will-change` 속성을 추가하면, 요소가 어떻게 변경될지 브라우저에 미리 알려주어 애니메이션에 필요한 최적화를 사전에 준비하게 할 수 있습니다 [13, 17].
    *   애니메이션 요소를 `position: fixed` 혹은 `absolute`로 설정하면 주변 요소 레이아웃에 영향을 주지 않으므로, 페이지 전체의 리플로우를 막고 해당 요소의 리페인트만 발생시켜 연산 비용을 줄일 수 있습니다 [12, 18-20].

## 🔗 Knowledge Connections
- **Related Topics:** 리플로우(Reflow) 및 리페인트(Repaint), GPU 가속 및 브라우저 컴포지팅, [[마이크로 인터랙션([[Micro-interactions]])]]
- **Projects/Contexts:** 유지보수 가능하고 확장성 있는 CSS 아키텍처 구축, 디자인 시스템 기반의 UI/UX 최적화
- **Contradictions/Notes:** `will-change` 속성은 애니메이션 렌더링 최적화에 강력한 힌트를 제공하지만, 너무 많은 요소에 남용할 경우 브라우저가 과도한 메모리를 소모하고 불필요한 사전 연산을 수행하게 되어 오히려 전체적인 성능을 악화시킬 수 있습니다. 따라서 실제 성능 문제가 발생한 곳에 최후의 수단으로만 사용해야 합니다 [13, 15, 17].

---
*Last updated: 2026-04-26*