[UX Report] 5. 인터랙션 디자인 -인터랙션 디자인을 위한 도구들-

안녕하세요.

소셜 미디어 포럼의 김현태입니다.

 

오늘 포스트는 '인터랙션 디자인을 위한 도구들'이라는 주제로 글을 써봅니다.

여러가지 방법론이 하루가 멀다하여 많이 나오고 있는데요. 그 중에서 가장 알려져있고 기본적인

모델들을 설명해 보려고 합니다.

 

'무'에서 '유'를 창조하기란 쉽지 않습니다. 

인터랙션 디자인이란 단순한 IDEA를 창출하는 것과는 다르게 사용자의 머리속에서 테스크를 수행한다는 

생각을 잊어서는 안될 것입니다. 

 

그럼 어떤 모델들, 방법들이 있는지 한번 알아봅시다. 

 

* 지난 회 보기 : 01 인터랙션 디자인 정의 /  02 인터랙션 디자인 접근법 / 03 인터랙션 디자인의 요소와 법칙 / 04 좋은 인터랙션 디자인의 특징

 

Interaction Design                                                                                              

05 인터랙션 디자인을 위한 도구들

 

인터랙션 디자인에 있어서 디자이너가 자신의 디자인을 설명하기 위한 모델, 다이어그램, 문서 작업은 매우 중요하다.

또한 프로젝트가 원활히 진행되기 위해서는 충분한 문서를 작성하는 것이 좋다.

이번 리포트에서는 수집된 정보와 지식, 아이디어를 문서화 하는데 필요한 도구와 방법들에 대해 알아보자.

 

1. 리서치 모델 (Research Models)

디자이너가 처음 만드는 모델은 리서치 작업을 통해 얻어진 결과를 시각화한 것이다. 리서치 데이터에서 얻어진 디자인적 함의들을 존중해야 한다. 그러나 어떤 리서치 데이터 - 특히 패턴들 - 는 쉽게 이해 가능한 형태로 시각화 될 필요가 있다. 물론 이런 정보, 데이터들은 통계 도표로 표현 될 수 있지만, 모델만큼 강한 임펙트를 주지 못한다. 모델은 프로젝트가 진행되는 동안 지속적으로 참조되는 디자인 도구이다.

 

[리서치 모델을 설명하기 위한 일반적인 도구]

l  선형 플로우 : 시간이 지남에 따라 프로세스가 어떻게 풀려가는지를 설명하는 것으로 현재 프로세스에 어디에 문제점이 존재하는 지를 설명하는 데 편리하다.

l  원형 플로우 : 프로세스가 어떻게 일정한 궤도를 그리면서 반복되는지를 보여준다. 

l  거미 다이어그램 : 데이터 포인트 사이의 연결점을 보여준다

l  벤 다이어그램 : 서로 겹치는 원을 통해 데이터의 집합과 상호관계를 보여준다.

l  2X2 매트릭스 : 두 개의 축을 가진 데이터 포인트 사이에서 데이터 간의 관계를 보여준다.

l  지도

 

그림 5-1 상단 좌부터 시계 방향으로 선형 플로우/원형 플로우/거미 다이어그램/벤 다이어그램/2X2 매트릭스/지도

 

2. 페르소나 (Personas)

페르소나는 그 제품/서비스에 관련될 사람들의 특정 유형을 나열한 것으로, 디자이너는 이를 통해 특정한 한 사람을 위해 디자인 한다는 느낌을 갖게 된다.

디자이너는 사용자를 관찰하고 직접 대화를 통해 페르소나를 만들어낸다. 페르소나는 일반적으로 비슷한 목적, 의도, 행동방식을 공유하는 복수 인물의 가상적인 혼합체다. 개별 페르소나들은 이들의 심층적인 성격 차이를 드러내야 한다.

페르소나를 만들어내기 위해서는 리서치 대상자들의 특정한 행동이나 의도에서 공통분모를 찾아낸다. 이 공통분모가 페르소나의 바탕이 되고, 여기에 이름과 사진, 배경 데이터를 덧붙임으로써 진짜 사람과 같은 페르소나가 만들어진다.

 

페르소나의 숫자는 1명에서 7명 사이가 적당하며 많지 않아야 한다. 7명이 넘어가면 그들을 기억하고 다른 사람과 구별하기가 어려워진다.(지난 리포트에서 언급했던 마법의 숫자 7과 어느 정도 관련 있지 않을까?)

 

페르소나가 마치 진짜 존재하는 인간인 것처럼 실제 사람의 사진을 쓰는 것이 좋다. 페르소나의 특징을 풍부하게 보여줄 수 있는 사진을 통해 훨씬 기억하기 쉬워지기 때문이다. 그러나 페르소나를 설정하는 것만으로는 아무 결과도 얻을 수 없다. 이들에게 시나리오를 부여해 각 인물 유형별 선호도와 사용목적에 맞는 기능을 테스트 할 때만이 쓸모가 있다.

 

