🎬 마이크로인터랙션 애니메이션 타이밍 가이드

UI 행동 유형

🎬 마이크로인터랙션 타이밍, 왜 중요할까?

버튼을 눌렀을 때, 모달이 열릴 때, 페이지가 전환될 때... 이런 짧은 애니메이션을 마이크로인터랙션이라고 부릅니다. 지속시간이 너무 짧으면 딱딱하고 어색하게 느껴지고, 너무 길면 반응이 느리다는 인상을 줍니다. 실제로 여러 디자인 시스템은 행동의 종류에 따라 100ms부터 400ms까지 세분화된 지속시간 가이드를 제시합니다.

이 도구는 버튼 클릭, 호버, 모달 열기·닫기, 페이지 전환, 툴팁, 아코디언, 드롭다운, 로딩, 토스트, 드래그 앤 드롭, 스와이프 등 실무에서 자주 쓰이는 12가지 UI 행동을 기준으로 추천 지속시간과 이징 곡선을 안내합니다. 자주 반복되는 클릭·호버는 100~200ms로 짧게, 화면 전체가 바뀌는 페이지 전환은 300~400ms로 조금 더 여유 있게 설정하는 것이 일반적인 원칙입니다.

이징 곡선도 함께 확인하세요. 요소가 나타날 때는 ease-out(빠르게 시작해서 천천히 멈춤)을, 사라질 때는 ease-in(천천히 시작해서 빠르게 사라짐)을 사용하면 훨씬 자연스러운 움직임을 만들 수 있습니다. 로딩 스피너처럼 반복되는 애니메이션은 linear를 사용해 일정한 속도를 유지하는 것이 적합합니다.

자주 묻는 질문

애니메이션 지속시간이 너무 길면 어떤 문제가 생기나요?

400ms를 넘는 애니메이션은 사용자가 반응이 느리다고 느끼게 하고, 잦은 상호작용에서는 답답함을 유발합니다. 버튼 클릭이나 호버처럼 자주 발생하는 행동은 150ms 이내로 짧게 설정하는 것이 좋습니다.

이징 곡선(easing)은 왜 중요한가요?

linear는 기계적으로 느껴지고, ease-out은 자연스러운 감속감을 줘 등장 애니메이션에 적합합니다. 반대로 사라지는 애니메이션은 ease-in으로 가속하며 사라지게 하는 것이 자연스럽습니다.

모든 UI에 같은 타이밍을 적용해도 되나요?

아니요. 행동의 빈도와 중요도에 따라 달라야 합니다. 자주 반복되는 호버·클릭은 짧게, 페이지 전환처럼 한 번에 크게 바뀌는 화면은 조금 더 여유 있게 설정하는 것이 자연스럽습니다.

🎬 마이크로인터랙션 타이밍, 왜 중요할까?

자주 묻는 질문

같은 카테고리 도구