brunch

You can make anything
by writing

C.S.Lewis

by maus x maus Jun 22. 2017

인터랙션 디자이너란?

What is an Interaction Designer?

요즘 인터랙션 디자인이란 단어가 많이 들립니다. 그런데 진짜 인터랙션 디자인은 뭘까요? 그리고 진정으로 "인터랙션 디자이너입니다"라고 하기 위해선 뭐가 필요한 걸까요? 여기에 두 궁금증에 대한 답과 함께 쇼케이스도 같이 준비해 봤습니다.



인터랙션 디자인 기초

인터랙션 디자인은 디자이너가 논리적이며 습관과 행동애 기반하여 사용자 시선을 사로잡는 웹 인터페이스를 만드는 데 중점을 둔 프로세스입니다. 성공적인 인터랙티브 디자인은 원하는 사용자가 원하는 UX를 찾기 위해 기술력과 커뮤니케이션 원칙을 적용합니다.


*원문에서는 웹이라 했지만 실제 인터랙션은 다양한 분야에 적용되고 있습니다.


웹 사이트와 앱에서의 인터랙션 디자인은 저희가 10년 전부터 이야기해 왔는데 그런 이야기는 많았지만 그렇게 현실이 되지는 않습니다. 이러한 개념에 대한 가장 많이 소개된 콘셉트 중 하나는 2002년 Bob Baxley가 웹 애플리케이션 프로그램의 상호 작용 설계(interaction design)를 정의하여 12개의 시리즈로 출판되었습니다.



인터랙션 디자인 소개"에서 지금도 유용한 항목을  다섯 개로 나눠보면:


인간과 기계와의 통신은 디바이스(예:모바일)와 사용자 간의 대화를 변환해 줍니다.

액션과 리액션은 인터랙션이 어떻게 시작하고 발동하는지 보여줍니다.

상태는 사용자에게 어떤 일이 일어나고 있으며 왜 그렇게 되는지 인지하도록 명확히 알려줘야 합니다.

작업 흐름(Workflow)은 사용자에게 누가 툴 혹은 응용프로그램을 사용하고 그 후 어떻게 되는지 알려줘야 합니다.

오작동은 일어날 수밖에 없는 사용자 실수를 고려해야 합니다.

*예: 404


또한 디자인 상호 작용을 제작할 때 명심해야 할 몇 가지 고려 사항이 있는데 Usability.gov는 디자인이 어떻게 구성되는지 도울 수 있는 6가지 카테고리로 기본적인 질문을 제공하고 있습니다.



사용자가 마우스, 손가락 혹은 스타일러스로 인터페이스와 직접적인 상호 작용할 수 있는 것은 무엇입니까?

사용자가 인터페이스와 상호 작용할 수 있는 명령(어)은 무엇입니까?

외관(형태)은 사용자에게 기능에 대한 단서를 제공합니까?

사용자가 액션(예: 버튼 클릭)을 하기 전에 어떤 일이 일어날지 알리는 정보는 무엇입니까?

오류를 방지하기 위해 도움이 되는 제약점(예: 버튼 비활성화)이 있습니까?

오류 메시지는 사용자가 문제를 해결할 수 있는 방법을 제공합니까?

어떤 행동이 발생될 때 사용자는 어떤 피드백을 받게 됩니까?

액션과 그 응답 사이의 시간은 얼마 정도 걸립니까?

인터페이스 요소(버튼, 입력창, 텍스트)가 상호 작용할 수 있는 적당한 크기입니까?

상호작용하는 요소를 배치하기 위해 경계(edge)와 모서리(corner)를 전략적으로 사용되고 있습니까?

표준안(standards)을 따르고 있습니까?

정보는 한 번에 몇 가지 항목으로 나뉘어 있습니까?

사용자가 아주 쉽게 종료할 수 있습니까?

익숙한 포맷으로 구성되어 있습니까?



인터랙션 디자이너의 역할

만약 당신이 위 목록의 질문에 대해 생각하거나 묻는다면 인터랙션 디자이너입니다.


인터랙션 디자이너는 디자인 전략을 수립하고 생성하고 제품의 주요 상호 작용을 구별하며 개념을 테스트하기 위한 프로토 타입을 작성하고 사용자에게 영향을 주는 기술 및 추세를 유지하는 데 도움이 되는 디자인, 개발, 크리에이티브 또는 마케팅 팀의 담당자라고 보면 됩니다


뭔가 애매한 직군 설명으로 들릴 수도 있습니다. 간단하게 말하면: 회사는 인터랙션 디자이너를 고용해서 회사에서 제작한 디지털 애플리케이션이 사용자 관점에서 잘 작동하고 있는지 확인하는 것입니다.


