디자인 기획자를 위한 인포그래픽(Info-graphics) 2

연재 순서

1. 디자인 기획 과정 속 인포그래픽

2. 디자인 기획에 필요한 인포그래픽의 유형

3. 인포그래픽을 위한 정보 시각화 방법

4. UX Design에서의 활용

2. 디자인 기획에 필요한 인포그래픽의 유형

[디자인 기획자를 위한 인포그래픽] 두 번째 이야기 입니다. 이번 블로그에서는 '디자인 기획에 필요한 인포그래픽 유형'에 대한 이야기를 하려고 합니다.

디자인 기획 과정에서 활용되는 인포그래픽은 조금 더 깊이 있는 접근이 필요합니다. 눈에 보이는 데이터를 단순히 '보기 좋게' 만드는 수준에 그쳐서는 안됩니다. 주어진 정보를 해석하고, '의미있는 정보'들을 임팩트있게 전달할 수 있도록 시각적인 재가공을 할 수 있어야 합니다. 매체를 통해 볼 수 있는 인포그래픽은 단지 '정량데이터'를 보기 좋게만 그려내는 경우가 많습니다. 그러나 디자인 기획 과정에서는 정량 데이터의 시각화 뿐만이 아니라 관계, 흐름, 구조, 시나리오 등 매우 다양한 상황을 그려낼 수 있어야 합니다. 특히 사용자 경험(UX)을 디자인해야 하는 UX Design 기획 과정에서는 더욱 다양하고 입체적인 정보 시각화가 필요합니다. 이번 블로그에서는 디자인 기획 과정에서 필요한 인포그래픽 유형을 분류해보고 각 유형별 사례들을 정리해보도록 하겠습니다.

유형 정리를 위한 과정은 다음과 같습니다. UX Design Process, Service Design Process, Product Planning Process에서 활용되는 방법론을 모아보고 시각화가 필요한 Method들을 걸러내었습니다. 그런 뒤 Method별 특징에 따라 Categorizing하여 유형을 분류하였습니다. 분류를 해본 결과, 디자인 기획 과정에 필요한 인포그래픽의 유형은 흐름(Flow), 관계(Relation), 구조(Structure), 재현/모델링(Modeling), 정량 데이터(Quantitative Data)와 같이 총 5가지로 나눌 수 있었습니다.  
 

1) 흐름(Flow)

흐름은 과정 또는 단계를 표현하기 위한 유형입니다. 선형으로 진행이 되는 경우도 있고 순환형, 발산형, 수렴형 등 다양한 형태로 표현이 가능합니다. 선형으로 표현되는 그래픽의 경우 '축(axis)'을 어떻게 정의하느냐가 매우 중요합니다. 하나의 흐름에 복합적인 축이 형성 되기도 하며, 예상치 못한 축이 들어가면서 결과물의 가치가 달라지는 경우가 있습니다. 의미 있는 축을 찾아내고 흐름 안에 잘 녹이는 것이 중요합니다. 

Service Blueprint
Service Blueprint는 서비스 전달 과정에 필요한 관계자들의 역할과 서비스 단계의 흐름 등 서비스 전반을 이해하도록 하는 맵입니다. 서비스 전체의 모습을 정확히 판단할 수 있게 하여 개선점이나 평가 방법에 대한 착안점을 제공하는 것이 목표입니다. 사용자의 행위나 기능, 물리적 환경 등 가로축을 어떻게 정하느냐가 매우 중요합니다. 또한 터치포인트에서 관계자들의 역할, 보이지 않는 영역에서의 행동이나 지원 프로세스 등이 명시되어 있어야 합니다.
*아래의 이미지는 갤러리 형식으로 되어있습니다. 좌우 화살표를 누르시면 이미지를 더 보실 수 있습니다.

01234

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4, 이미지5

User Journey Map (Customer Journey map, Experience map)
사용자가 서비스를 이용하면서 겪는 과정을 단계적으로 시각화한 것입니다. 무형의 서비스를 시각화하는 데 유용한 도구입니다. 사용자 경험, 감정선, 숨겨진 Pain point, Touch point 등을 맵핑하여 사용자가 경험하는 '전체 서비스의 흐름과 인터랙션'을 파악하고 '개선점'을 찾는 것이 목적입니다.

01234

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4, 이미지5-pxd Inc

