[easyspark article] UIUX 디자인에서 마이크로 인터랙션을 놓치면 안되는 이유!

UIUX 디자인에서 마이크로 인터랙션을 놓치면 안되는 이유!

 

안녕하세요! 오늘은 UIUX 디자인에서 말하는 마이크로 인터랙션이 무엇인지 UIUX에서 마이크로 인터랙션이 왜 중요한지 간단하게 알아보도록 하겠습니다.

 

마이크로 인터랙션?

 

마이크로 인터랙션은 한마디로 말하자면 UIUX 디자인에서 사용자의 참여를 이끌어낼 수 있는 디자인 요소입니다. 예를 들어 클릭 가능한 아이콘이나 알림이 왔을 때, 애니메이션 버튼 등에서 마이크로 인터랙션을 통해 사용자와 인터페이스 간의 상호작용이 일어날 수 있게 됩니다.

 

이런 마이크로 인터랙션은 우리 주변에서도 쉽게 찾아볼 수 있는데 가장 대표적인 것이 로딩화면입니다. 챗바퀴가 돌아가는 모양 또는 로딩바가 채워지는 형태의 마이크로 인터랙션을 다들 보신 적이 있으실 텐데요 만약 이런 요소들이 없다면 지금 로딩이 잘 되고 있는 것이지, 얼마나 남은 것인지 사용자가 알 수 없기 때문에 답답함을 느낄 수밖에 없을 것입니다. 이렇듯 마이크로 인터랙션을 사용하면 UIUX 측면에서 상당한 이점을 가질 수 있습니다.

 

 

 

그래서 마이크로 인터랙션이 왜 필요한가요?

UIUX 디자인을 할 때뿐만 아니라 다른 사람과 소통을 할 때 가장 중요한 것 중 하나가 miscommunication, 즉 잘못된 의사소통을 줄이는 것입니다. 내가 A를 말했는데 상대방이 B라고 알아듣는다면 그것만큼 곤란한 일이 없습니다. 웹사이트 혹은 애플리케이션에서도 마찬가지입니다. 디자이너가 혹은 기획자가 특정한 목적을 가지고 화면을 설계했는데 사용자가 그 목적을 잘 이해하지 못한다면 큰 문제가 아닐 수 없습니다. 하지만 말로 상대방과 직접적으로 소통할 때도 오해가 생기는데 웹이나 애플리케이션의 화면상에서 어떻게 오해를 줄일 수 있을까요? 바로 마이크로 인터랙션을 사용하는 것입니다.

 

 

 

어떻게 사용해야 하죠?

'알림' 마이크로 인터랙션

마이크로 인터랙션은 사용자에게 시각적 단서를 주거나 피드백을 주는 역할을 할 수 있습니다. 예를 들어 사용자들에게 '구독' 버튼을 누르도록 유도하고 싶다면 마우스가 '구독'버튼 위로 올라갔을 때 색이 변하게 만들어서 사용자의 주의를 환기시킬 수 있습니다. 또 새로운 메시지나 알림을 받았다면 팝업으로 표시를 해주거나 숫자 아이콘을 통해 사용자에게 알려줄 수 있습니다. 또 마이크로 인터랙션을 사용하면 구독버튼을 눌렀을 때 '구독 중' 혹은 '구독 해지' 등으로 버튼이 바뀌거나 팝업창 등을 통해 구독을 되었다는 피드백을 바로 줄 수 도 있습니다. 만약 이러한 인터랙션이 없다면 사용자는 답답함을 느낄 수밖에 없습니다. 내가 한 행동이 제대로 실행되었는지 알 수 없기 때문입니다. 내가 어떤 사람에게 말을 걸었는데 대답이 없다면 제대로 들었는지 안 들었는지 알 수 없는 것처럼 즉각적인 피드백을 사용자에게 전달하는 것은 UX측면에서 매우 중요한 일입니다. 

 

잘 설계된 마이크로 인터랙션은 사용자의 적극적인 참여를 이끌어낼 수 있을 뿐 아니라 감정적인 유대도 쌓을 수 있습니다. 사용자와 서비스 간의 인터랙션 즉 상호작용이 계속되는 것이기 때문이죠. 또한 사용자가 전체적인 서비스의 맥락을 쉽게 이해할 수 있게 되고 인지 부하를 막을 수 있습니다. 사용자의 인지 부하를 줄이는 것은 매우 중요한 일입니다. 쉽게 말해 사용자가 설계된 화면 위에 있을 때 생각하지 않을 수 있어야 한다는 것입니다. 이 버튼은 무엇인지, 저 기능은 무엇인지 고민하는 것이 아니라 제공하려고 하는 서비스를 자연스럽게 이용할 수 있어야 합니다. 마이크로 인터랙션을 여러 가지 시각적 단서나 피드백을 줄 수 있기 때문에 훨씬 쉽고 편안한 화면을 만들 수 있게 됩니다.

 

 

 

마이크로 인터랙션의 다양한 활용

그렇다고 마이크로 인터랙션이 꼭 어떤 기능을 가지고 있어야 하는 것은 아닙니다. 그저 미적인 요소를 더하기 위해서 마이크로 인터랙션이 사용되기도 합니다. 또한 마이크로 인터랙션을 통해 기업 혹은 제공하는 서비스만의 개성과 정체성을 나타낼 수도 있습니다. 즉 BI 도구로도 이용될 수 있는 것이지요. 이것을 위해서는 마이크로 인터랙션을 일관된 톤으로 디자인을 하고 스토리를 넣어서 스토리텔링을 하거나 고유한 색상이나 이미지, 글꼴 등을 넣을 수 있습니다.

 

 

 

마이크로 인터랙션을 사용할 때 어떤 부분을 주의해야 할까요?

마이크로 인터랙션은 말 그대로 아주 작고 디테일한 부분입니다. 전체 화면 디자인을 할 때에는 크게 역할을 차지하지 않지만 실제로 사용자들이 화면에 들어왔을 때 영향을 주는 요소입니다. 그렇기 때문에 유저테스트를 진행할 때 마이크로 인터랙션 부분을 꼭 신경 써서 체크해주어야 합니다. 오류는 어떤 오류든 없어야 하는 게 맞지만 특히 마이크로 인터랙션은 사용자와 상호작용하기 위한 요소이기 때문에 이 부분에서 오류가 난다면 UX적으로 매우 안 좋은 영향을 줄 수 있기 때문입니다. 

 

 

 

 

오늘은 이렇게 마이크로 인터랙션이 무엇인지, UIUX에서 마이크로 인터랙션이 왜 중요한지에 대해 알아보았습니다.

여러분도 마이크로 인터랙션을 사용해 더욱 세련되고 트렌디한 UIUX 디자인을 해보시길 바랄게요.

 

 

감사합니다!