Modal Animation

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

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

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