《마이크로인터랙션 – 디테일에 강한 인터랙션 디자인》 NOTE 1

《마이크로인터랙션 – 디테일에 강한 인터랙션 디자인》 댄 새퍼 (2015.5)

 

책에는 마이크로인터랙션이란 이것이다. 라는 식의 명확한 정의가 나오지는 않는다. 곳곳에서 많이 사용되고 발견되는 추상적인 어떤 개념에 마이크로인터랙션이라 이름을 붙이고, 경쟁이 심한 요즘이기에 그것이 중요한 이유를 경험 디자인과 연결 지어 이야기하고, 그 개념이 가지고 있는 네 가지 요소와 특징을 설명한다. 그리고 책 전반에 걸쳐 그 추상적인 개념이 관여되어 있는 사건과 사례들을 소개한다. (PC와 스마트폰, OS, PC 소프트웨어와 모바일앱, 조명, 교통카드 자판기, 토스터, 슬롯머신, 식기세척기 등등)
이 책을 읽으면 내가 발견한 것이 마이크로인터랙션이라 할 수 있는지 아닌지를 구분하고, 마이크로인터랙션을 디자인하기 위해 어떤 점을 고려하면 되는지에 대한 감을 잡을 수 있다. 

 

순간순간의 경험을 조정하는 것은 바로 디테일이다 – 도널드 노먼 (추천의 글)

 

 

 

1.

 

마이크로인터랙션은 이 책을 읽기 전에 생각했던 것보다 훨씬 넓게 적용할 수 있는 개념인 듯 하다.
우연히 들른 어떤 블로그에서 글을 읽다가 글 본문 오른쪽의 목차 테이블에서 벌어지는 현상을 발견하고 스크롤을 내리면 목차의 배경색이 점점 채워지네? 라는 생각을 하며, 어디쯤 읽고 있는지, 얼마나 남았는지를 힐끗 봄으로써 감을 잡았던 경험이 있다. 
그 목차는 나에게 읽을 내용이 얼마나 남았는지, 글읽기에 할애할 수 있는 시간 대비 아직 읽지 못한 부분이 얼마이고 이 상황을 어찌할지, 속도를 좀 높여 대충 훌터보고 넘길지, 나중에 다시 볼지 판단을 내릴 수 있는 그런 힌트를 주고 있었다.
그것이 마이크로인터랙션이었다. 
난 그 인터랙션이 작동하는 방식을 거의 아무 노력도 들이지 않고 그냥 알아차릴 수 있었고, 자연스럽게 이용했던 듯 하다. 한참 전의 일인데다가 수많은 사이트에 수시로 노출되는 나의 기억에 아직까지 남아있는 것을 보니 이 블로그가 내게 꽤 깊은 인상을 남겼었나 보다. (내용 때문이라기 보다 인터랙션 때문에)

 

이게 그 블로그다. creator.wework.com

 

 

이보다 더 일상적으로 만나는 마이크로인터랙션 사례를 보자면 다음과 같은 것들이 있다.

회원 등록 양식에서 입력된 이메일 주소를 바탕으로 이름을 추측해 자동으로 이름 입력란을 채워준다 _4

littlebigdetails.com의 Jakobs

 

트위터의 비밀번호 입력 양식은 피드백을 섬세하게 제공한다 _6

littlebigdetails.com

 

비밀번호 등록을 위한 텍스트필드 주변에 ‘몇 자 이상에 특수문자와 숫자, 대문자를 섞어서 만드시오.’ 같은 지시문이 아니라, 텍스트필드에 타이핑을 하는 매 순간을 체크해서 그 순간에 어울리는 상태 메시지를 동적으로 표시하는 이런 것. 이것도 세심하게 디자인된 마이크로인터랙션이다. 