인터랙션 디자이너의 경력 경로(career path)는 다양합니다. 일부 공식 디자인 프로그램에서 가르치고 있지만 대부분의 사람들은 경험이나 우연히 인터랙션 디자이너가 됩니다. 그러나 인터랙션 디자이너의 일반적인 특징 중 하나는 사물이 어떻게 작동하는지에 대한 갈증, 질문을 두려워하지 않고 새로운 방식으로 요소와 개념을 시각화하고 재생할 수 있는 능력입니다.



인터랙션 디자인 콘셉트와 원칙

그렇다면 실제로 인터랙션 디자인을 점진시키는 것은 무엇일까요? 일반적인 디자인과 다른 점은 무엇일까요? 그 차이점도 애매모호할 수도 있지만 제가 인터랙션 디자인이라고 말하는 이유는 그것이 가진 무게와 집중력이 있기 때문입니다. 그러나 현실은 인터랙션 디자인이 디지털, 웹 및 애플리케이션 디자인 및 개발 측면에서 좋은 디자인의 한 부분 일 뿐이라는 사실입니다.


2009년 UX Booth에서 출판 한 "Complete Beginner’s Guide to Interaction Design"는 여전히 훌륭한 지침서입니다. 키 플레이어와 툴 일부가 변경되었지만 인터랙션 디자인을 유도하는 개념은 동일합니다.


목표에 기반한 디자인: 사이트 또는 인터랙션이 존재하는 이유는 무엇입니까? 이를 파악하고 애플리케이션이 이 한 가지를 훌륭하게 수행하는지 확인하십시오.


마술 같은 인터페이스: 당신은 정말 최고의 인터페이스를 보지도 못했습니다. "최고의 인터랙션 디자인은 존재하지 않습니다. 읽고(load) / 반응하는 하기까지 긴 시간이 걸리지 않습니다. 사용자를 생각하게 만들지 않습니다.  사용자에게 고민할 거리를 만들지 않습니다."


사용성: "기본 시스템의 상태를 이해하고 사용하기 쉽게 만드는 인터페이스가 선호하게 만듭니다."


어포던스(Affordances): "최고의 (산업 / 인터랙션) 디자인은 스스로를 표현하는 디자인입니다. '형식이 기능(function)을 따른다.'라는 속담이 있습니다."


학습 능력: "사용 가능한 인터페이스를 구성하는 많은 부분이 친근한 컴포넌트로 구성되어 있습니다.... 최고의 인터랙션 디자이너는 비슷한 디자인 과제가 발생할 때마다 바퀴를 재발명하지 않습니다. 오히려 그들은 일련의 패턴을 적용합니다. "




인터랙션 디자인 쇼케이스

우리는 일상에서 일어나는 좋은 예를 보여주지 않고 인터랙션 디자인에 대해 이야기할 수 없을 겁니다. 하단의 각 프로젝트는 개념이 무엇에 관한 것인지에 대한 근본 목적에 도달하는 것을 보여주고 있습니다. 각 링크에 가서 어떻게 작동하는지에 대해 자세히 알아보면 좋을 거 같습니다.



Move Product by Barthelemy Chalvet (AgenceMe)


Weather App by Sergey Valiukh


Fiche by Barthelemy Chalvet


Material Design Animation


Mobile Animations & Interactions


Team Messages by Jan Losert


Float Label Form Interaction by Matt D. Smith


iOS New Gestures by Javi Perez


Qards Contact Form by Sergey Shmidt


Nike by Owi Sixseven


Android Wear by Ramotion


Apple Watch by Jakub Antalík


인터랙션 디자인 파고들기

인터랙션 디자이너와 일반적으로 협업에서 사용할 수 있는 인터랙션 디자인, 툴 및 작업에 관한 훌륭한 리소스가 많이 있습니다. 아래 링크는 인터랙션 디자인에 대해 더 자세히 배울 수 있는 몇몇 링크입니다.


Interaction Design Foundation

"Interaction Design: Beyond Human-Computer Interaction" textbook

Interaction Design Association

Interaction Design Checklist for designers



마치며

사용자는 모던 웹에서 인터랙티브 한 경 경험을 기대합니다. 그거 말곤 다른 방법이 없습니다. 현상태를 유지하면서 사용자가 계속 방문하게 하려면 이러한 상호 작용이 필요합니다.


팀에서 상호 작용을 관리하고 제작히거 모니터링하는 맡고 있는 사람을 확보하는 것도 중요합니다.



출처: https://designmodo.com/interaction-design/




오늘날 대부분의 디자이너가 자신이 고민하는 것이 인터랙션임을 모르고 UX라고 생각하는 게 아닌가 생각합니다. 아직 국내에 인터랙션 디자인 디자이너라는 영역이 그리 크진 않지만 앞으로 인터랙션 디자인이란 디자인 카테고리가 더욱 활성화될 거라 봅니다.


다양한 툴이 많은데 기본적으로 인터랙션의 개념을 학습하고 자신만의 경험 가치를 만들어 가보면 어떨까요?


이 책 추천드립니다.



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari