brunch

You can make anything
by writing

C.S.Lewis

by 배여운 May 17. 2016

Atlas는 플랫폼을 꿈꾼다

Quartz, Atlas 그리고 Chartbuilder



Background of Atlas

Quartz(이하 쿼츠)는 모기업인 Atalantic Media Co에 소속되어 있습니다. (Atalantic 미디어에 소속된 CITYLAB 역시 데이터 시각화를 많이 활용하는 곳 중 하나죠) 


뭐 아무튼! Kevin Delaney 편집장(겸 공동대표)은 재밌는 궁금증을 가지게 됐던 것 같습니다. 쿼츠의 기자들이 2014년 비즈니스 관련 주제로 대략 4,000개 이상의 차트를 제작했다는 걸 알고 'Atlas'란 차트 아카이빙 플랫폼을 제작하게 되는데요. 즉, 쿼츠의 모든 기사에서 사용된 차트는 Atlas에 아카이빙 되어 다시 한번 새로운 서비스로 제공되고 있습니다. 사실 우리나라 언론들도 보면 꽤나 많은 차트를 생산해내고 있는걸 확인할 수 있었는데 누군가 하겠...죠 곧?!


We’re creating a platform for data and charting that minimizes friction for use elsewhere on the web that spreads on social media


The Quartz curve

Atlas팀은 웹과 모바일 환경에서 텍스트 기사가 효과적이지 않고 특히 소셜미디어에서는 기본적으로 jpeg와 같은 이미지 파일이 독자들의 새로운 기사 소비 형태라고 판단했으며 차트 역시 이러한 맥락의 일환으로 활용하기 시작합니다. `Quartz Curve`는 그 근거로 자주 거론하죠. 


이러한 차트는 쿼츠에서 텍스트를 줄이고 콘텐츠의 질을 높여주고 있으며 실제로 쿼츠 콘텐츠의 50% 이상을 차지한다고 하네요. 그리고 그 모든 차트를 다시 모아놓고 각 차트의 데이터, 이미지, 소스코드를 제공하는 곳이 Atlas죠. 




Atlas

Atlas 랜딩페이지 | Nieman Lab

그런데 Atlas는 오픈소스를 넘어 각 차트의 이미지와, 데이터, 그리고 embed code까지 제공합니다. 다른 미디어의 저널리스트, 학자, 분석가 등 어느 누구나 사용 가능합니다. 작년까지만 해도 Atlas는 특정 주제에 관한 차트와 데이터를 얻기 위해 들어갔지만 며칠 전 발표에서 누구나 생산자가 되어 차트를 제작 및 공유 할 수 있게 하고 차트 플랫폼을 지향하려고 하는 것 같아 보입니다. (무섭다....) 차트 제작 툴은 그들이 직접 만든 Chartbuilder를 무료로 사용할 수 있습니다. D3.js로 만들어졌고요. 오픈소스라 예전부터 많이들 활용하고는 있었죠. 대표적으로 The Wall Street Journal, NPR, CNBC입니다. 간단한 차트를 제작을 무료로 할 수 있으니 유용할 뿐만 아니라 스타일, 색감 등을 언론사에 맞게 수정해서 CMS에 연동해서 쓸 수 있으니 충분히 탐나죠.





Chartbuilder

Atlas의 핵심인 Chartbuilder는 누구나 본인의 컴퓨터에 설치하고 사용할 수 있습니다. 정말 간단하게 설치가 됩니다요. 백문이불여일견이라고 했듯 한 번 설치해보도록 하죠. 제 컴퓨터에서 성공했으니 여러분도 될껍니다!

| 튜터리얼
1. 우선 Chartbuilder GitHub로 들어갑니다. Download Zip 클릭을 하여 통째로 내려받습니다
2. 전 Mac 유저기 때문에 Mac OS 기준으로 설명할 수밖에 없네요. CMD로 하셔야 할 듯.
3. 터미널을 실행시킵니다. NPM을 실행시킬 거예요
4. cd ~/Downloads/Chartbuilder-master/ (디렉토리 변경합니다. 그냥 그대로 복붙!)
5. npm install 명령어를 입력
6. npm run dev 서버 작동!
7. 주소창에 http://localhost:3000 으로 웹서버를 작동시키면 뾰로롱 나올 거예요 (아래 세번째)



최종 결과물은 PNG, SVG, JSON 타입으로 저장할 수 있는데 SVG는 Illustrator에서 각 요소들이 layer로 묶여 있기 때문에 디테일한 디자인 작업을 이어서 할 수가 있네요. 참고로 R ggplot2에서 차트를 만들고 SVG로도 뽑아내서 위의 방식으로 디자인 작업을 연장하기도 합니다. (벡터 만세!)


그리고 차트는 반응형을 지원하는데요. 진정한 반응형이라면 웹과 모바일에서 각각 효과적인 차트가 따로 나오는게 좋겠지만 (뉴욕타임즈, 워싱턴포스트 사례) 그건 또 다른 이슈이기 때문에 비율에 대한 반응형 차트를 지원한다는 것만 해도 사용자에겐 희소식이네요. (화면 줄였는데 차트가 짤리지 않는게 어디...)


반응형 차트를 지원하는 것을 확인할 수 있다






Platform

https://www.theatlas.com/ 에서 신청가능!

5월 10일 Atlas는 누구나 차트를 만들 수 있도록 플랫폼화 한다고 발표를 했습니다. 여기서 계정을 만드시면 되고요. 오른쪽 상단 버튼 클릭!


저도 얼른 신청했습죠. 하지만 기한은 좀 걸린다고 하네요...

Note: Anyone can create an account on Atlas, but making charts requires permission. Once you create an account, wait for an email saying that you can now create charts. We will let more people in over time. Thanks for your patience!



아무튼 오늘은 Atlas와 Chartbuilder를 알아보고 정리해 봤습니다 :) 


참고 글

- Atlas, the new home for charts and data [바로가기]

- Atlas is now an open platform for everyone’s charts and data [바로가기]

- Quartz maps a future for its interactive charts with Atlas [바로가기]

매거진의 이전글 주소 줄게. 위경도 다오
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari