Skip to content

사례 분석 1: 뉴욕타임스의 개선된 단어 구름 시각화

문장과 같은 텍스트 형식 데이터에서 의미 있는 단어를 추출, 빈도수에 따라 시각화하는 기법을 단어 구름(word cloud)이라고 합니다. 이 방식은 단어의 빈도수를 단어의 크기나 색과 비례 대응시켜 표현합니다. 빈도수가 높은 단어일수록 그 단어의 크기를 키우거나 눈에 잘 띄는 색 속성을 부여합니다.

단어 구름은 많은 수의 단어 중, 빈도수가 높아 의미 있다고 여길 수 있는 단어를 빠르고 직관적으로 파악할 수 있다는 장점이 있습니다. 하지만 정보 전달은 거기에서 멈출 확률이 높습니다. 각 단어가 얼마의 빈도로 사용되었는지(정량 정보 전달), 어떤 맥락에서 사용되었는지(깊이 있는 정성 정보 전달) 명확하게 알 방법이 부족합니다. 이것은 단어 구름 형식 데이터 시각화 기법의 최대 단점이고 풀어야 할 문제입니다.

데이터 시각화의 일차 목표는 사용자가 데이터를 명징하게 읽어낼 수 있도록 도와주는 데 있습니다. 따라서, 각 시각화 기법이 가진 한계와 문제를 푸는 것은 데이터 시각화 관련 종사자들의 중요한 의무입니다.

앞서 제기한 단어 구름 데이터 시각화 기법의 정량 정보 전달 부족 문제를 뉴욕타임스(NYT)에서 비교적 쉽게 풀었습니다. 그 간단한 해결책은 바로 단어 구름의 각 데이터 밑에 단어의 빈도수를 적어주는 것입니다.

Words Used in Twitter Tributes to Steve Jobs

[출처: “Words Used in Twitter Tributes to Steve Jobs“, The New York Times, 2011-10-6]

뉴욕타임스 단어 구름의 패턴은 기존의 단어 구름 형식과 같습니다. 하지만, 앞서 이야기했듯, 각 단어 밑에 크기, 색 그리고 서체를 달리한 숫자를 기재해서 해당 단어가 얼마나 사용되었는지 명쾌하게 알려줍니다. 전달할 정보의 위계는 크기와 색을 통해 구분했습니다. 크기 차이를 두는 것은 쉽게 이해할 수 있는 부분이니, 색과 서체를 어떤 방식으로 달리했는지 살펴보는 게 필요할 듯합니다.

색의 밝은 정도를 나타내는 명도(lightness, value)는 색의 3속성―색상(hue), 명도, 채도(chroma)―중에서 인간이 가장 민감하게 반응할 수 있는 속성입니다. 두 가지 이상 색에서 색상, 명도, 채도 대비가 동시에 일어났을 때, 가장 강한 대비가 일어나는 것은 명도입니다. 이것은 우리 인간의 시각 세포 중 명암을 구분하는 간상세포가 색을 식별하는 추상세포보다 약 16배 정도(약 1억 개 : 6백만 개) 많기 때문입니다. 따라서 명도 대비를 통해 정보 위계를 표현하는 방법은 가장 효과적이면서도 간단하게 목표를 달성할 수 있는 지름길 중 하나입니다.

Words Used in Twitter Tributes to Steve Jobs-Part

뉴욕타임스는 인간의 명도 차이 인식 능력을 잘 활용하여 정보 위계를 구성했습니다. 위의 그림에서 단어 데이터인 ‘Apple’의 HTML 코드 색 값은 #000입니다. 빈도 데이터인 ‘81,117’의 색 값은 #AAA입니다. 두 색이 어느 정도 명도 차이가 있는지 쉽게 확인하는 방법은 CIELAB 색공간(혹은 CIE 1976 L*a*b*)으로 표현하는 것입니다. 앞의 두 색을 각각 LAB 코드(L*, a*, b*)로 쓰면 (0, 0, 0)과 (70, 0, 0)입니다. CIELAB 색공간에서 L*값은 명도를 의미하고 값이 커질수록 명도는 높아집니다. 여기에서 두 색의 명도 차이는 70만큼 남을 알 수 있습니다.

