주니어 개발자의 경험기 [2편 - JavaScript 시각화 라이브러리]

이번 포스팅에서는 약 2달 반동안 프로젝트를 진행 하면서 처음 접했던 JavaScript 프레임워크 및 라이브러리 소개 중 2편 

 JavaScript 라이브러리인 C3, Dagre-D3, BigScatterChart에 대한 내용을 다루려고 한다.

이전 포스팅은 주니어 개발자의 경험기 [1편 - AngularJS] 을 참고 하기 바란다.

이번 편은 JavaScript 시각화 라이브러리이다. 시각화 라이브러리는 HTML5의 SVG를 이용한것과 Canvas를 이용한 것으로 나눠진다. SVG를 이용한 라이브러리로 잘 알려진 것은 D3.js가 있다. 프로젝트에 내가 사용한 라이브러리는 SVG를 이용하고 D3.js를 기반으로 한 C3.js 라이브러리와 Dagre-D3.js 라이브러리 그리고 Canvas를 이용한 BIgScatterChart.js 라이브러리 였다. 각 라이브러리를 살펴보기에 앞서 SVG와 Canvas의 차이점에 대해 잠깐 짚고 넘어 갈까 한다.

	Canvas	SVG
그래픽 시스템	픽셀 기반의 즉시 모드 그래픽 시스템	모양 기반의 유지모드 그래픽 시스템
이미지 처리방식	Bitmap (해상도 의존적)	Vector (해상도 독립적)
DOM	존재하지 않음 (DOM Control 불가)	존재함 (Script로 Control 가능)
외부 이미지 편집	Bitmap image 편집 용이	Vector image 편집 용이
성능저하 요인	높은 해상도의 이미지를 사용할 경우	이미지가 복잡해질 경우
Animation	Animation API가 없으므로 Script의 Timer를 사용	높은 수준의 Animation 지원
외부이미지로 저장	jpg, png등으로 저장가능	불가능
적합한 서비스	Graph 구현, Game, 실시간 데이터 출력, 동영상 조작	Graph구현, 매우 세밀한 해상도를 지원하는 UI 및 Application
적합하지않은 서비스	Standalone Application UI	Game, 실시간 데이터 출력

