UX 디자인을 하면서 디자인의 다양한 분야를 경험했지만 인터랙션 디자인을 집중적으로 연구하는 팀에 와서 내가 인터랙션 디자인에 대해 많은 것들을 모르고 있다는 생각이 들었다. “인터랙션 디자인이란 무엇일까”, “인터랙션 디자인, UI 디자인은 어떻게 다를까”. 오래 전부터 있었던 인터랙션 디자인이란 용어의 정의를 팀원들에게 묻기란 쉽지 않다. 모두가 생각하는 UX, UI 디자인에 대한 정의가 다르듯 인터랙션 디자인 또한 사람마다 조직마다 생각하는 정의가 조금씩 다를 수 있다.

몇 안되는 프로젝트를 경험하면서 나는 나만의 인터랙션 디자인에 대한 정의를 어렴풋이 내릴 수 있었다. 인터랙션 디자인은 오브젝트, 인터페이스의 움직임을 디자인하는 것이다. 버튼의 움직임, 글자의 움직임, 화면의 움직임 등 그 움직임이 단순히 색깔의 변화일수도 있고 역동적인 좌/우의 이동, 크기의 변화 등일 수도 있다. 어떤 인터페이스의 움직임, 반응 그런 것이 인터랙션 디자인인 것 같다. UI 디자인은 오브젝트의 형태, 크기, 배치 등에 좀더 집중되어 있다면 인터랙션 디자인은 움직임이나 플로우에 좀더 집중되어 있는 듯 하다.

이렇게 인터랙션을 조금씩 알아가면서 프로젝트에 들어갔을 때 나에게 주어진 과제는 재미있고, 사람들이 좋아할만한 인터랙션을 만들라는 것이었다. 어떻게 해야할지 잠시 고민이 되었다. 다짜고짜 재미있는 뭔가 사람들이 좋아할만한 인터랙션을 만들어 보라고 한다. 그렇다면 이런 인터랙션은 도대체 어떻게 디자인 하는 걸까? 어떻게 시작해야 할까?

screenshot

tab-bar-icons-iphone-ramotion-animation-interface-design

< 다양한 인터랙션 예시 – Animated Tap bar, Paper Switch by Ramotion >

1.  어떤 움직임을 만들까

배너 광고, 채팅창의 말풍선 등과 같이 인터랙션을 만들 대상은 이미 정해져 있는 경우가 많다. 인터랙션을 만들기 위해서 제일 처음 고민한건 내가 그 대상으로 어떤 움직임을 만들고 싶은가이다. 어떤 움직임을 만들고 싶을지 고민하다 보니 자연스럽게 그 대상에 내가 어떤 의미, 상황을 부여할까 고민하게 되었다.

예를 들어 이번 업데이트된 아이폰 iMessage 말풍선의 경우 감정을 표현할 수 있는 다양한 움직임을 가지고 있다. 처음에는 말풍선의 가지고 있는 ‘충격효과, 강하게, 부드럽게, 비밀잉크’ 등의 움직임이 어떻게 쓰일지 잘 이해하지 못했다. 하지만 메시지를 쓰는 상황과 매핑해보면 좀 더 이해가 쉽다. 뭔가 잘못한 일이 있을때 좀 더 미안해하는 감정을 말풍선으로 전하고 싶은 경우가 있다. 그럴때 사용할 수 있는 ‘부드럽게’ 말풍선 효과는 쭈뼛쭈뼛 다가가 풀죽어 말하는 모습과 매우 닮아 있다. 추측해보건데 iMessage 움직임을 만들때 미안한 감정을 담아서 메시지를 보내는 상황을 고민하게 되고,  “쭈뼛쭈뼛 다가가 풀죽어 말하는 말풍선” 이렇게 좀 더 상세한 움직임을 연상하지 않았을까?

kakaotalk_photo_2016-11-03-11-40-33_4

< iMessage 부드럽게 효과 >

이처럼 내가 표현하고 싶은 상황, 의미 같은 것을 먼저 한 문장으로 정리하고 상황, 의미에 맞는 움직임을 생각했더니 좀 더 쉽게 움직임을 연상하고 아이디어를 떠올릴 수 있었다.

“상황, 의미를 부여하고, 그것에 맞는 움직임을 상상하자”

2.  어떤 트리거로 움직이게 해야 할까

움직임을 만든 후, 어떤 조건이 되었을때 움직임을 시작하게 할 지 트리거를 고민하게 되었다. 다양한 프로토타입을 만들어가면서 느낀 점은 트리거는 가능한한 쉬워야 된다는 것이다. 사실 서비스나 제품에 인터랙션이 반드시 필요한 부분은 아니다. 감성, 재미를 주고 서비스나 제품에 대해  좀더 쉽고 빠르게 이해할 수 있도록 하는 도와주는 부분이다. 이전 Lain이 작성한 ‘모바일앱 트랜지션을 설계할 때 고려해야 할 원칙 3가지’ 글에서도 썼듯이, 인터랙션이 재미있어서 서비스나 제품에 매력을 느끼는 사용자도 있지만 어떤 인터랙션이 있는 지 전혀 신경쓰지 않고 서비스나 제품을 사용하는 사용자도 있다. 이런 사용자들이 조금이라도 인터랙션을 즐기고 사용할 수 있도록 하려면 인터랙션을 하기 위한 트리거가 가능한한 진입장벽이 낮고 쉽게 다가갈 수 있어야 한다.

