< 마이크로인터랙션 : 디테일에 강한 인터랙션 디자인 (댄 새퍼 지음, 정승녕 옮김) >

실용서를 만들면서 가장 많이 본 글은, ‘배우는 데 가장 좋은 방법은 직접 해보는 것이다!’인데요. 100% 동감하지만, 저에게 디자인 관련해서는 통하지 않는, 참 어려운 이야기입니다. (시무룩..) 그래서 조금이나마 보는 눈을 키우고자 dribbble.com, behance.net처럼 그래픽 작업물이 올라오는 포트폴리오 사이트를 자주 들여다 보곤 합니다. 특히 이번 UX 시리즈 책을 준비하면서 그 미묘한 디자인 세계를 이해하는 데 많은 도움을 받았답니다! 그중 한 가지 사례를 보여드릴게요.

<  Float-Label-Form-Interaction, by Matt D. Smith >

위 이미지는 dribbble.com에 디자이너 Matt D. Smith가 올린 입력 폼 인터랙션 디자인입니다. (링크!) 보시다시피, ‘Title’을 입력하려고 클릭하면 해당 라벨이 폼 상단으로 올라가서 사용자가 무엇을 입력하고 있는지 계속 안내해 줍니다.

잠깐!

 

이게 실제 중고 거래 사이트의 상품 등록 화면이라고 생각해 볼까요? 저는 중고 사이트에 물건을 올리려는 사용자입니다. 버스에서 스마트폰으로 웹사이트에 접속한 다음, 첫 거래할 상품을 등록하고 화면을 띄웠지요! 자주 이용하는 사이트라면 어떤 내용으로 채워야 하는지 익숙하겠지만, 앞서 말했듯 저는 중고 거래 사이트를 처음 이용하는 사용자에요. 열심히 폼을 입력하다가 정신을 차려보니 목적지에 도착했고, 벨을 누르고, 버스 카드를 찍고, … 잠시 딴 짓(;)을 한 사이, 커서가 깜빡이는 칸에 가방 ‘색’을 쓰는 건지 뭔지 떠오르지 않았어요!(까묵) 하지만 별 문제가 되지 않았지요. 바로 위에 ‘Price’라는 라벨이 떠 있었기 때문이죠!

* 참고: 플로팅 라벨은 2014년 구글 Material 디자인 가이드라인에도 소개되었습니다.

이 라벨 디자인은 전체 사이트 중에서 아주 작은 요소이고, 사용자 입장에서는 때론 ‘좋다’, ‘나쁘다’라는 인식을 주지 않을 만큼 사소한 부분입니다. 하지만 이처럼 작은 부분을 얼마나 고려했는지에 대한 여부는 제품 전체의 인상을 좌우할 정도로 큰 영향을 끼칠 수도 있습니다. 예를 들면 스마트폰에서는 소위 말하는 ‘터치감’ 하나로 호불호가 나뉠 정도로 말이지요!

화면이 넘어가는 ‘느낌’이 좋다든지 스크롤하는 ‘느낌’이 좋다든지 하는 스마트폰의 터치감은 시간이 지나도 좀처럼 ‘취향이니 존중해 주세요!’로 끝나지 않는 문제인 듯 합니다. 얼마나 섬세하게 만들어졌는가에 대한 이런 논란(?)을 보면 순간순간의 사용감이 모여 제품의 인상, 제품의 만족도를 결정짓고, 나아가 한 브랜드를 평가하는 중요한 역할을 한다는 것을 알 수 있습니다. 특히 경쟁 제품이 늘어나면 늘어날수록, 기술은 물론이거니와 그를 둘러싼 모든 요소들, 예를 들면 기능과 기능이 어떻게 연결되는지, 기능이 어떻게 실행되는지처럼 제품의 세밀한 부분이 더 의미있는 역할을 합니다.

결국 제품이 얼마나 잘 디자인되었는지, 얼마나 완성도가 높은지는 가장 작은 부분의 디자인을 빼놓고는 말할 수 없습니다.

