2nd/10_Wiki/Topics/애니메이션 (transition - keyframes).md

애니메이션 (transition / keyframes)

📌Brief 실전 Summary

CSS 애니메이션(transition 및 keyframes)은 사용자 경험(UX)을 향상시키고 인터페이스의 상태 변화를 명확하게 전달하는 핵심 요소입니다. 하지만 단순히 "예쁘게" 만드는 것을 넘어 "유지보수 가능하고 성능이 최적화된" 방식으로 설계되어야 하며, 이를 위해서는 리플로우(Reflow)나 리페인트(Repaint)를 유발하는 속성 사용을 피하고 GPU 가속을 활용할 수 있는 속성을 전략적으로 선택하는 것이 실무 CSS 관리의 핵심입니다.

📖 Core Content

• UX/UI 관점에서의 애니메이션 역할 및 기본 원칙 CSS 트랜지션과 애니메이션은 상태 변화(모달 열기, 탭 전환), 마이크로 인터랙션(버튼 호버 효과 등), 로딩 상태 등을 시각적으로 전달하여 사용자의 인지 부하를 줄이고 직관적인 피드백을 제공합니다 [1-3]. 부자연스러운 선형(Linear) 효과보다는 ease-in-out과 같은 이징(Easing) 함수를 사용하여 자연스러운 움직임을 구현해야 하며, 애니메이션 지속 시간은 200ms에서 500ms 사이를 유지하는 것이 권장됩니다 [4].
• 레이아웃(Reflow) 및 고비용 속성 애니메이션 지양 실무에서 CSS 애니메이션 성능을 저하시키는 가장 큰 원인은 width, height, margin, padding, top, left, bottom, right 등의 레이아웃 속성을 애니메이션화하는 것입니다 [5-7]. 이는 브라우저가 페이지의 레이아웃을 다시 계산하게 만들어 리플로우(Layout Thrashing)와 리페인트를 유발합니다 [6, 8]. 또한, box-shadow, filter, border-radius와 같은 속성도 브라우저 렌더링 리소스를 많이 소모하므로 애니메이션에 사용하는 것을 피해야 합니다 [5, 9].
• 성능 최적화 및 GPU 가속 활용 유지보수와 성능을 모두 잡기 위해서는 리플로우와 리페인트를 발생시키지 않는 transform(예: translate, scale, rotate3d)과 opacity 속성을 주로 사용해야 합니다 [9-12]. 이러한 속성들은 브라우저의 메인 스레드를 거치지 않고 GPU에서 처리(Compositing)되므로 모바일 기기나 저사양 환경에서도 버벅거림(Jank) 없는 부드러운 성능을 보장합니다 [9, 10, 12, 13].
• 실무 렌더링 최적화 및 제어 기법
  • 애니메이션 루프 제어: 무한 루프(infinite) 애니메이션을 남용하면 시스템 리소스를 지속적으로 고갈시키므로, 불필요한 경우 animation-play-[[State|State]]를 이용해 화면에 보이지 않을 때 애니메이션을 일시 정지해야 합니다 [14].
  • will-change 속성 활용: 브라우저가 요소의 변화를 미리 예측하고 최적화할 수 있도록 힌트를 주는 will-change 속성을 적용할 수 있습니다 [15, 16]. 단, 이 속성 자체도 과도하게 사용하면 리소스를 차지하므로 성능 문제가 발생하는 곳에만 최후의 수단으로 사용하는 것이 좋습니다 [15, 16].
  • 절대 위치 지정 활용: 애니메이션을 적용해야 하는 요소를 position: fixed나 position: absolute로 배치하면, 해당 요소가 움직일 때 문서 내 다른 요소의 레이아웃에 영향을 미치지 않기 때문에 전체 페이지 리플로우를 방지하고 리페인트만 발생시켜 비용을 줄일 수 있습니다 [17, 18].

🔗 Knowledge Connections

• Related Topics: Reflow 및 Repaint 최적화, CSS 성능 최적화(Performance), UX/UI 마이크로 인터랙션
• Projects/Contexts: 실무에서의 CSS 유지보수 전략, 디자인 시스템의 모션 가이드라인(Design Tokens)
• Contradictions/Notes: 애니메이션은 사용자 경험 향상에 매우 유용하지만, 무분별하고 과도한 모션은 사용자의 인지 부하를 높이거나 전정계 질환(vestibular disorders)이 있는 사용자에게 해로울 수 있습니다. 따라서 반드시 모션을 최소화하거나 끌 수 있도록 prefers-reduced-motion 미디어 쿼리를 함께 사용하여 접근성을 고려해야 한다고 소스는 강조하고 있습니다 [4, 19-21].

---

Last updated: 2026-04-26