Auto-animate가 Marko 6를 위한 공식 어댑터를 출시하여, 개발자들이 별도의 커스텀 코드 없이 단 하나의 태그만으로 리스트 변경 사항을 애니메이션화할 수 있게 되었습니다. 이 패키지는 npm을 통해 설치하며, AutoAnimate로 임포트하여 추가, 삭제, 순서 변경 시 즉시 사용할 수 있습니다.
Marko에 이것이 필요했던 이유
Marko의 렌더링 모델은 일반적인 하이드레이션(hydration) 단계를 건너뜁니다. 서버는 HTML을 스트리밍하고, 클라이언트는 서버가 멈춘 정확한 지점에서 "재개(resume)"하며, 두 번째 렌더링을 통해 컴포넌트 트리를 다시 구축하지 않습니다. 프레임워크 자체에 자바스크립트가 거의 포함되지 않기 때문에, 무거운 런타임을 주입하는 추가 라이브러리는 이러한 장점을 상쇄할 수 있습니다.
새로운 어댑터는 Marko가 이미 전달하는 실제 DOM 노드에 직접 연결됩니다. 이 어댑터는 DOM의 변경 사항을 감시하는 브라우저 API인 MutationObserver를 생성하고, 리스트의 기반 데이터가 변경될 때마다 auto-animate의 트랜지션 로직을 트리거합니다. 실제로 개발자는 데이터만 변경하면 됩니다. DOM은 자동으로 업데이트되고 애니메이션이 적용됩니다.
시작하기
코어 패키지 설치
npm install @formkit/auto-animateMarko 전용 어댑터 가져오기
import AutoAnimate from "@formkit/auto-animate/marko"리스트의 부모 요소를
<AutoAnimate>로 감쌉니다.
끝입니다. 훅(hook)도, 추가 디렉티브도, 수동 라이프사이클 관리도 필요 없습니다.
Vite 팁
새로운 Vite 프로젝트에서는 가끔 어댑터에 대한 임포트 에러가 발생할 수 있습니다. vite.config.ts에 다음 내용을 추가하면 해결됩니다:
optimizeDeps: {
exclude: ["@formkit/auto-animate"]
}
이 제외 설정을 통해 Vite의 옵티마이저 대신 Marko 자체 플러그인이 해당 패키지를 처리할 수 있게 됩니다.
개발자가 얻는 이점
- 매우 작은 크기 – 어댑터는 DOM 변경 사항을 관찰하는 데 필요한 코드만 추가하므로, 이미 가벼운 Marko의 번들 크기를 키우지 않습니다.
- 반응형 토글 – 간단한 반응형 속성을 사용하여 런타임에 애니메이션을 켜거나 끌 수 있습니다.
- 번거로움 없음(Zero ceremony) – 항목별 애니메이션 로직을 작성하거나 마운트/언마운트 훅을 관리할 필요가 없습니다.
- 자동 정리 – 컴포넌트가 언마운트될 때 태그가 옵저버를 해제하여 메모리 누수를 방지합니다.
라이브 데모에서는 바운스(bounce) 및 스프링(spring) 스타일 효과를 위한 옵션 플러그인을 포함한 전체 API를 확인할 수 있습니다. 샌드박스 링크는 원문 발표 내용에 포함되어 있습니다.
잠재적인 단점
이 어댑터는 리스트 애니메이션에 집중되어 있습니다. 더 복잡한 연출(예: 서로 관련 없는 요소들의 순차적 등장)은 여전히 커스텀 코드나 다른 라이브러리가 필요합니다. Vite를 사용하는 개발자는 설정 수정을 잊지 말아야 하며, 그렇지 않으면 임포트 에러가 발생할 수 있습니다. 마지막으로, 이 메커니즘은 MutationObserver에 의존하기 때문에, 완전한 DOM이 없는 환경(예: 서버 사이드 렌더링 테스트)에서는 애니메이션이 보이지 않지만 UI가 깨지지는 않습니다.
향후 주목할 점
Auto-animate의 유지 관리자들은 Marko의 "HTML로부터 재개(resume-from-HTML)" 철학을 공유하는 다른 프레임워크를 위한 추가 어댑터를 예고했습니다. Marko 플러그인이 인기를 얻는다면, 드래그 앤 드롭 지원이나 상태 관리 라이브러리와의 통합 같은 커뮤니티 기여 확장 기능이 향후 몇 달 내에 등장할 수도 있습니다.
요약: auto-animate의 선언적 트랜지션 엔진과 Marko의 최소 런타임 접근 방식을 결합함으로써, 이 새로운 어댑터는 번들 크기 부담이 거의 없고 추가 코드도 필요 없는 리스트 애니메이션을 제공하며, 프레임워크 자체만큼이나 매끄러운 개발자 경험을 유지합니다.