< Sociable Signifiers – Donald A. Norman 2010 UX 심포지움 강연 >

트리거를 고민할때 좋은 것 중 하나는 사람들이 많이 하는 행동을 관찰하는 것이다. 도널드 노먼이 말한 sociable signifiers와 유사하다. 직선으로 길을 만들고 잔디밭 위에 “잔디밭 위로 걷지 마시오”라는 푯말을 놓지 말고, 사람들이 많이 지나다녀서 만들어진 길을 따라 보도 블럭을 만들면 가장 효율적이고 사람들이 다니기 편한 길이 된다. 이처럼 사람들이 많이 하는 행동을 관찰하고 그것을 자연스럽게 트리거로 사용하면 진입장벽도 낮고 쉬운 트리거를 만들 수 있다.

< 카카오 광고 –  모바일DA M.Section 광고 >

예들 들어 두장의 이미지로 구성된 모바일 배너 광고가 있다고 하자. 그 이미지를 일정 시간에 따라 롤링 할 수도 있고 사람들이 tap하거나 swipe 했을 경우 광고 이미지를 넘겨 줄 수도 있다. 하지만 사람들이 모바일 광고를 접할때의 행동을 관찰해보면 광고를 넘기기 위해 빠르게 스크롤 하면서 컨텐츠 쪽에 시선을 둔다. 광고가 있는지 모르는 사람들의 경우도 많다. 이때 사람들이 올리는 스크롤의 속도에 맞춰 배너 광고의 이미지를 바꾸게 되면 주목도도 올라가고, 사람들은 특별한 노력이나 어려움 없이 자연스럽게 두가지 광고 이미지를 쉽게 접하게 된다.

“쉽고 가볍게 만들자. 사람들의 행동을 관찰하자.”

3.  손맛을 주자

쉬운 트리거도 만들고 의미있는 움직임을 만들었지만 인터랙션이 재미없는 경우가 많다. 재미있고 자꾸 접하고 싶은 인터랙션은 어떻게 만들 수 있을까. 별거 아닌데 묘하게 중독적이고 계속 하게 되는 것,  “뽁뽁이” 포장지 같은 그런 것들이 있다. 스티브 잡스는 어렸을때부터 그런 잔재미, 손재미를 좋아하고 잘 만드는 사람이었다고 한다. 인터랙션을 만들면서 중요한건 그런 손맛인 것 같다.

손맛이 있는 인터랙션은 아무런 의미가 없어도 사람들로 하여금 무심코 계속 그 인터랙션을 하게 하고 애정을 느끼게 한다. 예전에 게임을 전혀 안하던 한 선배가 페이스북 씨티빌(cityville) 게임에 푹빠져 아이템까지 돈을 주고 산 적이 있었다. 내가 왜 다른 게임은 안하면서 이 게임은 이렇게 열심히 하냐고 물었더니, 빌딩에서 수금할때 나는 돈소리와 애니메이션이 묘하게 중독적이어서 열심히 한다고 대답했다. 이런 것이 손맛일것이다.

168715_159881850725573_6105179_n bbokbbok

< 손맛을 주는 다양한 예시 – Cityville, 뽁뽁이 >

나의 마지막 고민은 바로 이 손맛을 어떻게 하면 녹아들게 할 수 있을까 하는 것이었다. 정답은 없지만 내가 찾은 방법은 움직임이 끝난 후, 은근하게 원래 상태로 돌아와 인터랙션을 반복할 수 있도록 하는 탄성이었다. 어릴적에 자리를 떠나지 못하고 눌렀던 콩벌레, 끊임없이 콩벌레 누르기를 반복하게 한 것은 동그랗게 말려있던 콩벌레가 어느 순간 스르륵 원래 상태로 돌아와 움직이는 모습이었다. 실제로 이러한 탄성을 프로토타입에 적용해보았더니 사람들이 좀 더 좋아할만한 중독성 있는 인터랙션이 되었다. 

kakaotalk_photo_2016-11-03-11-40-34_60

 < 손맛이 있는 snapchat 로딩 >

“어느  순간 스르륵 원래 상태로 돌아와 인터랙션을 반복할 수 있게 하는 탄성”

4.  피드백 받기

kakaotalk_photo_2016-10-31-16-27-59

이렇게 열심히 고민해서 인터랙션을 만든 후 “정말 내가 잘 만들었을까?” 고민이 되기 시작했다. 7~8명 정도의 사람들을 모아놓고 인터랙션의 컨셉, 상황, 니즈부터 트리거, 움직임까지 보여주었다. 이때 재미있고 가능성이 있는 인터랙션은 사람들에게 반응이 온다. 재미있어 한다. 하지만 내가 보여주었을 때 뭔가 싸한 분위기기가 있다면 그 인터랙션은 쿨하게 버려버리자. 처음부터 완벽한 인터랙션 일 수는 없지만 한명에게라도 뭔가 영감을 줄 수 있는 인터랙션이어야 한다. 사람들에게 반응이 없었던 인터랙션을 다시 재미있게 만드는 것은 단기간에 안된다.

“호응없는 인터랙션은 빨리 버리자”

지금까지 3개월간 팀에 있으면서 인터랙션 디자인 초보가 인터랙션을 만들어가면서 고민해 본 것들을 나열해 보았다. 앞으로도 더 좋은 인터랙션을 만들기 위해서 끊임없이 노력하겠다는 다짐과 함께 이 글을 마무리해 본다.