brunch

매거진 프로덕트 디자인 스터디룸

라이킷 34 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 노이noey Jun 01. 2023

마이크로인터랙션 (1) 트리거

마이크로인터랙션 사례로 보는 UX 디테일

마이크로인터랙션이란

흔히 UX는 직관적이어야 한다고 말한다. ‘사용자를 생각하게 하지 마!’라는 책 이름처럼, 아무 생각 없이도 쓸 수 있는 UX가 가장 좋은 UX이다.(이번에 리뷰하는 책이 그 책은 아니다.)

마이크로인터랙션은 그것을 가능하게 하는 디테일이다. 책에서는 제품에서 짧은 순간, 혹은 한 가지를 수행하는 작은 기능이라고 설명하고 있다. 예를 들면 회원가입 시 비밀번호를 설정해야 할 때, 어떻게 입력하게 할 것인지에도 마이크로인터랙션이 들어간다. 비밀번호를 어디에 어떻게 입력하게 할 것인가? 입력 박스는 어떻게 생겼으며 입력하기 전, 중, 후에 어떻게 반응할 것인가? 어떻게 하면 쉽게 안전한 비밀번호를 정하게 할 것인가? 비밀번호를 입력한다는 이 한 가지 행위에서의 사용자와 제품의 상호작용, 그것이 마이크로인터랙션이다.

좋은 마이크로인터랙션 디자인을 위해서는 사용자에 대한 이해와 대상 인터랙션의 맥락을 파악해야 한다.

그리고 경쟁이 심한 시장의 경우 마이크로인터랙션은 더욱 더 중요해진다고 한다. 동일한 기능의 제품이 있을 때, 제품과 관련된 경험을 통해 소비자는 제품과 브랜드를 좋아하게 되며, 그 경험은 마이크로인터랙션에 달려 있다고 말이다. 가령 구글 웹사이트에 들어갔을 때 검색창 하나만이 심플하게 있고, 무언가 입력하면 바로 검색 결과가 나오기 시작하는 경험은 검색이 필요할 땐 구글을 떠올리게 할 만큼 인상적이다.

이제부터는 마이크로인터랙션을 어떻게 디자인해야 하는지, 책에 나온 내용을 정리해보고자 한다.

마이크로인터랙션은 물론 모바일 앱에만 국한되는 개념은 아니며, 디지털 기기뿐 아니라 가위나 쓰레기통, 자전거 같은 모든 제품에 적용될 수 있다. 책에서도 여러 제품의 예시를 들고 있지만, 나는 정리하면서 내게 익숙한 모바일 앱 프로덕트 위주로 다시 예시를 찾아 보았다. 워낙 많은 내용과 예시가 있어 이번 글에 다 끝내지 못하고 여러 편으로 나누어 나올 예정이다.

+덧. 사실 UX 디자이너라면 이런 개념을 몰라도 이미 마이크로인터랙션을 녹여서 디자인하고 있을 가능성이 높다. 그래서 책을 읽으면서 너무 당연한 말들이라고 느끼기도 했지만, 이를 실무에서 얼마나 효과적으로 잘 적용하느냐는 또 어려운 일이다. 그래서 나의 디자인이 기본적인 원칙을 잘 지키고 있는지 점검하고, 좋은 예시들을 통해 훌륭한 마이크로인터랙션에 대한 영감을 받을 수 있었다. 그리고 한편으로는 본인의 디자인이 왜 좋은 디자인인지를 설명할 근거가 되어줄 수도 있을 것 같다.

마이크로인터랙션의 네 가지 요소

책에서는 마이크로인터랙션을 구성하는 요소를 네 가지로 나누어 소개하고 있다. 트리거, 동작규칙, 피드백, 순환과 모드가 그것이다.

마이크로인터랙션을 시작하는 트리거trigger

마이크로인터랙션, 즉 상호작용을 시작하게 하는 무언가이다. 버튼이나 입력 박스, 바텀 시트의 핸들과 같은 요소라고 할 수 있다.

사용자가 하고자 하는 작업의 내용, 시기, 주기 등 사용자의 필요에 따라 트리거의 어포던스, 접근성, 지속성이 결정된다.

마이크로인터랙션이 어떻게 동작하는지를 결정하는 동작규칙rule

사용자와 제품의 상호작용에서, 사용자는 제품이 어떻게 동작될지 이해하길 원한다. 즉 마이크로인터랙션의 동작규칙을 알고 싶어한다는 것이다.

간단하게는 ‘검색창에 글자를 입력하면 추천 검색어가 나타난다’와 같은 것일 수도 있고, ‘주변이 어두워지면 화면 밝기가 어두워진다’같은 것도 있다.

마이크로인터랙션의 동작 상황을 표시하는 피드백feedback

