brunch

You can make anything
by writing

C.S.Lewis

by 강원양 Nov 22. 2017

보지만 말고 귀도 기울여 보세요

음향효과를 활용한 데이터 시각화 콘텐츠

잠깐만! 무슨 소리 안 들리나요?


만약 누군가 지금 여러분에게 지금 무슨 소리가 들리지 않는지 묻는다고 가정해봅시다. 그 이후의 상황은 대다수 비슷할 것입니다. 어디에서 소리가 나는지, 어떤 소리가 나는지 알아내기 위해 갑자기 하던 일을 멈추고 귀를 쫑긋하게 되겠지요. 이처럼 소리는 사람들이 집중하게 하는 효과를 갖고 있습니다. 데이터 시각화 콘텐츠에서도 소리는 독자의 관심을 사로잡는데 활용되곤 하는데요. 오늘은 음향 효과를 활용한 데이터 시각화 콘텐츠를 알아보도록 하겠습니다.





음악을 주제로 한 데이터 시각화 콘텐츠를 만든다면 이들처럼!


가장 일반적으로 음향 효과가 활용되는 데이터 시각화 콘텐츠는 '음악'을 주제로 하는 경우가 많습니다. 그중에서도 대표적인 유형은 데이터에 해당하는 음악이 재생되도록 하는 것입니다. 사례로 지난 3월 <the pudding>이 발행한 '음악의 진화 : 빌보드 차트 100, 1958-2016'('How Music Evolved: Billboard's Hot 100, 1958 - 2016') 콘텐츠를 살펴보도록 하겠습니다. 

the pudding/ 'How Music Evolved: Billboard's Hot 100, 1958 - 2016

이 콘텐츠는 지난 1958년부터 2016년까지 빌보드 차트 TOP5 데이터의 변화를 보여줍니다. 콘텐츠 웹 페이지 접속 후 'PLAY' 버튼을 클릭하면 1997년 이후부터 일별 빌보드 차트 TOP5 데이터 변화를 라인 차트로 확인할 수 있습니다. 월별 데이터의 변화를 애니메이션 효과로 확인할 수 있는 동시에 1위 곡의 하이라이트 부분이 배경음악으로 자동 재생되는 것이 가장 큰 특징입니다. 무엇보다도 1위 곡의 음악이 재생되는 것은 해당 음악이 무엇이었는지 알려주는 부가 정보로서의 역할뿐만 아니라 '음악이 오래 재생될수록 오랫동안 1위를 했다'라는 의미를 전달하는 것이 매우 인상적입니다. 콘텐츠 우측 상단의 'Pause/Play' 텍스트를 클릭하면, 애니메이션 효과와 음악의 재생 여부를 조정할 수 있습니다.


이 외에도 콘텐츠 내 개별 요소에 애니메이션 효과가 적절히 활용되었습니다. 차트 위 중앙에 배치된 텍스트는 1위 곡의 곡명과 가수 이름, 데이터 시점(일별) 정보를 제공합니다. 시계열 변화에 따라 달라지는 데이터를 즉각적으로 반영하여 해당 텍스트도 변경됩니다. 우측 상단에는 특정 시점(애니메이션이 시작되는 시점. 독자가 특정 시점을 선택한다면 해당 시점, 그렇지 않은 경우 1997년 5월)부터 1주일간 변동 없이 1위를 한 횟수가 많은 순서대로 상위 10명의 가수 리스트 정보가 제공됩니다.

the pudding/ 'How Music Evolved: Billboard's Hot 100, 1958 - 2016

독자가 데이터를 탐색할 수 있는 요소도 있는데, 차트 하단 X축은 시계열 정보를 제공하는 동시에 특정 시점의 데이터를 바로 확인할 수 있는 내비게이션 역할을 합니다. 10년 단위로 표기된 텍스트에 마우스 오버를 하면 연도 리스트가 나타나며, 특정 연도를 클릭 시 월별 리스트가 제공됩니다. 즉, 독자는 연도별 X 월별 조건에 따른 시점을 클릭해 해당 시점의 데이터를 바로 확인할 수 있습니다. 또한 콘텐츠 우측 상단의 검색창에서 가수 이름을 입력해 검색하면 해당 가수가 1위를 기록한 곡 정보를 확인할 수 있습니다. 검색 결과 중 하나를 클릭해 해당 데이터를 볼 수 있습니다. 



가사 데이터 분석, 데이터 시각화와 음향이 만나서 만드는 시너지 효과!


최근 해외 데이터 분석 및 시각화 콘텐츠 사례로 가사 데이터를 분석한 경우를 종종 볼 수 있습니다. 가사 데이터 분석에서 음향 효과의 활용 방법은 특정 가사 부분의 음악이 재생되도록 하는 것이 대표적입니다.

The Pudding/ The words that are 'Most Hip Hop

첫 번째 사례로 <The Pudding>의 '가장 힙합스러운 단어들'('The words that are 'Most Hip Hop')을 살펴보도록 하겠습니다. 힙합 아티스트 308명의 가사 데이터 분석 결과 시각화하였으며, 스크롤링 기반의 콘텐츠 형태로 제작되었습니다. 콘텐츠 웹 링크 접속을 하면 첫 화면을 통해 아티스트 얼굴 이미지가 배치된 형태의 시각화를 확인할 수 있습니다. 이는 각 아티스트의 가사를 분석한 결과 그 유사 정도에 따라 그룹을 만들어 배치한 것입니다. 해당 콘텐츠에서 음향효과는 이 시각화를 독자가 쉽게 이해할 수 있도록 도움을 주기 위해 활용되었습니다. 첫 화면에서 스크롤링 후 볼 수 있는 두 번째 화면에는 부가 설명이 작성된 말풍선 상자가 등장합니다. 말풍선 내에는 음향 효과를 경험할 수 있는 요소로 '스피커 아이콘'과 '각 아티스트별 가사 중 'SKRRT'라고 적힌 파란색 상자'가 포함되어 있습니다. 각 요소를 클릭하면 소리를 들을 수 있고, 아티스트 간의 유사 정도를 어떻게 분석하였는지 이해할 수 있습니다.


이와 같은 사례가 가사 분석에 음향효과가 활용되는 기본적인 방법이라면, 다음으로는 데이터 시각화 차트와 음향 효과가 연계되어 활용된 사례를 살펴보겠습니다. 월스트리트 저널 <The Wall Street Journal>의 '뮤지컬 '해밀턴'의 숨겨진 리듬' ('The Rhymes Behind Hamilton')은 브로드웨이 뮤지컬 '해밀턴'에 나오는 가사 데이터를 분석하여 시각화한 콘텐츠로 2017 데이터 저널리즘 어워드(The Data Journalism Awards 2017)에서 '올해의 데이터 시각화'(Data Visualization of Year) 부문 최종 우승작으로 선정되기도 하였습니다.

The Wall Street Journal/ 'The Rhymes Behind Hamilton'

해당 콘텐츠에서 시각화 형태는 일반적인 차트 유형과는 다른 특이한 형태를 보입니다. 사각형 1개는 음절 1개를 의미하며, 음절의 종류에 따라서 세로의 위치를 달리합니다. 즉, 가사 중 같은 음절(즉, 라임)이 사용된 부분이 가로로 나란히 배치되는 것입니다. 시각화 위의 재생 버튼을 클릭하면 음악이 재생되는 동시에 사각형에 색이 칠해지면서 시각화 형태가 완성됩니다. 실제 가사에서 라임이 어떻게 활용되는지 시각과 청각을 통해 이해도를 높일 수 있습니다. 시각화 하단의 텍스트는 라임별로 컬러를 달리해 부가적인 정보로 제공되는데, 특정 라임 텍스트를 클릭하면 다시 음악을 들을 수 있습니다. 텍스트를 클릭하면, 시각화에서 해당 부분 옆에 텍스트가 나타났다가 사라지는 효과도 확인할 수 있는데, 이 또한 시각화 결과물과 음향이 연계되어 활용되었음을 보여주는 요소라고 할 수 있습니다. (덧붙여... 콘텐츠의 주제(내용) 상 '소리'의 역할이 중요하다 보니 이를 독자들에게 알려주기 위해 '헤드폰을 켜고, 볼륨을 높이세요'(headphone  on, volume up)란 글씨가 쓰인 귀여운 아이콘도 화면 좌측 하단에 배치되어 있네요!)



직관적인 메시지 전달을 가능하게 하는 음향효과의 활용!


앞서서 '음악'을 주제로 한 데이터 시각화 콘텐츠에서 음향 효과가 어떻게 활용되고 그 효과는 무엇인지에 대해서 살펴보았습니다. 그렇다고 해서 '음악'을 주제로 한 콘텐츠에서만 음향 효과가 사용되는 것은 아닙니다. <뉴욕타임스>(The Newyork Times)의 '1초당 9회 : 어떻게 라스베이거스 총격범은 빠르게 소총을 채웠을까'('Nine Rounds a Second : How the Las Vegas Gunman Outfitted a Rifle to Fire Faster')는 단순한 bubble plot(bubble chart, dot plot 등으로 불림) 형태의 시각화를 활용했지만, 소리를 통해 전달하고자 하는 데이터의 의미를 매우 효과적으로 전달합니다.

The Newyork Times/ 'Nine Rounds a Second : How the Las Vegas Gunman Outfitted a Rifle to Fire Faster

이 콘텐츠는 최근 발생한 미국 라스베이거스의 야외 콘서트장 총기 난사 사건을 주제로 합니다. 활용된 시각화 차트의 x축은 시간(초), y 축은 발사 수를 나타냅니다. 차트 영역 내 각 버블의 시각적 분포를 통해 1회 발사 간 시간 간격을 확인할 수 있습니다. 차트 중앙에 표시된 재생 버튼을 누르면 총 3가지 경우-이번 라스베이거스 사건, 2016년 6월 발생한 올랜도 나이트클럽 사건, 전자동 무기-의 데이터가 차례로 시각화되는 동시에 총격음을 재생합니다. 앞서 살펴보았던 'How Music Evolved: Billboard's Hot 100, 1958 - 2016' 콘텐츠 사례와 유사한 효과로 얼마나 빠른 간격으로 총기 난사가 이루어졌는지 시각과 청각을 통해 데이터의 의미를 직관적으로 이해할 수 있습니다.




지금까지 데이터 시각화에서 음향효과를 활용한 몇 가지 콘텐츠 사례를 살펴보았습니다. 데이터 시각화의 장점 중 하나인 데이터 인사이트를 시각적으로 빠르게 확인할 수 있다는 점에 소리를 더하니, 흥미 요소가 될 뿐만 아니라 콘텐츠의 메시지를 직관적으로 받아들이도록 하는 강조 효과가 있음을 알 수 있습니다.


* 이 글의 원문 출처는 뉴스젤리 블로그 '[데이터 시각화] 보기만 하지 말고 귀도 기울여보세요, 보고 듣는 데이터 시각화 콘텐츠!'입니다.

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