이전 포스트에서는 3차례에 걸쳐서 ScyllaDB vs. Cassandra Benchmark를 테스트해봤다. 3번에 걸친 테스트에서 ScyllaDB에서 주장하는 10배의 성능 향상을 직접 확인하지는 못했다. 그렇다고 ScyllaDB가 홈페이지에서 정확하지도 않은 내용을 주장하는 것은 아니다.

테스트 환경이 제한적이다보니 10배의 성능 향상을 확인 못한 것이지 ScyllaDB에서 테스트한 것과 동일한 사양으로 테스트를 진행한다면 충분히 가능할 것이라 생각한다.

중간 규모의 서비스에서는 Cassandra를 운영한다 하더라도 시스템 사양을 24Core/128Gb로 맞추기는 힘들다. 그나마 적절한 수준이 8~16Core/32Gb일 것이고 현실적으로는 8Core/16Gb정도의 사양으로 운영하게 될 수 있다.

사내 개발장비를 통해서 진행한 테스트(ScyllaDB vs. Cassandra benchmark 따라하기 2 : 사내 개발장비 테스트)가 현실과 가장 유사할 수 있다.

사내 개발장비 테스트에서 보여준 ScyllaDB의 성능은 "그럭저럭한 Request 부하에서는 Cassandra에 가까운 성능을 보여준다"고 할 수 있다. 하지만 AWS를 통한 테스트(ScyllaDB vs. Cassandra benchmark 따라하기 3 : AWS 테스트)에서 확인할 수 있었던 것 처럼 "Request가 증가할수록 ScyllaDB는 Cassandra보다 더 좋은 성능을 보여준다"는 것을 확인할 수 있었다.

지금까지 확인된 사실을 바탕으로 ScyllaDB와 Cassandra의 성능을 짐작해보면 다음과 같이 표현할 수 있다.

<그림 1. Cassandra와 ScyllaDB의 초당 Request 증가에 따른 TPS 변화 예상>

적절한 시스템 사양만 갖춘다면 "Redis의 속도를 가진 Cassandra"를 갖는 것이 불가능하지만은 않다고 보인다.

<그림 2. Redis의 속도를 가진 Cassandra>

만약 현재 Cassandra를 운영하고 있는 경우라면 2016년 1월에 ScyllaDB GA버전이 나온 후 ScyllaDB로 교체하는 것을 고려해볼만한 가치가 있는 것 같다. 

그리고 rowkey, column name 등이 정렬된다는 특징을 이용하면 Message Queue, Time Series DB, CEP 등을 구현하는데 매우 유용할 수 있을 것 같다.

ScyllaDB의 Benchmark 따라하기

지난 포스팅에서는 VirtualBox, 사내 개발장비에서 각각 ScyllaDB와 Cassandra의 성능을 테스트해보았다. 역시나 ScyllaDB 홈페이지에 나와있는 성능 10배 향상은 확인할 수 없었다. 게다가 사내 개발장비에서 테스트한 결과에서는 Cassandra가 약간이나마 더 좋은 성능을 보여줬다.

하지만 앞에서 진행한 2번의 테스트는 아직은 정확한 성능을 측정했다고는 할 수 없다. 부하를 주는 클라이언트가 1대뿐인 환경에서 진행되었고 시스템 사양도 실제 서비스에서 사용하기에는 무리가 있을만하기 때문이다.

이번에는 AWS에서 ScyllaDB와 Cassandra를 테스트해보도록 하겠다. 각 DB의 구성은 Single Node로 구성해서 테스트했다.

테스트에 사용할 EC2 Instance는 다음과 같다.

DB서버(ScyllaDB/Cassandra)

• m3.xlarge : vCPU=4, 메모리=15G
• Volume : m3.xlarge에서 기본 제공되는 SSD 사용

• t2.micro : vCPU=1, ECU=변수, 메모리=1G

ScyllaDB는 앞서 진행했던 사내 개발장비에서보다 낮은 성능을 보여주고 있다. AWS의 Instance Disk I/O 성능이 사내 개발장비보다 낮기 때문에 당연한 결과일 수 있다.

2) 읽기 테스트

VirtualBox 테스트와 마찬가지로 데이터를 먼저 채워넣은 후 읽기 테스트를 진행했다.

읽기 테스트는 다음의 명령은 다음과 같다.

결과는 다음과 같다.

3) 읽기/쓰기 테스트

테스트에 사용한 명령은 다음과 같다.

결과는 다음과 같다.

결과를 종합해서 살펴보면 다음과 같다.

<표 1. AWS에서의 benchmark결과>

m3.xlarge가 vCPU가 4개뿐이어서 큰 기대를 하지는 않았다. 그런데 결과는 기대 이하로 Cassandra가 더 빠르게 나왔다.

이정도까지 했으면 "ScyllaDB가 결과를 너무 과대포장했네~"라고 생각할 수 있을만 하다. 그런데 테스트 중 측정된 Load Average를 보면 좀 더 테스트가 필요하다는 필요성을 느낄 수 있다.

ScyllaDB와 Cassandra 테스트 중 측정된 Load Average는 다음과 같다.

<표 2. 테스트 중 측정된 Load Average>

만약 이렇다면 부하 테스트 클라이언트의 수를 늘렸을 때 ScyllaDB는 더 많은 일을 할 수 있을 것 같다. 물론 ScyllaDB는 Architecture상 Load Average가 크게 올라가지 않을 수 있다.

:: m3.xlarge DB Server, 부하테스트 클라이언트 10대로 테스트 ::

2) 읽기 테스트

결과는 다음과 같다.

3) 읽기/쓰기 테스트

결과는 다음과 같다.

결과를 종합해서 살펴보면 다음과 같다.

<표 2. AWS에서 Client가 10개인 경우의 benchmark결과>

부하테스트 클라이언트를 1대로만 했을때는 Cassandra의 약 80%의 성능 정도만 보이던 ScyllaDB였다. 그런데 클라이언트를 10대로 하니 Cassandra의 2배 이상의 성능을 보여주고 있다.

특이한 점은 Cassandra의 경우 부하를 1대에서 주는 경우와 10대에서 주는 경우 읽기 성능이 크게 달라지지 않았다. 반면에 ScyllaDB는 쓰기 성능과 비슷한 비율로 증가한 것을 알 수 있다.

이번 글에서는 E2E-Monitor 개발에 사용했던 웹기술들에 대해서 적어 볼까합니다.

