‘스토리텔링’이 화두다. 미디어라면 더욱 그렇다. 글은 음식이다. 재료에 따라 조리법이 다르다. 담는 그릇도 다르다. 좋은 기사거리는 그에 맞는 형식을 만나야 빛을 발한다. 물론, 신선한 재료가 가장 중요하다는 얘긴 굳이 언급 말자.

스토리텔링도 기술 발전을 따른다. 아날로그 시대엔 ‘글쓰기=스토리텔링’이었다. 디지털 시대다. 흐름을 바꾸고, 눈길을 유도하고, 메시지를 부각시키는 도구와 기술이 우후죽순 등장했다. 제작에 필요한 기기도 다양해졌다. 텍스트만으로 스토리를 전달하는 시대는 지났다. 영상과 이미지, 소리가 어우러져야 스토리가 완결된다. 꼭 전문 제작기술이 갖춰져야 하는 것도 아니다. 손쉽게 쓸 수 있는 저작도구는 얼마든 있다.

스토리를 발굴하고, 적절한 기술과 형식을 찾고, 제격인 플랫폼에 올라타는 것. 이건 스토리 전달자, 미디어의 몫이다. 이를 위한 도구는 널리 공유하자. 유연한 디지털 스토리텔링을 원하는 미디어들을 위한 도구를 소개한다. 지난 10년 동안 <블로터>가 눈여겨보고 먼저 활용해 온 것들이 다수다. 스토리를 살찌우고, 메시지를 돋보이게 하는 도구들을 지금, 활용해보자. <블로터>가 직접 개발한 도구 3가지도 맨뒤에 따로 소개한다.

사진 : CC코리아
사진 : CC코리아

1. 픽셀


이미지 편집의 ‘정석’은 ‘어도비 포토샵’이다. 지금은 비슷하면서도 저렴한 이미지 편집도구가 여럿 나왔지만, 포토샵 지위는 여전히 굳건하다. 사진 편집 행위를 ‘뽀샵’이라 부를 정도로 포토샵은 사진 편집기의 대명사로 자리잡았다. 하지만 포토샵은 비싸다. 일반인이 수십만원을 내고 구매하기란 쉽지 않다. 굳이 포토샵의 전문가급 기능을 쓰지 않아도 된다면, 적절한 대체제가 있다. ‘픽셀 에디터’는 웹에서 무료로 쓸 수 있는 포토샵이다. 포토샵의 기본 기능을 그대로 웹에 옮겨왔다. PC에서 이미지를 불러와 편집한 뒤, 완성된 이미지는 다시 PC로 내려받으면 된다. 웹주소(URL)로 이미지를 불러오거나, 페이스북 같은 다른 이미지 라이브러리에서 불러올 수도 있다. 무료인 대신, 서비스 화면 오른쪽에 구글 광고가 뜬다. 모바일웹에선 이용할 수 없다. ‘오토캐드’로 유명한 오토데스크가 제공하는 서비스다. 픽셀 에디터 외에도 픽셀에선 ‘픽셀 익스프레스’, ‘픽셀 오매틱’, ‘픽셀 터치업’ 같은 이미지 편집도구를 제공한다. 웹기반으로 사용할 수 있으며, iOS·안드로이드용 앱과 윈도우·맥용 데스크톱 프로그램도 두루 제공한다.

  • 구분 : 이미지

  • 웹사이트 : http://pixlr.com/

  • 환경 : 웹, 윈도우·맥 데스크톱 앱, iOS·안드로이드 앱, 크롬 확장기능

  • 조건 : 무료


01_pixlr_4
픽셀 익스프레스, 픽셀 에디터, 픽셀 터치업, 픽셀 오매틱(왼쪽 위부터 시계방향으로)

2. 인포그램


‘인포그래픽’은 누구나 한번쯤 만들고 싶은 효과적인 정보 시각화 콘텐츠다. 많은 정보를 한눈에 확인하고 비교·분석하는 데 제격이다. 그뿐 아니다. 좋은 그래픽을 포함한 포스트는 페이스북에서 3.2배 많은 좋아요, 댓글, 클릭 등의 참여를 이끌어낸다. 허브스팟 조사에 따르면, 비주얼 콘텐츠는 그렇지 않은 콘텐츠보다 40배 많은 공유를 발생시킨다. 인포그래픽의 중요성은 알지만, 디자인 소질이 없어 제대로 만들지 못하는가. ‘인포그램’은 이런 이용자를 위해 문턱을 낮춘 웹서비스다. 우리가 흔히 쓰는 각종 차트나 그래프를 손쉽게 그리게 돕는 서비스다. 엑셀에서 자동으로 만들어주는 단순 이미지 그래프가 아니라, 화면 커서에 따라 그래프가 움직이는 인터랙티브 차트를 만들 수 있다. 이렇게 만든 그래프는 웹을 통해 공유하거나 원하는 웹사이트에 붙여넣을(임베드) 수 있다. 기사에 포함하는 통계자료, 밋밋한 이미지 대신 인포그램을 활용해 보자. 비슷한 웹사이트로 ‘데이터래퍼’와 ‘비주얼리’가 있다. (예시 : 연도별 <뉴욕타임스> 인터랙티브 기사 수)

