현재 회사에서 진행하는 프로젝트로 데이터 업로드, 전처리, EDA, Modeling, Simulation 등의 기능을 제공하는 기능 웹 기반의 머신러닝 솔루션을 개발하고 있습니다.
Reference로 찾아봤던 비슷한 유형의 어플리케이션은 웹 기반의 Peltarion, SAS, 로컬 앱 기반의 JMP이 있습니다.
현업에서는 10만 ~ 100만줄 이상의 데이터를 다루는 것이 일반적이기 때문에, 결론적으로는 이러한 대용량 데이터를 다룰 수 있도록 Optimize를 해야하겠지만, 개발 초기 단계에서는 개발 편의를 위해서 10MB 이하의 작은 데이터를 대상으로 테스팅을 해왔습니다. (물론 초반에 제가 경험이 부족해서 웹 브라우저에서 어느 정도 용량을 Handling 할 수 있는지 가늠이 안 가서 일단 겁 없이 시작한 것도 있습니다)
하지만 기능 개발이 어느정도 이루어진 지금 시점에서 점점 큰 데이터를 실험해보기 시작했고, 여러 우여곡적을 겪으면서 웹에서 큰 용량을 다루는것이 생각보다 간단한 문제가 아니란것을 느꼈습니다...ㅎㅎ 이 게시물에서는 제가 겪은 여러 시행차오들과 현재 어떤 해결책에 정착해있는지 소개하고자 합니다.
Apex Chart
우선 첫번째로 봉착했던 문제는 Apex Chart를 사용하는 것에서 왔습니다.
Apex Chart는 Chart.js나 Plotly 보다는 상대적으로 신생 Plotting Library이며, 깔끔한 Documentation과 세련된 UI와 Interaction을 제공하는것이 마음에 들어서 사용하기 시작했었습니다.
Apex Charts 공식 Documentation
물론, 10MB 이하의 저용량 데이터를 Rendering 하는 것은 당연히 큰 문제가 되지 않았지만, 이 정도 저용량 다루는 것이라면 월등하게 빠른 속도를 보여야 할텐데 큰 속도감을 보여주지는 않았습니다. (나중에는 훨씬 더 큰 용량의 데이터를 다뤄야 할텐데, 지금 빠른 속도를 보이지 않는다면 추후 문제가 될 거란것을 암시합니다...)
제가 초반에 데이터 용량에 대한 감이 없어서 간과한 사실이지만, 화려한 UI와 Interaction은 더 큰 메모리를 소모하는 Trade-off기 때문에, 큰 데이터를 다뤄야 하는 상황에서는 부적합하다고 할 수 있습니다.
Apex Chart의 장점들 (잘 정리된 Documentation, 활성화된 Community, 세련된 UI/Interaction)은 이 프로젝트에서 필요한 요구사항에서 후순위인것들이기 때문에 포기하고 다른 Chart UI를 찾아나섰습니다...
- UI가 매우 세련되지 않더라도 높은 Rendering Performance
- JMP에서 제공하는 Grouping 기능
- 데이터를 zoom, select, 등을 할 수 있는 Interactiviy
Plotly.js
Plotly.js는 한번에 체감할 수 있을 정도로 Apex Chart보다 빠른 Rendering Speed와, 적은 메모리를 소모함으로써 동일한 데이터이지만 버벅이지 않는 performance를 보여주었습니다.
그리고 ApexChart에서 제공했던 기능을 거의 다 Plotly에서도 제공하고, 특히 이번 프로젝트에서 필요한 기능 중 하나인, 여러 그래프를 분할해서 시각화할 수 있는 ‘Subplot’ 기능을 제공했습니다.
또한, 비록 Apex Chart보다 제공하는 기능이 훨씬 많고 연계되어서 사용되는 Library들이 많음으로, 상대적으로 복잡한 Documentation 때문에 나름의 Learning Curve가 있기는 했지만 감내하지 못할 수준은 아니었습니다.
WEB GL
하지만, Plotly.js로도 프로젝트에서 요구하는 대용량 데이터를 렌더링하는데에는 무리가 있었습니다. 200MB 정도 데이터의 feature들을 렌더링하는 경우, web이 crash되지는 않지만 시간도 꽤 소모되고 (약 15초), 화면에 렌더링 된 이후에도 화면이 버벅여서 UX에 부정적인 영향을 끼쳤습니다.
그래서 찾게 된 방법이 Plotly에서 제공하는 WebGL (Web Graphics Library)입니다. WebGL이란 Javascript의 low level API로 웹 브라우저에서 2D 밎 3D를 렌더링할 때 친화적인 라이브러리 정도로 이해하고 있습니다. Plotly에서 사용하려는 경우 코드에 큰 변화를 줄 필요도 없이, 만약 scatter 그래프를 사용한다면 scattergl이라고 용어만 바꿔주는것만으로 WebGL로 렌더링됩니다.
이를 적용한 결과, 100MB 용량의 그래프 컬럼을 렌더링하려고 할 때 10초 → 5초 정도로 꽤 비약적인 속도 감소가 있었으나, 이러한 차이는 이후 GB 단위의 그래프를 렌더링할때는 크게 도움이 될 것 같지 않았습니다.
http://plotly.com/javascript/webgl-vs-svg/
Datashader
여기까지 많이 돌아온것같지만 그래서 현재 최종적으로 찾게 된 라이브러리가 Datashader입니다.Datashader의 가장 큰 특징은 아무리 큰 데이터여도 해당 데이터를 Image로 변환해서 제공해준다는 것입니다. million 단위의 용량도 단 5-10초안에 렌더링된다는 사실이 획기적으로 다가왔습니다.
구글링해보면 여러 Demo가 있는데 10M 이상의 데이터도 5초-7초 사이에 렌더링하는 믿기 힘든 속도를 보여줍니다.
다만 Datashader는 Image를 제공하기 때문에 Interactivity를 추가하기 위해서는 Holoviews, Bokeh,Plotly 같은 라이브러리와 연동해서 사용해주어야 합니다. 다행히, 이러한 시너지, 연계가 잘 설게되어 있는지 보편적으로 이렇게 섞어서 사용하는듯합니다.
하지만 다행 중 불행?은 zoom이나 panning등은 가능하더라도 데이터를 Select하는 기능까지는 어려울 듯 한데, 혹시 가능할지에 대한 여부는 아직 찾지 못했습니다. 애초에 GB 단위의 데이터를 그래프로 렌더링하고, Point를 Select까지 할 수 있는 것이 비현실적인지 모르겠습니다만, 이에 대해서 더 스터디가 필요할 것 같습니다.
다른 게시물에서 앞서 언급한 각각의 Library를 단독으로 다루어보도록 하겠습니다.
