차트 라이브러리를 알아보자

데이터 3법이 개정되고, D(Data).N(Network).A(A.I) 산업이 부각되면서, 빅데이터 관련 차트 라이브러리의 관심이 높아졌다. 이에 따라 "데이터 시각화"영역이 프론트 개발자의 필수항목인 시대가 되었다. 아직도 chart.js정도만 알고 있다면 이번 포스팅을 통해 분야에 맞는 차트 라이브러리를 고민해보자.

1 속도

실시간으로 변하는 데이터를 시각화하려면 '속도'가 가장 중요하다. 시각적인 그래픽 요소도 중요하지만 데이터를 제대로 반영하지 못하는 그래픽 차트는 의미없다. 

*uPlot.js 『https://github.com/leeoniya/uPlot』

속도면에서 엄청나게 앞서있는 차트 라이브러리는 단연 uPlot이다. 현재 많이 사용되고 있는 라이브러리들 중에서 uplot은 압도적인 벤치마크 퍼포먼스를 보여준다. 또, uPlot은 용량이 작기 때문에 버벅거림 없이 웬만한 사이트에서 돌아간다. 

단, 그래픽적인 면에서 뭔가 샤방(?)한 느낌은 기대하기 힘들다. 정말 간단한 막대곡선과 꺾은 선 그래프 형식위주로 보여주기 때문에 거시적 자료에 사용하기보다는 미시적으로 변하는 자료에 접목하기 좋다. 

*Flot.js 『https://www.flotcharts.org』

uPlot이 없었다면 속도의 최고 자리는 Flot이다. Flot은 제이쿼리를 기반으로 제작되었으며, 상당히 오래된 라이브러리다.(2007) 현재 업데이트가 거의 이뤄지고 있지 않으며 빠른 속도와 동시에 기본적인 그래픽 수준의 차트 제작용으로 적당하다. 딱히 특색없다. 그래서 사용하기에 무난하다.

그러나 실시간 데이터를 처리한다면 Flot은 딱히 uPlot보다 속도가 떨어지며, 그렇다고 디자인 요소가 크게 차이나는 것도 아니다. 

*jqChart.js

jqChart.js역시 Flot.js와 같이 오랜 역사를 갖고 있다. 

jqChart는 과도한 그래픽을 사용하지 않고, 단색계통으로 차분한 느낌이다. 다소 보수적인 분야(의학, 교육, 법)에 어울리며, 클래식한 분위기를 낼 수 있다. 게다가 웬만한 기능은 다 갖추고 있는데, 아래와 같이 실시간으로 데이터를 처리할 수 있는 다이나믹 차트 기능까지 가능하다.

모던하지는 않지만 깔끔하면서 빠른 속도를 원한다면 jqChart는 아직도 충분히 사용가치가 높다.

 

2 대중성

대중적이라는 말은 '가성비'와 통한다. '가성비'라는 의미는 다소 주관적일 수 있는데, 객관성을 유지하기 위해서 다음 2가지 조건을 기준으로 선정했다. 

"오픈소스" + "다양성"

아무리 그래픽이 우수하고, 다양한 기능이 있더라도 라이센스 비용이 1~2 백만원이라면 대중적이지 못하며, 또한 기능이 너무 떨어져도 안 된다.

*chart.js 『https://www.chartjs.org/』

차트 라이브러리를 찾아보려고 구글링을 했을 때, 가장 빨리 검색되는 라이브러리가 'chart.js'가 아닐까한다. chart.js는 최근(2020년) 대규모 업데이트가 진행된 듯하다. 

2~3년 전, chart.js를 사용했던 기억이 의심될 정도로 변한 모습이다. 

시각적 효과를 많이 첨가했기 때문에 uPlot.js나 Flot.js에 비해 속도는 다소 떨어지는 모습이지만 오픈소스의 그래픽을 감안한다면 너무나 감사한 수준이다. 다이나믹 기능을 따로 제공하지 않은 점은 아쉽지만 Ajax를 활용한다면 실시간 차트도 충분히 제작할 수 있다. 그렇지만 chart.js의 가성비를 능가하는 차트 라이브러리가 남아 있다.