기술적인 내용 보다는 해당 기술들을 사용하기 전까지 어떤 고민들을 했고, 그 고민들을 해결하기 위해서 어떤 기술들을 살펴봤는지, 그리고 최종적으로 왜 해당 기술을 사용하기로 결정했는지 등의 도입 배경 및 사용 후 소감 등을 중점적으로 다루도록 하겠습니다.

E2E- Monitor에 사용했던 웹기술들

E2E-Monitor 중에서도 운영자가 실제로 사용하게 되는 User Client는 Web Application으로 구현되었습니다.

개발에 사용했던 기술들은 다음과 같습니다.

1. jQuery
2. AngularJS
3. RequireJS
4. Bootstrap (for AngularJS)
5. D3.js
6. Dagre-D3
7. C3
8. Big Scatter Chart

1. jQuery

jQuery는 워낙 유명한 JavaScript Framework이기 때문에 따로 설명이 필요없을 것 같습니다.

이번에는 주로 간단한 DOM 제어 기능과 애니메이션 효과등을 구현하는데 사용했습니다.

기본 Framework로 사용한 AngularJS에서도 jqLite(jQuery 호환 API)를 지원합니다만, jqLite 대신 Original jQuery를 사용하는 것이 프로젝트를 진행하는게 더 효율적이겠다고 판단했습니다. 

아무래도 필수 기능 몇가지만 지원하는 jLite 보다는 jQuery의 모든 기능을 다 쓸 수 있는 환경이 개발에는 더 도움이 될것 같았고, jQuery 기반의 UI Component들을 사용해야 되는 상황이 있을 수도 있겠다고 생각했었던 것 같습니다.

결과적으로는 역시 jQuery를 사용하기로 했던 것이 좋은 결정이었다고 생각됩니다.

지금 코드를 보면 jQuery 구문이 사용된 코드가 실제로는 그렇게 많지는 않습니다.

하지만 jQuery로 작성된 부분을 AngularJS나 다른 방식으로 처리를 해야 했다면 지금 보다 훨씬 더 복잡한 코드가 되지 않았을까 생각합니다.

2. AngularJS

이번 프로젝트를 진행하면서 처음으로 접했던 Javascript Framework 입니다.

(사실 jQuery와 D3, Bootstrap 말고는 다 처음 접한 기술들 입니다.)

고객사의  Admin Application이 AngularJS를 기반으로 만들어져 있었기 때문에, 시스템 통합을 위해서는 선택의 여지가 없었죠.

AngularJS는 MVC  또는 MVVM 을 위한 Web Application Framework 입니다.

Data와 View, 그리고 둘사이를 연결해주는 Control를 분리함으로써 Application을 모듈화하고 체계적으로 설계할 수 있도록 도와주는 Library라고 생각하시면 될것 같습니다.

AngularJS에 대한 보다 자세한 기술적인 내용은 저희 개발팀 막내가 작성한 글, "주니어의 개발자 경험기 [1편-AngularJS]"을 참고하시기 바랍니다.

다른 대부분의 IT 기술들도 그렇겠지만 AngularJS를 처음에 접했을 때는 참 쉽다는 인상을 받았는데, 역시 사용하면 할수록, 파고 들면 들수록 어려워지면서도 어느순간 폭 빠져있는 저를 발견하게 되었습니다.

익숙해지기만 한다면, 속된 말로 "떡이 되기 쉬운" Web Application Code를 어느 정도 정리하고 체계화 시킬 수 있는 좋은 Library인것 같습니다. (개발 속도 향상은 덤?)

jQuery와 더불어 Web Application 개발에 꼭 사용해야 될 Javascript Library를 꼽는 다면, 저는 앞으로 AngularJS를 선택하겠습니다.

하지만 Application의 성능이라는 측면에서 본다면, 다수의 접속자를 위한 Web Application에는 적합하지 않은 기술 일 수 있습니다. 

필요한 곳에만 부분 적용하는 것도 가능하긴 하지만, 기본적으로 AngularJS를 기반으로 개발된 Web Application들은 Javascript Engine이 HTML DOM을 실시간으로 생성하는 방식이기 때문에, Core HTML Page보다 느릴 수 밖에 없습니다.

개발 속도와 코드 관리의 효율성을 선택할 것인가, 서비스의 품질(특히 반응속도)를 선택할 것인가를 잘 분석하고 판단한 다음, AngularJS 도입에 대해 고려하는 것이 좋을 것 같습니다. 

3. RequireJS

사실 RequireJS는 프로젝트 중간에 필요에 의해서 사용했다가 마지막 통합 단계에서 RequireJS 때문에 통합이 불가능하게 되면서 다시 모두 걷어낸 Library 입니다. (전문 용어로 삽질이라고 하죠)

RequireJS는 AMD(Asynchronous module definition) 스팩을 실제로 구현한 Library입니다. 

Javascript의 범용성과 표준안을 확립하기 위한 여러 활동 중에서도 Browser 환경(Asynchronous 환경)에 집중해 표준안을 만드는 곳이 AMD라는 곳이구요. 거기에서 내놓은 표준안을 그대로 구현한 Library가 RequireJS입니다.

보다 자세한 내용을 알고 싶으신 분들은 "Javascript 표준을 위한 움직임: CommonJS와 AMD"를 읽어보시는게 좋을 것 같습니다.

프로젝트 중간에 RequireJS를 고려하게 된 이유는 Javascript 파일들의 로딩 순서에 문제가 발생했기 때문입니다.

Web Application을 개발하다 보면 수많은 Javascript 파일들이 생기게 되고 이 js 파일들은 HTML에 <script> 태그를 통해 Web Application에 추가 되게 됩니다.

Browser는 HTML 적혀 있는 순서대로 js 파일 로딩을 시작하게 됩니다.

하지만 네트워크 환경에서는 반드시 시작 순서대로 로딩이 끝난다는 보장이 없죠.

여기서 문제가 발생하게 됩니다. 필요한 js파일의 로딩이 늦어지는 경우가 불특정하게 발생하게 되고, 이런 현상은 바로 에러 상황으로 이어지게 됩니다.

결국 사용자는 잘 되다 안 되다 하는 불안한 Web Application을 접하게 되겠네요.

이런 문제를 해결하기 위해 도입했던 기술이 RequireJS였습니다.

RequireJS는 비동기 방식으로 필요한 js파일을 로딩하는 것이 가능합니다.

각각의 js 파일마다 dependency를 설정할 수 도 있습니다.

RequireJS를 사용하면 HTML문서에서 <script>태그를 이용하는 대신, 필요한 js파일을 Javascript code에서 require() 함수를 이용해 추가할 수 있습니다.