02_infogram_01
인포그램

02_infogram_02
데이터래퍼로 그린 비주얼 그래프

3. 마인드마이스터


마인드맵은 한마디로 생각을 그림으로 표현한 그래프다. 특정 주제를 놓고 가지치기 식으로 관련 주제들을 꼬리에 꼬리를 물고 그림으로 표현해보는 생각 정리 방법론이다. 마인드맵은 복잡하게 얽힌 생각들을 단순하고 명확하게 정리하는 데 좋은 도구이긴 하지만, 그 자체로도 쓸만한 스토리텔링 도구이다. 한 사안에 대해 다양한 비슷한 주제나 연관 콘텐츠를 가지치기 형태로 표현해 보자. 직접 마인드맵을 그려보며 이야기 전달자는 해당 사안에 대한 자신의 생각을 정리할 수 있다. 마인드맵을 그릴 수 있는 소프트웨어나 웹서비스는 여럿이다. 이 가운데 ‘마인드마이스터’는 웹에서 손쉽게 마인드맵을 그리게 돕는 서비스다. 깔끔하고 직관적인 디자인에 사용법도 손쉽다. 무료인 베이직 서비스의 경우 최대 3개까지 마인드맵을 작성, 저장할 수 있다.

마인드마이스터
마인드마이스터

마인드마이스터로 그린 마인드앱 예시
마인드마이스터로 그린 마인드앱 예시

4. 사운드클라우드


‘사운드클라우드’는 독일에 본사를 둔 온라인 음악 배급 플랫폼이다. 대형 레이블이 음원을 스트리밍하는 ‘멜론’과는 다르다. 이용자끼리 음원을 올려놓고 공유하거나 내려받는 서비스다. 이용자가 좋아하는 음악을 자동 추천해주는 알고리즘을 갖추고 있으며 소셜미디어 연동 기능도 뛰어나다. 2008년 문을 연 이래 지금까지 1억7천만명이 넘는 이용자를 모았다. 기자라면 취재를 위해 인터뷰를 진행한 뒤, 녹취나 인터뷰 내용 일부를 올려두고 웹사이트에 임베디드해 쓰기에 좋다. 단, 무료로 사용할 땐 최대 180분까지만 음성을 업로드할 수 있다.

사운드클라우드
사운드클라우드

5. 타임라인JS


나이트재단. 존 나이트와 제임스 나이트, 두 형제가 1950년 설립한 언론 지원 재단이다. 나이트재단은 2006년부터 해마다 저널리즘 지원 프로젝트 ‘나이트 뉴스 챌린지’를 진행하고 있다. 미디어를 위한 혁신적인 기술이나 서비스를 발굴해 오픈소스로 공개하는 프로젝트다. 나이트랩은 나이트재단이 기금을 대 미국 노스웨스턴대학에 설립한 커뮤니티다. 개발자와 디자이너, 대학생과 교육자 등이 참여해 혁신적 스토리텔링 도구를 개발·공유한다.

나이트랩은 현재 4가지 스토리텔링 도구를 제공한다. 이 가운데 ‘타임라인JS’는 이름대로 타임라인 저작도구다. 시간, 연대기 순으로 특정 사건에 관한 타임라인을 제작하기에 제격이다. 구글 스프레드시트에서 템플릿을 내려받아 타임라인 내용을 채운 뒤, 해당 구글 스프레드시트 주소를 타임라인JS 페이지에 넣고 글꼴이나 가로·세로폭 등을 지정하면 HTML 임베디드 코드를 생성해준다. 이 코드를 웹사이트 내 원하는 위치에 붙여넣으면 타임라인이 삽입된다. 타임라인에 썸네일, 이미지, 동영상 등을 손쉽게 삽입할 수 있으며 미리보기 기능으로 자신의 타임라인 생김새를 확인할 수 있다. 타임라인JS로 만든 타임라인은 모바일웹에도 최적화돼 있다. 국내 언론사에서도 즐겨쓰는 도구 가운데 하나다.


타임라인JS
타임라인JS

타임라인JS로 작성한 'CC 10년과 CC코리아'
타임라인JS로 작성한 'CC 10년과 CC코리아'

https://vimeo.com/143407878

6. 스토리맵JS