이건 사이트 정책과 관계된 부분이긴 하다. 그런데 금융과 같이 보안에 민감한 서비스가 아니라면 높은 수준의 복잡한 암호를 만들라는 지시문과 그 규칙에 맞는 암호 설정을 강요할 필요가 있을까 싶다. 사용자 입장에서 매우 귀찮은 일이다. 적당한 수준의 암호를 요구하고 사용자의 입력에 따라 글자수에 관한 단 한가지 규칙을 제시하는 것으로 시작해서 약하다, 좋다, 아주 강력하다 정도로 표현하는 센스. 충분한듯하다. 잘게 쪼개진 동적인 메시지 때문에 더 길게 입력할 가능성도 있어 보인다. 

 

GitHub에서는 사용자가 신용카드의 종류를 선택하지 않아도 된다. 사용자가 입력한 카드 번호를 바탕으로 자동으로 그 종류를 인식해 표시한다 _78

littlebigdetails.com

 

결제정보를 등록하는 과정을 단순하게 만드는 것도 마이크로인터랙션으로 할 수 있는 일이다.
이것과 유사한 마이크로인터랙션은 카카오페이 모바일앱에 신용카드를 등록할 때 경험했다. 처음에는 카드회사를 선택하지 않았다는 사실조차 모른 채 지나갔다. 그 후 한번 더 카카오페이에 신용카드를 등록한 후에 ‘어? 카드회사를 선택하지 않았는데 카드가 등록됐네?’라는 생각을 했다. 나도 모르는 사이에 손가락 노동이 절약되는 인터랙션을 하며 일을 더 쉽게 처리했던 거다. 스마트폰에서 처리해야 하는 일이었기에 더 탁월하다는 생각이 들었다. 

 

카카오페이 신용카드 등록화면
카드회사는 내가 입력한 것이 아니다. 자동으로 입력되었다.

 

 

 

2.

 

사람들이 의식적으로 기억하지 못하더라도, 디테일은 좀 더 쉽게 제품에 매력을 느끼고 즐겁게 사용하도록 만들 수 있다. 어떤 마이크로인터랙션은 사실상 (혹은 실제로) 눈에 보이지 않으며, 마이크로인터랙션 때문에 제품을 사는 경우도 드물다. 일반적으로 마이크로인터랙션은 기능의 일부거나, 소위 ‘완벽을 기하기 위해서’ 보조적으로 들어간 기능이다. _4

저자는 이렇게 말했지만 이 부분을 읽으면서 나는 다른 생각을 했다. 필요에 의해 돈을 주고 사는 ‘물건’이 아니라 거의 금전적인 비용 없이 제공되는 비슷한 여러 가지 중에 선택되어지는 운명을 가진 웹사이트나 모바일앱 제품의 경우 마이크로인터랙션이야 말로 그 제품이나 서비스를 선택하고 지속적으로 이용하게 만들 특별한 전략이 되지 않을까? 

《UX 디자인 7가지 비밀》에서 읽은 노리아키 카노의 제품의 요소와 디자인품질, 사용자 만족도 사이의 관계에 관한 내용이 떠올랐다. 제품의 요소는 필수, 부가, 매력의 3가지로 나눈다. 이중에서 매력요소는 Unique Sales Point라고 하여 마케팅에서는 이점을 포인트로 광고를 만든다고 한다. 

필수요소를 제공하는 제품들은 이미 여러 회사에서 만들기 때문에 구매결정에 중요한 이유가 되지는 못한다. 시간이 흘러감에 따라 경쟁이 치열해지면 부가요소마저도 상향평준화 되어가면서 경쟁의 우위를 점하는 전략이 되기 어렵다. 그렇다면 어떻게 해야 사용자로 하여금 우리 제품을 구입하고 계속해서 사용하게 할 이유를 만들 수 있을까? 

제품의 필수요소가 잘 작동하는 것을 넘어 사용하며 느끼는 만족감까지 생각해야 하는 UX디자인에서는 제품의 매력요소를 잘 살리는 것이 중요해 보인다. 디지털 제품에서 마이크로인터랙션을 활용하는 것은 매력요소를 살리는 최고의 방법인 것 같다. 

 

 