Javascript code에 집중할 수 있으며, 모듈화가 가능하게 되는 잇점을 가질 수도 있습니다.

하지만, 자칫 잘못하면 Callback의 수렁에 빠지는 수도 있으니 조심해야 합니다.

개인적인 느낌으로는 Code 가독성도 상당히 나빠지는 것 같습니다.

프로젝트 마지막에 RequireJS를 다시 모두 걷어 내야 했던, 이른바 "삽질"을 하게 된 이유는 어이 없게도 RequireJS로 인해 통합이 불가능하게 되었기 때문입니다.

RequireJS 기반 Application은 모든 코드가 RequireJS 베이스에서 작성되고 작동되어야 합니다. 그래서 RequireJS 기반이 아닌 Legacy System과는 통합이 불가능 했던 것입니다.

어쩔수 없이 RequireJS를 걷어내는 삽질을 할 수 밖에 없게 됩니다.

그래서 모든 문제가 해결이 되었을까요?

당연히 아니죠....

RequireJS를 도입해서 해결했던 문제(간헐적 에러 발생)가 다시 발생합니다.

결국 해결은 마음에 들진 않지만, 무식한 방법을 사용했습니다. Dependency 가 있는 js 파일들을 하나의 파일로 통합해 버렸습니다. ㅡㅡ;;;;

지금 생각해 보면 lazy load 같은 기법을 사용했으면 깔끔했을 것 같은데, 그 때 당시는 맨붕상태였기 때문에 일단 가능한 쉽고 빠른 방법을 찾을 수 밖에 없었습니다.

그 때 당시의 삽질이 기억나 다소 감정적인 글이 되어 버렸는데, 혹시나 저희와 비슷한 상황에서 RequireJS를 고려하시는 분들이 혹시라도 계신다면 이 글이 조금이나마 도움이 되길 바랍니다. 

4. Bootstrap(for AngularJS)

Bootstrap은 반응형, 모바일 웹앱을 위한 HTML, CSS, JavaScript 통합 Framework라고 소개 되고 있지만, 저는 개인적으로 HTML계의 jQuery 정도의 위치를 가지는 기술이라고 생각합니다.

jQuery의 모토인 "최소한의 Javascript code로 최대의 효과를 내기 위한 Framework (Write less, do more)"에서 "Javascript"라는 단어를 "HTML"로 바꾸면 딱 Bootstrap에 어울리는 설명이 되는 것 같거든요.

실제로 Bootstrap을 사용하면 적은 HTML 코드로 훌륭한 Web UI를 구현할 수 있습니다.

그리고, 미적 감각이 상대적으로 떨어지는 개발자라도 Bootstrap을 사용하는 것 만으로도 어느 정도 그럴듯한(?) 결과물을 얻을 수 있기 때문에, 요즘 Web Application 개발자들 사이에서는 거의 필수 요소가 되어가고 있는것 같습니다.

이번 프로젝트에서도 디자이너의 부제 및 개발 기간 단축을 위해 사용하게 되었는데, AngularJS를 기본으로 사용하는 Application에서는 Original Bootstrap를 사용할 수 없는 문제가 있었습니다.

다행히도 AngularJS용 BootStrap이 따로 있어서 그걸 사용하게 되었는데, 일반 Bootstrap의 사용법과는 약간 다른 부분들이 있기 때문에 익숙해 지는데 시간이 조금 필요했던것 같습니다.

프로젝트 마지막 통합 과정에서 RequireJS와 함께 Bootstrap도 문제가 되었습니다.

RequireJS 같은 경우는 하루 정도의 삽질로 끝이 났지만, Bootstrap 같은 경우는 해결하는데는 사흘이 넘는 시간이 걸렸던것 같습니다.

문제가 되었던 부분은 고객사가 사용하는 UI Library와 Bootstrap과의 총돌이었는데, 고객사에서는 Bootstrap 코드를 약간 수정해서 고객사 전용 UI Component를 사용하고 있었습니다.

그런데 고객사가 사용했던 Bootstrap의 버전과 저희가 사용했던 Bootstrap의 버전이 서로 달랐던것 같습니다.

저희 Bootstrap용 js 파일을 추가하면 다른 화면들이 모두 깨지고, 고객사의 Bootstrap 파일을 그대로 사용하면 우리가 만든 Application의 화면이 깨지는 문제가 발생했습니다.

버전따라 사용법이 서로 달랐던 것 같습니다.

결국 고객사의 UI용 js파일을 사용하고 저희 Application은 수정하기로 결정하고, 고객사의 bootstrap.js 소스코드를 분석하면서 깨지는 UI Component들을 하나씩 수정하는 삽질을 했습니다.

충돌나는 부분을 jQuery UI로 변경하는 것으로 해결 할 수도 있었는데, 그렇게 하면 Lock & Feel 이 안 맞을 수 있기 때문에 그 때 당시에는 선택할 수 없었습니다.

결국은 프로젝트 완료 후 코드 관리의 효율성을 위해 Bootstrap UI 중에서 충돌이 났던 Component들을 모두 jQuery UI로 변경하는 작업을 다시 한번 수행하게 됩니다.

5. D3.js

D3.js는 Data Visualization Javascript Framework입니다.

단순하게 Web에서 Graph를 그리기 위한 Library라고 생각하실 수도 있지만, 그것보다는 훨씬 강력한 기능들을 가지고 있는 Framework입니다.

가령, 전국의 현재 기온을 한눈에 볼 수 있는 Bar Chart가 있다고 생각해 봅시다. 전국의 현재 기온을 표로 보는 것보다는 Bar Chart로 보는 것이 휠씬 보기도 좋기 이해도 잘 될거라고 생각합니다.

여기서 조금만 발전 시켜 보죠. 

기존 Bar Chart에 하룻동안의 기온 변화를 애니메이션로 표현하는 기능을 추가해 보면 어떨까요?

원래는 지역과 기온, 이렇게 두가지의 정보를 가지고 있던 그래프에 시간이라는 정보를 추가하는 거죠.

Bar Chart 하단에 시간을 선택할 수 있는 스크롤바가 있고, 그 스크롤바를 마우스로 드래그 할때 마다 Bar Chart가 변하게 하면 될 것 같습니다.

전국의 기온을 한눈에 볼수 있을 뿐만 아니라 하룻동안의 기온차를 시각적으로 볼수 있는 새로운 Graph가 탄생했습니다. 

Data Visualization이라는 것은 알고 보아왔던 형태의 그래프 뿐만 아니라, 다양한 아이디어와 기술을 적용해 새로운 정보를 재생산하는 기술입니다.

