brunch

매거진 꿈꾸는데이터저널리스트

라이킷 29 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 배여운 Jun 02. 2016

Infogram과 함께 데이터 시각화를

Tableau의 괜찮은 대안 Infogram을 알아보자

Infogram(이하 인포그램) Ambassador가 된지도 꽤 됐다. Skype로 면접보고 이야기 나누고 포트폴리오 보내주고 어렵게 선정된 자리인데.... 뭐 암튼 1년 6개월 정도 됐는데 개인적으로만 유용하게 잘 쓰고 있지 외부 나가서 소개를 잘 못했더랬다. 그래서 CEO인 Nika에게도 미안하기도 한데 그보단 최근에 너무 좋아져서 많은 사람들이 알면 좋겠다 싶어 소개글 하나 올리고자 합니다.

나름 Infogram Ambassador인데 더 노력겠다....

데이터 시각화는 철저히 논리적인 과정을 통해 탄생했다. 예를 들어 과정 중에 x 축, y 축에 어떤 변수를 넣고 어떻게 표현하는지는 프로그래밍을 통해 기본적으로 구현되는데 그 대표적인 사례가 d3.js 라이브러리라고 할 수 있을 것이다. 하지만 그 인고의 과정(?!)을 매번 할 순 없는 일! 그래서 데이터 시각화 웹 애플리케이션, 도구들이 그 일을 덜어주게 된다. 바로 오늘 소개할 인포그램, Tableau, Google Chart 등을 통해서 우린 데이터에 기반한 정확한 시각화를 쉽고 빠르게 도와준다.

하지만 세상에 공짜가 어딨겠습니까.. 엑셀도 많은 사람들이 무료인 줄 알고 있는데 사실 유료죠! Google Spreadsheet에서 제작하는 차트만 공짜. 근데 공짜 애플리케이션은 공짜만큼만 구현됩니다. 좀 더 이쁘게 좀 더 디테일한 수정은 힘들고 웹과 모바일에서 다음과 같이 인터랙티브 하게 구현되는 건 뭐 달나라 이야기죠.

그렇다면 웹과 모바일에서 쉽고 빠르게 구현할 수 있고 인터랙티브도 되면서 디테일한 수정이 가능도 하며 돈쓰기 싫은 우리에게 적합한 툴은 없단 말인가? 많은 분들께서 Tableau를 활용하기도 하는데 Tableau 유료버전은 일반인이 쓰기에 겁나 비싸고 (Personal Edition $999 ~) 무료 버전은 데이터가 공개된다. 물론 일정 수준 이상의 완성도 있는 데이터 시각화를 구현할 순 있지만 암튼 좀 무겁고 부분적인 모바일 대응을 해주기 때문에 개인적으론 꺼려졌다.

뭐 암튼 다시 인포그램으로 돌아와서 인포그램은 원래 데이터 저널리스트를 위한 도구로 탄생했다. 매일매일 기사를 써야 하는 기자들이 쉽고 빠르게 차트를 제작할 수 있도록 돕는다. (쉽고 빠른 차트 제작은 비단 저널리즘만의 것이 아니다...ㅋㅋ) 기본적으론 무료이며 로고를 없애거나 private template, text style editing, mapping 등을 위해선 부분적인 유료 모델을 구독해야 한다. (은근 로고가 신경 쓰이긴 하다) 대표적으로 Enterprise는 기업이 사용하는데 우리가 잘 알고 있는 Nielsen에선 방대한 데이터를 시각화와 함께 인포그램으로 잘 활용하고 있다. 미디어에선 Verge가 대표적이다. 각 회사의 색감과 로고를 변경하여 인포그램인 줄 모르게 보여주는 게 전략.

결정은 쓰는 사람의 몫! 암튼 이제 하나하나 간략하게 알아가 보자.

들어가기 앞서 3분 소개 영상은 다음과 같다

https://www.youtube.com/watch?v=JCiXFxBQggM

1. 메뉴

인포그램 메인화면 | 제작, 라이브러리, 통계 등을 확인할 수 있음