타임라인JS가 타임라인 형식으로 스토리를 전달한다면, ‘스토리맵JS’는 스토리텔링 무대를 지도 위로 옮겼다. 구글 지도를 바탕으로 지도 위 특정 지점에 대한 사진과 동영상, 관련 설명을 덧붙일 수 있는 도구다. 예컨대 ‘유럽 여행기’를 작성한다면, 여행지별로 사진과 동영상을 소감과 더불어 표시하는 식이다. 이용자는 지도 위에서 여행자의 이동 경로를 따라가며 여행지 풍경이나 여행자가 찍은 사진·동영상을 감상할 수 있다. 이용자는 프로젝트를 생성한 뒤, 지도 위 위치를 지정하고 관련 사진이나 영상, 설명문을 입력하면 된다. 각 지점마다 슬라이드를 생성해 콘텐츠를 작성하는 방식이다. 완성된 스토리맵은 링크를 공유하거나 임베디드 코드를 원하는 웹사이트에 삽입하면 된다. 스토리맵JS 역시 자바스크립트 기반으로 제공되며, ‘MIT 라이선스’를 따른다.

스토리맵JS
스토리맵JS

https://www.youtube.com/watch?v=T-C64JO7lMg

7. 적스타포즈JS


‘적스타포즈JS’는 사진에 인터랙티브 스토리를 입히는 서비스다. 복잡한 기능은 아니다. 적스타포즈JS는 두 사진을 나란히 놓고 비교하는 데 제격이다. 예컨대 1950년대와 2016년 서울 경복궁 사진을 놓고 과거와 현재 모습을 비교하는 식이다. 사용 방법은 쉽다. 사진 2장을 선택하고 제목을 입력한 뒤, 가로·세로 여부나 저작권 표시 여부 등의 옵션을 선택하면 된다. 이제 사진을 퍼블리싱한 뒤 HTML 소스코드를 웹사이트에 붙여넣으면 된다. 완성된 사진 한가운데는 구분선이 뜨고, 이 선을 마우스 커서로 누르고 좌우로 움직이면 구분선을 따라 사진이 바뀐다. 말로 설명하는 것보다 직접 보면 단번에 이해된다.

적스타포즈JS
적스타포즈JS

적스타포즈JS 사례.
적스타포즈JS 사례.

8. 사운드사이트JS


나이트랩의 마지막 JS 시리즈. 이번엔 오디오를 손쉽게 웹사이트에 삽입하게 돕는 도구다. 텍스트를 읽다 그와 관련된 오디오 자료를 듣고 싶을 때, 해당 텍스트 속 활성화 버튼을 누르면 미리 올려둔 오디오 파일이 재생된다. 인용문을 쓴 뒤 실제 인용자 목소리를 함께 넣는 식으로 활용하면 좋다. ‘사운드사이트JS’로 음성을 텍스트에 넣는 방법은 살짝 복잡하다. 먼저 사운드클라우드에 오디오 파일을 올린다. 그런 다음 해당 오디오 주소를 가져와 사운드사이트JS에 넣고, 시작과 끝지점을 선택하고 클립을 생성한다. 이제 해당 클립 HTML 코드를 오디오 파일을 재생할 지점에 넣는다. 모든 클립 삽입이 끝나면, 마지막으로 해당 페이지 최상단에 사운드사이트JS 페이지 소스코드를 넣는다. 설명은 좀 복잡하지만, 직접 한 번 따라해보면 크게 어렵지 않다. 사운드사이트JS는 오픈소스 프로젝트다. 주요 소스코드가 깃허브에 공개돼 있어, 누구나 가져다가 모양을 바꾸거나 기능을 개선해도 된다.

사운드사이트JS
사운드사이트JS

https://vimeo.com/68383495

9. 페이지플로우


미국 <뉴욕타임스>가 2012년 공개한 ‘스노우폴’은 미디어 스토리텔링 역사의 분기점이 됐다. ‘스노우폴’은 글과 사진, 동영상의 단선적 배열 방식을 벗어나 다양한 멀티미디어 기술을 접목해 독자와 교감하는 방식을 도입했다. ‘스노우폴’과 더불어 ‘인터랙티브 저널리즘’이란 용어가 등장했다. 하지만 자본과 인력, 기술이 부족한 소규모 언론사가 ‘스노우폴’ 같은 인터랙티브 콘텐츠를 만들어내기란 쉽지 않다. ‘페이지플로우’는 누구나 손쉽게 웹에서 인터랙티브 스토리를 만들게 돕는 서비스다. 월 1만1천원 정도의 유료 서비스로 제공된다. 이용자는 대시보드에서 스토리를 선택하고 제목과 이미지, 동영상 등을 넣어 페이지를 구성할 수 있다. 완성된 스토리는 링크를 공유하거나 임베디드 소스코드를 복사해 웹페이지에 붙여넣으면 된다. 페이지플로우로 만든 콘텐츠는 모바일에서도 잘 보인다. 페이지플로우는 오픈소스 스토리텔링 프로젝트로, 깃허브에 소스코드가 공개돼 있다.