이번에 소개할 UX 시리즈 신간 ‘마이크로인터랙션’은 바로 그런 세밀한 부분, 디테일에 대한 디자인을 다루는 책입니다. 지은이 댄 새퍼는 제품의 작은 부분에 대한 디자인을 ‘마이크로인터랙션(Microinteraction)’이라고 정의했습니다. ‘마이크로인터랙션’은 2015년 트렌드 키워드로 뽑히기도 했지만(링크), 새롭게 등장한 개념은 아닙니다. 제품을 디자인할 때 간과하기 쉬운 부분이 얼마나 가치있는지 알리고, 집중할 수 있도록 재조명하는 역할을 하는 것이죠.

‘마이크로인터랙션’은 단어에서 보이는 그대로, 세밀한(micro) 부분에 대한 인터랙션 디자인입니다. 보통 한 가지 기능을 위해 만들거나, ‘완벽을 위해’ 보조적으로 들어갑니다. 기능과 기능, 기능과 기기, 기기와 기기를 서로 ‘연결’하는 디자인이라고 생각하시면 좀 더 이해하기 쉬우실거에요. 예를 들어, 버튼 하나에도  마이크로인터랙션을 고려해야 합니다. 눌렀을 때 딸각하는 소리를 내게 할까? 누르면 들어간 이미지로 바꿔줄까? 아주 사소한 것 같지만, 사용자가 버튼이 ‘눌렸음’을 알게 하는 건 중요한 일입니다.

< 마이크로인터랙션은 제품의 다른 기능에 비해서는 ‘작지만’,

전체 제품의 성공과 실패를 가늠할 정도로 ‘중요하다’ >

『마이크로인터랙션』은 세밀한 부분을 디자인한다는 것에 대한 가치를 알지만 중요성을 충분히 설득하기 어려웠던 디자이너와 기획자, 개발자, 관리자 등 제품과 서비스를 만드는 데 관여하는 분들을 위한 책입니다.

마이크로인터랙션은 어떤 경우에 고려해 볼 수 있을까요?

ㆍ하나의 작업을 수행할 때

ㆍ기기들을 서로 연결할 때

ㆍ단순한 정보를 주고 받을 때 (예: 주식 가격, 날씨)

ㆍ진행 중인 기능을 조정할 때 (예: TV 채널 조정)

ㆍ설정을 바꿀 때

ㆍ간단한 내용을 작성하거나 확인할 때 (예: 상태 메시지)

ㆍ어떤 기능을 켜거나 끌 때

댄 새퍼에 따르면 마이크로인터랙션은 ‘트리거 -> 동작 규칙 -> 피드백 -> 순환과 모드’라는 구조를 통해 분석하고, 디자인할 수 있습니다.  저자가 제안하는 이 네 가지 구조는 디자이너(또는 제품을 만드는 데 관여하는 모두)가 생각하는 것을 표현하는 데 도움을 주는 틀입니다. 마이크로인터랙션을 어떻게 디자인해야 할지에 대한 가이드지요. 이 책은 각 단계를 풍부한 사례와 함께 설명하면서 ‘마이크로인터랙션’을 잘 디자인하는 방법을 소개하고, 후반부에는 두 가지 프로젝트를 통해 마이크로인터랙션을 디자인하는 과정을 보여주면서 실제로 어떻게 적용할 수 있는지 귀띔해 줍니다.

1. 트리거(Triggers) : 마이크로인터랙션을 어떻게 시작하는가?

마이크로인터랙션의 첫 단계인 트리거는, 기능을 시작하는 조작을 말합니다. 우리는 버튼이나 스위치에서부터 센서, 시간(타이머) 등을 통해 기능이 시작되도록 할 수 있습니다.

유튜브에서는 로그인하지 않은 상태에서 마우스를 댓글 창에 올리면,

로그인하거나 회원 등록을 하도록 유도하는 내용이 표시된다.

2. 동작규칙(Rules) : 마이크로인터랙션이 시작되면 무엇을 수행하는가?

동작규칙은, 트리거로 기능이 활성화되면 어떻게 될지를 결정합니다. 무엇이 수행되고, 어떤 피드백이 제공될지는 동작규칙에 의해 정의됩니다.

버튼의 동작규칙. Mixcloud에서는 다른 회원이 나를 친구 목록에 ‘추가Follow’했다면,

