태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


2013.06.05 01:03

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

연재 순서
1. 디자인 기획 과정 속 인포그래픽
2. 디자인 기획에 필요한 인포그래픽의 유형
3. 인포그래픽을 위한 정보 시각화 방법
4. UX디자인에서의 활용

이번 블로그 연재는 '디자인 기획' 실무 과정 속에서 필요한 인포그래픽에 대한 이야기 입니다.
일반적인 인포그래픽에 대한 이야기가 아닙니다. 참고하시기 바랍니다.

연재는 다음과 같은 흐름으로 진행됩니다.


첫 번째 블로깅은 디자인 기획과 인포그래픽의 관계를 알아보는 장입니다. 인포그래픽이 어떠한 특징을 가지고 있으며 그것이 디자인 기획 과정 속에서 어떠한 역할을 하게 되는지 정리해보려고 합니다.



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

pxd 디자이너들은 UX 디자인이라는 이름으로 다양한 분야의 프로젝트를 수행합니다. 모바일 서비스 기획, 서비스 디자인, 모바일 앱과 PC소프트웨어 화면 설계 등 다양한 분야의 업무를 수행하고 있습니다. 우리는 디자이너라는 Job title을 달고 있습니다. 그러나 아이러니하게도 우리가 주로 사용하는 툴은 포토샵/일러스트레이터가 아니라 키노트/파워포인트와 같은 프리젠테이션 툴입니다. 전략 프로젝트의 경우 수십 페이지에 달하는 전략과 산출물을 만들어냅니다(화면 설계서를 그려내는 프로젝트인 경우 천페이지가 넘는 경우도 있습니다). 물론 프로젝트에 따라 산출물이 문서가 아닌 형태로 제작되기도 하지만, 역시 마지막에 남는 것은 ppt확장자를 가진 파일 형태의 프로젝트 북입니다. 이 시점에서 우리는 결과물들을 효과적으로 정리하고 있는지 되돌아볼 필요가 있습니다. 혹시 몇 개월동안 고생해서 도출해낸 혁신적인 전략들이 블릿 몇 개와 짝을 이뤄서 별다른 감흥없이 클라이언트에게 전달되고 있지는 않은가요? 이번 블로그 시리즈에서는 효과적인 전략 표현을 위하여 어떠한 도구들을 활용해야 하는지 찾아보고 체계적으로 정리해보려고 합니다.


1) 왜 인포그래픽인가?
프로젝트를 하면서 많은 양의 데이터들을 문서화합니다. 하지만 워드 문서에 텍스트로만 정리하여 전략 문서를 만드는 경우는 거의 없습니다. 대부분은 프리젠테이션 소프트웨어(키노트, 파워포인트)를 활용하여 문서 작성을 하게 되지요([프리젠테이션 젠]의 저자인 가르 레이놀즈는 이런 것을 슬라이드문서(Slideument)라고 부릅니다).

우리가 '분석'하고 '발견'해내는 내용들은 프로젝트별로 매우 다양합니다. 우리의 시간과 노력을 담아서 도출해낸 정보들을 '효과적으로 정리'할 수 있는 요령이 필요합니다. 사람은 누구나 시각적으로 소통하는 존재로 태어납니다(Slide:ology-낸시 두아르떼). 그렇기 때문에 무미건조한 텍스트 보다는, 시각적 효과를 통해 정보를 빠르게 습득하고 입체적으로 기억할 수 있는 정보의 시각화가 필요합니다. 맨유의 알렉스 퍼거슨 감독의 은퇴기사 사례를 통해서 시각화된 정보와 텍스트로만 이루어진 정보를 비교해볼까요?

※이미지 출처 : 왼쪽 이미지(인포그래픽웍스), 오른쪽 이미지(세계일보)

위의 사례처럼 맨유 알렉스 퍼거슨 감독의 27년간의 전무후무한 업적을 무미건조한 텍스트가 아닌 인포그래픽으로 전달한다면 좀 더 살아있는 정보를 전달할 수 있지 않을까요?