우리는 매일같이 마이크로인터랙션에 둘러싸여 살고 있지만, (고객 X의 경우에서 볼 수 있듯이) 뭔가가 엄청나게 잘못되기 전까지는 보통 그 존재를 인지하지 못한다. 하지만 그 작은 규모와 존재감에도 불구하고, 마이크로인터랙션은 엄청나게 중요하다. 사람들이 좋아하는 제품과 그저 별다른 수가 없어서 사용하는 제품의 차이는 대부분 그 제품이 제공하는 마이크로인터랙션에 있다. _5

PC든 휴대기기든 상관없이 모든 운영체제가 하는 일은 애플리케이션을 설치하거나 실행하고, 파일을 관리하고, 소프트웨어와 하드웨어를 연결하고, 실행 중인 애플리케이션과 윈도우를 관리하는 일 등 기본적으로 동일하다. 하지만 사용자의 관점에서 봤을 때, 운영체제 사이의 차이는 쓰면서 매일, 혹은 심지어 매 시간 겪게 되는 마이크로인터랙션에 있다. _9

 

카카오페이가 모바일쇼핑에서 결제를 편하게 할 수 있는 기능을 제공하기 때문에 카카오페이를 사용하는 것이지 한두 번만 하면 되는 카드정보 등록과정이 쉽다는 점 때문에 카카오페이를 선택한 것은 아니다. 하지만 카드정보를 등록하려고 카드번호, 유효기간, 카드사, 비밀번호를 입력하는 과정에서 오타와 잘못한 선택 때문에 몇 번씩 뒤로가기와 재입력, 재선택을 하는 사이, 사용자의 마음속에서는 서서히 불편함이 싹트고 신뢰의 그릇에 가느다란 금이 갈 수가 있다. 그렇기 때문에 마이크로인터랙션으로 그 과정을 단순하게 한다면 비슷비슷한 다른 서비스와는 차별화를 이루는 것은 당연하다. 

 

 

훌륭한 마이크로인터랙션은 제품에 대한 특징적인 경험을 갖게 할 수도 있다.
특징적인 경험이란 어떤 제품을 다른 것과 구분 짓는 마이크로인터랙션을 말한다. 독특하게 만들어진 조작 트리거(예: 초창기 아이팟의 스크롤 휠), 자료를 로딩하고 있다는 것을 나타내는 우아한 애니메이션, 매력 있는 알림음(예: AOL 서비스에서의 “새 메일이 도착했습니다!” 음성) 등은 해당 기능을 다른 종류의 기기에도 제공하거나 같은 회사에서 제공되는 다른 제품에도 동일하게 적용함으로써 마케팅에 활용할 수 있다. 특징적인 경험은 고객들이 브랜드를 인지하고 충성도를 높이는 데에 도움이 된다. 페이스북의 좋아요 버튼도 널리 알려져 페이스북 브랜드의 일부가 된 사례다. _26

 

 

 

3.

 

마이크로인터랙션을 디자인하고 분석할 수 있는 네 가지 요소는 다음과 같다. 

• 마이크로인터랙션을 시작하는 트리거
• 마이크로인터랙션이 어떻게 동작하는지를 결정하는 동작규칙
• 마이크로인터랙션의 동작 상황을 표시하는 피드백
• 마이크로인터랙션에 영향을 미치는 상위규칙인 순환과 모드 _19

 

 

트리거 trigger

 

트리거 자체가 항상 어떤 정보를 제공하고 있으므로, 이를 사용하기 위해서 힐끗 보는 것만으로 필요한 정보를 얻게 되는 것이다. 사용자는 이를 바탕으로 마이크로인터랙션을 시작할지 말지를 결정한다 _37, 38

 

마이크로인터랙션에서는 인지적인 노력을 최소한으로 줄이는 것이 중요하다 _43

 

보이지 않는 트리거
무작정 화면 요소들을 감추는 게 마이크로인터랙션 디자인의 목적이 되어서는 안 되며, 사용자의 맥락과 주어진 기술을 바탕으로 자연스럽게 일어나야 한다. 최선의 마이크로인터랙션은 딱 적당한 만큼의 인터페이스만을 결코 지나침 없이 제공하는 것이다 _47

 

