Motion Gallery

Thu, 09 Oct 2025 00:00:00 +0000

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

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

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

Parallax Scroll Experiment

Tue, 07 Oct 2025 00:00:00 +0000

스크롤만으로 어떻게 웹사이트에 깊이감과 생동감을 줄 수 있는지 궁금해서, 바닐라 자바스크립트(Vanilla JS)와 CSS만으로 직접 Parallax 효과를 실험해 보았습니다.

가장 먼저 스크롤 위치(scrollY) 값을 받아와, 배경, 중간, 전경에 해당하는 각 이미지 레이어의 transform: translateY() 값을 다르게 조절하는 방식으로 접근했습니다. 각 레이어의 이동 속도에 차이를 두면서 입체감이 어떻게 변하는지 관찰하는 과정 자체가 재미있었습니다.

단순히 스크롤 이벤트에만 의존하면 애니메이션이 끊겨 보일 수 있다는 걸 알게 됐고, 이를 해결하기 위해 requestAnimationFrame을 사용해 브라우저 렌더링 주기에 맞춰 부드럽게 움직이도록 개선했습니다. 또한, 화면에 보일 때만 애니메이션이 동작하도록 IntersectionObserver를 적용해보거나 translateZ(0) 트릭으로 GPU 가속을 활성화하는 등, 성능 최적화 방법들도 함께 탐구해 보았습니다.

이번 실험을 통해 스크롤 기반 애니메이션의 기본 원리와 성능 최적화의 중요성을 직접 체감할 수 있었습니다.

Animation | 김미소의 포트폴리오

Motion Gallery

Parallax Scroll Experiment