2) 인포그래픽이란?
위키피디아에서 말하는 인포그래픽의 정의를 살펴보면 다음과 같습니다.
인포메이션 그래픽(Information graphics) 또는 인포그래픽(Infographics), 뉴스 그래픽(News graphics)은 정보, 자료 또는 지식의 시각적 표현이다. 정보를 구체적, 표면적, 실용적으로 전달한다는 점에서 일반적인 그림이나 사진 등과는 구별된다. 복잡한 정보를 빠르고 명확하게 설명해야 하는 기호, 지도, 기술 문서 등에서 사용된다. 차트, 사실박스, 지도, 다이어그램, 흐름도, 로고, 달력, 일러스트레이션, 텔레비전 프로그램 편성표 등이 인포그래픽에 포함된다. - 위키피디아

...몇 번을 읽었는데 무슨 말인지 모르겠습니다. 키워드를 뽑아서 조금 더 단순하게 정리해보겠습니다.

    - 복잡한 정보(정보)
    - 시각적 표현 활용(시각화)
    - 빠르고 명확하게 설명(효과적인 전달)


정리하면 '인포그래픽은, 정보를 이해하기 쉽게 시각화하여 효과적으로 전달하는 시각적 표현이다' 로 정리할 수 있습니다. 인포그래픽의 효과는 다음과 같습니다.

    ① 방대한 정보를 효과적으로 빠르게 전달
    ② 시각적 효과를 통한 기억력 상승
    ③ 방대한 정보의 보관과 관람이 용이


인포그래픽은 정보를 효과적으로 전달하기 위해 시각적인 요소를 활용하여서 데이터를 정리하는 것으로 외국에서는 역사가 깊은 분야이며 다양한 분야에서 높은 퀄리티의 인포그래픽들이 활용되는 것을 볼 수 있습니다.  

※이미지 출처 : 이미지1,2(최상단 좌,우측), 이미지3(중간 좌측), 이미지4(중간 우측), 이미지5(하단 좌측)이미지6(하단 우측)

우리나라에서도 인포그래픽을 활용한 매체물이 많이 활용되고 있는 추세입니다. 인포그래픽을 전문적으로 제작하여 배포하는 곳들도 많은데 디자인 퀄리티나 내용면에서 나쁘지 않습니다. 또한 연합뉴스 미디어랩이나 조선일보같은 언론매체에서도 인포그래픽을 활용한 기사들을 제공하고 있습니다(조선일보 컨텐트들은 참 조선일보스러워요).
※이미지 출처 : 이미지1(상단 좌측), 이미지2(상단 우측), 이미지3(하단 좌측), 이미지4(하단 우측)

그러나 디자인 기획에서 활용되는 인포그래픽은 일반적인 것보다 더 입체적인 상황을 그려냅니다

매체를 통해 볼 수 있는 인포그래픽은 단지 '정량데이터'를 보기 좋게 그려내는 경우가 많은데 디자인 기획 과정에서는 정량 데이터 시각화 뿐만이 아니라 관계, 흐름, 구조, 시나리오 등 매우 다양한 상황을 그려내어야 합니다. 우리가 그려내야 하는 결과물은 아래와 같은 아이들이죠. (앞으로 다루게 될 인포그래픽도 여기에 포커스가 맞추어져 있습니다)

(아래 이미지는 pxd의 프로젝트 자료입니다. 확대해도 내용을 볼 수 없는 저화질의 이미지이니 형태적인 것만 참고하시기 바랍니다)

위 예시와 같이 디자인 기획 과정에서 표현되어야 하는 결과물은 고정적이지 않고 다양한 유형을 가지고 있습니다. 단지 눈에 보이는 데이터를 보기 좋게 만드는 수준이 아니라, 주어진 정보를 분석/해석하고 그 안에 담긴 의미있는 정보들이 임팩트있게 전달될 수 있도록 시각적으로 재가공할 수 있어야 합니다. 구체적인 사례들은 블로그 두번째 편 [2. 디자인 기획에 필요한 인포그래픽의 유형]에서 다루어 보겠습니다.