Import data : 데이터를 가져옴 (본인의 PC, Google Spreadsheet, Dropbox 등과 연동)

Infographics or Report : 차트를 포함한 다양한 요소로 Storytelling 제작 가능한 탬플릿 제공

Chart or Graph : 차트와 그래프만을 제작할 때 활용

Map : 맵핑 제작

위와 같이 크게 4개의 메뉴로 구성된다.

2. 차트와 그래프 제작

다양한 형식의 차트와 그래프를 선택할 수 있음

인포그램은 정말 다양한 차트와 그래프를 제공한다. 가장 많이 활용되는 Bar, Line, Pie는 물론이고 Wordcloud, Pictorial, Treemap 같은 형식의 그래프도 지원 가능하다. 다만 제작할 때는 데이터 형식은 맞춰야 합니다.

그리고 인포그램의 괜찮은 기능은 Bar 차트라도 카테고리 내에서 다른 차트도 지원해준다. 예를 들어 왼쪽 그림을 보면 Bar 카테고리 안에서 Bar, Stacked, Grouped, Radial 등 4개의 다른 스타일을 목적에 따라 선택할 수 있음. 괄호 안의 숫자가 세부 스타일의 개수를 뜻한다

3. 인포그램은 Drag & Drop

Drag & Drop 으로 요소의 순서를 바꾸고 있다

인포그램이 쉬운 건 인터페이스를 제공한다. 차트를 넣고 차트 간 순서를 바꾸는 게 거의 Drag & Drop으로 작동되기 때문에 초보자들이 쉽게 인포그램을 활용할 수 있다는 장점을 가지고 있다.

모든 요소들은 쉽게 Drag&Drop으로 추가

더블클릭으로 편집

Block개념을 사용하기 때문에 요소들의 위, 아래, 중간 지점에 추가

삭제하려면 요소에 마우스오버 & 휴지통 삭제 버튼

4. Infogram Spreadsheet

인포그램은 자체 스프레드시트를 가지고 있으며 데이터를 불러오거나 혹은 엑셀에서 copy/paste로도 작업이 가능하다. 위에서 언급한 차트를 사용하기 위해선 데이터의 형식을 맞춰줄 필요가 있으며 자체 알고리즘에 의해 가져온 데이터에 적합한 차트를 추천해준다. 예전과 달리 새롭게 업데이트된 부분 중 마음에 드는 건 스프레드시트 메뉴 중에 차트를 바로바로 선택해보고 차트가 어떻게 시각화되는지 확인할 수 있다는 것인데, 예를 들어 내가 가지고 있는 데이터를 올려놓고 Bar, Line, Pie 등 차트를 하나씩 선택해보며 데이터를 가장 잘 표현한 차트를 고르기만 하면 되기 때문에 편하다.

왼쪽이 인포그램 스프레드시트, 오른쪽은 실시간으로 해당 데이터를 시각화 해준다

그 밖에, 차트의 세부사항들을 변경할 수 있는데 차트의 너비, 높이, x 축과 y축의 범위, 라벨, 범례, 색, 그리드와 value 값 표시 여부 등을 이용자는 선택할 수 있도록 옵션을 제공해준다. 아래의 이미지를 참조하시길!

별것 아닌 것 같지만 디테일한 부분을 잘 고려해야 완성도 높은 차트가 완성되게 된다. 예를 들어 x, y축의 라벨을 붙이지 않거나 범위를 엉뚱하게 조절해준다면 왜곡되고 불편한 차트가 될 것이다. 이런 부분을 인포그램은 제공해주기 때문에 우린 그리 어렵지 않게 클릭만 하면 된다.

왼쪽에 세부적인 요소를 조절할 수 있다

5. 부수적인 기능들

인포그램은 위의 방식으로 단일 차트를 제작할 수 있지만 차트들을 연결하고 차트가 아닌 이미지, 영상, 슬라이드와 같은 다양한 소스의 결합으로 스토리텔링의 탬플릿 제작 역시 가능하다.

