![[Vue] motion 라이브러리로 더 나은 UX 제공하기](https://devocean.sk.com/thumnail/2025/3/26/161965bcf2c0b07df46454d50714fad4eb4e06189069272bebd9fabacb97b9b4.png)
프론트엔드
[Vue] motion 라이브러리로 더 나은 UX 제공하기
두줄요약
Vue에서 motion-v를 사용해 다양한 UI 애니메이션을 선언적으로 구현하는 방법을 소개했습니다. Transition, IntersectionObserver, GSAP보다 간결하게 작성할 수 있는 사례를 함께 살펴보았습니다.
핵심 내용
- Vue에서 motion-v를 활용해 선언적으로 애니메이션을 구성하는 방법 소개
- Expand-Collapse, 리스트 순서 변경, 스크롤 트리거 등 세 가지 UI 사례 비교
- Transition, IntersectionObserver, GSAP 대비 간결한 코드와 layout, whileInView 같은 장점 강조
적용해볼 점
- max-height 중심 구현 대신 height 기반 애니메이션 적용 검토
- 리스트 재배치, 뷰포트 진입 애니메이션에 layout, whileInView 활용
- 복잡한 UI 전환이나 기존 명령형 애니메이션 코드를 motion으로 단순화 검토