2nd/10_Wiki/Topics/애니메이션 (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|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