뉴욕 패션쇼를 사진으로 시각화하기
사진이 데이터가 되다
이번에 소개할 데이터 시각화는 사진을 이용한 시각화입니다. 사진이 담은 색감과 패턴이 데이터가 된 경우인데요. 뉴욕타임스는 2013년 보도를 통해 당시 뉴욕의 패션위크를 다음과 같이 시각화하였습니다.
캘빈클라인(Calvin Klein)
출처: 뉴욕타임스처음 보이는 컬렉션은 캘빈클라인입니다. 컬렉션에 나왔던 모든 의상을 한눈에 확인할 수 있도록, 각 의상을 긴 막대 형태로 편집하여 하나의 모음으로 만들어줍니다. 이렇게 보니 컬렉션의 전체적인 패턴이 쉽게 인식됩니다. 개인적으로는 깔끔하다는 인상을 받았습니다. 하나의 의상에 많은 색을 사용하지 않았고, 전반적으로 패턴의 사용이 제한적인 것 같습니다.
톰 브라운(Thom Browne)
출처: 뉴욕타임스다음은 톰 브라운의 컬렉션 사진입니다. 캘빈클라인과 어떻게 다른 것 같나요? 우선 파격적인 헤어스타일과 메이크업이 눈에 띄네요. 의상에서는 검은색과 흰색 등의 무채색 외에는 색이 거의 쓰이지 않은 것을 알 수 있습니다. 대신 옷의 모양이 보다 입체적이고, 굉장히 다양한 패턴이 보입니다. 이렇게 각 컬렉션의 의상을 한눈에 볼 수 도록 함으로써, 컬렉션을 대표하는 분위기나 색, 디자인등의 패턴을 쉽게 파악할 수 있습니다.
패션위크를 색으로
패션위크의 전체 컬렉션을 모아서 본다면 어떨까요? 뉴욕타임스는 이를 아래와 같이 색으로 정리해 보여줍니다. 하나의 의상을 막대스택으로 나타내어, 의상을 대표하는 색으로 나타냅니다. 그 후, 의상을 컬렉션 별로 모아줍니다. 이렇게 각각의 컬렉션이 색의 모음으로 만들어져 보입니다. 컬렉션 별로 어떤 색이 주로 사용되었고, 의상별 색의 조합은 어떤지도 확인할 수 있네요. 이렇게 패션위크를 한눈에 확인할 수 있습니다.
출처: 뉴욕타임스어떻게 이런 시각화와 인터랙션을 만들까
뉴욕타임스 페이지를 찾아서 시각화 위에 마우스를 놓아보면, 아래와 같이 내가 선택한 의상이 좀 더 확대되어 보입니다. 이러한 인터랙션을 더함으로써, 독자들이 데이터 내의 좀 더 상세한 정보를 찾을 수 있도록 도와줍니다. 이렇게 사진을 이용한 온라인 데이터 시각화를 만들고 인터랙션을 더하는 것은 어떻게 가능할까요? 여기서는 D3.js(https://d3js.org/)라는 JavaScript 라이브러리를 사용하였습니다. 이는 온라인 인터랙티브 데이터 시각화를 만들 수 있는 대표적인 라이브러리로, 아래와 같이 맞춤 데이터 시각화를 만들 수 있습니다.
출처: 뉴욕타임스