페이지플로우
페이지플로우

10. 플레이버즈


2013년 <뉴욕타임스> 온라인에서 가장 많이 읽힌 기사는 인터랙티브 뉴스도, 심층 탐사보도도 아니었다. ‘사투리 퀴즈’였다. 언론사마다 ‘게임화’ 요소를 도입하느라 분주하다. 퀴즈도 그 가운데 하나다. 퀴즈는 이용자 참여를 유도하고 경쟁을 유발한다. ‘순위’라는 적절한 보상 시스템도 제공한다. ‘플레이버즈’를 이용하면 퀴즈 형태의 콘텐츠를 손쉽게 제작할 수 있다. 이미지와 항목, 문항 등을 입력해 단계별 퀴즈를 만든 다음, 이를 웹에서 공유하거나 임베디드 코드로 원하는 웹사이트에 붙여넣으면 된다. 비슷한 서비스로 ‘퀴즈’가 있다.

플레이버즈
플레이버즈

플레이버즈로 만든 퀴즈.
플레이버즈로 만든 퀴즈.

11. 타입폼


‘구글 설문지’는 정보를 수집하고 정리하는 데 필요한 설문조사를 손쉽게 할 수 있는 무료 서비스다. 전세계적으로 가장 널리 쓰이는 설문조사 서비스이지만, 아직까지는 텍스트 중심의 간단한 설문 기능만 제공한다. ‘타입폼’은 구글 설문지를 대신해 쓸 수 있는 설문조사 제작 도구다. ‘위지윅’(WYSIWYG) 방식으로 다양한 형식의 설문지를 만들 수 있다. 직접 설문지 항목을 만들어도 좋지만, 이미 등록된 다양한 템플릿에서 설문 성격에 맞는 형식을 골라 수정해 써도 된다. 모바일 화면에도 잘 대응한다.

  • 구분 : 비주얼 스토리

  • 웹사이트 : https://www.typeform.com/

  • 환경 : 웹, iOS·안드로이드 앱

  • 조건 : 무료


타입폼
타입폼

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

12. 캔바


가장 흔히 쓰는 스토리텔링 형식을 하나 꼽으라면 ‘카드뉴스’를 들겠다. 카드뉴스는 1장의 카드 화면을 여러 개 붙여 줄거리를 전달하는 스토리텔링 형식이다. 대개 세로 스크롤 방식이나 가로로 슬라이드 형태로 넘기는 형식을 띈다. 대개 ‘마이크로소프트 파워포인트’나 애플 ‘키노트’ 같은 프리젠테이션 저작도구를 이용해 카드를 제작하기도 하지만, 손쉽게 카드뉴스를 제작할 수 있는 무료 서비스도 있다. ‘캔바’가 그렇다. 꾸미기용 이미지나 레이아웃, 글꼴과 배경색 등을 지정해 드래그앤드롭 방식으로 손쉽게 카드뉴스를 제작할 수 있다. 소셜미디어용 1:1 비율 카드부터 프리젠테이션, 포스터, 페이스북 커버, 페이스북 포스트, A4 등 다양한 비율의 카드 템플릿을 제공한다. 완성된 카드는 웹으로 공유하거나 PC에 내려받아 쓰면 된다. 하나의 파일에 여러 페이지를 작성할 수 있어 더욱 유용하다.

  • 구분 : 이미지

  • 웹사이트 : https://www.canva.com/

  • 환경 : 웹, iOS·안드로이드 앱, 크롬 확장기능

  • 조건 : 무료


캔바
캔바

캔바로 만든 카드뉴스 사례
캔바로 만든 카드뉴스 사례

13. 타일


가볍고 쉬운 웹기반 카드뉴스 제작 서비스. 주제별로 골라 쓸 수 있는 40여가지 카드 스타일을 제공한다. 100만장의 스톡 이미지와 40종의 산돌 글꼴을 제공해 저작권 걱정 없이 카드뉴스를 만들게 했다. 페이스북, 인스타그램, 트위터 등 SNS에 맞게 하나의 이미지를 다양한 크기로 조정할 수 있다. 맛보기용 카드 제작은 무료이지만, 기본 서비스는 유료로 제공된다.

타일
타일

14. 스와이프


‘스와이프’는 여러 장의 사진으로 슬라이드쇼를 만들어주는 서비스다. 사진을 선택해 올려서 순서를 정하면 슬라이드쇼 형태로 만들어준다. 완성된 슬라이드쇼는 웹주소를 공유하거나 임베디드 코드를 받아 원하는 웹페이지에 넣으면 된다. 무료 서비스로도 무제한 슬라이드 파일과 협업 기능, 비공개 슬라이드 제작과 간단한 통계 기능을 지원한다. 마크다운 문법을 지원하며, 15가지 글꼴을 제공한다. 월정액 유료 서비스를 신청하면 비밀번호 보호 기능과 구글 애널리틱스 연동 기능 등을 제공하지만 무료로만 써도 충분히 활용 가능한 서비스다.