페르소나를 설정하는 것이 절대적으로 도움이 되는 것은 아니다. 오히려 진정한 사용자 사이를 가로막는 인공적인 장벽이라고 느끼는 디자이너들도 있다. 그러나 페르소나가 리서치의 결과물이며 올바른 성격- 행동, 의도, 목적-을 갖고 있다면 대부분 유용하게 사용될 수 있다.

 

3. 시나리오 (Scenarios)

시나리오는 디자인 컨셉을 상상하게 만드는 빠르고 효과적인 방법이다. 만들어진 제품/서비스가 어떻게 쓰이게 될까에 대한 이야기로 등장인물은 페르소나다. 시나리오를 이용해서 디자이너들은 자신들이 설정한 페르소나에게 컨텍스트를 부여하고 그들에게 생명을 불어넣는다. 각각 다른 페르소나를 이용해 같은 시나리오를 따라가면 최종 제품에 어떤 기능이 어떻게 구현되어야 할지 자연스럽게 알 수 있다

 

시나리오란 글로 쓰인 프로토타입이라고 할 수 있다.

 

4. 스케치와 모델 (Sketches and Models)

디자이너가 직접 이미지를 그려 넣어보거나 모형을 제작해 보는 방법으로 실제 물체의 대략의 모양과 환경을 만들어 볼 수 있다. 스케치와 모델링은 개별 디자인 프로세스에 완결되지만 이후로도 디자인 아이디어와 컨셉이 진행되어 형태를 갖추는 중간 과정을 시각화하는데 가장 큰 도움을 준다.

 

5. 태스크플로우 / 워크플로우 (Task Flows)

제품/서비스의 기능이나 작업들이 어떻게 논리적으로 연결되어 와이어프레임으로 구성되는 지를 보여준다.

작업을 이런 플로우 안에 배치함으로써 제품의 형태를 구성하고, 제품의 동작 단계나 웹사이트의 페이지 순서를 그려볼 수 있다. 작업 흐름도 상에서 사용자들의 특정한 행동이 개별 작업을 이끌어내기 때문에 꼭 필요한 컨트롤 기능을 정의하는 데도 도움을 준다. 또한 특정한 결정이 이루어져야 하는 지점과, 함께 보여져야 할 메뉴와 정보도 포함된다.

그림 5-2 Task Flow는 작업들간의 논리적 흐름을 보여준다

 

 

6. 유스케이스(Use Cases)

유스케이스란 제품/서비스의 기능을 간략하게 늘어놓은 것이다. 유스케이스는 간단한 단어를 사용하여 해당 기능의 쓰임새와 이유를 설명한다.

유스케이스는 사용자의 시점에서 시스템을 모델링하는 역할을 하고 시스템 분석가가 사용자와 힘을 합쳐 시스템의 사용 방법을 결정하는데 도움을 주는 방법이다. 시스템 보다는 사용자의 입장을 우선해서 시스템이 어떠해야 하는 가를 알아보는 것으로 시스템과 외부 환경 변수를 구분하고 상호 관계를 정립할 수 있게 해준다. 그리고 시나리오와 달리 시스템이 주체가 되어서 돌아가는 상황도 반영되고, 각 기능, 서비스 별 목적을 명확히 파악 할 수 있어 프로젝트 참여자들의 의사소통 도구로 사용된다.

유스케이스는 다이어그램으로 그릴 수도 있고 글로 서술 할 수도 있다.

그림 5-3  유스케이스 다이어그램 예시

 

"Writing Effective Use Case"의 저자인 코번(Alistair Cockburn)은 유스케이스를 작성하는12단계를 다음과 같이 정의했다. (한국에는 "유스케이스 바로 쓰기" 라는 책으로 번역, 출간되었다)

①     시스템의 범위와 경계 설정

②     시스템에 관계된 모든 액터 찾기

③     액터가 시스템을 통해 얻으려고 하는 목적들 찾기

④     각 액터에 대한 최상위 유즈 케이스(summary use case) 설정

⑤     최 상위 유즈 케이스들에 대한 정제 작업(시스템 범위의 재확인)

⑥     상세 작업을 할 유즈 케이스 선택

⑦     이해 관계자와 그들의 목적, 선행조건, 후행조건 등을 뽑아냄

⑧     주 성공 작업 흐름 작성

⑨     대안 흐름과 예외 흐름 찾기

⑩     대안 흐름과 예외 흐름 작성

⑪     복잡한 스텝을 하위 유즈 케이스로, 자잘한 스텝들은 모아서 하나로 합치는 작업 수행

