http://helloworld.naver.com/helloworld/651829
기존의 상용 차트 라이브러리와 오픈소스 차트 라이브러리는 다양한 종류의 차트를 구현할 수 있지만 데이터를 시각적으로 표현하는 데만 중점을 둡니다. 그렇기 때문에 스크린 리더 등의 보조 기기로 차트에 접근하면 스크린 리더가 차트 자체를 이미지로 판단해 전달하려는 실질적인 데이터는 읽을 수 없습니다.
네이버에서 차트 라이브러리를 개발하게 된 계기는 네이버 사이트의 접근성 현황을 효율적으로 표현할 방법이 필요했기 때문입니다. 지침별 수준을 수치화하는 폴리곤 모양의 레이더 차트가 필요하다고 판단하여 오픈소스 기반의 차트를 사용하려 했습니다. 그러나 원하는 정보를 표현할 수 있는 차트를 제공하는 라이브러리를 찾지 못해 내부에서 직접 차트 라이브러리를 개발하기로 결정했습니다.
개발 초기에는 폴리곤 형태를 표현할 수 있는 레이더 차트의 개발만 염두에 두었습니다. 이후 다른 형태의 정보를 효율적으로 표현할 수 있는 Polar Pie 차트, 비교 차트 등 기존의 라이브러리에서 찾아볼 수 없는 여러 형태의 차트를 추가해 종합 차트 라이브러리인 Nwagon(http://html.nhncorp.com/nwagon)을 개발했습니다. 그리고 여러 곳에 널리 사용되기를 바라는 마음으로 Nwagon을 NULI 사이트(http://html.nhncorp.com)에 오픈소스로 공개했습니다.
'Nwagon'이라는 이름은 접근성을 뜻하는 'web accessibility'와 라이브러리 개발의 계기가 된 'polygon'의 'gon'을 조합해 만든 이름입니다. 이름이 뜻하는 대로 추가 작업이 없어도 차트를 볼 수 없는 사용자들에게 동일한 정보를 제공할 수 있도록 접근성을 향상시킨 차트 라이브러리입니다.
http://html.nhncorp.com/nwagon
Introduce
네이버 서비스의 접근성 현황을 표현하기 위한 방법 모색 중, 지침별 수준을 수치화 하는 폴리곤 모양의 레이다 차트 구현의 필요성을 기반으로 nWagon 차트 개발은 시작되었습니다.
개발 전 고려된 무료기반의 라이브러리들은 저희가 필요로 하는 필수 기능들을 표현한 사례가 없었고, 이를 위해 간단하면서도 사용하기 쉬운 자체 차트 라이브러리를 개발하게 되었습니다. 차트의 이름은 차트 개발의 시발점이 된 Web Accessibility의 약자인 WA와 차트의 모티브가 된 폴리곤의 gon을 조합한 wagon으로 네이버의 N과 결합하여 최종 이름을 nWagon으로 명명하였습니다. 더불어, 마차(wagon)을 탄 것과 같이 편한하게 웹 서비스를 이용할 수 있도록 하기 위한 저희 접근성팀의 열정을 담고 있기도 합니다.
Key Points
손쉬운 사용
JSON 형태로, 라이브러리 사용시 한번의 function call만으로 차트가 완성되는 용이성
간결한 디자인
컬러와 크기 등 조절의 간편함
빠른 속도
SVG를 이용하여 랜더링 속도가 빠르며 DOM을 이용한 event나 CSS Selector 적용 가능
크로스브라우징
IE9를 포함한 주요 브라우저 지원 가능(Chrome, Firefox, Safari, IE since v.9)
View Example
'프로그래밍 > Web' 카테고리의 다른 글
| [Chrome] 구글 크롬 개발자 도구 사용의 이해 (0) | 2014.03.19 |
|---|---|
| [CMS] Monstra: A modern, mobile-friendly CMS (0) | 2014.02.18 |
| [Wordpress] Vafpress Framework: Easy WP admin for your theme (0) | 2014.02.12 |
| [Framework] Hackathon Starter Template: A barebones start for Bootstrap (0) | 2014.02.06 |
| [Editor] Text editor -텍스트에디터 : Brackets (0) | 2014.02.04 |
