Motion Gallery

UI/UX에서 애니메이션이 사용자 경험에 얼마나 큰 영향을 주는지 직접 확인해보고 싶어, Framer Motion 라이브러리와 TailwindCSS를 활용해 인터랙션 실험들을 모아보았습니다.

컴포넌트들이 화면에 나타나거나 사라질 때, 혹은 마우스 오버 시 어떤 방식으로 반응하는 것이 가장 자연스럽고 즐거운 경험을 줄지 다양하게 시도해 보았습니다. whileHover, whileTap 같은 속성들을 조합하여 카드들이 마치 살아있는 것처럼 리듬감 있게 움직이도록 만들었고, variants를 활용해 컴포넌트 간 전환 시 부드러운 페이드, 슬라이드, 스케일 효과가 적용되는 과정을 탐구했습니다.

이 실험들을 통해 애니메이션이 단순히 시각적인 요소에 그치지 않고, 사용자의 시선 흐름을 유도하고 콘텐츠에 대한 몰입도를 높이는 중요한 도구임을 직접 경험할 수 있었습니다. TailwindCSS로 빠르게 스타일을 입히면서 Framer Motion으로 동적인 요소를 더하는 과정 자체가 즐거운 학습이었습니다.