스와이프
스와이프

15. 퓨즈


유튜브나 페이스북 등 주요 소셜미디어는 360도 동영상과 이미지를 지원한다. 하지만 360도 동영상이나 이미지를 촬영하려면 전용 카메라를 써야 했다. ‘퓨즈’는 스마트폰 카메라로 간단히 360도 사진을 찍을 수 있게 해주는 모바일 앱이다. 사용 방법도 쉽다. 앱을 실행한 뒤, 촬영 모드에서 파노라마 사진을 찍듯 화면 지시를 따라 스마트폰을 움직이면 되다. ‘촬영’ 버튼을 꾹 누른 상태에서 화면을 촬영하고, 버튼에서 손을 떼면 촬영이 끝난다. 이렇게 촬영한 이미지는 스마트폰을 이리저리 움직이며 감상할 수 있다. 촬영 이미지마다 고유 웹주소를 지원하므로, 이를 웹사이트에 임베디드하면 PC웹에서도 이미지를 마우스 커서로 이리저리 움직여가며 360도 화면을 감상할 수 있다. 앱은 무료로 제공된다.

퓨즈
퓨즈

퓨즈로 만든 360도 사진 사례
퓨즈로 만든 360도 사진 사례

16. 버블리


‘버블리’도 퓨즈처럼 360도 사진이나 영상을 촬영하고 공유할 수 있는 서비스다. 다른 점이라면, 버블리는 360도 영상 뿐 아니라 음성 녹음도 지원한다. 촬영이 끝난 영상은 웹으로 공유하거나 임베디드 코드를 활용해 웹사이트에 심을 수 있다. 아직은 iOS용 앱만 제공한다. 샘플 이미지를 보고 싶다면 ☞http://bit.ly/bubtest 클릭~!

버블리
버블리

17. 자르곤 버스터


기사를 쓰다보면 독자를 위해 부연설명을 해줘야 할 전문용어가 등장한다. 친절히 용어설명을 곁들이다보면 글이 필요 이상으로 길어져 집중을 방해하기도 한다. 이럴 때 유용한 것이 ‘각주’다. 해당 기사 하단에 별도의 용어설명을 붙여주는 방식이다. ‘자르곤 버스터’는 이런 각주를 보다 쉽고 직관적으로 구현하게 돕는 소프트웨어다. 기사를 읽다가 모르는 단어를 누르면, 바로 밑에 설명 문구가 뜬다. ‘자르곤 버스터’는 2015년 <더 타임스> 해커톤 ‘빌드 더 뉴스’에서 <월스트리트저널> 소속 개발자들이 구글 크롬 확장기능 형태로 처음 선보였다. 지금은 오픈소스 프로젝트로, 깃허브에서 누구나 소스코드를 내려받을 수 있다.

자르곤 버스터
자르곤 버스터

18. 티키토키


‘티키토키’는 나이트랩의 타임라인JS처럼 타임라인을 제작하게 돕는 서비스다. 서비스는 웹기반으로 이용할 수 있으며, 맥용 데스크톱 앱도 제공된다. 서비스는 유료와 무료로 나뉜다. 무료 서비스의 경우 맛보기용으로 1개의 타임라인만 생성할 수 있다. 월 7.5~25달러 유료 서비스와 교사를 위한 별도 유료 서비스를 제공한다. 티키토키의 특징은 ‘3D 타임라인’을 제공하는 점이다. 가로 스크롤 방식의 2D 타임라인을 보다가 화면 구석의 ‘3D’ 버튼을 누르면 3차원 입체 타임라인으로 화면이 전환된다. 기존 밋밋한 타임라인 대신 색다르고 화려한 화면을 구현하고플 때 이용하면 좋다. 맥용 데스크톱 앱도 제공한다. 무료 계정은 매터맵 생성 갯수에 제한은 없지만, 최대 10개까지만 공유할 수 있다.

티키토키
티키토키

티키토키로 제작한 타임라인 사례
티키토키로 제작한 타임라인 사례

19. 매터맵