이렇게 인포그래픽에 노력을 기울여야 하는 이유는, 시각적 요소를 통해 전달하고자 하는 정보를 임팩트있게 효과적으로 전달하기 위함입니다. 한 장의 그림이 책 한 권의 설명보다 강력한 힘을 발휘할 수 있기 때문입니다. 인포그래픽의 힘이라고나 할까요?



3) Design 기획 과정 속 인포그래픽의 역할
사실 pxd 구성원들은 프로젝트 내에서 인포그래픽을 잘 활용하고 있습니다. 프로젝트의 계획을 설계할 때부터 리서치 과정, 리서치 내용 정리, 리서치 결과 분석, 전략 수립, 아이데이션, 사용자 시나리오, 최종 결과물 등 프로젝트 전 과정에 걸쳐서 인포그래픽을 활용하고 있습니다. 그러나 인포그래픽 본래의 개념보다는 이용이 제한적이고, 일부 과정에서만 소극적으로 활용하는 경향이 있습니다. 물론 프로젝트 환경이 녹록지 않은 이유도 있습니다. 계속해서 시간 압박에 시달리고 내용을 충실하게 만드는 것에 집중하다보니, 많은 시간과 노력을 투자해서 고퀄리티의 그래픽 작업을 하는 것이 쉽지 않습니다(현실적인 문제이죠). 그럼에도 불구하고 결과물의 가치를 높이기 위해서는 퀄리티 높은 인포그래픽을 활용한, 조금 더 적극적이고 과감한 표현을 할 수 있어야 한다고 생각합니다. 그럼 디자인 기획 과정 속에서 인포그래픽의 효과는 무엇일까요?

① 입체적인 정보 구성
우리가 다루는 서비스(또는 제품)와 사용자 간의 관계는 매우 복잡하게 형성되어 있습니다. 컨텍스트가 단편적이지 않습니다. 환경이나 컨텍스트가 다양해지면서 사용자의 경험도 확장되고 있습니다. 예를 들어 [다양한 디바이스 X 사용자], [다양한 서비스 X 사용자], [다양한 디바이스 X 다양한 서비스 X 다양한 사용자] 등 사용자경험의 경우의 수가 매우 복합적으로 형성이 됩니다. 화살표 몇 개 찍찍 그어서 연결하는 단편적인 관계는 찾아보기 어렵다는 것입니다. 정보의 1차원적인 표현만으로는 우리의 생각을 전달하는데 한계가 있습니다. 인포그래픽은 컨텍스트를 종합적이고 입체적으로 표현할 수 있도록 해줍니다. 복합적인 데이터를 입체적인 하나의 그림으로 표현할 수 있는 도구입니다.

② 임팩트있는 내용 전달
기획 과정은 업무 관계자들과의 협의가 필수적입니다. 결정권자들에게 임팩트있는 결과물로 어필하는 것이 중요하죠. 때문에 기획자라면 전략 문서의 핵심 포인트와 내용의 흐름을 효과적으로 전달할 수 있어야 합니다. 인포그래픽을 잘 활용하면, 뻔한 결과물이 아닌 '임팩트 있는 결과물'을 전달할 수 있습니다. 중요한 것은, 매체의 특성이나 서비스 특성에 맞는 시각적 표현을 해야한다는 것입니다. 기획 과정에서 활용할 수 있는 모델링 기법은 많습니다. 하지만 모든 프로젝트가 똑같은 형태의 모델링 기법으로 정리될 수는 없습니다. 모든 프로젝트에 항상 똑같은 형태의 User Journey Map을 사용할 수는 없잖아요. 주어진 음식을 늘 똑같은 그릇에 담는 것보다는, 그 음식에 맞는 그릇을 찾아서 보기 좋고 먹기 좋게 담아주어야 합니다. 케익을 밥그릇에 담으면 이상하잖아요. 몸에 꼭 맞는 인포그래픽을 제작하기 위해서는 서비스(또는 제품)의 성향을 잘 파악하고 특성을 잘 살려서 제작하는 것이 중요합니다. 그렇게 완성된 결과물들은 내용에 대한 빠른 이해를 돕고 원만한 협의를 이루는데 큰 도움이 될 것입니다.

