답답해 죽느니 직접 만드는 인포그래픽
스낵컬쳐 세대가 소비하는 콘텐츠를 제공하기 위해서는 콘텐츠 제작의 시간과 비용을 줄여야 한다. 기획자도 일반인도 누구나 디자인 콘텐츠를 완성하도록 지원하는 망고보드 디자인을 소개한다.
저자. 엄혜경, 출간일. 2019년 4월 8일
패스트 미디어 시대 비디자이너의 디자인 방법
- 답답해 죽느니 직접 만들어야 하는 디자인 콘텐츠
- 답답해 죽느니 직접 만드는 온라인 배너
- 답답해 죽느니 직접 만드는 유튜브 썸네일 이미지
- 답답해 죽느니 직접 만드는 이벤트 홍보물
- 답답해 죽느니 직접 만드는 카드뉴스
- 답답해 죽느니 직접 만드는 이벤트 당첨자 안내문
- 답답해 죽느니 직접 만드는 인포그래픽
- 답답해 죽느니 직접 만드는 동영상 홍보물
인포그래픽이란?
우리가 매일 아침 보게되는 날씨 정보에 대해 생각해보자. 기상예보에서는 오늘의 날씨를 알려주기 위해 해가 뜨면 해의 이미지를, 구름이 끼면 구름의 이미지를 넣는 것만으로 설명이 가능하다. 이 날씨 정보를 말 또는 텍스트로 설명하려면 어떨까? 한마디로 정리할 수 없는 구구절절 긴 장문이 될 것이다. 해와 구름의 이미지가 장문의 텍스트보다 빠르게 전달된다는 것은 누구나 공감하는 바이다.
인포그래픽은 짧은 시간에 빠르고 정확한 정보를 전달하고, 그 내용을 더 쉽게 이해할 수 있도록 돕는 콘텐츠이다. 내용을 함축하고, 빠르게 전달하기 위한 방법으로 인포그래픽에서는 위와 같이 단순화된 이미지, 그래프, 의미를 전달하는 컬러를 이용한다. 다양한 시각적 요소를 활용해 정보를 표현하는 셈이다. 인포그래픽 덕분에 우리는 어려운 분야의 낯선 데이터도 쉽게 이해할 수 있게 됐다. 문화심리학자인 김정운 교수도 “뭐든 ‘그림’으로 보여주면 훨씬 설득력 있다.”라고 이야기한다. 글이 나오기 이전, 벽에 그림을 그려 기록했던 라스코 동굴 벽화를 인포그래픽의 시초라고 볼 수 있다. 하지만 인포그래픽 역사상 가장 주목할 만한 것은 나이팅게일의 폴라그래프(Polar graph)라 할 수 있다.
우리에게 백의의 천사로 알려진 나이팅게일은 사실은 대단한 데이터 분석가이기도 했다. 크림 전쟁 당시, 전쟁터에서 죽는 병사의 대다수가 병원의 비위생적인 환경 때문이라는 것을 알게 되었다. 빅토리아 여왕을 설득하기 위해 죽은 병사들의 데이터를 수집하고, 원인에 따라 분석하여 그래프를 개발했는데, 그것이 바로 폴라그래프이다. 다음의 그래프 중 회색 부분은 ‘전염병’으로 인한 사상자를, 빨간 부분은 전투로 인한 사망자, 그리고 검은색은 기타 사망자를 나타낸다. 나이팅게일의 그래프는 누가 봐도 전염병을 예방하기 위한 위생 대책의 필요성을 깨닫게 하고, 병원의 위생환경 개선에 혁혁한 공헌을 했다. 이는 현재의 상황을 개선하고자 데이터를 활용한 대표적인 인포그래픽 사례라 할 수 있다.
이와 같은 설득력 있는 인포그래픽을 만들기 위해 가장 중요한 것은 정확한 데이터가 기반이 되어야 한다.
데이터 수집을 시작으로, 수집된 데이터의 선별, 배치와 같은 데이터 분석의 선행 작업이 필요하고, 그 이후에 데이터의 시각화 작업에 들어가게 된다. 데이터 분석 작업에서 전문가의 큐레이션 능력도 필요하다. 데이터로서 가치 있는 정보를 선별해야 하고, 무의미한 데이터의 경우 생략도 필요하다. 하지만 데이터를 왜곡하거나, 변형하면 안 된다. 아무리 예쁘고 멋지게 잘 만들었어도, 정확하지 않은 인포그래픽은 가치가 없다.
인포그래픽의 종류
정부기관의 인포그래픽 사례
기획재정부에서는 2019년 예산안을 발표하였다. 제목은 ‘국회에서 확정된 2019년 예산 주요 내용’이다. 다음의 그림은 예산안에 대한 보도자료와 그 내용을 시각화한 인포그래픽이다.
보도자료(왼쪽)는 정확한 수치와 방대한 자료를 제공한다. 그렇지만, 일반인들이 봐서는 데이터의 파악이 쉽지않다. 하지만, 인포그래픽(오른쪽)은 어떤가? 보고서의 데이터 중 꼭 필요한 요소를 정리해 원 그래프로 만들고, 친근한 컬러를 적용한 항목에 대한 이해를 돕고자 아이콘을 추가했으며, 강조할 부분은 크기와 컬러로 눈에 띄게 강조했다. 오른쪽의 인포그래픽을 본 사람은, 누구라도(일반인이라도) 2019년 보건·복지·노동 분야에 162조 원의 예산이 투입된다는 것을 확실하게 알 수 있을 것이다.
기획재정부의 인포그래픽 사례를 통해, 인포그래픽을 만드는 것은 생각보다 어렵지 않고, 정보에 대해 잘 알고 있는 담당자도 쉽게 만들 수 있다는 것을 확인할 수 있다.
망고보드 차트로 만든 인포그래픽 제작 사례
망고보드에는 ▲가로막대 ▲세로막대 ▲선 ▲영역 ▲방사형 ▲혼합 ▲원 ▲게이지 ▲트리맵 ▲워드클라우드 총 10가지의 차트가 있다. 이러한 다양한 차트를 다른 디자인 요소와 결합해 다음과 같이 다양한 인포그래픽으로 만들 수 있다.
인포그래픽 제작 준비하기
다음의 뉴스 기사를 인포그래픽으로 만들어 보자.
① 데이터 정리하기
- 서울에서 1인가구가 가장 많이 사는 곳
- 서울에서 주거환경만족도가 높은 곳
② 인포그래픽 설계하기
망고보드를 이용하여 인포그래픽 만들기
1) 인포그래픽 크기 설정하기
망고보드에 접속하여 [START]를 클릭해 망고보드 편집기를 연다. [템플릿]-[카드뉴스]에서 다음의 템플릿을 선택한다. ➊의 슬라이드 크기 클릭 후, 목록 중 ➋프레젠테이션 4:3을 선택하고, ➌의 확인을 클릭한다.
2) 제목 만들기
검색창에 ➊‘제목’을 검색한 후, [요소]-[선]을 클릭한다. ➋의 리본을 슬라이드에 추가한다. 선의 디자인 요소는 좌우로 길이를 연장할 수 있어 제목이 긴 경우 맞추기 쉽다(단, 개체 조절점이 6개 나타날 경우에만 가능하다). ➌과 같이 길이를 늘인다.
제목 리본 위에 다음과 같이 텍스트를 추가한다.
막대그래프 만들기
➊의 [차트·지도·표·YouTube]를 클릭 후, ➋의 [차트], ➌의 [세로막대]를 클릭한다. 슬라이드에 막대그래프가 추가된다.
➊의 [막대그래프]를 더블클릭하면, ➋의 데이터 입력창이 나타난다. 데이터 부분을 더블 클릭하면 커서가 셀 안에 들어가고, 셀의 내용을 바꿀 수 있다. 필요 없는 데이터는 삭제하면 그래프도 함께 지워진다.
그래프를 한번 클릭하면, 왼쪽에 그래프 옵션 창이 나타난다. 오른쪽과 같이 표현하려면, ➊[시리즈 테두리 색상] ➋[배경선] ➌[축 색상] ➍[축]을 [색상없음]으로, ➎[범계위치] ➏[데이터 위치]를 [표시안함]으로 선택한다.
검색창에 ‘집’을 검색한 후, [요소]-[아이콘]을 클릭한다. 다음의 집 모양을 각 막대그래프 위에 올린다. 그런 후, 컬러를 화이트로 바꾸면 두 번째 막대그래프처럼 표현이 가능하다.
검색창에 ‘사람’을 검색한 후, [요소]-[아이콘]을 클릭한다. 다음의 사람 모양을 각 막대 그래프 아래부분에 올린다. 그런 후, 컬러를 화이트로 바꾸면 두 번째 막대그래프처럼 표현이 가능하다.
지도 그리기
➊의 [차트·지도·표·YouTube]를 클릭 후, ➋의 [지도], ➌의 [서울]을 클릭한다. ➍의 지도를 클릭하면, 슬라이드에 지도가 추가된다.
➊의 지도를 클릭 후, 왼쪽 옵션 창의 ➋의 [지도색상]을 선택하여, [컬러팔레트]에서 ➌의 회색을 클릭한다. 지도의 색이 모두 회색으로 바뀐다.
➊의 [개별 지도 색상]을 클릭 후, 원하는 구를 찾아 ➋의 [색상] 버튼을 클릭하고, [컬러팔레트]에서 ➌의 컬러를 클릭해 지도의 부분의 컬러를 바꾼다.
[검색창]에서 ➊‘페널’을 검색한다. ➋의 [요소], ➌의 [텍스트]를 클릭해 ➍의 ‘패널’을 선택한다. 슬라이드에 추가한 후, 텍스트를 다음과 같이 수정한다.
인포그래픽 완성하기
전체적으로 컬러를 정돈하고, 서울을 표현할 디자인요소를 배경에 추가한다. 다음과 같이 완성한다.