아이디어를 정리할 때 흔히 쓰는 방법 중 하나는 ‘포스트잇’이다. 아이디어를 쓴 메모지를 벽에 붙여놓고 연관성 있는 것끼리 묶어보고 재조립하는 식이다. 이런 아이디어 회의 방식을 웹서비스로 옮긴 서비스가 ‘매터맵’이다. 매터맵을 쓰면 주제별로 말풍선 덩어리를 만들어 보여줄 수 있다. 한가운데 주제를 놓고, 사안별 입장을 그룹으로 나눠 보여주는 UI를 채용했다. 매터맵은 논쟁이 되는 사안에 대해 입장별로 의견들을 모아 보여주는 식으로 쓰기에 좋다. 예컨대 구글 지도 데이터 반출 논란이 있다면, 이에 대해 찬성/반대/중도 입장을 각각 말뭉치로 나눠 보여주는 식이다. 복잡하고 혼란스러운 주제에 대해 입장별, 분야별로 정보와 의견, 자료 등을 모으며 자연스레 해당 주제에 대한 정보를 정리할 수 있다. 네덜란드 저널리스트 에스더 반 라이슈베이크와 페이트라 터 도스트가 만들었다. 무료 계정은 매터맵 생성 갯수에 제한은 없지만, 최대 10개까지만 공유할 수 있다. 사용법이 다소 복잡하고, 한글을 아직 지원하지 않는 점은 아쉽다.

매터맵
매터맵

https://www.youtube.com/watch?v=HXnH7H-nCz0

20. 씽링크


‘씽링크’는 이름대로 사물(Thing) 위에 하이퍼링크(link)로 정보를 연결해주는 서비스다. 이런 식이다. 웹에서 이미지 속 사물에 하이퍼링크를 넣으려면 별도의 프로그램을 써야 한다. 씽링크는 이미지나 동영상 속 사물에 다양한 정보를 하이퍼링크로 삽입해준다. 예컨대 농구팀 단체사진 위에 마누스 커서를 올리면 각 농구선수별 소셜미디어 계정 바로가기가 뜨고, 선수들의 경기가 담긴 유튜브 동영상을 보러 가거나, 농구공을 구매할 수 있는 e쇼핑몰로 이동하는 식이다. 이런 식으로 이미지나 동영상을 인터랙티브 콘텐츠로 바꿔준다. 간단한 텍스트부터 하이퍼링크, 이미지, 동영상, 오디오, 소셜미디어 채널, e쇼핑몰 등 70가지 액션 태그를 지원하며 360도 동영상이나 VR 콘텐츠 제작도 지원한다. 편집이 끝난 콘텐츠는 임베디드 코드를 이용해 원하는 웹사이트로 퍼갈 수 있다. 무료 서비스는 이미지 편집 기능만 제공하며, 월간 뷰 수에 제한이 있다.

씽링크
씽링크

씽링크 활용 사례
씽링크 활용 사례

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

21. 와이어왁스


씽링크가 이미지 중심이라면, ‘와이어왁스’는 동영상에 특화된 인터랙티브 콘텐츠 편집 서비스다. 동영상을 직접 올리거나 유튜브·비메오 동영상을 불러오면, 와이어왁스는 자체 인공지능 기반 사물·얼굴인식 기술로 동영상 속 사물이나 인물을 자동 인식한다. 이용자는 해당 사물에 하이퍼링크나 정보를 입히거나, 와이어왁스가 추천해주는 태그를 선택하면 된다. 완성된 동영상은 웹으로 공유하거나 임베디드 코드로 웹페이지에 삽입할 수 있다. 무료 계정은 동영상 편집이나 퍼가기엔 제한이 없지만, 한 동영상 길이는 최대 10분으로 제한된다. 유료 서비스를 이용하면 비밀번호 보호 기능, 무제한 뷰, 동기화 등의 서비스가 추가된다.

와이어왁스
와이어왁스

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

22. 스토리텔러


‘스토리텔러’는 워드프레스용 멀티미디어 스토리텔링 테마다. 테마를 적용하면 워드프레스 페이지 전체를 하나의 슬라이드 화면으로 바꿔준다. 이 슬라이드를 가로로 넘기며 스토리를 보여주는 방식이다. 웹사이트 전체가 거대한 슬라이드쇼 페이지가 되는 셈이다. 워드프레스 속 ‘카테고리’는 하나의 스토리가 되고, 카테고리에 포함된 글(포스트) 하나가 슬라이드 1장이 된다. 이런 식으로 카테고리별로 별도의 멀티미디어 스토리를 꾸릴 수 있다. 짧은 시간에 워드프레스를 이용해 멀티미디어 스토리를 만들 수 있어, 일회용 프로모션 페이지나 기획성 기사를 만들 때 쓰면 좋다. 스토리텔러는 무료로 쓸 수 있으며, 깃허브에 소스코드가 공개돼 있다.

스토리텔러
스토리텔러

23. 스웨이


