Auto-Animate가 Marko 6를 위한 첫 번째 공식 어댑터를 출시하여, 개발자들이 추가적인 JavaScript 없이 단 하나의 태그만으로 리스트 변경 사항을 애니메이션화할 수 있게 되었습니다. 이번 조치는 Marko 프로젝트에서 모션 구현을 마치 특별한 작업처럼 느껴지게 만들었던 번거로운 보일러플레이트(boiler-plate) 코드를 제거한다는 점에서 큰 의미가 있습니다.
Marko의 렌더링 모델은 React나 Vue와 같은 프레임워크가 의존하는 클라이언트 측 "하이드레이션(hydration)" 단계를 건너뜁니다. 서버가 HTML을 전송한 후, Marko는 단순히 해당 마크업을 그 자리에서 재개하며, 이를 통해 런타임 크기를 gzipped 기준 약 7KB 정도로 매우 작게 유지합니다. 하지만 이러한 방식은 효과를 적용하기 전 클라이언트 측 렌더링을 기다려야 하는 많은 애니메이션 라이브러리의 작동을 방해합니다. 이미 존재하는 DOM에 연결할 수 있는 훅(hook)이 없었기 때문에, 개발자들은 전통적으로 모든 리스트 업데이트마다 커스텀 코드를 작성해야 했습니다.
새로운 어댑터는 Marko의 onMount 라이프사이클에 훅을 연결함으로써 이러한 제약을 우회합니다. 컴포넌트가 마운트될 때, 어댑터는 리스트의 부모 노드를 감시하는 MutationObserver를 생성합니다. 아이템이 추가, 필터링 또는 섞일 때 옵저버가 auto-animate의 내장 트랜지션 엔진을 트리거하여 부드러운 진입(entry), 퇴장(exit) 및 재정렬(reorder) 애니메이션을 자동으로 제공합니다. 이 모든 과정은 단 하나의 <auto-animate> 태그 뒤에서 이루어집니다.
이 태그는 세 가지 속성을 허용합니다:
- parent – 리스트 컨테이너를 가리키는 Marko 태그 변수입니다.
- options – 지속 시간(duration), 이징(easing) 및 기타 타이밍 설정을 위한 객체입니다.
- enabled – 런타임에 애니메이션을 켜거나 끌 수 있는 반응형 불리언(boolean) 값입니다.
enabled는 반응형이기 때문에, 개발자는 DOM을 건드리거나 핸들러를 다시 작성할 필요 없이 이를 임의의 상태(state) 값에 바인딩하여 모션을 토글할 수 있습니다. 따라서 이 어댑터는 정적 디렉티브보다 더 많은 유연성을 제공하면서도 나머지 컴포넌트 트리에는 영향을 주지 않습니다.
Vite를 사용하는 팀의 경우, 패키지가 “unresolved import” 경고를 발생시킬 수 있습니다. vite.config.ts에 다음을 추가하면 이 문제를 해결할 수 있습니다:
optimizeDeps: {
exclude: ["@formkit/auto-animate"]
}
이는 Vite가 해당 임포트를 프리번들링(pre-bundle)하려고 시도하는 대신, Marko의 플러그인이 처리하도록 지시합니다.
실질적인 이점은 즉각적입니다. 이전에는 useEffect 훅, 수동 클래스 토글 및 몇 줄의 애니메이션 코드가 필요했던 전형적인 Marko 리스트를 이제 다음과 같이 작성할 수 있습니다:
<auto-animate parent=items enabled=showAnimations options={duration: 300}>
<ul>
$ for|item| of=items
<li>${item.name}</li>
$ end
</ul>
</auto-animate>
추가적인 JavaScript도, 추가적인 번들 무게도 없으며, auto-animate가 다른 프레임워크에 제공하는 것과 동일한 부드러운 모션을 경험할 수 있습니다.
승자와 관찰자
이미 Marko를 채택한 프론트엔드 팀은 빈번한 UI 패턴인 동적 리스트에 대한 즉각적인 솔루션을 얻게 됩니다. 어댑터의 가벼운 특성은 성능이 중요한 사이트에 필수적인 Marko의 특징인 작은 번들 크기를 유지해 줍니다. 반면, 현재 어댑터는 리스트 변형(mutation)에 집중되어 있습니다. 맞춤형 타임라인 제어나 복잡한 애니메이션 연출이 필요한 개발자는 여전히 커스텀 코드나 다른 라이브러리를 사용해야 합니다.
향후 주목할 점
이 어댑터는 오픈 소스이며, 릴리스 노트에 연결된 데모 샌드박스가 이미 준비되어 있습니다. 커뮤니티의 피드백은 그리드 리플로우(grid reflows) 지원이나 Marko의 향후 컴포넌트 수준 트랜지션 통합과 같은 미래의 확장 기능을 결정하는 데 중요한 역할을 할 것입니다. 만약 채택 속도가 React와 Vue에서 auto-animate가 빠르게 확산된 것과 비슷하다면, JavaScript UI 생태계 전반에 걸쳐 “제로 코드(zero-code)” 모션에 대한 더 큰 움직임을 볼 수 있을 것입니다.
요약: Auto-Animate의 Marko 6 어댑터는 역사적으로 까다로웠던 작업인 서버 렌더링 리스트 애니메이션을 단 하나의 선언적 태그로 변환하여, 개발자에게 즉각적이고 토글 가능한 모션 레이어를 제공하는 동시에 Marko의 최소 번들 크기를 유지합니다.