[표] SVG vs Canvas  (출처 - http://www.nextree.co.kr/p9307/)

SVG와 Canvas의 차이점에 대해 간단히 살펴 보았다. 그럼 다시 본론으로 들어가 C3.js 라이브러리에 대해 살펴 보자.

1. C3.js

C3.js 는 앞서 말한바와 같이 D3.js를 기반으로 되어 있는 차트 라이브러리 이다. 프로젝트에 해당 라이브러리를 채택하게된 배경은 단순했다. 워낙에 많은 차트 라이브러리가 존재하고 있기 때문에 어떤걸 선택해야될까 고민을 하다가 Google에 'Chart Library' 라고 검색을 해보았다. 많이 쓰이면 그만큼 사용자들의 만족도가 높다고 생각했고, C3.js 라이브러리는 첫페이지에 검색되어 보여졌다. 물론 많이 쓰인다는 이유만으로 선택 한 것은 아니었다. 내가 구현하고자 하는 부분을 충분히 구현 가능한가? 라는 질문에 대해 홈페이지에 있던 Reference를 통해 충분히 확인 해보았다. 당시 내가 원하는 조건은 다음과 같았다.

1. JSON 타입의 Data를 표현 할 수 있어야 된다.

2. 디자인적인 면에서 커스터마이징이 가능할 것 

3. 이벤트 동작을 지원 가능할 것

4. 마우스 오버시 Tooltip으로 정보가 표시될것 

원하는 조건을 충족할 만한 라이브러리 였기에 최종적으로 채택을 하였다. 뿐만아니라 MIT 라이센스라는 점도 선택에 한몫 거들었다. 또한 C3의 장점중 하나로 얘기 하고 싶은 것은 다양한 Example을 제공 한다는 것이었다.

C3.js는 Line chart, Bar chart, Scatter Plot, Pie chart, Donut chart, Gauge chart 등 여러 종류의 차트를 위한 api 및 예제를 제공 하고 있고, Axis, Data, Grid, Region, Interaction, Legend, Tooltip 등과 관련된 설정 및 제어가 가능하다. 공식 홈페이지의 Examples 를 통해 해당 부분에 대한 예제를 직접 수정해보며 적용해 볼 수 있다. 그외에 좀더 상세한 부분은 Reference를 참고 하면 된다. 커스터마이징 하는 것이 어렵지 않도록 되어 있고, Google에도 C3.js에 관련된 많은 정보가 있기 때문에 어렵지않게 원하는 모습의 chart를 그려낼 수 있을 것이다.

그럼 C3.js를 이용한 예제를 한번 살펴보자.

해당 예제는 공식홈페이지에서 제공하는 Example 몇개를 합친 것이다.

차트 라이브러리의 경우 다른 라이브러리도 살펴 보았지만 크게 차이가 나지 않는 선에서 대부분 사용자들의 구미에 맞게 구현이 되어 있다. 다만 개인적인 의견으로 C3의 경우 예제가 잘되어 있어 좀더 쉽게 접근이 가능해 좋았던것 같다.

2. Dagre-d3.js

다음은 Dagre-d3.js 라이브러리를 살펴 보겠다.

해당 라이브러리 역시 D3.js 를 기반으로 되어 있고 Chris Pettitt이라는 사람이 개발한 오픈소스 라이브러리로 Directed Diagram Graph를 표현 할 수 있다.

진행했던 프로젝트에서 Server Map이라고 불리우는 부분을 표현 하기 위해 사용하게 되었는데, 모티브가 된 것은 Naver Pinpoint의 Server Map 이었다. 오픈 소스인 Pinpoint에서 사용한 라이브러리를 사용 하면되지 않을까 하고 처음에 생각하였지만 Go.js라는 유료 라이브러리를 사용했다는 점에서 대체할 수 있는 다른 라이브러리를 찾게 되었다. 라이브러리 선택 조건은 다음과 같았다.

1. 자동으로 Layout을 구성할 수 있을 것

2. Directed Graph 즉, Node간 연결 관계인 간선이 방향성을 가지는 화살표로 표현이 가능할 것

3. Node에는 이미지와 Label을 간선에는 Label을 입력 할 수 있도록 지원 가능 할 것

4. 무료 오픈 소스이면서 라이센스 조건이 이용하기 편리할 것

열심히 구글링을 한 결과 Dagre-d3.js를 알게 되었고 선택하게 되었다. Dagre-d3의 Auto Layout 기능은 Graphviz의 방식을 이용해 구현한 라이브러리이다. 특징을 살펴 보면 자동으로 레이아웃을 구성해 주고, Node에 이미지 삽입이 가능하며, Node와 간선의 스타일링이 가능하고, zoom 및 마우스 이벤트 제어가 가능하고, Node 간 Grouping 이 가능하다. 해당 라이브러리를 처음 사용할 때는 그다지 불편함을 발견 하지 못하였다. 

하지만 프로젝트를 진행 하면서 큰 단점이 발견 되었는데 그건 Grouping 하여 표현할 경우 혹은 일반적인 경우에도 Node수가 많아 지면 Auto Layout 기능으로 인해 오히려 알아보기 힘들게 모양이 변형 되는 것이었다. 단순한 Diagram 을 표현할 때는 좋았지만 Data가 많아지고 복잡해지자 오히려 해당 기능이 독으로 작용을 하였다. 해당 이슈를 해결할 방법을 찾으려 노력했지만 라이브러리 개발자는 잠정적으로 commit을 중단하였고 결국은 해결하지 못하였다.

그 밖에도 나같은 초보 개발자에게는 Example이 많은 도움이 될텐데 기본적인(?) 기능의 예제만 Demo로 제공되어 있어서

활용하기가 조금은 힘이 들었다. 프로젝트를 진행하면서 Node를 클릭하는 이벤트 라던지 클릭 시 관련된 간선과 노드의 CSS를 조작한다던지 하는 부분은 직접 조작하는 코드를 추가 하였다. 이런 부분은 내가 아직 역량이 부족하여 라이브러리를 제대로 이해하지 못했거나 라이브러리 내의 기능을 발견하지 못한걸수도 있다. 

해당 라이브러리로 인해 프로젝트에 난항을 겪었던것은 사실이지만 어찌되었든 처음부터 끝까지 함께한 아래 Dagre-d3.js 라이브러리의 예제 샘플을 한번 살펴보도록 하겠다. 해당 예제는 내가 직접 프로젝트에 사용했던 코드의 일부분만 빼내어 작성한 것이다. 노드를 클릭했을 경우 해당 노드와 노드에 연결된 간선의 색이 하이라이트 되고 toggle방식으로 작동이 된다.

Dagre-d3의 Grouping기능 (cluster)은 썩 추천할만 하지않지만 예제와 같이 기본적인 모습의 graph를 표현 하기에는 나쁘지 않은 라이브러리라고 생각한다. 라이브러리에 대한 업데이트가 이후 언제 이뤄질지 장담할 수 없기때문에 더이상의 발전은 기대할 수 없는 실정이다. 해당 라이브러리를 사용하고자 한다면 이 점을 유의해야 할것 같다.

3. BigScatterChart.js

마지막으로 소개할 라이브러리는 Canvas를 기반으로한 BigScatterChart.js 라는 라이브러리이다. 해당 라이브러리는 Naver의 개발팀이 개발하여 오픈소스로 공개한 라이브러리이고 이름에서도 유추해 볼 수 있듯이 일반 ScatterChart보다는 많은 양의 Scatter를 표현하기위해 개발되었다고 한다. 개발 목적은 Naver의 Pinpoint에 적용할 Scatter Chart라이브러리를 찾다가 본인들의 요구조건에 적합한 라이브러리가 존재하지 않아 개발하게 되었다고 쓰여있다. 해당 라이브러리는 Canvas를 기반으로 개발되었는데 그 이유는 개발자의 요구조건에 쓰여있었다. 포스팅 초반에 살펴보았듯이 SVG의 큰 단점중의 하나는 많은 양의 Data를 렌더링 하게될 경우 속도가 현저히 느려지는 것이다. 해당라이브러리는 수십만개의 점을 표현가능해야 된다는 요구조건을 가지고 있었기 때문에 SVG로는 그 문제점을 해결할 수가 없었다고 한다. 기본적인 배경 소개는 이 정도로 하고 그렇다면 BigScatterChart.js가 가지고 있는 특징이자 강점을 살펴보자. 

1. 수십만개의 Data표현에 적합하다. (대략 50만개의 Data 렌더링 시 약 6초 소요)

( D3.js의 경우 대략 8만개의 Data 렌더링 시 약 33초 소요)

2. 차트영역에서 Drag & Drop으로 셀렉이 가능하다.

3. 셀렉된 부분에 담긴 Data를 검색할 수 있다.

4. 상단에 Type바가 존재하며, 이동 및 toggle이 가능하다.

내가 파악한 특징은 위와 같다. 그 밖에 내가 파악하지 못한 기능들이 더 있을 수도있겠지만, 4가지 특징만으로도 꽤나 매력있다고 생각한다. 해당 라이브러리의 경우는 원청의 요구사항으로 BigScatterChart를 사용해달라고 하여 사용하게 되었었다. 덕분에 좋은 라이브러리 하나를 더 알게 되었고, 사용해볼 수 있는 좋은 계기가 되었다. 

아래는 BigScatterChart라이브러리의 Example 예제를 jsfiddle로 옮겨 작성한 것이다.

이번 프로젝트를 준비하고 진행하면서 라이브러리 선택의 중요성을 새삼 깨달았다. 요구 조건에 맞는 라이브러리를 선택하는 것도 중요하지만 많이 쓰이고 있는 라이브러리는 그 만큼 사용하기 편했었고 그렇지 않다 하더라도 개발자의 능력에 따라 충분히 부족한 부분을 구현함으로써 채워 나갈수도 있는걸 느꼇다. 새로운 라이브러리들은 끊이 없이 쏟아져 나오고있다. 그 라이브러리가 좋다 나쁘다를 판단하기 보다는 내가 원하는 조건에는 맞는지 사용하는데 어려움이 없을지를 판단할 수 있다면 좋을 것 같다고 느꼇다. 물론 그러려면 많은 라이브러리들을 직접 경험해보고 판단하기 위한 안목(?)을 길러야 할 것이다. 

나와 같은 주니어 개발자라면 될 수 있으면 많은 라이브러리들을 사용해보고 직접 느껴보는 것이 좋은 방향이라고 생각한다. 또한 나와 같이 비록 부족하더라도 블로그가 되었든 흔적을 남겨놓는 다면 좋은 자산이 될 것같다. 해당 포스팅을 작성하면서 JSfiddle을 이용해보며 새로운 경험도 하고 사용했던 라이브러리를 다시 한 번 조사 하면서 프로젝트 준비때는 놓쳤던 부분이라던지 잘못 이해했던 부분을 깨달을 수도 있었던 것 같다. 해당 포스팅에는 주관적인 생각이 많이 담겨있고, 주니어 개발자의 수준에서 작성되었기에 잘못된 부분이 있을 수도 있다. 잘못된 부분에 대한 지적은 적극 환영 하고, 이 글을 보는 사람들에게 조금이나마 도움이 되었으면 한다.