‘스웨이’는 마이크로소프트가 내놓은 웹기반 문서 작성 서비스다. MS 클라우드 서비스 ‘애저’ 기반으로 작동한다. 스웨이는 ‘구글 드라이브’나 ‘MS 오피스 365’ 같은 웹오피스 서비스와 좀 다르다. 오히려 ‘디지털 스토리텔링 도구’에 가깝다. 스웨이에 접속하면 텍스트나 이미지, 동영상 등을 입맛대로 배치해 ‘스토리’가 담긴 문서 한 편을 손쉽게 만들 수 있다. 프리젠테이션, 뉴스레터, 학생 보고서, 포트폴리오, 블로그, 전문 프로필 등 용도에 맞는 다양한 템플릿을 제공한다. 문서를 구성하는 각 요소는 위젯 형태로 구성돼, 마우스로 손쉽게 옮기며 위치를 지정하면 된다. 스토리라인을 꾸미는 데 필요한 요소도 고를 수 있다. 가로·세로 스크롤링 방식을 고르거나, 사진 레이아웃도 그룹 또는 계단식(스택) 형태를 선택하는 식이다. MS는 배경색과 글자색, 글꼴 등을 조합한 다양한 기본 스타일을 제공한다. 기존에 작성된 문서를 불러와 스토리라인을 꾸밀 수도 있다. 마이크로소프트 계정으로 로그인하면 누구나 쓸 수 있다.

스웨이
스웨이

24. 어도비 스파크 비디오


‘스파크’는 ‘포토샵’과 ‘일러스트레이터’로 유명한 어도비시스템즈에서 내놓은 스토리텔링 앱 시리즈다. 그 가운데 ‘어도비 스파크 비디오’는 사진이나 스티커, 텍스트와 픽토그램 등으로 영상을 만들고 그 위에 자신의 목소리를 입혀서 한편의 스토리를 만들게 돕는다. 예전 ‘어도비 보이스’란 이름으로 나왔던 앱인데, 브랜딩 개편하며 ‘스파크’ 시리즈로 재탄생했다. 제목과 템플릿을 선택하고, 사진과 텍스트, 아이콘 등을 활용해 각 페이지를 채우면 된다. 사진은 직접 업로드하거나 드롭박스, 구글 포토에서 불러올 수 있다. 어도비가 제공하는 다양한 사진들을 검색해 써도 된다. 레이아웃이나 배경음악도 입맛대로 고를 수 있다. 스토리라인이 완성되면 마이크 버튼을 눌러 자신의 목소리를 입히면 된다. 완성된 영상은 내려받아 저장하거나 링크를 통해 공유할 수 있다. 웹페이지에 삽입할 수 있는 임베디드 코드도 제공한다. 어도비 스파크 비디오는 웹과 iOS 앱으로 이용할 수 있다.

어도비 스파크 비디오
어도비 스파크 비디오

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

25. 어도비 스파크 포스트


‘어도비 스파크 포스트’는 사진 편집기다. 사진을 리믹스하거나 다양한 텍스트를 입혀 소셜미디어로 공유할 수 있다. 일종의 카드뉴스 저작도구라고 보면 된다. 인스타그램, 페이스북, 트위터, 포스터, 슬라이드부터 페이스북 광고, 페이스북 커버, 트위터 헤더 등 다양한 크기의 템플릿을 제공한다. 사용법은 어도비 스파크 비디오와 비슷하다. 주제에 맞는 템플릿과 테마 등을 고르고 사진과 함께 원하는 문구를 넣으면 된다. 궁합이 잘 맞는 다양한 팔레트 조합을 제공한다. 작업 내역은 자동 저장되며, 완성된 이미지는 JPG 파일로 내려받거나 웹에서 공유할 수 있다. 웹과 iOS 앱으로 이용 가능하다.

어도비 스파크 포스트
어도비 스파크 포스트

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

26. 톡 썰 메이커 for 카톡


‘카카오톡’, ‘라인’, 구글 ‘행아웃’ 같은 메신저가 커뮤니케이션 중심 채널로 자리잡았다. 메신저로 오가는 대화를 이용해 스토리를 구성하는 기법도 활성화됐다. ‘조선왕조실톡’이 대표 사례다. 이처럼 가상의 메신저 대화를 이용한 스토리를 만들기 위해 굳이 포토샵 같은 이미지 편집 프로그램을 사용할 필요는 없다. 메신저 UI를 활용해 가상 대화를 손쉽게 만들게 돕는 모바일 앱이 여럿 나와 있다. ‘톡썰메이커’도 그 가운데 하나다. 내 프로필과 대화 상대 목록을 만들고 프로필 사진도 설정할 수 있다. 채팅창에서 상대방과 나를 선택해 실시간 대화를 만들고, 대화 수정·삭제도 지원한다. 대화가 완성되면 화면을 캡처해 쓰면 된다. ‘가짜톡’, ‘메신저 대화 수정’, ‘채팅 패러디’ 등 비슷한 앱이 여럿이다. iOS용으로 ‘카톡 내용 조작기 - 카톡 편집기’란 앱이 있었는데, 지금은 애플 앱스토어에서 내려갔다.

