1. 1
27 June 2014
Doing Journalism with Data
저널리스트 3.0 – 시각적 사고와 표현
copyrights@2014 Neuro Associates. All rights Reserved
본 강의자료는 일부 또는 전부를 무단으로 전제, 복사 유출할 수 없습니다.
7. R e s u l t
보건복지부 : 3회 연속 의뢰! 인포그래픽 인쇄물 20만부 전국 배포!
코오롱 웰케어 : 컨설팅에서 실행총괄 연장! 신규 프로젝트 아이디어 요청!
서울대학교 : 자문영역 확장 및 의뢰비용 100% 증대
한국도로공사 : 공식채널 게재, 국토부장관 보고, 상시 프로그램화 논의
미래부 : 대통령 국정보고 인포그래픽, 포탈ㆍ미디어ㆍ공식채널 게재!
SK : 해외 인포그래픽 서비스 분석 및 미래지식포맷 연구과제 1차 연장!
중앙SUNDAY : 디지털화전략 1차 컨설팅 후 실행 및 후속 컨설팅 retainer화
설 연휴 교
통
데이터그
래픽
국토부 장
관보고!
10. 강연경력 : 삼성, SK, 서울대학교, 건국대학교, 한국도로공사, 가좌여자중학교, 가
천길재단
한국디자인진흥원, SERI CEO, 서울시설공단, 한국광고협회,
보건복지인력개발원 등
예 정 : ㈜ 이언그룹
김윤이 대표는 KAIST에서 바이오 및 뇌공학과를 1기로 졸업(응용수학 부전공)
하고 케네디스쿨로 유명한 미국 하버드대 정책대학원에서 정책학석사(MPP)
과정을 졸업하였습니다. 그 후 외교통상부, 미국 옴니콤사 산하의 도모커뮤니
케이션컨설팅 등에서 근무하며 기업위기관리·소셜마케팅전략 등을 수행하였
고, 분야 베스트셀러를 기록한 법률영어핸드북의 저자이기도 합니다. 김윤이
대표는 회사설립 이전에도 신개념 법률서적의 편찬, 플라자호텔 요트상품 런
칭, 소송커뮤니케이션 비즈니스 모델 수립, 인포그래픽 그룹운영 등 본인이 소
속된 곳에서 새로운 기회를 발견하여 상업적으로 만들어온 경력이 있으며, 이
를 바탕으로 중앙일보, 코오롱 등 유수 한국기업에 비즈니스 혁신에 관한 자문
을 제공하고 있습니다.
– 2013.11 건국대학교 연사 소개 중
강연 활동
11. 기획 경험
제작 경험
보유 기술
협력 관계
① 안전행정부 2013 대통령국정보고 (2013.3)
② 문화관광부 2013 대통령국정보고 (2013.3)
③ LG전자 – LTE 글로벌홍보 (2013.2)
④ 혁신학회 – 에너지위기극복 설명자료 (2012.10)
① 환경부 2013 국정홍보자료 (2013.4)
② 대기업 계열사 W사 경영분석 내부보고자료 (2013.4)
③ 인컴4사 국내외 인포그래픽 현황 보고자료 (2012.8)
④ 자체제작 – 서비스디자인+UX+경영컨설팅의 세계 (2013.1)
① html5 활용 자사 홈페이지 첫 화면 제작 (현재 개편중)
② 실시간 인포그래픽 기술완성 (국내 최초)
③ 담당 디자이너 Parsons, 홍익대학교 출신 등
① 홍익대 송규만 교수(하버드 디자인스쿨 박사, 미국방부프로젝트 진
행경험) 연구팀 제작협력 체제
② 국내 마케팅팀장 스터디그룹 “클릭스” 초청 강연
③ 한국인포그래픽포럼 멤버
2012-2013 인포그래픽 관련 수행 실적
19. 일반적인 강의 순서
General Introduction
1) definition 2) history 3) cases 4) trendsetters 5) exercise
Issue 1 : Infogrpahics of Korea
Issue 2 : Future of Infographics (실시간 인포그래픽 소
개)
Issue 3 : Interactive graphic tools study - 툴검다리
23. 영국 간호사 나이팅게일, 군대 병원을 개선해야 한다고 빅토리아 여왕을 설득하기 위해 인포그래픽 사용.
크림전쟁에서의 군인들의 사망원인을 질병/상처/그 외로 나누어 표현하고 있다.
24. 1626
크리스토프 스키너, 저서 ‘Rosa Ursina sive Sol’에서 태양의 위치 변화 패턴을 일러스트로 표현.
찰스 조셉 미날드, 나폴레옹의 러시아 침략이 실패한 원인을 인포그래픽으로 표현.
1861
우주선 파이오니어 10호에 실린 깃발. 이 깃발에는 벌거벗은 남자와 여자, 우주선이
어디서 왔는지를 설명하는 정보를 제공하는 여러 상징이 그려져 있다.
1970’s
영국 간호사 나이팅게일, 군대 병원을 개선해야 한다고 빅토리아 여왕을 설득하기 위해
인포그래픽 사용.
1857
25. 1970~1990’s
2002
최근
1970~90년대 피터 설리반에 의해 제작된 더 선데이 타임즈의 인포그래픽이 신문에 인포그래픽이 더 많이 사용되게 되는 계기가 됨.
노르웨이 뮤지션 ‘Royksopp’가 자신의 뮤직비디오에 움직이는 인포그래픽 사용. (노래 : Remind me)
Adobe Flash, HTML 5, CSS3 등 다양한 도구의 등장
인포그래픽이 다방면의 미디어에서 사용되기 시작
특히 소셜미디어가 인기를 얻으면서 더욱더 주목을 받기 시작
29. Anscombe’s Quartet – what do you see?
1 2 3 4
x y x y x y x y
10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58
8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76
13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71
9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84
11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47
14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04
6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25
4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50
12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.56
7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91
5.0 5.68 5.0 4.74 5.0 5.73 8.0 6.89
30. Anscombe’s Quartet – what do you see?
1 2 3 4
x y x y x y x y
10.0 8.04 10.0 9.14 10.0 7.46 8.0 6.58
8.0 6.95 8.0 8.14 8.0 6.77 8.0 5.76
13.0 7.58 13.0 8.74 13.0 12.74 8.0 7.71
9.0 8.81 9.0 8.77 9.0 7.11 8.0 8.84
11.0 8.33 11.0 9.26 11.0 7.81 8.0 8.47
14.0 9.96 14.0 8.10 14.0 8.84 8.0 7.04
6.0 7.24 6.0 6.13 6.0 6.08 8.0 5.25
4.0 4.26 4.0 3.10 4.0 5.39 19.0 12.50
12.0 10.84 12.0 9.13 12.0 8.15 8.0 5.56
7.0 4.82 7.0 7.26 7.0 6.42 8.0 7.91
5.0 5.68 5.0 4.74 5.0 5.73 8.0 6.89
31. Anscombe’s Quartet – what do you see?
1 2 3 4
x y x y x y x y
10 8.04 10 9.14 10 7.46 8 6.58
8 6.95 8 8.14 8 6.77 8 5.76
13 7.58 13 8.74 13 12.74 8 7.71
9 8.81 9 8.77 9 7.11 8 8.84
11 8.33 11 9.26 11 7.81 8 8.47
14 9.96 14 8.10 14 8.84 8 7.04
6 7.24 6 6.13 6 6.08 8 5.25
4 4.26 4 3.10 4 5.39 19 12.50
12 10.84 12 9.13 12 8.15 8 5.56
7 4.82 7 7.26 7 6.42 8 7.91
5 5.68 5 4.74 5 5.73 8 6.89
32. Anscombe’s Quartet – simple statistics
Property Value
Mean of x 9.0
Variance of x 11.0
Mean of y 7.5
Variance of y 4.12
Correlation 0.816
Linear regression y = 3 + 0.5x
OOPS, Every raw has same mean, variance and slope!!
But, soon (within 0.1 second!) you’ll see how they’re different!
34. Q: 데이터를 분석하려면 데이터 마이닝, 인공지능, 기계학습, 통계 등등 다
양한 기법이 있는데 그 중에서도 왜 하필 시각화를 해야 하나
A: 컴퓨터는 이미 특정한 연산에 있어 사람이 절대 할 수 없는 일
을 지치지 않고 해줘서 좋긴 하지만
사람이 컴퓨터 보다 비교도 안되게 잘하는 일이 있었으니
바로 공간 지각능력!
Human is superior to Machine (2013) in space perception ability!
57. 종류 인터랙티브 인포그래픽
수상내역 2013년 말로피에 인포그래픽 어워드 동상 수상작
내용 미국 각 주별 게이들의 권리를 인포그래픽으로 표현. 마우스를 가져다대면 주별 정보가 나타난다.
링크 http://www.theguardian.com/world/interactive/2012/may/08/gay-rights-united-states?guni=Article:in%20body%20link
58. 종류 인터랙티브 인포그래픽
수상내역 2013년 말로피에 인포그래픽 어워드 온라인 그래픽 부문 금상 수상작
내용 미국 프로 농구선수들의 슈팅패턴 분석. 선수들 모습이 점들로 표현돼있고 마우스를 올리면 점들이 퍼지면서 슈팅패턴으로 변한다.
링크 http://www.nytimes.com/interactive/2012/06/11/sports/basketball/nba-shot-analysis.html?_r=0
59. 올 4월 15일 발표된 2013 퓰리처상에서 기획보도(Feature Writing) 상을 받았다. 다른 수상작들이 몇 개월에 걸친 취재와 뛰어난 기획력으로 수상했다면, ‘스
노우폴’은 획기적인 인터랙티브 저널리즘을 보여주며 디지털스토리텔링의 정점을 찍었다. 1만 7천자의 긴 스토리를 멀티미디어 비디오와 모션그래픽 66개를
배치해 워싱턴주 캐스케이드 산맥을 덮친 눈사태에 대한 내용을 독자가 생생하게 바라보고, 이해할 수 있게 했다. 사진, 지도, 3D 그래픽, 비디오 등 동원가능
한 모든 멀티미디어 콘텐츠가 기사를 입체적으로 만들었고, 인터랙티브 뉴스에서 볼 수 있는 모든 것을 깔끔한 레이아웃에 담아냈다. 질 에이브럼슨 편집장은
‘스노우폴’을 공개하며 뉴욕타임즈 직원들에게 보낸 편지에서 “뉴욕타임즈 온라인 스토리텔링 진화의 멋진 순간”이라고 썼다. 또한 “Snowfall은 환상적인 그래
픽과 비디오, 모든 종류의 멀티미디어를 활용한 이야기를 상징하는 동사가 되었다”고 말했다. 출처: http://acase.co.kr/
해외 리더그룹 1 : The New York Times – SnowFall
60.
61.
62. 해외 주요 인포그래픽 관련 인사
Stefan Fichtel
• 독일 인포그래픽스 팀 ‘키르허부르
크하르트’ 디렉터
• 독일의 각종 인포메이션 디자인 상
수상
Samuel Velasco
• ‘5W Infographics’ 디렉터
• 스페인 신문디자인협회 상 30여 회
수상,
• <뉴욕타임스>, <타임스> 등에서
근무
Duncan Mil
• 인포그래픽계 1세대 주자.
• 1983년 ‘Graphic News’ 설립 후 운영
Richard Saul Wurman
• ‘<미국에 대한 이해>, <건강에 대한 이해>
등 인포그래픽 저서 다수 저술
• 크라이슬러 디자인 어워드, 케빈 린치 어워
드 등 수상
Gerlinde Schuller
• 인포메이션 디자인 스튜디오 태표
• <불가능을 현실로>, <보편적 지식의 디자인화>
등 저술
David McCandless
• <Information is beautiful> 저술
• <가디언>, <와이어드>, <텔레그라프> 등에
글 기고
Alberto Cairo
• 마이애미 대학에서 인포메이션 그래픽과 비
주얼라이제이션 강의
• <Infografia 2.0>, <the functional art> 등
저술
Valentina D'Efilippo
• <The Infographic History of the World >
저술
63. 디지털 스토리텔링 해설저널리즘 모바일 최적화 데이터 시각화
1. 업샷(The Upshot)
a. 업샷은 뉴욕타임즈의 그래픽팀과 인터랙티브팀의 지원을 받으며 뉴욕타임즈 본지
다른 느낌으로 친숙하고 편안한 느낌의 시각화 기법을 사용.
b. 플랫폼은 블로그 형식을 취하며 보다 전문적이고 친숙하게 다가옴
C. 특히 모바일에 최적화된 시각화 기법과 인터랙티브 기술을 개발함으로써
향후 모바일 시장에서 선두에 설 것으로 예상된다
D. 뉴욕타임즈의 데이터를 백업으로 두고 있다는 것 역시 강력한 뒷받침이다
65. 1.데이터 시각화 (Five Thirty Eight)
a. 파이브서티에이트 닷컴만의 폰트, 색, 스타일을 보유하고 계속 반복 노출함으로써
명실상부하게 데이터 시각화 언론으로서의 포지션을 가져감
b. 시사하는 점은, 언론사 고유의 색과 포지션을 반복함으로써 브랜딩 효과를 높을 수 있음
C. 데이터 시각화의 대표 언론사
디지털 스토리텔링 해설저널리즘 모바일 최적화 데이터 시각화
81. Design + IT
인포그래픽 제작 환경에 대한 디자이너들의 트렌드 follow-up
필요
지면 인포그래픽의 매력도 있지만,
방대한 정보를 layer개념이 없는 한 장의 종이에 담는게 직관적
인가?
HTML5 웹 환경과 Mobile에서의 직관적으로 보여줄 인포그래픽
현재 디자이너들에게 코딩의 어려움을 덜어주고
디자이너의 기획과 디자인을 살려주는 툴이 나오고 있으며
실제 미국과 유럽에서는 디자이너들이 front-end까지 영역을 넓
히고 있다
85. 이르미는 “반응형 실시간 모션 인포그래픽”이라는 용
어의 약자인데요, 기본적으로 디지털 데이터시각화
입니다.
카이로 교수, 정태영 대표, 김홍탁 마스터 님 등
여러분들께서 지지해주고 계신 뉴로의 비전입니다.
World First by 뉴로어소시에이츠
86. 박원순 시장이 페이스북에 적은 글(2013년 8월)
시민 여러분, 이제 서울시는 하수관로 수위가 1분마다 측정돼 바로 공개됩니다.
장마철 집중호우로 인해 저지대 등 침수취약지역의 침수피해를 막기 위해서이지요.
특히 요즘 같은 장마철에 집중호우 등으로 하수도가 넘칠 것이 예상될 경우 사전에 해당지역
주민과 공무원에게 즉시 상황을 전파해 신속한 대응을 해나갈 수 있답니다.
기존엔 지하시설물인 하수관로 특성상 육안확인이 어려워 집중호우 시 수위가 급격히 상승해 발생하는
문제점을 사전에 예측하기 어려웠다면 이제는 하수관로의 현재 수위가 얼마나 되는지 실시간으로
확인할 수 있는 것이지요.
실제로 지난해 8월 관악구 하수관로 수위가 평소보다 2배 이상 상승한 것을 이 시스템으로 확인한 뒤
곧바로 토사를 제거해 침수 피해를 예방할 수 있었습니다.
하수관로 수위 정보는 시민들도 직접 실시간으로 확인할 수 있도록,
서울시 홈페이지(http://env.seoul.go.kr/water) → 물관리사업 → 하수수위현황을 통해 공개하고 있습니다.
지리한 장마가 계속되고 있는 가운데, 서울시는 시민여러분의 안전을 위해 최선을 다해 나갈 것입니다.
또한, 시민과 함께 수해에 대처하기 위해
강수량 정보를 실시간으로 공개한다고 밝혔습니다실시간 인포그래픽
첫번째 케이스
87. 실시간 인포그래픽
첫번째 케이스
<서울특별시 홈페이지> 하수수위현황
http://env.seoul.go.kr/archives/17594
그래서 이제는 원하는 사람은 누구나
강수량 정보를 실시간으로 볼 수 있게 되었습니다
88. 데이터를 해석하는 것이 어려움
<서울특별시 홈페이지> 하수수위현황
http://env.seoul.go.kr/archives/17594
주소명은 지도에서 빠져있고 표에만 있다 보니,
그 지역이 나랑 가까운지 확인하려면,
인터넷에서 주소를 입력해서 위치를 봐야 하는 불편함
표에서는 데이터가 실시간으로 변하고 있지만,
시민들은 그 데이터가 위험한지 안한지를 확인할 수 없음
분명 아주 유용하고 꼭 필요한 일이긴 하지만,
해당 프로세스에는 다음과 같은 결정적인 문제들이 있었습니다실시간 인포그래픽
첫번째 케이스
89.
90. 하루가 다르게 쌓여갈
정보 및 데이터로 우리
는 무엇을 해야할까요?
What should we do
with all the unique
information and
data being compiled
more and more every day?
107. 웹 4.0
HTML5의 시
대
저렴한 가격으
로
사람들의 표현
력을
강화시켜주고
싶어하는
쉬운 툴들이
꽤나 많다
더욱이 오늘날에는 하나의 전문적인 툴만 깊게 아는 것으로는 컨
텐츠 표현이나 스토리텔링에 아쉬움이 생긴다. 오히려 툴들의 조
합이 마음껏 가능하도록 열려기술이 가득한 세상이다” – Ben B.
오늘날에는 하나의 전문적인 툴만 깊게 알고 있다고 컨텐츠가 만들어지고 스토리텔링이 되지 않는다. 하지만 모순적으로 오늘날
의 기술들은 툴들의 조합을 통해 그러한 것들을 가능하도록 만들어 주고 있지만, 그 이용수는 굉장히 적다. 가장 큰 이유는 자신이 가지
고 있는 이미지, 영상, 그래픽을 재료라고 했을때, 그 재료들을 다듬어 주는 기본적인 스킬이 부족하기 때문이다.
오늘날에는 하나의 전문적인 툴만 깊게 알고 있다고 컨텐츠가 만들어지고 스토리텔링이 되지 않는다. 하지만 모순적으로 오늘날
의 기술들은 툴들의 조합을 통해 그러한 것들을 가능하도록 만들어 주고 있지만, 그 이용수는 굉장히 적다. 가장 큰 이유는 자신이 가지
고 있는 이미지, 영상, 그래픽을 재료라고 했을때, 그 재료들을 다듬어 주는 기본적인 스킬이 부족하기 때문이다. 간단한 일러스트레이
터 작업을 통해 자신이 원하는 벡터 도형을 만들지 못하고, 포토샵에서 배경과 오브젝트를 분리시키지 못하고, 또 자신이 찍은 영상에
손 쉽게 타이틀과 사운드를 툴에 대한 막연한 거부감과 무관심에 의해 만들지 못한다. 사실, 기자, 회사원, 학생, 주부 등은 조금만 툴에
대한 지식과 학습만 이루어지면 누구나 뉴욕타임즈의 snowfall을 만들수 있고, 개인 블로그를 통해 자신의 스토리텔링을 interactive
하게 할 수 있다. 이 수업을 통해 수강생들이 툴에 대한 두려움과 컨텐츠 제작의 막연함을 해소하고 재밌고 손쉽게 자신의 이야기를 만
들어 볼 수 있었으면 한다.