③ 경제적인 데이터 정리
방대한 데이터를 경제적으로 정리할 수 있습니다. 텍스트로 내용을 충실하게 정리하는 것은 매우 중요합니다. 하지만 텍스트 10페이지로 정리될 내용을 '한 페이지의 인포그래픽'으로 정리한다면 물리적으로나 심리적으로 많은 이득이 됩니다. 페이지가 많아지면 그만큼의 이해 단계가 많아지고, 페이지를 넘기는 것 만큼의 수고가 들어가게 됩니다. 하지만 인포그래픽을 활용한다면 페이지를 줄이면서 효과적으로 전달할 수 있습니다. 페이지가 줄어드는 만큼 이해의 단계가 줄어들고, 보는 사람의 심리적인 부담이 줄어들게 됩니다. 물론 10페이지가 1페이지보다 더 많은 노력을 한 것처럼 보일 수는 있지만, 10페이지가 1페이지보다 효과적이지 못하다면 그것만큼 답답한 일은 없겠지요. 인포그래픽은 방대한 데이터를 효과적으로 정리할 수 있는 도구입니다.



4) 1편을 마치며
pxd 기획자들은 인포그래픽을 잘 활용합니다. 인포그래픽을 활용하는 Skill도 계속해서 발전하고 있습니다. 하지만 "어떻게 디자인하고 어떻게 활용할 것인지?"에 대해서는 조금 더 체계적으로 정리할 필요가 있다고 생각합니다. '우리 노력의 산물'들을 더 좋은 결과물로 발전시킬 수 있도록 대비를 해놓아야 한다는 것이죠. 프리드만(Friedman)은, 정보를 효과적으로 전달하기 위해서는 심미적인 형태와 기능적인 요소가 조화를 이루어야 한다고 말했습니다. 단지 (명확하게) 의사를 전달하는 것에 머무르는 것이 아니라, 보는 사람을 집중하게 하고 끌어당길 수 있어야 한다는 것이죠. 인포그래픽은 디자인 기획 과정에서 그러한 역할을 할 수 있는 효과적인 도구라고 생각합니다. 이번 블로그 시리즈는 디자인 기획 과정에서 활용 가능한 '이상적인 시각화'의 방법들을 정리하려고 합니다. 앞으로의 연재에서 공유되는 내용들이 실무에 많은 도움이 되기를 바라며 첫 번째 편을 마칩니다.




▶다음편 예고
연재 순서
1. 디자인 기획과 인포그래픽
2. 디자인 기획에 필요한 인포그래픽의 유형
3. 인포그래픽을 위한 정보 시각화 방법
4. UX디자인에서의 활용

* 연재 내용의 흐름

다음 편은 '디자인 기획에 필요한 인포그래픽 유형'에 대한 이야기입니다. 디자인 기획 과정에서 활용되는 인포그래픽은 일반적인 인포그래픽의 유형과는 조금 다릅니다. 다음 편에서는 디자인 기획 과정에서 활용되고 있는 인포그래픽들의 유형들을 정리해보도록 하겠습니다.
[참고##인포그래픽##]
신고

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 5
  1. 리오킴 2013.06.04 09:24 신고 address edit & del reply

    퍼거슨 감독의 뜨거운 발자취 이미지는 원래 보이지 않는 건가요??

    • 김 동후 2013.06.04 12:14 신고 address edit & del

      글을 읽어주셔서 감사합니다.
      브라우저에 따라 깨지는 경우가 있는 것 같습니다.
      이미지는 다시 업로드 했습니다. ^^

  2. 리오킴 2013.06.05 12:58 신고 address edit & del reply

    이제 보이네요 ^^ 감사합니다~

  3. 가영 2013.06.18 22:24 신고 address edit & del reply

    으왓!! ㅠㅜ넘좋은 내용이에요 제가 찾아다니던 그런!! 다음포스팅도 기대하겠습니다 감하합니당!!!

  4. 박기혁 2013.06.19 01:13 신고 address edit & del reply

    좋은 내용이네요~ 잘 읽었습니다. ^^

Ad Test...