3 기능성(Luxury)

기능성의 또 다른 이름은 Luxury다. 기능이 다양하다는 의미는 안정적으로 관리가 되어야 한다. 또, 자바스크립트의 대표적인 프레임워크(vue, react, angular)와 확장성까지 갖춰야 해서 오픈소스로 지원되지 않는다. 프리랜서용으로는 대개 10만원 / 1년 정도이며, 기업용은 300 ~ 1,000만 원으로 다양하다. 이 중에서도 가장 럭셔리한 차트 라이브러리는 Amcharts이다.

*Amcharts 『https://www.amcharts.com/』

amcharts는 잘 나가는 개발자라면 한번 질러보고 싶은 차트 라이브러리다. 

차트라고 해서 일반적인 막대, 꺾은선, 원형, 등을 생각하면 오산이다. Amcharts는 최근 트랜드와 이슈에 맞는 테마를 업데이트하고 , 개발자는 돈을 내고, 그대로 이용하면 된다. (Sass기능 제공)

*Zingchart『https://www.zingchart.com/』

Zingchart는 SVG그래픽을 기반으로 하고 있다.

그래픽을 보면 일러스트의 느낌이 강하게 묻어난다. Zingchart역시 추가비용으로 Sass기능을 제공하며, 프리랜서 라이센스 비용은 9~11만원 선이다.

*Highcharts 『https://www.highcharts.com/』

하이차트 역시 이름처럼 고품격을 지향한다. Amcharts와 큰 차이가 없으며, 3D까지 지원하는 점이 특징이다. 또한 하이차트는 간트차트를 지원한다는 점 역시 특장점이다. 

Amcharts, Highchart, Zingchart와 같은 라이브러리는 라이센싱 비용을 지불했을 때, DB까지 지원해주기 때문에 투자 개념으로 생각할 수 있다. 개발자의 개발영역이 줄어드는 대신 마케팅에 좀더 비중을 두고, 광고를 통한 수익창출이 가능하기 때문이다.

  

4 개성

*Apexcharts.js 『https://apexcharts.com/』

apexcharts는 콘텐츠 어플에 사용하기에 적합한 디자인으로 톡톡 튀는 스타일이다. apexcharts는 사실상 무료로 사용할 수 있으며, 상업용으로 사용할 경우에는 커피 한잔 라이센스를 구입하면 될 듯하다.(구입하지 않더라도 상관없다)    

*dygraphs.js 『http://dygraphs.com/index.html』

dygraphs.js는 오픈소스 차트 라이브러리 중에서 가장 기능을 갖추고 있다. 차트명에 있는 'dy'라는 철자가 'dynamic'을 의미하는 만큼 역동적인 그래프를 만들어내기에 적합하다. dygraphs.js은 사용자의 이벤트를 차트에 반영하는 기능을 제공하며, 재미있는 데이터 어플을 제작하기에 안성맞춤이다.  

*LightingChart.js

LightingChart.js는 과학계 데이터를 차트로 제작할 때 적합히다. SF적인 느낌이 독특하며, 2019년 디자인 트랜드였던 다크모드를 잘 반영하고 있다. 하지만 상업적으로 이용하려면 연간 대략 45 만원 정도의 비용을 지불해야 한다.

결론

전체적으로 정리해보면 크게 오픈소스와 상업용으로 분류할 수 있는데, 오픈소스 라이브러리만 사용하더라도 데이터 시각화는 충분하다. 

*기능성 : apexcharts.js

*사용자 반응 : dygraphs.js 

*속도 : uPlot.js, Flot.js

*디자인 : chart.js

기획자가 아닌 이상, 비용을 추가하면서 Sass, 피드백 기능을 구입할 필요는 없어보인다. JS프레임워크를 사용할 수준의 개발자라면, 프로젝트 분야와 데이터의 성격에 따라 위의 오픈소스 차트를 사용하는 편을 추천한다.