Life Cycle Map
서비스/제품의 이용 주기를 시각화한 맵입니다. Journey map이 단기 여정을 그려낸다고 하면 Life cycle map은 장기 여정을 그려내는 것에 효과적인 도구입니다. 건물의 Life Cycle, 물이 비가 되어 내리기까지의 여정과 같이 '순환 구조'를 가지고 있으면서 '장기 여정의 Cycle'을 가지고 있는 대상을 표현하는데 효과적입니다. 

012

※ 이미지 출처(링크) : 이미지1-pxd Inc, 이미지2, 이미지3

Key path Scenario

서비스 또는 제품 이용에 대한 단계별 시나리오입니다. Key path Scenario라는 표현에서 알 수 있듯이 핵심 Task에 대한 시나리오를 단계적으로 시각화한 것입니다. 시나리오 시각화에 대한 방법은 매우 다양하기 때문에 서비스/제품 특성을 잘 살릴 수 있는 시각화 방법을 찾는 것이 팁!

0123

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3-pxd Inc, 이미지4

Flow Model
Flow Model은 직무에 필요한 사람들의 역할, 커뮤니케이션 흐름, Task 등을 묘사하는 것입니다. Flow model이 완성되면 사람들의 역할, 핵심 업무 그룹, 핵심 활동, 커뮤니케이션 패턴, 프로세스 업무 흐름 등을 알 수 있습니다.

01234

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4, 이미지5

Sequence Model
사용자의 Task를 수행하는 동안 행하는 행동 단계들의 기록을 말합니다. 사용자의 과업(Task), 계기(Trigger), 의도(Intent), 장애 요소(Breakdown)등 겉으로 보이지 않는 행동 변수들을 찾아서 맵핑해주는 것이 중요합니다. 사용자 행동이 어느 시점에 분기가 되는지, 행동이 달라지는 계기는 무엇인지, 어떤 의도를 가지고 그렇게 행동하는지, 불편함을 느끼는 포인트가 어디인지 등을 발견할 수 있는 모델링 기법입니다.

0123

※ 이미지 출처(링크) : 이미지1, 이미지2-pxd Inc, 이미지3-pxd Inc, 이미지4

2) 관계(Relation)

관계는 데이터 안에 형성된 상호 관계를 시각화한 것입니다. 사람과 환경, 사람과 디바이스, 사람과 사람 등 관계 속에서 찾을 수 있는 데이터를 시각화하는 것입니다. 관계를 찾아내는 것 자체도 중요하지만 연결 고리 속에 숨어있는 의미를 발견하는 것이 중요합니다. 단순히 화살표 찍찍 그어서 연결하는 것에서 끝나는 것이 아니라 그 연결점 속에 숨겨진 의미를 끌어내어 적절하게 표현하는 것이 중요합니다. 

Cultural Model
Culture Model은 업무를 수행하는 사람을 둘러싼 외부적 영향 또는 내부의 문화적인 관계를 시각화한 것입니다. Cultural Model은 조직 또는 지역적 위치 내에 존재하는 문화적 이슈, 사용되는 도구,사람들의 감정 관계, 숨겨진 니즈 등 관찰된 내용들을 문화 관계 중심으로 맵핑해주는 것이 중요합니다.

012

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3-출처유실

Touch Point Matrix

사용자들이 서비스를 이용하면서 접하게 되는 Touch point를 시각화하는 것입니다. 서비스 제공 방식이나 새로운 서비스 기회 영역에 대한 아이디어를 얻기 위해 활용할 수 있습니다. 서비스와 사용자, 이해 관계자의 연결 구조를 파악하고 다양한 유형의 접촉점을 정의하는 것이 중요합니다. 

0123456

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4, 이미지5, 이미지6, 이미지7

Stakeholder map 

서비스 이해 관계자들의 관계를 시각화한 맵입니다. 사용자, 서비스 제공자, 기획자, 디자이너, 개발자 등 프로젝트에서 산정할 수 있는 이해 관계자들을 찾고 비즈니스 구조를 그려보기 위한 도구로 사용할 수 있습니다. 

012345

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4, 이미지5, 이미지6

Use case Diagram
Use case diagram은 사용 Scene에 대한 과정을 한눈에 볼 수 있게 시각화한 Diagram을 말합니다. 특별히 정형화된 형태는 없으며 서비스/제품 사용 시작 시점부터 종료 시점까지 '누가', '무엇'을 할 수 있는지에 대해 상세하게 기술해놓은 시나리오입니다. 사용 Scene이 어떤 동기와 목적으로 파생되는지 정리하고 그에 따른 솔루션에 대해 고민하기 위한 도구로 활용됩니다.