그리고 D3.js는 이러한 Data Visualization을 실제로 웹에서 구현할 수 있도록 다양한 API를 제공하는 Library입니다.

이번 프로젝트에서는 사실 D3.js를 직접적으로 사용하지는 않았습니다.

D3.js를 기반으로 한 다른 Library들을 사용하기 위해서 프로젝트에 포함한 거라서, 사실 사용 소감이라고 적을만 한 것이 없네요.

그래도 개인적으로 관심있는 분야라 D3.js에 대해서는 따로 카테고리를 만들어서 연재해 볼까 생각하고 있습니다.

6. Dagre-D3

Dagre-D3는 Directed Graph(방향 그래프)를 쉽게 그릴 수 있는 Javascript Library 입니다. D3 기반으로 작성되어 있기 때문에 D3.js가 기본으로 필요합니다.

Server Map을 Directed Graph로 그려야 해서 도입한 기술입니다.

Directed Graph를 지원하는 Javascript Library가 몇가지 있었지만, 대부분 범용으로 Diagram을 그릴 수 있는 것들이었고, 저희는 Directed Graph만 그리면 되었기 때문에 Directed Graph에 특화된 Dagre-D3를 선택하게 되었습니다..

Dagre-D3를 사용함으로써, 쉽고 빠르게 일정 수준 이상의 퀄리티를 가지는 결과물을 얻을 수 있었던 것 같습니다.

Directed Graph가 프로젝트의 메인 기능이었기 때문에 전체 프로젝트에서 작업 시간도 가장 많이 할당했었고, 삽질도 가장 많이 한 기능이긴 합니다.

하지만, 여전히 고객사의 다양한 요구사항을 모두 충족시키기에는 기능이 부족했던 것도 사실입니다.

(예를 들어 그룹핑 되어 있는 노드를 펼쳤을 때 노드의 배치가 이쁘지 않다던지 하는....)

결국 요구사항을 모두 충족 시키기 위해서는 D3.js를 사용해 직접 Directed Graph를 구현할 수 밖에 없을 것 같습니다.

물론 시간과 비용이 그만큼 더 들어가겠죠.

현실적으로는 여러 Library들의 기능들을 파악 한 다음에 요구사항을 타협해서 적당한 Library를 선택해서 사용하는 것이 개발사나 고객사 모두에게 좋지 않을까 생각합니다.

Dagre-D3의 장단점을 나열 하자만 다음과 같습니다.

1. 장점

- 안정적인 Rendering 속도

- 사용법이 간단하다.

- Layout만 지정해 주면 노드들은 알아서 배치해 준다.

- 원하는 대로 수정할 수 있을 만큼 충분히 다양한 디자인 요소를 제공해 준다.

- 노드를 Group으로 묶는 것이 가능하다. ()

2. 단점

- 사용자가 마음대로 노드를 움직할 수 없다.

- 실시간으로 Layout을 바꾸는 것은 불가능하다.

- 노드를 그룹핑하고 푸는 것도 당연히 가능하지만, 풀었을 때 노드들의 배치가 엉망이다. (이쁘지 않다)

- 노드들의 위치를 고정할 수 없다. (새로운 노드가 추가되거나 기존 노드가 삭제되면 전체적인 배치가 다 바뀌어 버린다)

더 자세한 내용은  "주니어 개발자의 경험기 [2편 - Javascript 시각화 라이브러리]" 를 보시면 될 것 같습니다.

7. C3

D3 기반 Chart 지원 Library 입니다.

선그래프, 막대그래프,파일그래프 등 일반적인 형태의 Chart들을 그리기 위해 사용했습니다.

C3.js에 대한 내용은 "주니어 개발자의 경험기 [2편 - Javascript 시각화 라이브러리]" 를 읽어보시는게 더 좋을 것 같네요.

8. Big Scatter Chart

Scatter Chart(분산,분표도 그래프)는 API Call의 응답 시간을 한눈에 보기 위한 용도로 사용했습니다.

X축은 시간(24시간), Y축은 응답시간으로 호출 하나 마다 그래프에 점을 하나씩 찍어 그리는 그래프 입니다.

원래는 Jennifer에서 X-View라는 이름으로 동일한 기능을 지원하는 Library를 제공하고 있습니다.

Jennifer 뿐만 아니라 Scatter Chart를 지원하는 Library는 몇가지 있었는데, 그 Library들의 공통된 문제점은 HTML5의 그래픽 요소인 Canvas와 SVG중 상대적으로 느린 SVG를 사용한다는 것이었습니다.

백터 기반의 SVG는 다양한 그래픽 요소를 자유롭게 표현하기에 적합하지만, CPU 연산에 의존해 이미지를 생성하기 때문에 픽셀 기반의 Canvas 보다 느린 문제점이 있습니다.

실제로 SVG 기반의 Scatter Chart Library를 사용해 본 결과 고객사의 요구사항을 충족하긴 힘들었습니다.

(하룻동안의 데이터를 모두 출력하기 위해서는 Scatter Chart는 약 8천만건의 Dot를 한번에 찍어야 함)

그래서 구글링중 발견한 것이 Big Scatter Chart 입니다. 

찾고 보니 Pinpoint에서도 사용하고 있는(사실은 Pinpoint에서 사용할려고 만든) Library 더군요.

Canvas기반의 Library로 다양한 사용자 Interaction을 지원하지는 못하지만, 대량의 데이터를 표현하는데는 훌륭한 성능을 보였습니다.

Dagre-D3.js에 대한 기술적인 내용은 "주니어 개발자의 경험기 [2편 - Javascript 시각화 라이브러리]" 에 잘 정리되어 있습니다.

이번 프로젝트를 진행하면서 전체적으로 느꼈던 점은, 이제 정말 데이터 레이어와 프리젠테이션 레이어가 확실히 분리되어 가고 있으며, 프리젠테이션 레이어쪽 기술들이 많이 정리가 되어가고 있는 것 같다는 인상을 받았습니다.

PHP로 데이터에서부터 HTML문서까지 모두 작업하던 시대와는 참으로 많이 달라진것 같습니다.

아마 AngularJS를 통해 Javascript code 단이 깔끔하게 정리되는 것을 보면서 더 그렇게 느꼈던 것 같습니다.

항상 Javascript와 관련된 새로운 기술들을 접하면 두렵기도 하면서 한편으로는 신나기도 하는 것는 것이, 역시 저는 Javascript 오덕이었던 듯 합니다.

(그래도 Callback의 수렁은 정말 싫습니다.)