⑫     유즈 케이스 조절 작업(읽기는 쉬운지, 구색은 갖췄는지, 이해관계자는 만족하는지) 수행

유스케이스는 작업을 나누고 시스템이 무엇을 해줘야 하는지를 보여주는 훌륭한 방법이다.

 

7. 스토리보드(Storyboards)

스토리보드 작업은 본래 영화와 광고 업계에서 쓰이는 기법으로 제품을 사용하는 모습을 상상하는데 도움을 준다.

스토리보드는 복잡한 프로세스나 기능을 설명하는 데 와이어프레임과 함께 사용되기도 한다. 스토리보드를 이용하면 사용자의 동작 중 가장 중요한 부분을 장면 장면을 보여주는 방식으로 설명할 수 있다

 

8. 와이어프레임(Wireframes)

와이어프레임은 구성, 정보체계, 기능, 컨텐츠를 담은 문서들의 모음이다. 이 작업은 건축 설계의 밑그림이나 네트워크 구조도에 기반을 두고 있다. 와이어프레임은 제품에 들어갈 기능들을 정의한 문서들을 포함하고 있으며 이런 기능들이 들어가게 된 기술적, 사업적 이유들이 한 장의 디자인 시안과 함께 제시된다.

와이어 프레임은 ‘와이어프레임, 주석, 와이어프레임 메타데이터’ 이렇게 세가지 영역으로 구성된다.

①     와이어프레임 – 제품/서비스의 특정한 부분의 상세한 형태를 보여줌

②     주석 – 와이어프레임 상의 모호한 내용 및 기능을 부연 설명

③     와이어프레임 메타데이터 – 해당 와이어프레임에 대한 기타 정보.

예를 들면, 작성일자, 문서 버전, 버전 히스토리, 관련문서 등

그림 5-4와이어프레임은 비주얼적인 디자인요소를 배제한 제품의 구성적, 기능적 요소를 담고 있다

 

9. 프로토타입

마지막으로 제품/서비스가 출시되기 전에는 프로토타입을 만들어 사용자들에게 테스트 해보는 것이 중요하다. 프로토타이핑에서 드디어 디자인의 모든 요소가 하나의 형태로 합쳐지게 되고 “ 제품/서비스가 이렇게 생겼을 거에요”라는 메시지를 전달한다. 모든 프로토타입의 목적은 최종 제품/서비스의 특징을 살펴보고, 사용자들에게 제품이 어떻게 쓰이는지를 실험하고 관찰하는 것이다.

 

대부분 인터랙션 디자이너들은 세가지 종이, 디지털, 실제로 형태를 갖춘 세가지 프로토타입으로 작업한다.

①     종이 프로토타입 – 일반적으로 제품/서비스가 동작하는 방식을 보여주는데 가장 빠른 방법으로 직접 종이에 특정한 동작을 순서에 맞게 담고 사용자가 순서대로 넘겨보게 되며, 테스트하면서 바로 코멘트를 달 수 있다.

②     디지털 프로토타입 – 종이 프로토타입과 달리 직접 간단하게 동작할 수 있도록 만들어 주는 방법이다. 웹이나 디스크 형태로 사용자들에게 전달하여 쉽게 실행해 보게 할 수 있다는 장점이 있다.

③     실제 프로토타입 -  디자인의 특정한 부분 혹은 실제와 동일하게 그대로 구성하는 방법이다.

 

프로토타입은 인터랙션 디자이너의 비전을 궁극적으로 표현하는 매우 중요한 과정이다.

 

이상으로 인터랙션 디자인의 도구들에 대해 살펴보았다.

인터랙션 디자이너는 모델과 다이어그램을 사용해서 이전 단계의 디자인 프로세스에서 얻은 지식을 시각화 하고 분석하면서 자신들의 기술과 지식, 아이디어를 드러내 보인다. 유스케이스는 제품/서비스가 완수해야 할 목표를 명확히 하는 데 이용되고, 시나리오, 스토리보드, 태스크 플로우, 스케치, 와이어프레임, 프로토타입은 모두 어우러져서 최종 제품/서비스가 어떤 형태가 될지에 대한 비전을 보인다. 디자이너가 제작하는 모델과 다이어그램, 그리고 문서의 수준이 디자이너의 수준을 말해준다. 디자인 문서를 구성하는 것이 인터랙션 디자인 작업 성공여부에 얼마나 중요한 역할을 하는지 잊지 말아야 할 것이다.

------------------------------------------------------------------------------------------------------------------------------------------------------------

 

* 지난 회 보기 : 01 인터랙션 디자인 정의 /  02 인터랙션 디자인 접근법 / 03 인터랙션 디자인의 요소와 법칙 / 04 좋은 인터랙션 디자인의 특징