마이크로인터랙션 움짤로 알아보기.gif

Published in

user spoon, The ResearchOps

4 min readOct 16, 2023

📍 마이크로인터랙션(Microinteraction)은,

사용자가 제품을 이용할 때 아주 작은 것이라도 사용자에게 피드백을 제공하는 것을 말합니다.

마이크로인터랙션은 모든 앱이나 웹사이트에 존재합니다. 예를 들어, 페이스북의 경우 정말 많은 마이크로인터랙션이 존재합니다. ‘좋아요’ 같은 경우가 이에 해당합니다. UI를 벗어나서 본다면, 전화기 넘어 들리는 미세한 잡음을 통해 우리는 아무런 말이 없어도 전화가 끊기지 않았음을 알 수 있죠.

가끔은 이런 인터랙션이 존재하는지 사용자는 모를 수 있습니다. 왜냐하면, 이런 상호작용은 너무 분명하고 자연스럽게 UI에 녹아 있기 때문입니다.

이렇게 사용자에게는 인지되지 않을 수 있는 마이크로인터랙션을 왜 신경 써야 할까요?

🍔 햄버거 메뉴

단순히 햄버거 메뉴(三)를 클릭했을 때 메뉴 버튼에 위와 같은 변화를 줄 수 있습니다. 이렇게 자연스럽게 녹아 있기 때문에 사용자들은 이런 상호작용을 알아차리지 못한 채로 사용할 수도 있습니다.

🛒 장바구니 메뉴

장바구니에 물건을 담게 되면 나타나는 장바구니 메뉴의 변화 예시입니다. 단순히 Black&White로 구성된 이 아이콘에 마이크로 인터랙션을 추가하여 어떤 변화가 일어났는지 정확하게 전달하고 있습니다.
(언제나 빨간색은 강조하기 좋은 색입니다. #FF000)

👆 페이지 인디케이터

페이지 인디케이터 예시입니다. 빨강과 초록의 경우 인터랙션이 조금 과하여 즉각적으로 확인할 수 없는 점이 걸리네요. 파랑색의 경우 페이지 이동이 직관적이지 않고 페이지 이동이 아닌 다른 상호작용을 한듯한 느낌이 들어요. 이 인디케이터들 중에서는 주황색 예시가 가장 적절해보이네요.

마이크로 인터랙션의 좋은 예시와 나쁜 예시까지 살펴보았습니다.
Microinteraction의 저자 Dan Saffer는 마이크로인터랙션의 역할을 이렇게 말했습니다.

It’s the details that make systems feel more human, and more hamane.
이것은 시스템을 더 인간같이, 인간적으로 느끼게 하는 디테일이다.

우리가 제품을 디자인할 때 종종 ‘인간의 행동을 바꾼다’라는 것을 잊어버립니다. 사용자를 위한 주의 깊은 설계, 사람들이 이 시스템을 가지고 어떻게 사용할지 유도하기 위해서 이런 디테일한 것에 신경을 많이 써야한다는 것입니다. 단순히 심미적인 것이 아니라, 직접적인 사용자 행동에 초점을 맞추어야 합니다.

마이크로 인터랙션은 컴퓨터 시스템에 대한 사용자의 이해를 돕는 중요한 역할을 합니다. 사용자에게 시스템의 현재 상태와 행동의 결과, 그리고 다음에 어떤 것을 할 수 있는지에 대해서 명확하게 전달할 수 있습니다. 또한, 시스템에서 지루하고 사용자가 중요하게 생각하지 않는 것들을 훨씬 더 즐겁게 느끼게끔 만들 수도 있습니다.

앱이 무언가 자연스럽지 않게 느껴지고 딱딱한 느낌이 든다면, 마이크로인터랙션을 적절히 추가해보세요!