다음 글은 E2E-Monitor의 Back-end 기술들을 살펴 보도록 하겠습니다.

긴글 읽어 주셔서 감사합니다.

ScyllaDB의 Benchmark 따라하기 2

지난 포스팅에서는 VirtualBox를 통해서 ScyllaDB와 Cassandra의 성능을 테스트해보았다. 결과에서 ScyllaDB 홈페이지에서 주장하던 10배의 성능 향상을 볼 수는 없었다. 몇가지 조건은 오히려 ScyllaDB쪽에 불리한 것도 있었기 때문에 이번에는 사내에 있는 개발장비에서 성능테스트를 진행해봤다. 사내에서 테스트에 활용할 수 있는 개발장비는 다행히 3대가 있었다.

사내에는 남는 개발장비가 3대 있다. 시스템 사양은 각각 다음과 같다.

DB서버(ScyllaDB/Cassandra)

• CPU : 4 Core
• 메모리 : 16G
• HDD : 128G SSD

• CPU : 2 Core
• 메모리 : 16G
• HDD : 250G SSD

오히려 Cassandra가 더 좋은 성능을 보여주고 있다.

2) 읽기 테스트

VirtualBox 테스트와 마찬가지로 데이터를 먼저 채워넣은 후 읽기 테스트를 진행했다.

읽기 테스트는 다음의 명령은 다음과 같다.

결과는 다음과 같다.

읽기에서도 오히려 Cassandra가 더 좋은 성능을 보여주고 있다.

3) 읽기/쓰기 테스트

테스트에 사용한 명령은 다음과 같다.

결과는 다음과 같다.

결과를 종합해서 살펴보면 다음과 같다.

<표 1. 사내 개발장비에서의 benchmark결과>

테스트 결과 ScyllaDB가 말하는 "Cassandra보다 10배 빠르다"는 확인할 수 없었다. 오히려 Cassandra보다 떨어지는 성능을 보여주고 있었다.

그런데 이번 테스트에서는 ScyllaDB 홈페이지에서 진행한 것 처럼 여러대의 Client에서 부하를 준 것이 아니라 한대의 시스템에서만 부하를 준 것이다. 이번 결과로 확인할 수 있었던 것은 그럭저럭한 사양의 시스템에서 그리 많지 않은 수준의 Request가 들어오는 경우에는 Cassandra가 더 빠를 수 있다는 것이다.

사내 개발장비에서는 여러대의 클라이언트에서 부하를 주는 등의 테스트 진행이 불가능하기 때문에 다음번 포스트에서는 아마존 AWS에서 테스트를 진행해보도록 할 계획인다.

ScyllaDB의 Benchmark 따라하기 1

ScyllaDB가 주장하는 10배 빠르다는 사실을 확인하기 위해서 ScyllaDB 홈페이지의 Scylla vs. Cassandra benchmark에 나와있는 내용을 직접 확인해보도록 하자.

홈페이지에 나와있는대로 하려면 DB서버는 24Core CPU, 128G 메모리가 있어야 한다. NIC도 DB서버에는 10Gbps를 사용했다.

우선 그런건 다 무시하고 PC에서 VirtualBox를 통해서 ScyllaDB와 Cassandra를 테스트해봤다. 테스트 환경은 다음과 같다.

DB 서버 (ScyllaDB/Cassandra)

• CPU : 1 Core
• 메모리 : 2G
• HDD : 20G 고정크기 저장소

부하 테스트 서버

• 없음. DB서버하고 같이 사용함.

ScyllaDB 홈페이지에서도 사용한 명령을 적어주긴 했는데 대충 적은듯한 티가 많이 난다. duration=15min으로 되어있는 부분은 duration=15m이 되어야 한다.

VirtualBox에서 테스트한 결과는 다음과 같다.

2) 읽기 테스트

읽기 테스트를 진행하기 전에 다음의 명령으로 채워넣어놨다.

읽기 테스트는 다음의 명령을 사용했다.

ScyllaDB에 테스트를 할 때 데이터가 늦게 나온다 싶더니 나오라는 결과는 안나오고 다음의 메시지만 나오고 있었다.

메시지가 말해주는건 다음과 같다.

"LOCAL_ONE Consistency level을 가지고 read를 수행하려 했는데 timeout이 발생했다! LOCAL_ONE Consistency level에서는 1개의 응답이 와야 하는데 아무것도 못받았다"

아무래도 thread 700개는 무리였던 것 같다. ScyllaDB 홈페이지에서 테스트에 사용했던 시스템은 24core에 128Gb 메모리를 가진 시스템이었기 때문에 thread를 300개로 낮춰서 다시한번 테스트한 결과는 다음과 같다.

ScyllaDB가 약 65%의 성능 향상이 있는 것으로 결과가 나오긴 했지만 테스트 중 ScyllaDB는 ReadTimeoutException이 한두번 발생하기는 했다. ReadTimeoutException은 Cassandra에서는 발생하지 않았다.

3) 읽기/쓰기 테스트

읽기/쓰기 테스트는 읽기 테스트에 사용했던 명령에 ratio만 read=1,write=1로 수정해서 테스트했다. 그런데 Cassandra에서 ReadTimeoutException이 많이 발생해서 thread 수를 300 -> 100 -> 50 으로 줄여나갔다. 

결과는 다음과 같다.

결과를 종합해서 살펴보면 다음과 같다.

<표 1. VirtualBox에서의 benchmark결과>

ScyllaDB가 아주 약간의 성능 향상이 보여지기는 했다. 그리고 특히 읽기/쓰기 테스트에서는 Cassandra에서만 ReadTimeoutException이 발생해서 Thread 수를 줄여나가야 했다.

아무래도 테스트 환경이 VirtualBox이고 매우 낮은 사양의 VM이라서 이런 결과가 나온 것일 수 있다. 특히 VM마다 CPU Core를 하나만 할당했기 때문에 Request당 하나의 CPU를 할당하는 ScyllaDB는 좀 더 불리한 상황에서 테스트를 진행한 것이다.

아무튼 ScyllaDB가 Cassandra보다 약간 빠른 성능을 보여주는 것은 확인되었다. 다음번에는 사내 개발장비에서 테스트를 진행해보도록 할 계획이다.