0123

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4

Actors Map
Actors map은 사용자와 서비스/이해 관계자 간의 위치 관계와 역할을 정의하기 위한 도구입니다. 형태적으로는 Stakeholder map하고 유사한 형태를 가지고 있으나 내용적으로는 조금 다른 구조를 가지고 있습니다. Stakeholder map이 비즈니스적인 측면에서 이해 관계자들의 관계를 고려한 맵이라고 하면 Actors map은 사용자 중심으로 사용자와 서비스의 연결 구조를 그려낸 맵입니다. 사용자와 서비스가 어떠한 연결 구조를 가지고 있는지 정의함으로써 새로운 서비스 기획 시 고려해야 하는 전달 경로나 Touch point들을 찾을 수 있습니다.

012345

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4, 이미지5, 이미지6
 

Value Web Diagram
마켓이나 산업에 있어서의 현재 혹은 잠재적인 구조와 가치의 흐름을 설명하는 방법입니다. 각 요소 간에 교환되는 가치를 알려주고 이러한 가치 사슬에서 집중해야 할 부분을 명확하게 찾아내는 것이 중요합니다. 돈, 정보, 서비스, 제품 흐름의 관계를 한눈에 볼 수 있게 시각화하는 방식입니다.

012

※ 이미지 출처(링크) : 이미지1/이미지2/이미지3(스토리텔링으로 풀어보는 UX 디자인)

3) 구조(Structure)

구조는 계층을 표현하거나 연속적으로 확장이 일어나는 데이터를 시각화한 것입니다. 데이터를 구조적으로 정리하기 위한 방법이며 대상을 MECE하게 볼 수 있도록 정리하는데 의미가 있다. 구조가 확장될 때에는 동일 선상에 있는 데이터의 레벨을 맞추는 것이 중요합니다. 

Function Structure Diagram
이 Diagram은 분야에 제한없이 매우 일반적으로 사용되고 있는 구조맵입니다. 체계적이고 포괄적인 이해를 돕기 위해 상위 개념부터 하위개념까지의 구조적인 흐름을 탑다운(top-down)방식으로 정의하는 다이어그램입니다. 

012

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3

Logic Tree
주어진 문제 꼬는 과제에 대하여 서로 논리적 연관성이 있는 하부 과제들을 트리 형태로 전개하는 것입니다. MECE의 사고방식에 기초해서 주어진 문제를 해결하기 위해 어떤 하부 문제들을 고려해야 하는지 논리적으로 분해해가는 시각화 방법입니다. 각 단계별로 확장을 할 때 2~3개로 확장하는 것이 효과적이며 MECE한 관점으로 보고 내용이 중복되지 않고 누락되지도 않게 하여 고르게 확장하는 것이 중요합니다.

0123

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4

4) 재현/모델링(modeling)

재현/모델링은 물리적인 환경, 제품, 인물의 특징, 시나리오 등을 컨셉이나 특징에 맞게 시각화하는 것입니다. 실제 환경을 화면 속에 담기 어려워서 그래픽으로 재현하는 것이기 때문에 일정 수준 이상의 사실성을 부여하는 것이 중요합니다. 실제 느낌을 잘 살리되, 그래픽이라는 이점을 잘 살려서 효과적으로 가공하는 것이 중요합니다.
 

Artifact Model
사용자가 과업을 수행하면서 이용하거나 과업에 영향을 미치는 주변 사물을 시각화한 것입니다. 직접 만들거나, 과업을 위해 이용하거나, 과업에 영향을 주는 Artifact들을 모델링하는 것입니다. 사용자가 과업을 수행하면서 어떠한 사물들과 인터랙션을 하는지 설명해주는 역할을 합니다. Context inquiry과정에서 사용자의 환경 관찰을 통해 발견되는 것으로 (인터뷰를 통해서 발견될 수 없는) 숨겨진 맥락을 발견하는 것이 중요합니다.

0123456

※ 이미지 출처(링크) : 이미지1-pxd Inc, 이미지2, 이미지3, 이미지4, 이미지5-출처유실, 이미지6, 이미지7
 

Physical Model
Phisical model은 사용자 과업에 영향을 미치는 실제/물리적 환경을 재현한 방법입니다. 사용자의 과업을 수행하는 장소를 기반으로 작성되며 업무 수행 간 공간의 영향과 이용 방식을 확인하고 사용자의 자연스러운 업무 흐름/패턴을 발견할 수 있습니다. 또한 물리적 환경에서 기회요소와 장애요소를 분석할 수 있습니다.

