Microinteraction, 작은 인터랙션이 제품의 인격이 된다

한 줄로

2013년 댄 새퍼의 책 제목이 디자인 어휘로 정착했습니다. 좋아요 누를 때 하트가 튀는 그 0.3초가 제품 차별화의 핵심이 됐습니다.

어디서 왔나

2013년, 디자이너 댄 새퍼(Dan Saffer)가 책 Microinteractions: Designing with Details를 출간했습니다. 책의 핵심 주장은 제품을 차별화하는 것은 큰 기능이 아니라 작은 디테일이라는 것이었습니다.

새퍼가 정의한 microinteraction의 구조(4단계)는 다음과 같습니다.

Trigger(계기): 사용자 동작 또는 시스템 이벤트.
Rules(규칙): 어떤 일이 일어나는지의 로직.
Feedback(피드백): 사용자에게 결과를 보여줌.
Loops & Modes(루프와 모드): 상태 변화의 흐름.

예시로 알람 끄기를 생각해 보겠습니다.

Trigger: 알람 울림.
Rules: 시스템이 어떻게 알람을 멈출지 결정.
Feedback: 화면이 어두워지며 진동이 멈춤.
Loops: 5분 후 다시 울림(스누즈).

이 책 이후 디자인 업계 전체가 마이크로인터랙션이라는 단어를 본격적으로 쓰기 시작했습니다. 트위터의 좋아요 하트 애니메이션, Stripe 체크아웃의 카드 깜빡임, Slack 메시지 전송의 종이비행기 모두 마이크로인터랙션의 대표 사례입니다.

지금 우리가 쓰는 방식

버튼 호버 / 클릭: 색 변화, 약한 그림자.
폼 입력: 실시간 검증의 체크 표시.
알림: 새 메시지 도착 시 작은 진동.
빈 상태 일러스트: 사용자의 첫 만남에 인격 부여.
에러 메시지: 친근한 톤과 작은 일러스트.

도구로는 Lottie, Rive, CSS 애니메이션, framer-motion(React) 등이 있습니다.

함정

마이크로인터랙션은 남용하면 산만합니다. 모든 동작이 화려하게 반응하면 사용자는 지칩니다. 가이드라인은 사용자가 자주 하는 동작과 의미가 있는 순간에만 강한 마이크로인터랙션을 두는 것입니다.

바이브 메이커가 챙길 한 가지

큰 기능을 만들기 전에, 자주 보는 단 하나의 동작을 작은 마이크로인터랙션으로 잘 만들어 보세요. 그 한 동작이 사용자에게 "이 도구는 다르다"는 인상을 줍니다. AI가 동질화시키는 시대에, 미세한 디테일이 차별화의 무기입니다.

관련

Disney 12 principles, Optimistic UI, Easter Egg