Cassandra는 대표적인 Column Family Oriented NoSQL 중 하나이다. Cassandra의 Use Cases 페이지(http://www.planetcassandra.org/apache-cassandra-use-cases/)만 들어가봐도 얼마나 많이 사용되고 있는지 알 수 있다. 

Cassandra가 Java로 만들어져있다는 것은 대부분 알고있는 사실이다. Java 오픈소스 중 C/C++로 구현하는 것은 어렵지 않게 찾아볼 수 있다. Lucene과 CLucene, HBase와 HyperTable 이 대표적인 예이다. Cassandra도 이와 같이 C++로 구현한 오픈소스가 있다. ScyllaDB라는 NoSQL은 Cassandra와 호환되는 Column Family Oriented NoSQL이다.

ScyllaDB의 홈페이지(http://www.scylladb.com/)에서는 다음과 같이 믿기 힘든 내용을 볼 수 있다.

<그림 1> ScyllaDB 홈페이지에 있는 소개 문구

Cassandra와 완전히 호환되면서 10배나 빠르다는 내용을 볼 수 있다. 2배정도 빠르다고 하면 순진한 척 하고 믿어줄 수는 있다. 하지만 10배나 빠르다는 것은 진짜 그런지 확인하지 않고 믿기에는 무리가 있다. 

다음번 포스팅에서는 ScyllaDB 홈페이지에서 진행한 "ScyllaDB vs Cassandra Benchmark"를 직접 확인해보도록 하겠다.

먼저 ScyllaDB에 대해서 알아보면 다음과 같다.

ScyllaDB 소개

ScyllaDB는 C++로 구현한 Cassandra이다. 일반적인 경우 구현 언어가 Java에서 C++로 바뀐다 해서 성능이 10배 향상되는 경우는 거의 찾아보기 힘들다. 그럼에도 테스트를 진행해서 실제 10배 성능향상이 있는지 확인하고자 하는 이유는 ScyllaDB를 만든 사람들 때문이다.

ScyllaDB는 KVM을 만든 사람들이 만들었다. KVM은 Google Compute Engine, OpenStack에서 사용하는 가상화를 위한 Hypervisor이다. 아무래도 시스템에 대해서 매우 잘 알고있는 사람들이 만들었기 때문에 시스템 자원을 최대한 효율적으로 활용해서 10배의 성능 향상을 얻을 수 있었던 것으로 예상한다.

ScyllaDB는 요즘 사용되는 하드웨어에 최적화된 Architecture를 사용하고 있다. 일반적인 JVM 아키텍쳐와 비교해보면 다음과 같다.

<그림 2. 일반적인 JVM 아키텍쳐)와 ScyllaDB 아키텍쳐>

ScyllaDB 홈페이지에서는 좌측의 일반적인 JVM 아키텍쳐는 낮은 CPU 활용, 상대적으로 비용이 많이 드는 Locking, 갑작스런 Latency 불안정 문제를 가지고 있다고 한다. 그러면서 우측 ScyllaDB 아키텍쳐는 shared-nothing 방식을 기반으로 하기 때문에 한대의 시스템에서 1백만 CQL까지도 처리할 수 있다고 한다.

Shared-nothing 방식은 리퀘스트가 처리할 CPU를 할당받아서 거기에서 다 처리하는 방식이라고 ScyllaDB 홈페이지에서 설명하고 있다. 이와 같은 방식으로 만든 Seastar라는 Framework이 있는데 ScyllaDB는 Seastar Framework를 사용하고 있다.

아무튼 ScyllaDB는 shared-nothing 방식의 Seastar Framework를 사용하여 구현하였기 때문에 context switching이 적고 시스템 자원을 최대한으로 활용할 수 있다.

시스템 자원을 최대한 활용하는 방식으로 만들었다고는 하지만 몇가지 문제점(?)들이 예상되기는 한다. 특히 이벤트 처리하는 부분에서 이벤트 처리를 OS에게 맡기는게 아니라 직접 polling하기 때문에 아무 일도 하지 않는 상태에서 모든 CPU를 사용하게 된다.

예를들어 4Core짜리 시스템이 있다면 ScyllaDB를 실행시켜놓은 것만으로 Load Average가 4.0 이 될 것이다. 물론 실행시 옵션을 줘서 사용할 Core 수를 조절할 수는 있다. 서비스를 위해서는 적어도 Core 2개는 일하지 않는 상태로 두는 것이 좋을 것 같다.

현재 ScyllaDB는 Cassandra 2.1.8에서 Thrift와 SSL을 제외하고는 완벽히 호환된다고 한다. 하지만 성능 향상을 위해서 Gossip과 Internal Streaming은 ScyllaDB가 따로 구현했기 때문에 Cassandra 노드와 ScyllaDB 노드를 하나의 클러스터로 구성하는 것은 불가능하다.

NoSQL이 Scalability와 성능을 강조하는 경우가 많기 때문에 Cassandra보다 10배 빠르다고 하는 ScyllaDB는 곧 있으면 주목받을 수 있을꺼라 생각한다. ScyllaDB GA버전이 나오면(2016년 1월에 나온다고 한다.) 어떤 반응이 있을지 기대된다.

얼마전에 마무리 했던 프로젝트에 대한 글을 적어 볼까 합니다.

이번 프로젝트는 사내에서 진행한 것이 아니라 외주를 받아 진행한 것이기 때문에 고객사에 대한 정보와, 보안과 관련된 부분들은 당연히 모두 빼고, 일반적인 내용들과 공개된 오픈소스, 알고리즘, 솔루션에 대한 내용만 다루도록 하겠습니다.

프로젝트에 대한 소개부터 시작하는게 좋겠죠? ^^

그럼 시작합니다.

Application Transaction Monitoring System, E2E-Monitor

개발할 시스템의 이름은 "E2E-Monitor" 였습니다.

공식 문서에서나 쓰이는 딱딱한 문장(?)으로 표현하자면,

"E2E-Monitor는 애플리케이션을 구성하고 있는 서버간의 통신 흐름을 운영자가 화면을 통해 쉽게 파악하고 모니터링 할 수 있는 일종의 관제 플랫폼입니다."

Request를 받은 순간부터 Response를 보내는 순간까지의 모든 처리 과정을 운영자가 한눈에 파악 할 수 있도록 Diagram으로 보여주는 프로그램입니다.

(E2E는 End to End의 약자로 여기서는 Request에서부터 Response까지를 의미합니다.)

Request에서부터 Response까지를 하나의 Transaction이라고 보면, "E2E-Monitor"는 결국 "Application Transaction Monitoring System"이라고 할 수 있을 것 같습니다.

[1. E2E-Monitor Dashboard 화면]

프로젝트 배경

고객사는 최근 신규 서비스를 개발해 운영중이었습니다. 

서비스의 규모가 어느정도 되다 보니, 여러 종류의 Application들과 여러대의 서버들이 운영되고 있는 상태였습니다.

하나의 Request는 최소 3단계에서 최대 10단계가 넘는 처리 과정(서버간 네트워크 통신)을 거쳐서 최종 Response를 내려주고 있습니다.

그런데 간헐적으로 정상적이지 않은 Response들이 발생하기 시작합니다. 

Application이나 서버 자체의 장애일 수도 있고, 비즈니스 로직 상의 문제일 수도 있습니다. 

문제가 발생한 위치만 알 수 있다면, 해당 Module의 담당자가 원인을 분석해서 문제를 해결 할 수 있을 것입니다.

하지만, 문제는 어느 서버의 어느 Application에서 문제가 발생했는지 추적이 힘들다는 점이 었습니다.

전체 서비스를 관제하고 있는 운영자는 문제의 시발점을 찾기 위해 해당 Request가 어떤 처리 과정들을 거치는지 파악해서 해당 과정들을 순서대로 점검해야 할겁니다. 문제의 시발점을 찾을 때까지요...

운영자가 하나의 서비스만 담당하고 있으며, 문제가 자주 발생하지 않는다면, 그리고 시간이 넉넉하다면.... 그냥 하면 됩니다.

그러나 실제로 그런 업무 환경에서 일하는 운영자는 거의 없겠죠?

운영자는 여러개의 서비스를 담당하고 있으며, 문제는 자주 발생하고, CS 담당자는 빨리 문제들을 해결해 달라고 재촉을 해댈겁니다.

운영자는 문제가 발생하면 그 위치와 문제점의 종류를 즉시 알 수 있는 "관제 시스템"이 필요하다는 결론을 내립니다.

요구사항

운영자의 요구 사항은 간단합니다.

"운영중인 시스템에서 문제(Error)가 발생하면 바로 어떤 문제가 어디에서 발생했는지를 알려주는 시스템이 필요합니다."

운영자의 요구 사항을 들어주기 위해 개발팀은 여러가지 관제 솔루션들을 찾아보기 시작합니다.

그러다가 요구 사항과 가장 근접한 오픈소스를 찾게 됩니다.

바로 Naver에서 개발한 Pinpoint입니다.

[2. pinpoint Dashboard 화면]

Pinpoint UI를 보시면 아시겠지만, Server Map이라는 Diagram이 화면의 대부분을 자체하고 있습니다. 

Server Map은 서버들을 노드로, 네트워크 연결을 간선으로 표시하고 있으며, 간선에는 단위 시간동안 발생한 네트워크 통신의 횟수가 적혀 있습니다.

Server Map을 보고 있으면 시스템의 전체적인 흐름를 한눈에 알 수 있을것 같습니다.

하지만, Pinpoint를 실무에 도입하기 위해서는 풀어야 될 숙제들이 너무 많았습니다.

가장 큰 문제는 고객사의 시스템은 Message Queue가 중요한 구성요소중에 하나 인데, Pinpoint로는 Message Queue를 거치는 처리 과정은 추적이 불가능하다는 것이었습니다.

그 외, Pinpoint 적용을 위한 추가 공수가 예상외로 많이 들어간다던지 하는 문제점들이 많았습니다.

결국 고심끝에 고객사는 자신들이 운영하는 시스템에 딱맞는 관제 시스템을 새로 만들기로 결정하고, 저희에게 개발을 의뢰하게 됩니다.

고객사의 요구사항을 정리하면 간단하게 이렇습니다.

1. Server Map Diagram을 통해 모든 시스템의 연결 상태 모니터링 (HTTP 통신 뿐만 아니라 TCP, Message Queue등 운영중인 시스템에서 사용되고 있는 모든 통신 수단 포함)

2. 에러 발생시 화면 출력과 소리, E-mail, SMS 등의 수단으로 운영자에게 알림

3. 에러 발생 위치를 Server Map에 표시

4. 특정 검색 조건으로 원하는 Transaction 정보 검색

5. HTTP 통신 이외에, TCP 통신, Message Queue 통신에 대해서도 모니터링 

4. 운영 시스템의 개발자가 추적 정보를 쉽게 생성할 수 있도록 최대한 사용이 간단한 Library와 친절하고 상세한 가이드 문서

프로젝트를 2단계로 분리하다

프로젝트는 일단 파일럿팅 개념으로 작게 시작하기로 합니다.

관제 시스템의 효용성에 대한 검증이 우선이라고 생각한 것입니다. 

관제 시스템은 크게 3가지 구성요소를 가지고 있습니다.

1. 각 Application에서 추적을 위한 정보를 생성하는 "추적정보 생성기"

2. 생성된 추적 정보를 수집해서 Transaction 별로 묶어서 저장소에 저장하는 "추적정보 처리기"

3. 저장소에 있는 추적정보를 사용자가 쉽고 볼 수 있도록 화면에 출력해주는 "사용자 프로그램"

"추적정보 생성기"는 두가지 방식이 있습니다.

첫번째 방식은 "수동 추적 방식"입니다.

추적 정보 생성을 위한 코드를 개발자가 Legacy System에 추가해주는 방식입니다.

관제 시스템 개발자 입장에서는 가장 쉽고 편한 방법입니다. 추적 정보에 대한 스팩만 정의하고 실제 추적 정보는 운영 시스템의 개발자가 알아서 잘 생성해 줄거라 믿고 관제 시스템을 개발하기만 하면 되죠.

하지만, 운영 시스템의 개발자 입장에서는 마른 하늘에 날벼락 같은 상황 일겁니다.

잘 돌아가고 있는 시스템에 비지니스 로직과는 상관도 없는 코드를 추가하라고 할 때 좋아할 개발자는 아마 없을 겁니다.

설령 억지로 코드를 추가 했다고 해도 새로 들어간 코드 검증을 위해 모든 시스템에 대한 테스트, 검증, 검수 등의 복잡한 단계를 다시 거쳐야 할 수도 있습니다.

반면, 두번째 방식은 "자동 추적 방식"으로 추적 정보를 수집해 주는 Agent가 System Low Level에서 돌아가면서 알아서 정보를 수집해 주는 방식입니다.

자동으로 추적 정보를 생성할 수만 있다면, 운영 시스템의 개발자는 추가로 해야될 일이 없습니다. 물론 기존 코드를 수정할 필요가 없기 때문에 위험 부담도 적고, 운영 시스템에 적용하기도 쉬울 겁니다.

이 경우 문제는 관제 시스템을 개발하는 쪽에 있습니다.

운영 시스템에서 사용되고 있는 통신관련 기술, 솔루션등을 모두 수집해야 하고, 각 요소마다 어떤 식으로 추적정보를 남길지 결정하고, 요소별로 따로 개발을 해줘야 합니다.

빠른 시간안에 결과물을 만들어서 검증을 하기 위해 "자동 추적 방식"을 버리고 "수동 추적 방식"을 선택합니다.

사실 "자동 추적 방식"을 버린다는 것은 운영 중인 시스템에 새로 개발한 관제 시스템을 바로 적용 시키는 것을 거의 불가능 합니다.

하지만, 새로 개발되는 서비스에서는 초반 개발단계에서 부터 "추적정보"를 의무적으로 생성하도록 하는건 상대적으로 쉽습니다.

이번 프로젝트의 전략은 일단 수동방식으로 빨리 개발하고, 신규 서비스나 상대적으로 규모가 적은 기존 서비스에 관제 시스템을 먼저 적용해 보고 운영하면서, 관제 시스템을 고도화 하는 것입니다.

그 대신 "추적 정보 처리기"와 "사용자 프로그램"은 추후에 추적 방식을 자동으로 바꾸기 용이하도록 Pluggable한 구조로 개발하기로 합니다.

E2E-Monitor Architecture

E2E-Monitor는 모니터링 대상 시스템의 Scale 변경에 유연하게 대처하기 위해 Scale-out이 가능한 구조로 설계했으며, 각 모듈들은 최대한 느슨하게 연결되도록 신경을 썼습니다.

[3. E2E 구조도]

A. 추적 정보 수집기

추적 정보 생성기에 해당하는 부분입니다.

모니터링 대상 시스템에서 추적에 필요한 정보를 생성해서 파일에 적는 일을 합니다.

Log Collector가 생성한 정보는 최종적으로는 Search Engine에 저장되게 됩니다. 그런데 구조도를 보면 Search Engine에 저장되기 전까지 몇단계를 거치도록 되어 있는걸 보실 수 있습니다.

단계는 다음과 같습니다.

1. Log Collector는 정보를 일단 파일에 적습니다.

2. Log Stash는 로그 파일을 감시하고 있다가 Log Collector가 정보를 파일에 적으면, 그걸 바로 읽어서 Message Queue로 실어보냅니다.

3. Message Queue Consumer는 Message Queue를 감시하고 있다가 Message가 들어오면 바로 읽어서 Search Engine에 저장합니다.

Log Collector가 바로 Search Engine에 저장하지 않고 여러 단계를 거치는 이유는 모듈간의 느슨한 연결과 Pluggable한 구조를 위해서 입니다.

일단 정보를 파일에 우선 적음으로써 모니터링 대상 시스템이 무슨언어로 만들어지던지 상관이 없어집니다.

어찌되었던 정해진 포멧대로 파일에 정보를 적을 수만 있으면 되니까요.

Log Stash가 파일에서 읽어들인 정보를 바로 Search Engine에 넣지 않고 Message Queue에 태우는 이유는 System Performance 때문입니다. 

보통 읽기 성능은 Scale-out을 통해 쉽게 향상이 가능하만, 쓰기 성능은 크게 향상되지 않습니다. 가장 쉽게 쓰기 성능을 향상 시킬수 있는 방법은 Bulk Write 방식을 사용하는 것이라고 판단했습니다.

그래서 일단 Message Queue에 정보를 쌓아두고, 일정 조건에 맞춰 대량의 정보를 한번에 Search Engine에 쓰기로 했습니다. 또한 1차 가공 단계를 거치기 때문에 무리하게 모니터링 대상 시스템에서 작동하는 Log Stash에 비지니스 로직을 추가할 필요가 없게 되는 장점도 있습니다.

B. 추적 정보 처리기

일련의 단계를 거쳐 Search Engine에 저장된 정보는 다시 주기적인 배치작업을 통해 Transaction 별로 분류되고, Transaction 관련 통계 정보를 생성하는 과정을 거치게 되는데, 이런 일을 하는 모듈이 바로 Log Composer 입니다.

Log Composer는 1분에 한번씩 기초 데이터(Log Collector에서 생성되 Search Engine에 저장된 원시데이터)들을 읽어 들여서 분류 및 재가공 과정을 수행합니다.

재가공된 정보는 다시 용도에 따라 Search Engine과 RDB에 나누어 저장됩니다.

C. 사용자 프로그램

운영자가 사용하는 프로그램입니다.

Search Engine과 RDB에 저장되어 있는 정보를 가져와 Web Client로 전송해 주는 API Server와 Web Client로 구성되어 있습니다.

API Server는 Java로 구현되어 있고, Web Client는 AngularJS를 사용했습니다.

앞으로 해야 할 일들

현재 E2E-Monitor에서 가장 선행되어야할 추가 작업은 추적정보 수집 방식 변경입니다.

모니터링 대상 시스템의 개발자가 직접 추적 정보 수집을 위해 기존 코드에 손을 대는것은 참으로 위험하고 힘든 작업일 것입니다. 

현실적으로는 정말 작은 시스템이거나 새로 개발되는 시스템이 아니라면, 적용이 거의 불가능한 방식이라고 생각합니다.

그래서 E2E-Monitor의 생명력은 자동으로 추적정보를 수집하는 기능을 갇추느나 마느냐가 결정할 것으로 보고 현재 이 부분을 최우선 과제로 삼고 있습니다.

그 외 운영자 마다, 또는 시스템 마다 보고 싶은 정보가 조금씩 다를 수 있기 때문에 Customizing이 가능한 Dashboard를 구상중에 있습니다.

범용성

E2E-Monitor는 특정 회사의 요구사항에서 시작했지만, 다양한 구성의 어떠한 시스템에도 적용 가능하도록 설계하고 개발되었습니다.

물론 서비스 고유의 기능등 추가적으로 필요한 부분들은 추가적인 공수가 들어가겠지만, 최소한의 공수만으로 추가 가능하도록 설계했습니다.

혹시라도, 운영 중인 시스템에 적용할 관제 시스템을 찾고 계시거나, System Trouble Shooting에 애를 먹고 계신다면 저희에게 연락 주시면 도와드리겠습니다.

프로젝트에 대해 간단하게 설명드릴려고 했는데 생각보다 글이 길어졌네요.

다음 글에서는 E2E-Monitor에 사용했던 Web 기술들에 대한 소개를 하겠습니다.

이번 포스팅에서는 약 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의 차이점에 대해 잠깐 짚고 넘어 갈까 한다.

[표] 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 몇개를 합친 것이다.