트리거 자체만으로 제공할 수 없는 정보를 제공해야 할 경우에만 레이블을 추가하라 _53

 

시스템 트리거
사용자의 의식적인 조정 없이 어떤 조건이 갖춰졌을 때 실행된다.
예: 택배 추척 앱 – 운송장번호를 복사해 놓은 상태에서 앱을 실행하면, 시스템 트리거가 새로운 배송 정보를 추가할지 묻는 마이크로인터랙션을 시작한다. 이 마이크로인터랙션은 그 운송장 번호가 어떤 택배 업체의 번호인지 인식해서 함께 표시해준다 _55, 56

 

모바일 송금 서비스인 토스도 이와 같은 마이크로인터랙션을 제공한다. 계좌번호와 금액이 적힌 메시지를 복사한 후 앱을 실행하면 송금 정보에 입력해준다. 

 

 

 

 

동작규칙

 

로그인 마이크로인터랙션의 목표는 사용자로 하여금 비밀번호를 입력하도록 하는 게 아니라, 사용자가 로그인해서 애플리케이션에 들어가도록 하는 것이다. 과정보다 목표에 집중하면 할수록, 보다 성공적인 마이크로인터랙션이 될 수 있다 _68

 

마이크로인터랙션을 디자인할 때 추구해야 하는 것은 극히 자연스러운 나머지 필연적으로 느껴지는 흐름이다. _69

 

모든 마이크로인터랙션에 있어서 첫 번째 질문은 사용자와 그 맥락에 대해서 알고 있는 것이 무엇인가 하는 점이다 _82

 

사용할 수 있는 정보의 사례 _82

• 사용하고 있는 플랫폼 및 기기
• 현재 시간
• 주변 공간의 소음 수준
• 선택한 마이크로인터랙션이 얼마나 오래전에 사용되었는지
• 사용자가 회의 중인지 여부
• 사용자가 혼자 있는지 여부
• 배터리 수명
• 사용자의 현재 위치와 방향
• 사용자가 과거에 수행한 기능

 

사용자가 다음으로 취할 가능성이 높은 행동을 강조하거나 자동으로 실행해 주는 게 좋다 _87

 

사용자가 다음 단계에 할 일을 아는 것은 그 사용자가 따로 뭔가를 하지 않아도 그 단계를 자동으로 수행하거나 제시할 수 있다는 점에서 무척 중요하다. 이는 마이크로인터랙션들을 서로 연동할 수 있는 방법 중 하나다 _ 88

 

이 부분을 읽으며 핀터레스트에서 핀을 저장할 때 바로 직전에 저장했던 보드를 자동으로 선택해 주던 것이 떠올랐다. 핀터레스트에서 보드를 생성하고, 거기에 핀을 모으는 작업은 대체로 특정 주제의 이미지를 찾아 반복적으로 저장하는 과정이다. 반복적인 핀 저장 작업을 하는 동안에 계속해서 같은 보드를 선택하게 될 텐데 매번 보드를 선택하게 할 필요가 있을까? 하나의 보드에 30장의 이미지를 저장하는데 같은 보드를 30번 선택해야 한다고 생각하면 얼마나 불편한 일인가? 

이때 섬세하게 디자인된 마이크로인터랙션의 힘이 발휘된다. 직전에 저장했던 보드를 기본으로 선택해줌으로써 사용자 입장에서는 저장위치 선택이라는 하나의 단계를 생략하는 작은 편리함을 누리게 된다. 그런데 이게 30번이나 그 이상이 된다면 그렇게 자그마한 것만도 아니다. 

 

핀터레스트는 핀 저장 시 이전에 저장한 보드를 선택해준다.

 

 오늘은 여기까지 

 

관련 글

《마이크로인터랙션》 NOTE 2 동작규칙, 피드백, 순환과 모드