무엇을 무엇을 사용할까
지금까지 공부하고 사용했던 각종 라이브러리 정리
처음 '코딩'을 배운 건 2014년에 참여한 D3.js 스터디였다. 당시 해외에서 데이터 시각화, 데이터 저널리즘이 주목받았는데 D3.js라는 걸 이용해 만든다더라는 이야기를 들었고, 몇 명을 꾸려 스터디를 한다길래 참여했다.
그때까지만 해도 HTML, CSS, JavaScript 등 웹 프론트엔드 기술을 하나도 몰랐다. 당시 스터디 책이었던 'D3.js' 책이 처음 읽는 기술 책이었다. 첫 페이지를 읽을 때 느꼈던 당혹감이란. 분명 한글을 읽고 있는데 이해가 되지 않았다.
무작정 공부를 시작한 지 어느덧 3년. 본격적으로 제작을 하면서 부딪히는 벽은 높았고 매번 만들어야 하는 유형도 달랐다. 만들어야 하는 게 다르니 도구도 달라져야 했다. 그동안 사용했던 주요 라이브러리/언어를 정리했다.
시각화
D3.js 그리고 Chart.js
아무래도 데이터 시각화 라이브러리를 많이 쓰는 편이다. 데이터 시각화 라이브러리라고 하면 대표적으로 꼽히는 D3.js를 주로 쓰는데, 바 차트나 파이 차트 같은 간단한 유형은 D3.js 외에 활용할 수 있는 라이브러리가 많다. 그중에서도 최근 사용한 건 Chart.js로 그리드와 애니메이션 등 디자인 요소가 괜찮고 구조가 간단해 사용했다.
[ 그림 1 ] D3.js를 이용해 만든 '박근혜-최순실게이트' 인물 네트워크
[ 그림 2 ] Chart.js를 이용해 만든 한국 외래생물 현황 그래프
Leaflet.js
데이터 시각화 중 빠질 수 없는 지도 시각화. 지도 시각화는 Leaflet.js를 이용했다.
http://leafletjs.com/Leaflet.js를 이용해 지도를 불러오고 지도 위에 데이터를 뿌렸다. 외국은 배경지도로 구글 지도, OpenStreetMap, Mapbox 등 다양하게 사용하지만 한국에서 사용하기에는 한글 지원 등 몇 가지 문제가 있다. 그래서 배경지도로 국토교통부에서 제공하는 VWorld Map을 사용하고 있다.
http://dev.vworld.kr/dev/v4api.do지역 시각화는 크게 두 가지인데, 간단하게 지도 위에 마커를 뿌리기도 하고 아니면 배경지도 위에 행정구역 데이터와 범죄 데이터를 겹쳐 전국 범죄지도를 제작하기도 했다.
[ 그림 1 ] 지도 위에 전국 동물 보호센터 위치를 표기
[ 그림 2 ] 행정구역별 범죄 지도 제작. 배경지도 위에 행정구역 데이터를 겹치고 지역별 범죄율을 표현했다.
Vue.js
처음에는 간단한 인터랙티브 차트로 시작했지만 점점 규모가 커지고 유형이 다양해지면서 고민을 하다가 최신 framework 언어인 Vue.js를 사용하기 시작했다. 아직 공부 중이라 복잡한 구조를 다루지는 못하지만 Vue.js를 하면서 지금까지 느낀 점은
1. 쉽다.
정말 쉬웠다. 그동안 더 깊게 공부할 필요성을 느껴 Angular.js, React.js 등에 도전했지만 번번이 몇 단계를 넘기지 못했다. 반면 Vue.js는 상대적으로 쉬웠다. 거기에 공식 문서가 한글로 번역이 돼있다는 점도 컸다. 개발을 하다 보면 영문으로 된 기술문서를 읽는 데 익숙해지지만 그래도 공식 문서가 한글로 돼 있어 이해가 한결 쉬웠다.
2. 요소에 사용자 반응을 연계하기 쉽다.
인터랙티브 시각화를 보는 독자는 끊임없이 무언가를 입력해야 한다. 쇼핑몰, 포털 등의 웹사이트에서 사용자가 반응해야 하는 요소는 회원가입, 상품 구매 버튼 누르기, 검색어 입력하기 등 어느 정도 정해져 있다. 반면 인터랙티브 페이지에서는 독자가 궁금한 부분을 직접 클릭하고, 독자가 선택한 조건에 따라 그래프는 움직여야 한다.
그렇다 보니 인터랙티브 페이지 안에는 사용자가 특정한 요소를 선택할 때마다 조건에 맞는 데이터를 찾고, 페이지에 나타나게 하는 구조를 만들어야 한다. 클릭 혹은 터치 등 입력을 감지하고, 입력값에 맞는 데이터를 검색하고, 검색된 디자인 요소로 표출되게 하는 단계를 일일이 만들어야 했다.
Vue.js는 이렇게 사용자가 입력한 조건에 따라 데이터를 업데이트 하는 단계가 상대적으로 간단해서 배우면서 신기하고 편리했다. 관련 기능을 공부하면서 D3.js랑 엮어서 실제 프로젝트에 반영하기도 했다.
역대 검사장 네트워크 분석은 버튼을 클릭할 때마다 점이 움직이면서 그룹별로 분리되는 과정을 보여주는데, Vue.js로 버튼을 클릭할 때마다 조건에 맞는 데이터를 찾게 하고 d3.js로 점의 움직임을 구현했다.
기타
Datatable.js
데이터 시각화 외에 분석한 데이터 전체를 보여줘야 하는 경우도 있었다. 그럴 땐 table 라이브러리를 이용해 간단하게 만들었다. 각 항목명을 누르면 오름차순/내림차순으로 정렬이 되기도 하고, 데이터가 많으면 페이지를 나눠 보여주기도 했다.
Swiper.js
웹의 기본 동작이 스크롤이라면 모바일에서 기본 동작은 손가락으로 화면을 옆으로 넘기는 동작(=스와이핑)이다. swiper.js는 이 스와이핑을 웹페이지에서 구현하는 것을 도와주는 라이브러리다. 모바일에서 페이지를 옆으로 넘기며 서울의 인구변화를 사진으로 볼 수 있는 인터랙티브 페이지를 제작하기도 했다.
AOS (Animation On Scroll)
이 라이브러리는 이름 그대로 스크롤 애니메이션 구현을 도와주는 라이브러리다. 스크롤의 움직임을 감지해 특정 위치에 도착했을 때 각 요소에 애니메이션을 부여한다. 유기동물 시각화를 제작할 때 이 라이브러리를 활용해 스크롤을 내릴 때마다 유기동물 이미지가 등장하도록 만들었다.
위에서 언급한 라이브러리말고도 수많은 라이브러리가 있고, 라이브러리를 활용하지 않고도 만들 수 있는 방법도 많다. 다만 그동안 여러가지를 만들면서 처음에는 부족한 부분을 메꾸기 위해 어떤 기술을 공부할 지 고민했다면, 점점 공부만큼이나 관련 기술을 제작에 어떻게 활용할 수 있을 지에 대한 고민도 많아진다. 결국 기술을 공부하는 이유는 내가 만들고 싶은 시각화를 가장 적합한 형태로 구현하기 위함이니까.
위에서 언급한 사례 링크
'박근혜-최순실 게이트' 네트워크
한국 외래생물 현황 '종의 종말'
유기동물 시각화 '유기동물을 부탁해'
전국 범죄 데이터 시각화 '2016년 범죄여지도'
역대 검사장 네트워크 분석
메트로폴리스 서울의 탄생과 붕괴
