한줄의 코드로 모션 추가하기 (formkit/auto-animate)

UI/UX 에서 모션(애니메이션)은 사용자 경험을 향상시키기 위한 핵심 요소 중 하나입니다. 그래서 저 역시도 CSS의 속성인 transition이나, animation을 사용해서 직접 구현을 했었는데요. 소개해 드리는 라이브러리는 단 한 줄의 코드로 모션을 추가할 수 있는 라이브러리입니다. useAutoAnimate라는 훅을 부모 엘리먼트의 ref 값으로 넣어주면 끝입니다. 자식 엘리먼트의 추가/삭제/이동 시 자동으로 애니메이션이 트리거 되는 방식입니다. CSS로 직접 구현하면 섬세한 작업이 가능하지만 일정 역시 소요되는 것이 사실인데요. 큰 일정 소요 없이, 어느 정도 생동감 있는 모션을 추가하고 싶을 때는 유용할 것 같습니다. React, Vue, Svelte, Angular 등 다양한 라이브러리에서 사용이 가능합니다. https://auto-animate.formkit.com/