최고의 HTML5 Canvas Library를 찾아서

들어가기전에

HTML5 canvas로 개발 좀 해보려고 했는데 API 수준이 너무 low 레벨이다. 하나부터 열까지 지정해줘야한다. 이러면 개발 못하지. 혹시 관련된 자바스크립트 라이브러리가 있는지 찾아보기로 했다. 우선 네이버와 구글에서 한국어 위주로 찾아봤다. 생각보다 자료가 없다. 그래서 현재 존재하는 가장 인기 있는 canvas 라이브러리를 조사해보기로 했다.

어느 라이브러리가 가장 인기 있는 것인지 객관적으로 알기는 매우 힘들다. 이럴 경우 구글 검색결과가 선택의 중요 기준이 되기도 한다. 아래는 구글에서 'canvas library' 키워드로 검색했을 경우 표시되는 라이브러리의 순서이다. 하지만 이 결과를 그대로 받아들이면 안된다. 검색 연관성 때문에 별로 인기 없는 녀석이 검색이 되었거나 실제로는 인기 있는 라이브러리인데로 검색이되지 않을 가능성이 있다.

1. Fabric.js
2. Kinetic.js
3. oCanvas : 검색 연관성이 가장 높을 것이라고 예측되는 라이브러리
4. EaselJS
5. Paper.js

다음으로는 Stackoverflow에서 태그수를 살펴봤다. 높은 태그 수를 가진 라이브러리의 경우, 많은 사람들이 사용하기 때문에 질문도 많고 그 만큼 활성화되었다고 볼수도 있다. 

(4월 1일 기준이다. 만우절이네;)

1. Kinetic.js (2128)
2. Fabric.js (1115)
3. EaselJS (566)
4. Paper.js (239)
5. pixi (105)
6. oCanvas - 태그가 안보인다;

다음은 github의 stargazers 수로 비교해보자. Paper.js가 갑자기 상위권으로 치고 올라왔다. 나머지는 비슷비슷해서 우열을 가리기는 힘들다.

1. pixi.js (7136)
2. Paper.js (4884)
3. EaselJS (4165)
4. Fabric.js (4125)
5. Kinetic.js (3107)
6. oCanvas (340) - 이 녀석은 탈락이라고 봐야겠다.

성능이나 다른 부분을 비교해놓은 웹 페이지들도 있었다. 다만 자료는 많은데 공신력 있는 자료는 찾기 힘든 것 같다. 모두 참고용으로만 생각하자. 그나마 괜찮은 것 같은 링크를 아래 추가해뒀다. 관심있으면 살펴보자. 추가로 여기저기 뒤지다보니 Kinetic.js는 종료된 프로젝트라는 것을 알게되었다. 

• Javascript 2D Canvas Libraries
• Stackoverflow 전쟁

검색결과, github, stackoverflow의 결과를 종합해봤을 때, pixi.js와 Fabric.js가 그나마 가장 인기있는 라이브러리일 가능성이 높다. 이 두 라이러리를 좀 더 살펴보자. 그런데 솔직히 공식 사이트만을 기존으로 승패를 판단한다면 pixi.js의 완승이다. Fabric.js는 아마추어 느낌이 난다면 pixi.js의 경우 디자이너까지 붙어서 제대로 만든 느낌이다.

< Fabric.js의 공식사이트 >

< pixi.js의 공식사이트 >

Fabric.js (http://fabricjs.com)

공식사이트 초반 문구는 다음과 같다.

Fabric.js is a powerful and simple Javascript HTML5 canvas library

아래 두 특징을 주요하게 밀어 붙이고 있다.

1. interactive object model을 HTML5 canvas 위에서 구현
2. SVG-to-canvas parser 제공 (SVG 파일로 저장했다고 다시 로드할 수 있음)

그 외 이것저것 장점이라고 주장하는 내용이 많은데 사실 현 시점에서는 잘 모르겠다. 차라리 예제 하나 보자.

< 목표 >

< Canvas API 구현 >

< Fabric 구현 >

확실히 객체 모델이 존재하는 것 같다. Canvas API에서는 네모의 모양을 바꾸기 위해서는 같은 코드 전체가 다시 호출되어야 한다면 Fabric에서는 rect.XXX=YYY 같은 형태로 구현이 될 것 같다. 처음에 내가 원했던 딱 그 레벨의 라이브러리다. 하지만 pixi.js를 살펴보기 전에는 결정을 하지 않겠다!

pixi.js (http://www.pixijs.com)

마찬가지로 공식사이트 초반 문구를 살펴보자.

2D webGL renderer with canvas fallback

두 개의 골치아픈 단어가 등장했다. webGL의 경우는 OpenGL ES 2.0을 Web에서 사용할 수 있도록 정의된 표준이다. 그리고 fallback의 사전적 의미가 '대비책'인 만큼 canvas fallback의 경우 canvas와 비슷한 역할을 할 수 있는 기능을 제공한다고 보면 되겠다.

정리하자면 webGL과 canvas를 모두 지원하는 브라우저에서는 webGL을 이용해서 그림을 그리고 만약 webGL을 지원하지 않는 브라우저를 만나면 canvas를 이용해서 그림을 그린다고 보면 된다. 일반적으로 webGL을 이용해서 그리는 것이 성능이 월등하기 때문에 다른 라이브러리에 비해 성능이 좋을 수 밖에 없다. 마찬가지로 예제를 살펴 보자.

< 목표 : 원래는 빙글빙글 돈다 >

< pixi.js 구현 - 클릭하면 커진다 >

위의 예제는 pixi 공식사이트에서 쉽게 다운받을 수 있다. (링크) 

지금까지 이것저것 많이 살펴봤는데 현재 선택할 수 있는 최고의 라이브러리는 pixi.js 인 것 같다. 아무래도 앞으로 점점 발전할 가능성도 높고 사용자들도 충분한 상황인 것 같다. 다음에는 pixi.js를 조금 더 살펴보는 포스팅을 해야겠다.

그 밖의 유용한 라이브러리

CanvasJS (http://canvasjs.com)

Canvas를 이용해서 chart를 쉽게 생성하는 것 관련된 라이브러리이다.

BitmapDataChannels (http://peternitsch.net/bitmapdata.js/index.html)

비트맵 관련 기능을 canvas에서 구현했다고 한다. 자세히 살펴보지 않았다.

Paper.js (http://paperjs.org)

벡터 그래픽을 주로 처리하는 라이브러리고 한다.

2015.04.03