01234

※ 이미지 출처(링크) : 이미지1, 이미지2-pxd Inc, 이미지3, 이미지4, 이미지5

 

Persona
Persona Modeling은 User Research 이후 사용자의 유형을 정의하는 것으로 사용자의 Goal, Behavior pattern 등을 기술하여 모델링하는 것입니다. 컨셉과 전략에 따라 필요의 범위 안에 있는 행동을 대표하는 사용자를 모델링하는 것이 중요합니다. 분석 단계에서 발견한 Factor에서 Behavior Pattern을 바탕으로 모델링이 되기 때문에 행동 패턴과 목표가 도출이 되어야 합니다.

01234

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4, 이미지5

Desktop Walkthrough
Desktop Walkthrough는 서비스 환경을 모형을 활용하여 실제처럼 재현하고 시나리오를 구현하는 방법입니다. 일종의 Prototype기법으로 사전에 상황을 시뮬레이션을 해봄으로써 원형 개발에 도움을 주는 방법입니다.

0123

※ 이미지 출처(링크) : 이미지1, 이미지2/이미지3-pxd Inc, 이미지4

Business Model Canvas
재현/모델링 유형이 꼭 들어맞는 모델인지 애매한데…현재와 미래를 시뮬레이션 할 수 있는 도구로 활용되기 때문에 재현/모델링 유형에 넣어보았습니다. 비즈니스 모델 캔버스는 성공적인 비즈니스 모델을 만들기 위한 툴입니다. 새로운 서비스를 구체화하거나 새로운 서비스에 대한 청사진을 모델링 할 때 사용하게 됩니다.

012345

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3, 이미지4, 이미지5, 이미지6


5) 정량 데이터(Quantitative Data) 

정량 데이터는 Raw data를 의미 있게 가공하여 시각화하는 것을 말합니다. 기획 문서에서 가장 빈번하게 이용되는 시각화 방식입니다. 가장 중요한 원칙은 명료성을 지키는 것입니다. 있는 데이터를 그냥 덕지덕지 깔아 놓는 것이 아니라, 먹기 좋게 가공하여 주는 것이 포인트입니다. '정량 데이터는 데이터 자체를 보여주기 위한 것이 아니라. 데이터의 의미를 보여주기 위함이다.(Slide:ology)'라는 표현처럼 복잡한 정량 데이터를 보여주려고 하지 말고 데이터의 의미를 드러내는데 주력해야 합니다.

Data Visualization
Data Visualization은 정량 데이터 분석 결과를 Graph를 활용하여 쉽게 이해할 수 있도록 전달하는 과정을 말합니다. 위에 언급했듯이 데이터 자체를 보여주기 위함이 아니라 데이터 안에 담긴 의미를 효과적으로 전달하려는 것에 목적이 있습니다.

012

※ 이미지 출처(링크) : 이미지1, 이미지2, 이미지3

이상으로 디자인 기획 과정에서 필요한 인포그래픽 유형을 분류해보고 각 유형별 사례들을 정리해보았습니다. 여러가지 표현 기법을 나열해보았는데, 중요한 것은 방법론의 개수가 아니라 '데이터를 효과적으로 표현하기 위한 방법을 선별'하는 것입니다. 아무리 다양한 재료가 있어도 내 음식에 맞는 재료를 사용해야 맛있는 음식이 나오니까요. 데이터를 효과적으로 시각화 할 수 있는 방법을 찾아서 데이터의 낭비가 없이 적절한 곳에 사용하는 것이 중요합니다. 이번 편은 방법론을 모아놓은 라이브러리로 활용하면 좋을 것 같습니다. 이 라이브러리는 계속해서 업데이트 하도록 하겠습니다. 다른 좋은 자료들이 있으면 소개 부탁드립니다. ^^

▶다음편 예고
 

연재 순서

1. 디자인 기획 과정 속 인포그래픽

2. 디자인 기획에 필요한 인포그래픽의 유형

3. 인포그래픽을 위한 정보 시각화 방법

4. UX Design에서의 활용

다음 편은 '인포그래픽을 위한 정보 시각화 방법'에 대한 이야기입니다. 인포그래픽 디자인은 어떻게 해야 할까요? 다음 편에서는 인포그래픽 디자인을 위한 노하우에 대해서 정리해보도록 하겠습니다. 많은 기대 바랍니다 ^^