Youtube, Slideshare, Vimeo 요소 검색 캡쳐

텍스트 수정 : 유료부터 텍스트 스타일 수정이 가능한데 폰트크기, 글꼴, 색, 링크 삽입 등이 가능하다

기타 기능 추가 : 제목스타일, 구분선, 타미어 등 부수적인 요소 삽입

이미지 / 영상 추가 : 이미지의 경우 내 컴퓨터 혹은 링크 복사를 통해 추가할 수 있으며 영상 또한 내 컴퓨터에 있는 파일을 불러올 수도 있고 Youtube, Vimeo에서 링크를 통해 가져올 수 도 있다.

Slideshare : 슬라이드쉐어의 링크를 통해 슬라이드 공유 역시 가능

URL : 특정 사이트의 URL을 넣어줌으로써 클릭을 통한 웹사이트 이동이 가능

텍스트 에디팅(유료), 영상, 이미지, 링크를 삽입할 수 있음

6. Publish [image or Interactive]

유로버전으로 다운받은 이미지

[Image ver.]

이미지(JPG, PNG)는 유료버전을 사용해야 다양한 옵션 설정과 함께 다운로드가 가능하지만 기본적으로 웹에 퍼블리싱은 무료로 지원한다.

(하지만 스크린 캡처도 하나의 방법이란 점!)

아무튼 레이어 개념이기 때문에 grid, value 등 세부 요소를 비활성화시키고 다운을 받을 수도 있고 PNG를 통해 배경을 투명하게 한 후에 다운로드 역시 가능하다. PDF로 추출할 경우 일러스트레이터에서 벡터 기반으로 디자인 수정이 가능하기 때문에 꼼수를 부리자면 벡터 다운로드 후에 일러스트레이터에서 로고를 없애거나 폰트 수정 및 기타 텍스트 추가를 해주면 깜쪽같이 정확하고 아름다운 차트가 완성된다.

Social & link, Embed, Email 등 Publishing 옵션 선택

[Interactive ver.]

인터랙티브 차트는 무료 버전에서 기본적으로 제공해준다. Publish 버튼을 클릭하면 몇 가지 옵션을 볼 수가 있는데

Social & link는 별도의 URL을 통해 제작한 결과물을 올릴 수 있다. 즉, URL을 통해 쉽게 공유가 가능하고 누구나 웹과 모바일에서 볼 수가 있다.

참고 : https://infogr.am/_-064347042422869

Embed는 iframe코드를 제공해주기 때문에 본인의 블로그나 웹사이트 중간에 삽입하면 결과물을 볼 수가 있다는데 (참고기사) 언론사 CMS에서 html 편집기를 제공한다면 기사에 인터랙티브 한 데이터 시각화를 추가할 수 있다. 물론 인포그램은 웹과 모바일 모두 지원하는 반응형 시각화다. email은 거의 사용 하지 않으니 패스!!

브런치에선 대략적으로 이런 기능들이 있다고 소개에서 끝내려고 합니다. 이게 슬라이드가 아니라 디테일하게 소개하는 건 한계가 있네요. 인포그램은 유료를 쓰면 훨씬 편리해지긴 합니다만 무료 버전만으로도 쉽고 빠르게 누구나 정확한 시각화를 구현할 수 있기에 충분히 매력적인 툴입니다.

D3.js로 제작됐기 때문에 SVG로 이뤄진 차트라는 점. 웹과 모바일 모두 자동으로 반응형 구현된다는 점. Drag & Drop 방식으로 쉽게 조작할 수 있다는 점. 알아서 데이터에 적합한 차트를 보여주는 점 등 중급자 보단 초급자에게 훨씬 어울리는 툴이며 Tableau에 비하면 확실히 저널리스트들에게 적합하다고 생각이 듭니다. 하지만 자신에게 가장 잘맞는 툴을 활용해서 시각화 하는게 가장 좋다고 생각해요! (툴은 툴일뿐!)

엑셀 차트나 구글 차트에서 벗어나고 싶다면 어렵지 않으니 한 번 써보세요