React | 김미소의 포트폴리오

Motion Gallery

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

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

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

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

Modal Animation

Sat, 04 Oct 2025 00:00:00 +0000

웹사이트에서 흔히 쓰이는 모달 창이 너무 갑자기 나타나거나 사라지면 사용자 경험을 해친다고 생각했습니다. 어떻게 하면 더 부드럽고 자연스럽게 만들 수 있을지 Framer Motion을 이용해 직접 실험해봤습니다.

가장 먼저, 모달이 사라질 때의 애니메이션을 구현하기 위해 Framer Motion의 AnimatePresence 컴포넌트가 어떻게 동작하는지 알아보았습니다. 이를 바탕으로, 모달 창이 나타날 때는 배경이 어두워지면서(Fade) 창은 살짝 커지는(Scale) 효과를 동시에 적용해보며 가장 만족스러운 조합을 찾아나갔습니다.

애니메이션 외에도 사용 편의성을 높이기 위해 ESC 키를 누르거나 모달 창 바깥의 어두운 영역을 클릭했을 때 창이 닫히는 로직을 추가하는 과정도 함께 진행했습니다. 이번 실험을 통해 애니메이션이 단순히 꾸미기용이 아니라, 사용자의 행동을 방해하지 않고 자연스럽게 상호작용의 흐름을 만들어주는 중요한 UX 장치임을 다시 한번 느낄 수 있었습니다.

Dark Mode Toggle

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

요즘 웹사이트의 필수 기능이 된 다크모드를 직접 구현해보며 그 원리를 이해하고 싶었습니다.

가장 먼저 React의 useState를 이용해 ’light’와 ‘dark’ 상태를 관리하고, TailwindCSS의 dark: 클래스가 어떻게 동작하는지 알아보는 것부터 시작했습니다. 단순히 상태를 바꾸는 것에서 더 나아가, 사용자가 설정한 테마가 새로고침 후에도 유지되도록 localStorage에 값을 저장하고 불러오는 기능도 실험해 보았습니다.

기능 구현 후에는 시각적인 완성도를 높이는 데 집중했습니다. 테마가 바뀔 때 배경색이 부드럽게 전환되도록 transition-colors를 적용해보고, Framer Motion을 이용해 토글 스위치 자체가 조금 더 재미있게 움직이도록 만들어보았습니다.

단순해 보이는 토글 하나에도 상태 관리, 데이터 영속성, 사용자 경험을 위한 시각적 디테일까지 여러 요소를 고민해볼 수 있는 의미 있는 실험이었습니다.