그 회원에 대한 ‘팔로우하기Follow’ 버튼이 ‘마주 팔로우하기Follow back’로 바뀐다.

그리고 동작규칙은, 다음과 같은 논리 흐름도를 통해 정의할 수 있습니다.

3. 피드백(Feedback) : 동작규칙을 이해하도록 돕는 피드백. 사용자에게 기능이 수행되었는지를 어떻게 알려줄 것인가?

피드백은 사용자가 기능을 통해 무엇을 하고 있는지 알려주는 모든 내용입니다. 피드백은 라벨, 오디오(전원을 켰을 때 삐-하는 소리), 메시지(에러 메시지 창) 그리고 애니메이션도 될 수 있습니다.

Amazon은 쇼핑 카트에 넣은 상품의 개수를

쇼핑카트 버튼 안에 표시한다.

4. 순환과 모드(Loop and Mode)

1.1 순환 : 마이크로인터랙션의 반복주기를 어떻게 설정할 것인가?

순환은 한 기능의 반복주기를 말합니다.

Facebook에서는 사용자가 ‘친구 추가’ 버튼을 너무 빨리,

너무 많이 클릭하면 경고 메시지를 보여 준다.

1.2 모드 : 마이크로인터랙션을 수행하기 위해 부가적인 설정이 필요한가?

모드란, 기기의 환경 설정처럼 드물게 사용하는 경우에 사용됩니다. 예를 들어 날씨 위젯은 사용자가 도시나 다른 환결 설정을 자주 할 필요는 없지만, 여행을 떠난다면 꼭 변경해야 하는 설정이죠.

모드의 사례: 애플 iOS에서의 일기예보 앱.

사용자가 마이크로인터랙션에 대한 설정 값을 바꿀 수 있게 해준다.

제품의 완성도를 더욱 높이는 데 관심이 있는 분들이라면, 이 책을 통해 지금까지 놓치고 있던 ‘디테일’은 무엇인지 한번 생각해 보시면 어떨까요? 사용자가 제품(또는 서비스)을 만나는 순간을 더 즐겁게, 더 만족스럽게 만드는 것은 제품을 만드는 데 관여하는 모두가 중요하게 여기는 가치일거라 생각합니다. (게다가 그런 사용성이 제품의 선호도나 구매율 등과 연결된다면 더욱 그렇겠지요!) 사용자에게 필요한 기능은 물론, 인지하지 못하는 부분까지 깊이 배려함으로써 만족스러운 경험을 주는 ‘디테일’의 힘. 『마이크로인터랙션』으로 발견해 보세요!

깊은 고민과 아이디어가 조화롭게 어우러지고, 사용자를 즐겁고 기쁘게 하는 작은 부분까지 놓치지 않는 세심한 배려가 담긴 제품을 기대합니다. 🙂

여기까지 글을 읽어 주신 분께 드리는 선물!

완성도는 ‘작은 부분’에서 결정된다는 점을 강조하는 ‘마이크로인터랙션’.

표지에서도 그 의미가 잘 전달되나요? 🙂

‘나 끝까지 다 읽었다!!’하고 댓글로 티 팍팍 내주신 세 분께 『마이크로인터랙션』을 드립니다! 😀

-기간: ~2015.6.19(토)

-주의: 댓글 작성 시 ‘메일주소’를 꼭!꼭!꼭! 입력해 주세요! | 댓글이 세 개가 넘으면 랜덤 추첨. (관심을.. 흑흑..)

뽀너스! 마이크로인터랙션에 대한 다양한 자료를 공유합니다.

  1. Little big things : 아이디어 창고! 마이크로인터랙션 사례가 모여 있는 웹사이트
  2. Microinteractions : 저자와 책에 관한 정보가 담긴 도서 홈페이지
  3. 저자에게 직접 듣는 Microinteractions 소개(영문) :Smart Thinking: MIcrointeractions and Why They Matter

* 『마이크로인터랙션』은 다음 서점에서 만나보실 수 있습니다.

[ Yes24 ] [ 교보문고 ] [ 알라딘 ] [ 인터파크 ]