메뉴 애니메이션과 마이크로 인터랙션: 즐거움인가 방해인가?

이스탄불 갈라타 지구의 18테이블 카페 사장이 묻는다: "메뉴에 애니메이션을 추가하면 손님이 더 오래 머무나요?" 답은 밀리초에 숨어 있다. UX Movement 2023 연구는 명확하다: 200-300밀리초가 부드럽게 느껴지고, 500밀리초를 넘으면 무겁다. 스크롤 트리거 fade-in 도입 후 페이지 체류 시간 19% 증가, 이탈률 12% 감소.

최적 시간과 이징 곡선

시간은 인간 지각과 연결된다. 100밀리초 미만은 인식 불가; 200-300밀리초는 자연스럽고; 500밀리초+는 무겁다. cubic-bezier(0.4, 0, 0.2, 1)은 Material 표준 곡선으로 자연스러운 움직임을 만든다.

로딩 시 60밀리초 스태거는 프리미엄 느낌을 주지만 8장 이상이면 과하다. 모바일은 200밀리초가 이상적 — 더 길면 터치와 충돌한다.

효과적인 것과 그렇지 않은 것

효과적: 카테고리 탭의 슬라이딩 밑줄(250ms), 장바구니 버튼의 1.05x 확대 + 체크 아이콘, 즐겨찾기 시 하트 펄스, 스크롤 fade-in.

• Hover scale 1.02x — 만질 수 있을 듯한 감각
• 장바구니 배지 바운스 — 주의 유도
• 스켈레톤 로더 — 콘텐츠 기대 설정

과잉과 접근성

과도한 애니메이션은 접근성 문제다. prefers-reduced-motion을 지원하라 — WCAG 2.1 필수.

패럴랙스, 자동재생 영상, 무한 회전 아이콘은 명백한 방해. 갈라타 카페가 펄싱 배지를 2초 후 정지시키니 CTR이 23% 상승.

FAQ

이상적인 시간? 마이크로 인터랙션 200-300ms, 전환 최대 400ms.

성능을 해치는 애니메이션? JS의 width/height는 reflow 유발; CSS transform과 opacity는 GPU 가속.

노인을 위해 끌까? 자동이 아닌 prefers-reduced-motion으로 사용자 선택.

도움이 되셨나요? 공유해 주세요.