명도를 뜻하는 L* 값이 70만큼 차이 난다는 것은 대체 어떤 뜻일까요? 이 질문에 대한 답은 웹 브라우저에서 표현할 수 있는 그레이 스케일을 살펴보면 알 수 있습니다. 다음 자료는 웹 브라우저에서 표현되는 15단계의 그레이스케일을 각각 HTML 코드, RGB 코드 그리고 LAB 코드로 표시한 것입니다. HTML 코드는 #XXX 형태로 구성되어 있습니다. RGB 코드는 (R, R, R) 형태로 구성되어 있고, LAB 코드는 (L, 0, 0) 형태로 구성되어 있습니다. 따라서 아래 그림에서 가장 왼쪽 두 번째 색을 표현한다면 각각 #111, (17, 17, 17), (5, 0, 0)이 됩니다.

Graysacle with 3 Different Color Space Codes By R

위의 그림을 보며 이미 눈치채신 분도 계시겠지만, HTML 코드 0부터 E까지 명도가 높아질수록, LAB 코드의 L* 값이 일정 간격(빨간색 선 그래프의 높이 차이)으로 증가한다는 것을 알 수 있습니다. 따라서 명도 단계를 체계적으로 판단하고 조절하는 데에는 LAB 코드 형식이 더 직관적입니다.

다시 본론으로 돌아와 뉴욕타임스 시각화 사례에 적용해 보겠습니다. 위의 그림을 보면, ‘Apple’에 사용한 색 #000과 ‘81,117’에 사용한 #AAA는 열 단계의 명도 차이가 남을 쉽게 알 수 있습니다. 정보 위계 구성을 위해 명도 차이를 활용할 경우, 몇 단계로 명도 차이를 둘 것인가는 사용한 서체 크기와 배경색에 따라 달라집니다. 따라서 다양한 환경에서 몇 단계 명도 차이 값이 적절한지 내부적으로 표준 기준을 만들어 두면, 쉽고 빠르게 데이터 시각화 작업을 진행할 수 있습니다. 뉴욕타임스의 경우, 보통 위의 그림 기준으로 8에서 11단계 정도의 명도 차이를 사용하는 듯합니다.

서체 차이를 통한 정보 위계 구성은 간단합니다. ‘Apple’은 Georgia, Times 순으로 세리프 서체를 지정했습니다. ‘81,117’은 Arial, Helvetica 순으로 산세리프 서체를 지정했습니다. 일반적으로 작은 크기의 서체로 표현할 경우, 세리프보다는 산세리프 서체를 사용하는 것이 숫자 오독의 위험을 줄이고 숫자 인식 속도를 빠르게 할 수 있습니다.

이상으로 오늘 자(현지시각 기준 2011년 10월 6일) 뉴욕타임스 인터넷 페이지에 올라온 단어 구름 데이터 시각화 사례를 살펴봤습니다. 간단한 시각화 사례지만, 그 안에는 사용자의 인지 부담을 줄이고, 분명한 내용 전달을 위한 이런 노력이 숨어 있습니다. 단어 구름 시각화를 개선하기 위한 노력은 이 외에도 다양한 곳에서 여러 방법으로 이뤄지고 있습니다. 다른 기법은 앞으로 연재될 글에서 또 소개해 보겠습니다. ▩

* 본문에 삽입한 그레이 스케일-각 색체계 코드 그래프는 R을 이용해 그렸습니다. 다른 곳에 사용할 때는 반드시 트랙백이나 출처 표기를 해 주시기 바랍니다. R을 이용해, 데이터 시각화를 하는 방법도 차차 연재하겠습니다.
 

 


하루에도 수십 개의 데이터 시각화 결과와 인포그래픽이 여러 곳에서 제작되고 발표됩니다. 그 가운데 표현 기술, 디자인, 내용의 구성 등에서 수준 높은 결과를 보여주는 대표적인 곳이 뉴욕타임스입니다. 앞으로 뉴욕타임스의 데이터 시각화 자료와 인포그래픽을 중심으로 어떤 원리들이 적용되었는지 설명하는 글을 종종 올려보겠습니다. 관심 있는 분들에게 작은 도움이라도 되었으면 좋겠습니다.

2 Comments

  1. 호방맨 wrote:

    좋은 글입니다. 앞으로도 많은 글 부탁드립니다. 감사합니다. ^^

    2011/10/10 Mon at 5:35 pm | Permalink
  2. akaiving wrote:

    @호방맨 좋은 말씀 감사합니다. 자주 올릴 수 있도록 노력해 보겠습니다.

    2011/10/11 Tue at 11:16 am | Permalink

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*