이렇게 우리가 보고 듣고 느낌으로써 시스템의 동작규칙을 이해할 수 있게 해주는 모든 것이 마이크로인터랙션의 세 번째 요소인 피드백에 해당한다.

피드백은 시각, 청각, 촉각(진동) 등 여러 형태가 될 수 있다.

마이크로인터랙션에게 영향을 미치는 상위규칙인 순환loops과 모드mode

마이크로인터랙션이 진행되면서 시간에 따라 어떤 일이 벌어지는가? 사용자가 직접 끌 때까지 상호작용이 유지되어야 하나? 아니면 어느 정도 시간이 지난 다음에 원래대로 돌아가야 하나? 다른 명령을 수행해야 하거나 조건이 바뀌면 어떻게 해야 하나?

트리거Trigger

앞서 설명한 것처럼 트리거는 상호작용을 시작하게 하는 무언가이다.

트리거는 '수동 트리거(사용자 트리거)'와 '시스템 트리거'로 나뉘는데, 수동 트리거는 사용자가 직접 누르거나 입력하는 등 조작하게 하는 트리거이며 시스템 트리거는 특정 조건이 충족되면 자동으로 구동되는 트리거이다.

트리거에서는 아래 몇 가지 원칙들을 고려하여 디자인해야 한다.

트리거 디자인 원칙

1. 트리거는 사용자의 니즈가 발생하는 그 순간, 그 곳에 등장해야 한다.

트리거는 전원 스위치처럼 항상 쓸 수 있어야 할 수도 있고, 사용자가 특수한 모드에 들어가 있을 때만 나타나야 할 수도 있다.

때문에 사용자의 니즈가 언제 어떤 상황에서 발생하는지 이해하고 트리거를 배치해야 한다.

스크롤 시 등장하는 ‘위로’ 버튼. 특히 인피니티 스크롤이 적용된 화면에서는 탐색 중에 맨 위로 돌아가고 싶은 니즈가 발생할 수 있다.

2. 같은 트리거는 언제나 똑같은 행동을 해야 한다.

이는 사용자가 그 마이크로인터랙션의 동작 방식에 대해서 정확한 멘탈모델을 만들 수 있도록 해준다.

3. 마이크로인터랙션에 포함된 정보를 미리 표시하여, 굳이 클릭하지 않고도 필요한 정보를 얻도록 한다.

예를 들면 구글 크롬 아이콘에는 다운로드 건수와 진행도가 미리 표시되어, 눌러보지 않아도 알 수 있다.

구글 크롬 아이콘(Mac OS의 Dock)

또한 iOS의 다이나믹 아일랜드나 위젯도 마찬가지다. 현재 진행중인 인터랙션(음악 재생)의 정보를 미리 알 수 있게 한다.

iOS의 다이나믹 아일랜드와 위젯

4. 시각적 어포던스를 깨지 말라. 잘못된 어포던스를 제시하지 말라

버튼처럼 생긴 트리거라면, 버튼처럼 동작하여 사용자가 누를 수 있어야 한다.

예를 들면, 네이버앱의 그린휠은 돌릴 수 있을 것 같아 보인다. 그리고 구글캘린더의 바텀시트는 3단계로 조정이 가능한데, 바텀시트 위의 핸들은 위치에 따라 모양을 바꿔 적절한 어포던스를 제공한다.

네이버앱의 그린휠 / 구글캘린더의 바텀시트 핸들

평소 불편함을 느꼈던 잘못된 예시도 찾아 보았다.

카카오웹툰 앱에서 특정 웹툰을 누르면 위아래로 펼쳐져서 나온다. 하지만 해당 페이지를 닫으려면 옆으로 쓸어넘겨야 닫힌다. 아래에서 위로 열렸기에 아래로 쓸어내리면 닫힐 줄 알았는데, 해당 제스처를 하면 다른 화면이 튀어나온다.

카카오웹툰 앱에서는 펼쳐져 나오는 인터랙션이 잘못된 어포던스를 준다.

5. 자주 사용하는 마이크로인터랙션의 트리거일수록 찾기 쉬워야 한다.

이는 반대로 말하면 찾기 쉬운 트리거는 해당 서비스에서 자주 사용할 것으로 예측되거나, 자주 사용하라고 의도한 것이라고 해석할 수도 있다. 따라서 앱 UX를 분석할 때 해당 서비스에서 바라보는 관점을 어느정도 예측할 수 있다.

예를 들면 배달의민족 앱에서는 '배달'에 들어가서 가게를 고르고, 메뉴를 고르는 과정 내내 우상단에 홈과 장바구니가 고정으로 나타난다. 언제든 홈으로 들어가서 탐색을 재시작하거나, 장바구니로 들어가 주문을 계속할 수 있게 하기 위함이다. 아마 이런 행동패턴이나 니즈가 UT나 데이터에서 발견되었을 것이다.