톡 썰 메이커 for 카톡
톡 썰 메이커 for 카톡

27. 슈퍼스트링


‘슈퍼스트링’은 뮤직비디오에 가사를 입혀주는 데스크톱 앱이다. 윈도우와 맥용 데스크톱 앱을 제공된다. 이를 잘 활용하면 텍스트를 비주얼하게 보여주는 동영상을 제작할 수 있다. 가사를 입힐 노래를 선택하고 각 장면별로 텍스트(가사)를 입력한 뒤 배경화면을 선택하면 된다. 각 단계는 드래그&드롭 방식으로 손쉽게 편집할 수 있다. 완성된 동영상은 MP4 파일로 내려받거나 유튜브에 올려 공유할 수 있다. 무료와 유료(39.99달러) 버전으로 나뉘어 제공된다. 무료버전은 360p SD급 동영상만 지원되며, 광고와 슈퍼스트링 워터마크가 삽입된다.

슈퍼스트링
슈퍼스트링

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

28. 블로터 타임라인


<블로터>는 워드프레스 기반으로 제작된 온라인 뉴스 미디어다. 워드프레스는 누구나 무료로 쓸 수 있는 설치형 기반의 블로그 저작도구다. 오픈소스로 공개된 덕분에 누구나 소스코드를 가져다 기능을 개선할 수 있다. 관련 플러그인과 테마도 여럿이다. ‘블로터 타임라인’은 이 가운데 타임라인 형식의 기사를 작성할 때 유용한 워드프레스 플러그인이다. 블로터 미디어랩이 기획·제작해 2015년 5월 공개했다. ‘bloter_timeline’, ‘/bloter_timeline’ 형태의 숏코드로 타임라인을 기사에 삽입할 수 있다. 작성 편의를 돕기 위해 워드프레스 스마트에디터에 숏코드를 간편히 추가할 수 있는 버튼과 타임라인 작성 폼을 제공한다. 타임라인은 세로 형태로 구성돼 있으며 주제와 각 타임라인 아이템 제목, 날짜, 이미지, 웹주소, 내용 등을 넣도록 했다. 요약글을 기본 제공하고 ’더보기’ 버튼을 눌러 상세 내용을 확인할 수 있다.

블로터 타임라인 활용 사례
블로터 타임라인 활용 사례

29. 블로터 퀴즈


‘블로터 퀴즈’는 블로터 타임라인에 이어 블로터 미디어랩이 공개한 두 번째 워드프레스용 플러그인이다. 이를 활용하면 독자와 상호작용할 수 있는 퀴즈를 워드프레스 편집기에서 손쉽게 만들 수 있다. ‘bloter_quiz_container’, ‘/bloter_quiz_container’ 숏코드로 퀴즈를 삽입할 수 있으며, 스마트에디터에 숏코드 추가 버튼을 제공한다. 이 버튼을 누르면 퀴즈를 작성할 수 있는 양식이 뜬다. ‘퀴즈형’과 ‘설문형’ 가운데 원하는 형식을 고르면 된다. 퀴즈형은 선택문항 중 하나를 정답으로 설정할 수 있다. 선택문항 갯수엔 제한이 없다. 퀴즈나 설문을 마친 독자가 참고할 수 있도록 ’관련기사’나 ‘정답해설’을 붙일 수 있다. 생성된 이미지 박스를 눌러 입력 내용을 수정하면 된다. 누가 어떤 문항을 선택했는지 비율과, 퀴즈에 참여한 사람 수도 보여준다.

블로터 퀴즈 활용 사례
블로터 퀴즈 활용 사례

30. 블로터 주석


‘블로터 주석’은 워드프레스용 주석 삽입 플러그인이다. 앞서 소개한 오픈소스 각주 제작 프로그램 ‘자르곤 버스터’와 비슷하지만, <블로터>에서 자체 제작했다. 워드프레스에서 특정 단어에 대한 주석을 바로 밑에 보여주게 해준다. 워드프레스 스마트에디터 창에서 ‘bref’, ‘/bref’ 숏코드를 이용해 특정 단어에 대한 설명을 삽입할 수 있다. 스마트에디터용 버튼은 별도로 제공하지 않는다. ‘블로터 주석’은 아직은 <블로터> 내부에서만 시험용으로 사용 중이다. 추후 <블로터> 깃허브 페이지를 통해 소스코드를 공개할 예정이다.

블로터 주석
블로터 주석

※ ‘블로터 플러스’ 회원은 ‘블로터 플러스 홈페이지→북’ 메뉴에서 ‘미디어를 위한 디지털 스토리텔링 도구 30선’ PDF 편집본을 내려받을 수 있습니다. (회원가입 필요)

저작권자 © 블로터 무단전재 및 재배포 금지