Svelte Directive 기반 맞춤형 Animation 시스템 설계

Context

React의 AnimatePresence와 같은 외부 라이브러리 의존성 없이 프레임워크 레벨에서 Enter/Exit 애니메이션을 처리하려는 요구사항 분석. 기본 제공 Transition 외에 디자인 시스템 전반에 일관된 시각적 경험을 제공하기 위한 커스텀 Action 구조의 필요성 대두.

Technical Solution

• use:, in:, out: Directive를 통한 선언적 애니메이션 바인딩으로 개발 생산성 향상
• Layout Shift 방지를 위해 Opacity, Scale, Blur, Y축 이동을 결합한 Materialize/Dematerialize 로직 구현
• Mount/Unmount 과정 없이 컨텐츠 변경에 따라 크기를 조정하는 Morph Action으로 부드러운 상태 전이 구현
• Emerge/Dissolve 기법을 통해 요소 생성 시 Height와 Margin을 0부터 점진적으로 증가시켜 하단 요소의 Snap 현상 해결
• @floating-ui/dom 라이브러리를 Action 내부에 캡슐화하여 Collision-aware Positioning 연산을 처리하는 Tooltip 시스템 구축