brunch

You can make anything
by writing

C.S.Lewis

by 김자유 Sep 14. 2017

디지털 환경의 새로운 글쓰기 포맷, 인터랙티브 뉴스

반응형 콘텐츠 포맷


인터랙티브 뉴스


텍스트는 물론 그래픽 사진 동영상 등을 통합 편집한 새로운 형태의 뉴스 콘텐츠다. 텍스트 위주의 기존 온라인 뉴스에서 벗어나 스크롤 클릭 링크 등 독자의 행위에 반응해 움직이는 웹 페이지를 구현한다. 보는 뉴스가 아니라 시청하는, 체험하는 뉴스다.  
[네이버 지식백과] 인터랙티브 뉴스 [interactive news] (한경 경제용어사전, 한국경제신문/한경닷컴 )


인터랙티브. 말은 많이 들어봤는데 도대체 뭘까?

일단 생긴지 5년 정도밖에 안 되는 신생 분야로, 뉴욕 타임스에서도 기획 기사로 꾸준히 다루고 있는 장르다.

지난 글(뉴욕타임스가 사용하는 글쓰기 혁신 전략 https://brunch.co.kr/@thinkaboutlove/42)에서 말했듯이 이제는 흐름에서 벗어나지 않으려면 정보의 시각화, 디지털화가 불가피하다.

*중간중간에 나오는 다른 제 글들의 링크는 하단에 몰아서 첨부하겠습니다. 이 글을 끝까지 읽어보시고 참고 자료는 원하는 것만 한꺼번에 읽어보세요!


요즘에 영상 콘텐츠가 급부상하고 있는데, 구두->활자->영상으로 매체의 흐름이 변하고 있다. 다만 이 영상이라는 포맷 역시 익숙해진지 오래되지 않았고, 예전에 비해서 진입장벽이 낮아진 것도 사실이다. 오늘 강연을 맡아주신 개발자 박지우님은 인터랙티브 뉴스의 미래도 곧 그렇게 될 것이라고 말씀하셨다.


인터랙티브라는 말을 들으면 가장 먼저 하는 걱정이 "그거 코딩 잘 해야 하는 거 아니야?"라고 한다. 물론 기술적인 요소가 가미되는 것은 사실이지만, 그보다 중요한 것은 기획력, 즉 이야기를 재미있게 꾸며내는 스토리텔링 능력이다. 스토리 텔링을 위해서는 코딩도 중요하지만, 디자인, 영상, 음향 등 다방면의 지식이 필요하다.

보통 위 요소들을 모두 다 해내는 사람은 흔치 않아서 팀으로 꾸려지는 경우가 많고, 그 때문에 커뮤니케이션 능력이 중요한 역량이다.




하단은 수업에서 사용된 사례들이다. (총 6개)짧은 코멘트를 붙여보았는데, 다음에 써먹을 수 있겠다 싶은 포인트는 볼드처리했다.


1. Decisive Moments at the Rio Olympics, Frame By Frame

https://www.nytimes.com/interactive/2016/08/20/sports/olympics/decisive-moments-rio-olympics-composite-pictures.html?mcubz=3

스크롤을 내리면 가로로 화면이 전환되는데, 선수들의 동작을 슬로우모션으로 찍어 캡쳐한 것을 스크롤링할 때마다 넘겨주며 보여주고 있다. 스크롤을 내리면서 시간이 흐르고, 거기에 맞게 동작이 전개되는 것을 보며 생생한 경험을 할 수 있다.


2. Snow Fall: The Avalanche at Tunnel Creek

http://www.nytimes.com/projects/2012/snow-fall/?mcubz=3#/?part=tunnel-creek

이 기사는 NYT 기획 기사로, 인터랙티브 뉴스의 시대를 연 작품이다. 실제로 그 작품성을 인정받아 퓰리처 상까지 받았다고 하니, (지금도 그렇지만) 당시로서는 엄청나게 충격적인 작업이었나보다. 기사를 처음에 열었을 때, 동영상 재생 버튼을 따로 누르지 않아도 영상이 재생되고 있다. 두 번째 사진은 사람들이 산 정상에 올라가는 동안 나눈 대화들을 기록해 왼쪽에 게시하고, 올라가는 루트를 그려 해당 인물의 대화가 나올 때는 인물의 사진을 태그 달아서 보여주었다. 글로만 보았다면 '아, 저런 상황이었구나.'하고 넘어 갔을텐데 루트와 함께 보니 '아, 저 사람이 이 정도 올라가서 이런 얘기를 나눴구나.' 상황을 상상해보면서 읽을 수 있었다.


3. Reshaping New York

http://www.nytimes.com/newsgraphics/2013/08/18/reshaping-new-york/?mcubz=3

맨 처음에 Begin the 'Tour'라는 버튼을 누르면 지도가 확대되면서 기사가 시작된다. 사실 그냥 도시가 어떻게 변해왔나를 보여주는 건데 'Tour'라는 단어를 쓰니 구글 어스로 이 나라 저 나라 구경 다니듯 여행하는 느낌도 들고, 그걸 또 내가 직접 눌러서 시작하니 '내가 하고 싶어서 하는 여행'이라는 느낌을 받았다.

스크롤을 내리다보면 지도 뿐만 아니라 그 지도에 맞는 과거와 현재를 비교한 사진 자료도 있다. 원래는 두 장의 사진이 차례로 나오는 건데, 한 장을 다 보고 다음 장으로 넘어가는 게 아니라 저렇게 상하로 분할해서 볼 수 있도록 만들어서 비교하기가 더 쉬웠다.


4. A quick puzzle to test your problem solving

https://www.nytimes.com/interactive/2015/07/03/upshot/a-quick-puzzle-to-test-your-problem-solving.html?mcubz=3

어디서 많이 해본 익숙한 게임

기사 링크를 클릭하면 메인 사진 다음 바로 퀴즈가 나온다.(첫 번째 사진) 2 4 8 숫자가 나열되어있고 규칙이 뭘까요?를 묻는 건데, 나름대로 이런 저런 숫자를 입력해보다가 규칙을 알게 됐을 때 'I think I know it'버튼을 클릭하면 본문이 나온다.

앞에서 한 게임에 대한 설명을 하면서, 대부분의 사람들은 이렇게 생각하는데~ 너도 그렇게 생각하지?라는 질문을 던진다. 사실 위의 게임 없이 이 문단을 읽었더라면, 나는 안 그럴 것 같은데? 혹은 그랬으려나? 하면서 갸우뚱할 부분이었는데, 직접 겪어보고 읽으니 '오, 진짜 그러네!'하는 반응이 나왔다. 더 신기한 건 이 기사의 주제가 숫자 게임이 아니라는 것이다. 숫자 게임으로 우리가 갖고 있는 편견에 대해서 빈틈을 짚어주고, 그 빈틈을 'Confirmation Bias(확증편향)'이라는 개념으로 채워준다. 흥미를 가지지 않을 수 없는 구조. 처음부터 확증편향에 대해 이야기했다면, 내 얘기도 아닌데 왜 봐야하나 생각했을 거다.


*한 번 보고도 기억에 오래 남는 콘텐츠 만드는 방법 (https://brunch.co.kr/@thinkaboutlove/47)의 2번 항목에 있는 '공백이론'을 참고하면 좋겠다.


5. Police Body Cameras: What Do You See?

https://www.nytimes.com/interactive/2016/04/01/us/police-bodycam-video.html

경찰 입장에서 촬영된 영상

미국에서는 경찰의 몸에 카메라를 달아놓고 과잉 진압시 증거 자료물로 제출한다고 한다. 위 사진에 나오는 영상은 경찰의 입장에서 범죄자에게 폭행을 당하는 영상인데, 그 정도가 정말 심해서 헉, 소리가 난다. 영상 밑에는 경찰이 얼마나 위협을 느꼈을 지를 묻는 질문이 있다. 선택지를 선택했을 때 선택지별로 퍼센트를 보여주는 것도 좋았다. 나만 이렇게 생각하는 게 아니구나, 하는 생각에 내가 고른 답에 더 확신이 든다.


질문에 답을 하고 스크롤을 쭉 내리면 처음에 나왔던 영상의 사람을 옆에서 촬영한 영상이 나온다. 알고보니 폭행을 당한 게 아니라 둘이서 놀고 있었던 영상. 그 영상이 왜곡되어 촬영된 것을 보고 다시 똑같은 질문을 하는데, 반응은 180도 뒤바뀐다. 마지막에는 사람들의 반응을 분석하여 기사 본문을 첨부한다.

#질문 #비교 #반전 #감정(첫 번째 영상을 보고 이성적으로 생각할 수는 없을 것이다.)


6. SCALING EVEREST

https://www.washingtonpost.com/graphics/world/scaling-everest/

아, 진짜 너무 흥미로웠던 기사. 물론 앞에 나온 기사들도 다 재미있었지만 이건 '어떻게 이렇게 생각했지?'하고 계속 놀라워서 수업내내 두근거렸다. 링크를 클릭하면 'Clime Eversest'라는 버튼이 나온다. 이 역시 3번 기사처럼 게임적인 요소를 더해서 집중도를 높였다. 하지만 놀랄 점은 두 번째 사진이다.

버튼을 클릭하면 갑자기 스크롤이 빠르게 내려가면서 페이지 제일 하단으로 간다. 스크롤을 내리면 화면이 올라가면서, 기사가 밑에서 위로 진행된다. 좌측에는 에베레스트의 고도가 표시되어있어 마치 내가 에베레스트를 오르는 것 같은 느낌을 준다. 그리고 색깔도 Sea level에서는 난색 계열이다가 위로 올라갈 수록 한색 계열로 변한다. 세 가지(거꾸로 읽기, 고도 인포그래픽, 컬러) 요소 중 어느 하나만 빠졌더라도 이렇게 확실한 전달은 어려웠을 것이다.



이 외에도 재미있는 자료가 정말 많지만 시간 관계상(...) 관련 링크를 첨부하면서 글을 마친다. (아마 이 주제로는 글을 몇 번 더 쓰게 될 것 같다.)


The interactive news

www.theinteractivenews.org

각종 인터랙티브 뉴스들을 한 곳에 모아둔 사이트.


Slides

https://slides.com/

슬라이드를 넘기는 형식의 인터랙티브 뉴스를 간편하게 만들 수 있는 툴. (Wix같은 거?)

Scroll reveal

https://scrollrevealjs.org/

이건 스크롤 방식. 사실 둘 다 어떻게 사용하는지는 몰라서 다음 주에 배우면 후기를 남기도록 하겠다!



관련 글


뉴욕 타임스에서 비주얼 저널리즘에 힘을 쏟고 있다. 인터랙티브 뉴스 역시 한 축.

https://brunch.co.kr/@thinkaboutlove/42


숫자 퀴즈에서 말했던 '공백 이론'에 대해.

https://brunch.co.kr/@thinkaboutlove/47


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari