디자이너에게 인터랙션이 필수인 이유
듀오톤 IX 인터널 세미나
듀오톤은 매년 살몬(멤버)들의 성장을 위해 인터널 세미나를 제공합니다. 각 팀의 리더가 그 팀만의 관점으로 세미나를 준비하죠. 살몬들은 세미나를 통해 실무에 도움되는 지식은 물론, 실무를 하다보면 간과할 수 있는 본질에 대해서도 고민해보는 시간을 갖습니다. 디렉터분들의 경험을 간접적으로 접하며 실무에서 더 잘해나갈 수 있는 노하우, 자극과 영감을 받으며 성장을 위한 발판을 마련합니다.
오늘은 IX팀 이승윤 책임님께서 진행하신 인터널 세미나 현장을 전해드립니다. IX 세미나이지만 팀과 관계없이 모든 살몬들이 참석합니다. 2020년 7월 24일 금요일 오후, 듀오톤 사옥 2층에서 세미나가 진행되었어요.
이승윤 IX 책임 디자이너(아트 디렉터)
현) 듀오톤 책임 디자이너
전) 펑타이코리아, Art Director
IX 인터널 세미나는 이론과 실습, 두 가지 파트로 나뉘어 진행되었습니다. 이론은 IX 이승윤 책임님이, 실습은 IX 김성준 선임님이 담당해주셨습니다.
김성준 선임 디자이너 인터뷰
https://brunch.co.kr/@duotoneofficial/22
1부: 이론 - 이승윤 책임 디자이너
인터랙션을 알아야 하는 이유?
디자이너에게 인터랙션이란 무엇일까요? 저는 경쟁력을 갖출 수 있는 좋은 무기라고 생각합니다. 인터랙션이 이전에는 선택 사항이었다면, 이제는 필수가 되어가고 있는 것 같아요.
코로나 전후로 세상이 정말 빠르게, 많이 바뀌고 있습니다. 그 중에서도 디자인, 특히 인터랙션 분야는 어떤 변화가 있을까요? 코로나 이후 인터랙션 영역의 득과 실을 따져봤을 때, 득이 훨씬 많은 쪽일 거라 생각해요. 비대면 서비스가 급증하고 있기 때문이죠. 비대면 서비스가 늘어난다는 건 온라인에서의 경험이 부상한다는 얘기죠. 꼭 앱/웹 서비스가 아니어도, 비대면 시대에 대응할 수 있는 많은 경험들을 준비하고 있죠.
그래서 많은 회사들이 생생한 경험(Vivid experience)을 준비하고 있습니다. 최근 코로나 때문에 더 집중받고 있는 건 사실이지만, 이러한 흐름은 이전부터 시작되고 있었습니다. 단편적인 근거로, 디바이스가 굉장히 좋아졌죠. 배터리 효율이 좋아지고, 5G, AR등의 기술 혁신으로 기존의 정적인 디자인이 아니라 동적인 디자인이 각광받고 있습니다.
이러한 배경에 따라, 인터랙션은 선택이 아닌 필수가 될 거예요.
인간 공학과 인터랙션
'인터랙션 디자인은 생생해야 할까?'라는 고민을 많이 하시는데, 사실 '생생함'은 인터랙션의 방향이지 기본이 아닙니다. 인터랙션 디자인을 할 때 가장 기초가 되는, 본질적인 것은 무엇일까요?
과거의 인터랙션 디자인은 웹이나 앱 같은 디지털 환경이 아닌, 비행기, 카세트 같은 기계 환경에서 '버튼을 눌렀을 때 어떤 반응이 연계되어야 할까?'를 고민하는 것이었어요.
여기서 이야기할 수 있는 개념이 바로 '어포던스'입니다. '어포던스'는 행동 유도성으로 번역되며, 도널드 노먼이 처음으로 이야기한 개념인데요. 어포던스는 크게 두 가지로 구분됩니다. 행동을 유도하는 Perceived affordance와 눌렀을 때 반응하는 Real affordance. 인터랙션 디자인에서는 이 두 가지 어포던스의 얼라인을 맞추는 일이 중요하죠.
스마트폰이 처음 나왔을 때, 초기 인터랙션 디자인은 이 두 가지 어포던스를 맞추기 위해 굉장히 노력했습니다. 유명한 예로 '스큐어모피즘'이 있죠. 초기 인터랙션 디자인은 사용자의 혼란을 줄이는 게 가장 큰 목표였어요. 화려함이나 감정 전달은 둘째 치고, 사용자가 이걸 눌렀을 때 기대하는 반응을 고려하는 것. 초기 스큐어모피즘은 화면 디자인 뿐만 아니라 인터랙션 디자인 역시 이러한 목표를 기준으로 작업되었죠.
그럼 지금의 인터랙션은 어떨까요? 초기에는 어포던스 간의 얼라인을 맞추는 것이 중요했습니다. 하지만 지금은 둘의 간극이 많이 좁혀졌고, 그렇기 때문에 스큐어모피즘도 점점 플랫한 디자인으로 가는 흐름이죠. 초기 인터랙션 디자인이 'Work Well'에 집중했다면, 현재는 'Look Good'에 무게를 두고 있다고 생각하시면 이해가 쉬울 것 같아요.
감성을 담은 인터랙션
인터랙션에서 이런 'Look Good'을 구현하는 방법은 여러가지가 있습니다만, 오늘은 '감정을 담는'방법에 대해 이야기해볼게요. 예전에 '모션에 어떻게 감성을 담아요?'라는 질문을 받은 적이 있어요. 그렇게 생각하실 수 있어요. 움직임이라는 게 한정적이고, 가짓수도 다양하지 않아 보일 수 있거든요. 그런데, 동그라미 하나만 움직여도 방법에 따라 느낌이 다르게 나타납니다.
같은 시간 안에도 텐션, 속도를 조절해서 다양한 감정을 표현할 수 있죠. 컬러나 형태 등 비주얼 뿐만 아니라, 인터랙션으로도 충분히 브랜드의 느낌과 감성을 담을 수 있어요.
다음 영상에서 똑같은 그래픽으로도, 모션만으로 감정을 담을 수 있다는 걸 볼 수 있습니다.
(대외비 이슈로 클라이언트사를 밝힐 순 없지만)최근에 진행했던 프로젝트에선 모든 인터랙션을 수치화했어요. 인터랙션은 감성을 담을 수 있다고 말씀 드렸는데, 감성은 정성적인 영역이라서 작업자마다 결과물이 다르게 나올 수 있잖아요.
그래서 이번 프로젝트에서는 모션을 수치화해서 시스템을 만들었어요. 모션의 감속 가속 느낌도 수치로 모두 표현하여 써줬어요. 상태를 명확하게 표기하고 duration, easing, opacity 등을 굉장히 상세하게 표기해놨어요. 프로젝트에서는 어떤 작업자가 디자인하더라도 일관성 있게 감성을 담을 수 있도록요. 이런 방식으로 모션에 브랜드를 담을 수도 있습니다.
다양한 시도와 끊임없는 피드백
결국 인터랙션을 하는 이유는 '전체를 관통하는 디자인 능력'을 갖추기 위함인데요. IX팀 뿐만 아니라 듀오톤의 모든 살몬들이 각자의 영역에 갇히지 않고 전체적인 숲을 보는 경험을 해야한다고 생각해요. 같은 맥락에서 다양한 분야에서의 시도와 끊임없는 피드백이 중요합니다.
CES에 미디어 아트로 참여한 적이 있어요. 제가 온전히 작업한 결과물이었기 때문에 뿌듯하기도 했고, 자부심도 대단했죠. 그래서 한 번은 관람 온 외국인에게 제 작업이 어떤지 물어봤어요. 당연히 Nice라든가, Good이라든가 하는 좋은 말을 기다리고 있었죠. 하지만 돌아온 답변은 '지루하다', '뭔지 모르겠다'였습니다.
저는 그 결과물을 만들면서, 스스로에게만 집중하여 주변 사람들에게 의견을 구하지 않았거든요. 그래서 저는 만족했지만, 보는 사람에겐 의아하게 다가오는 결과물이 나왔던 거죠. 유저는 어딘가 멀리에 있는 거창한 사람이 아니라, 주위에 있는 회사 동료, 친구, 가족 모두가 될 수 있어요. 다양한 시도를 해보면서 주변에 많은 피드백을 받아보고 존중하는 게 중요할 것 같습니다.
2부: 실습 - 김성준 선임 디자이너
프로토타이핑을 해야 하는 이유?
프로토타이핑을 해야 하는 이유에는 세 가지가 있습니다.
첫 번째, 빠른 가설 검증. 하나의 서비스를 완벽하게 만들고 유저의 반응을 보기엔 리스크가 너무 크죠. 특히 지속적으로 운영하는 서비스를 만들 때는, 중간중간에 발생하는 문제들을 프로토타입을 통해 테스트한 후 개선할 수도 있고요.
두 번째, 전체적인 플로우 테스트. 정적인 화면만 디자인할 때는 발견하지 못하는, 인터랙션 단까지 고민해야만 발견할 수 있는 이슈들을 프로토타입을 통해 찾아낼 수 있죠.
세 번째, 인터랙션 디자인을 모두 고려하더라도, 실제 개발로 구현할 때 구두로 커뮤니케이션하는 것은 한계가 있잖아요. duration, delay 등 인터랙션을 느낌이 아닌 수치로, 정량적으로 전달하여 불필요한 미스커뮤니케이션을 줄일 수 있습니다.
프로토타이핑에 대한 필요성을 인지한 후에 실습이 진행되었습니다. 김성준 선임님이 직접 준비해주신 예제를 그 자리에서 만들어보는 시간을 가졌는데요.
프로토파이에 이미 익숙한 멤버들이 처음 다루어보는 멤버들을 옆에서 도와주며, 실습을 진행했습니다. 프로토파이의 인터페이스를 익히고, 똑같은 결과물을 한 가지 방법이 아닌 다양한 방법으로 구현하는 방향 등을 여러 가지 고민하는 시간을 가졌습니다.
CX팀 김나혜
여러 예시를 통해 인터랙션이 더 이상 선택이 아닌 필수 요소라는 것을 몸소 실감할 수 있었던 강연이었습니다.
또한 다양한 프로토파이 예제를 직접 해보면서 어렵게만 느껴졌던 프로토타이핑에 흥미가 생겼고, 앞으로의 프로젝트 진행에 큰 도움이 될 수 있는 유익한 시간이었습니다.
IX팀 김다솜
이 입문 강의는 인터랙션 디자인을 위한 필수 개념과 인터랙션 디자인의 필요성, 역사, 방향성까지 다양한 측면에서 바라볼 수 있도록 하는 종합선물세트 같은 강의였습니다. 그중에서도 인간 공학에 관련된 어포던스(Affordance)에 대한 내용이 기억에 남습니다.
인터랙션 레퍼런스 사이트를 돌아다니다 보면 화려하고 역동적인 디자인들이 더 눈에 들어오곤 합니다. 그런 화려함을 멋지게 생각했던 제게 “인터랙션이 얼마나 생생한지는 ‘방향’이지 ‘기본’이 아니다.” 라는 내용이 정말 인상적이었습니다. 이 ‘기본’에 해당하는 인지 어포던스와 실제 어포던스의 목적과 기능을 알게 된 것만으로 향후 인터랙션 디자인을 할 때 방향성을 잡을 수 있을 것 같다는 생각을 하게 되었습니다.
BX 인터널 세미나 보러가기 https://brunch.co.kr/@duotoneofficial/29
CX 인터널 세미나 보러가기 https://brunch.co.kr/@duotoneofficial/24
UX 인터널 세미나 1부 보러가기 https://brunch.co.kr/@duotoneofficial/26
UX 인터널 세미나 2부 보러가기 https://brunch.co.kr/@duotoneofficial/28
듀오톤 공식 웹사이트: https://duotone.io/
