마이크로인터랙션

작은 순간의 구조

세퍼(2013)는 마이크로인터랙션을 네 부분으로 나눴어요. 사용자가 누르거나 조건이 충족되는 '트리거', 무엇이 일어나는지 정하는 '규칙', 결과를 보여주는 '피드백', 반복과 예외를 다루는 '루프와 모드'예요. 하트를 누르면 색이 차오르고 숫자가 하나 오르는 그 짧은 순간에 네 요소가 모두 들어 있어요. 켄드릭(2018)은 이런 작은 상호작용이 상태 알림, 오류 방지, 브랜드 인상까지 담당한다고 설명했어요. 모바일에서는 시각 피드백에 햅틱 피드백을 더하면 화면을 보지 않아도 결과를 느낄 수 있어요.

기다림을 줄이는 피드백

마이어스(1985)는 진행률 표시가 있을 때 사용자가 기다림을 더 잘 견디고 만족도가 높다는 것을 보였어요. 해리슨과 동료들(2010)은 진행 막대 안의 물결 모양 애니메이션 방향과 속도만 바꿔도 같은 시간이 더 짧게 느껴진다는 것을 실험으로 확인했어요. 버튼을 누른 순간의 눌림 효과, 전송 중 스피너, 완료 체크 표시는 모두 '시스템이 내 말을 들었다'는 신호예요. 콘텐츠가 오는 중이라면 스켈레톤 스크린과 함께 쓰면 좋아요. 마지막 완료 순간의 작은 축하는 피크엔드 법칙처럼 전체 경험의 기억을 좋게 만들어요.

움직임의 원칙과 접근성

창과 웅가(1993)는 만화 애니메이션의 원리인 부드러운 가속과 감속, 연속성을 UI에 적용하면 변화가 더 이해하기 쉽다고 했고, 히어와 로버트슨(2007)은 애니메이션 전환이 무엇이 바뀌었는지 추적하는 데 도움이 된다는 것을 보였어요. 하지만 움직임은 짧고 목적이 분명해야 해요. 장식용 애니메이션이 길면 오히려 기다림이 늘어요. WCAG 2.2의 2.3.3 기준은 상호작용으로 생기는 움직임을 끌 수 있게 하라고 권하며, CSS의 prefers-reduced-motion으로 기기 설정을 따를 수 있어요. 이는 전정 장애나 멀미가 있는 사람을 위한 웹 접근성의 배려예요.

자주 묻는 질문

마이크로인터랙션과 애니메이션은 같은 건가요?

아니에요. 애니메이션은 피드백을 보여주는 수단 중 하나이고, 마이크로인터랙션은 트리거부터 규칙·피드백까지 포함한 작은 과업 전체예요.

애니메이션은 얼마나 길어야 하나요?

대부분의 UI 피드백은 짧고 즉각적이어야 해요. 길어지면 기다림이 늘어나므로 목적이 분명한 움직임만 쓰세요.

출처 검토일: 2026-10-27

참고문헌

1. Saffer, D. (2013). Microinteractions: Designing with details. O'Reilly Media. 트리거·규칙·피드백·루프와 모드라는 마이크로인터랙션 4요소를 정리한 원전이라, 구조를 잡을 때 참고하면 도움이 돼요.
2. Kendrick, A. (2018, October 21). Microinteractions in user experience. Nielsen Norman Group. 실제 앱 사례로 마이크로인터랙션의 역할을 설명해, 적용 범위를 볼 때 참고하면 도움이 돼요.
3. Harrison, C., Yeo, Z., & Hudson, S. E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1545–1548). ACM. 진행 막대의 애니메이션만 바꿔도 체감 시간이 줄었다는 실험이라, 대기 화면을 설계할 때 참고하면 도움이 돼요.
4. Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–17). ACM. 진행률 표시가 사용자 만족을 높인다는 고전 연구라, 피드백의 가치를 설명할 때 참고하면 도움이 돼요.
5. Chang, B.-W., & Ungar, D. (1993). Animation: From cartoons to the user interface. In Proceedings of the 6th Annual ACM Symposium on User Interface Software and Technology (pp. 45–55). ACM. 만화 애니메이션 원리를 UI에 적용한 고전이라, 움직임의 자연스러움을 설계할 때 참고하면 도움이 돼요.
6. Heer, J., & Robertson, G. (2007). Animated transitions in statistical data graphics. IEEE Transactions on Visualization and Computer Graphics, 13(6), 1240–1247. 애니메이션 전환이 변화 추적을 돕는다는 실험이라, 화면 전환 효과의 근거를 볼 때 참고하면 도움이 돼요.
7. World Wide Web Consortium. (2023). Understanding Success Criterion 2.3.3: Animation from interactions. In Understanding WCAG 2.2. 상호작용으로 생기는 움직임을 끌 수 있게 하라는 기준이라, 멀미를 겪는 사용자를 배려할 때 참고하면 도움이 돼요.