기술로 동행하다.
널리 사람을 이롭게 하기 위한 다양한 기술로 접근성을 실천하고 싶습니다.
Technology Doesn't Leave Anyone Behind
Chart Library Nwagon
네이버 서비스의 접근성 현황을 표현하기 위한 방법 모색 중, 지침별 수준을 수치화하는 폴리곤 모양의 레이다 차트 구현의 필요성을 기반으로 Nwagon 차트 개발은 시작되었습니다.
개발 전 고려된 무료 기반의 라이브러리들은 우리가 필요로 하는 필수 기능들을 표현한 사례가 없었고, 이를 위해 간단하면서도 사용하기 쉬운 자체 차트 라이브러리를 고민하였습니다.
차트의 이름은 차트 개발의 시발점이 된 Web Accessibility의 약자인 WA와 차트의 모티브가 된 폴리곤 의 gon을 조합한 wagon으로 네이버의 N과 결합하여 최종 이름을 Nwagon으로 명명되었습니다.
-
자동완성되는 접근성 데이터
추가적인 작업 없이 차트를 구현함과 동시에 자동으로
접근성 보장된 데이터 생성 -
빠른 속도
SVG를 이용하여 랜더링 속도가 빠르며 DOM을 이용한
event나 CSS Selector 적용 가능 -
손쉬운 사용
JSON 형태로, 라이브러리 사용시 한번의
function call만으로 차트가 완성되는 용이성 -
크로스브라우징
IE6를 포함한 주요 브라우저 지원 가능
(Chrome, Firefox, Safari, IE since v.6)
추가적인 plug-in 없이 VML을 이용하여 IE 하위 버전 지원 -
간결한 디자인
컬러와 크기 등 조절의 간편함
How to use
Nwagon의 사용방법은 아주 간단합니다.
소스코드를 다운로드한 후 차트를 추가하고자 하는 페이지에 다음과 같이 CSS와 JS 파일을 포함시킨 후 나타내고 자 하는 정보를 차트 타입에 맞는 JSON 포맷에 맞춰주면 됩니다.
- <link rel="stylesheet" href="Nwagon.css" type="text/css">
- <script src="Nwagon.js"></script>
단, Nwagon이 SVG 기반으로 개발되었기 때문에 SVG에 대한 기본적인 이해도가 있다면 사용하기 훨씬 수월합니다.
SVG tutorial
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial새 창
http://www.w3schools.com/svg/새 창
다음 링크로 접속하면 Nwagon으로 구현한 파이 차트를 볼 수 있으며, 아래의 샘플 코드를 이용해 다른 타입의 차 트도 직접 구현해 보면서 Nwagon에 대한 이해도를 만들어도 좋습니다.
http://jsfiddle.net/dl_nuli/6aqdyjko새 창