Next.js로 Excalidraw에 'Magic Move' 애니메이션 엔진을 구축
Excalidraw 기반 스케치에 애니메이션 기능을 추가하여 시각적 표현력(Visual Expression)을 향상시킴
Diffing(Diffing), Interpolation(보간), Easing(Easing) 기법을 활용하여 키프레임(Keyframe) 없는 애니메이션(Keyless Animation) 구현
Framer Motion 라이브러리를 사용하여 스프링 기반 이징(Spring-based Easing)을 적용, 자연스러운 움직임 연출
향후 MP4 내보내기(MP4 Export) 및 세부 단계 애니메이션(Sub-step Animation) 기능 추가 예정
Diffing 기반의 상태 변화 감지
본문에서는 'Magic Move' 애니메이션의 핵심인 상태 변화 감지(State Change Detection)를 위해 Diffing(Diffing) 기법을 사용한다. 두 프레임 간의 요소들을 ID를 기준으로 비교하여 Stable(유지), Morphed(변형), Entering(등장), Exiting(퇴장) 상태로 분류한다.
`categorizeTransition` 유틸리티 함수(Utility Function)를 통해 효율적으로 요소들을 분류하며, 렌더링 최적화(Rendering Optimization)를 수행한다.
안정적인 ID(Stable ID)를 기반으로 요소들을 추적함으로써, 불필요한 재렌더링(Re-rendering)을 방지하고 애니메이션 성능을 향상시킨다.
결과적으로, 상태 변화를 정확하게 감지하여 부드러운 전환을 가능하게 한다.
다양한 속성(Property)의 보간(Interpolation) 처리
애니메이션을 부드럽게 만들기 위해, Morphed(변형)된 요소들의 중간 상태를 계산하는 보간(Interpolation) 과정이 필요하다. 단순 선형 보간(Linear Interpolation)은 모든 속성에 적용될 수 없으므로, 속성별로 다른 보간 방식을 사용한다.
숫자(x, y, width)는 선형 보간(Linear Interpolation)을 사용하고, 색상(strokeColor)은 RGBA 변환 후 채널별 보간을 수행한다.
각도(Angle)는 최단 경로 보간(Shortest Path Interpolation)을 적용하여 부자연스러운 회전을 방지한다.
이러한 속성별 보간 방식을 통해, 시각적으로 자연스러운 애니메이션(Natural Animation)을 구현한다.
타이밍 조절을 통한 자연스러운 연출
단순한 선형 애니메이션은 뻣뻣하게 느껴질 수 있으므로, 타이밍 조절(Timing Control)을 통해 자연스러운 움직임을 연출한다. 특히, 요소들의 등장과 퇴장 시점을 조절하여 애니메이션의 생동감(Animation Liveness)을 부여한다.
퇴장(Exit) 애니메이션 종료 전에 등장(Enter) 애니메이션을 시작하여, 장면 전환의 부드러움(Smooth Transition)을 극대화한다.
오버랩(Overlap) 기법을 통해 요소들이 자연스럽게 자리를 잡는 듯한 느낌을 준다.
이러한 타이밍 조절은 애니메이션의 완성도(Animation Quality)를 높이는 핵심 요소이다.
스프링 기반 이징(Easing) 적용
선형 움직임은 지루하게 느껴질 수 있으므로, 스프링 기반 이징(Spring-based Easing)을 적용하여 물리적인 느낌을 더한다. 이징 함수(Easing Function)를 통해 진행률(Progress Value)을 변환하여, 요소들이 무게감 있게 움직이는 효과(Weighty Movement Effect)를 구현한다.
Quartic Ease-Out 함수를 사용하여, 요소들이 마치 무거운 물체처럼 자연스럽게 '착지'하는 느낌(Landing Feel)을 준다.
이징 함수는 애니메이션의 시각적 만족도(Visual Satisfaction)를 높이는 중요한 요소이다.
결과적으로, 스프링 기반 이징은 애니메이션에 현실감(Realism)을 부여하고, 사용자 경험을 향상시킨다.
