접근성을 고려한 차트 라이브러리, Nwagon

2016년 06월 02일

기존의 상용 차트 라이브러리와 오픈소스 차트 라이브러리는 다양한 종류의 차트를 구현할 수 있지만 데이터를 시각적으로 표현하는 데만 중점을 둡니다. 그렇기 때문에 스크린 리더 등의 보조 기기로 차트에 접근하면 스크린 리더가 차트 자체를 이미지로 판단해 전달하려는 실질적인 데이터는 읽을 수 없습니다.

네이버에서 차트 라이브러리를 개발하게 된 계기는 네이버 사이트의 접근성 현황을 효율적으로 표현할 방법이 필요했기 때문입니다. 지침별 수준을 수치화하는 폴리곤 모양의 레이더 차트가 필요하다고 판단하여 오픈소스 기반의 차트를 사용하려 했습니다. 그러나 원하는 정보를 표현할 수 있는 차트를 제공하는 라이브러리를 찾지 못해 내부에서 직접 차트 라이브러리를 개발하기로 결정했습니다.

개발 초기에는 폴리곤 형태를 표현할 수 있는 레이더 차트의 개발만 염두에 두었습니다. 이후 다른 형태의 정보를 효율적으로 표현할 수 있는 Polar Pie 차트, 비교 차트 등 기존의 라이브러리에서 찾아볼 수 없는 여러 형태의 차트를 추가해 종합 차트 라이브러리인 Nwagon(http://html.nhncorp.com/nwagon) 을 개발했습니다. 그리고 여러 곳에 널리 사용되기를 바라는 마음으로 Nwagon을 NULI 사이트(http://html.nhncorp.com) 에 오픈소스로 공개했습니다.

nwagon1

'Nwagon'이라는 이름은 접근성을 뜻하는 'web accessibility'와 라이브러리 개발의 계기가 된 'polygon'의 'gon'을 조합해 만든 이름입니다. 이름이 뜻하는 대로 추가 작업이 없어도 차트를 볼 수 없는 사용자들에게 동일한 정보를 제공할 수 있도록 접근성을 향상시킨 차트 라이브러리입니다.

이 글에서는 Nwagon의 특징과 간단한 사용 방법을 소개하겠습니다.

Nwagon의 특징

접근성 데이터 포함

Nwagon이 기존의 차트 라이브러리와 다른 점 중에 가장 눈에 띄는 점은 자동으로 삽입되는 접근성 데이터일 것이다. 기존의 차트 라이브러리를 사용하면 사용자에게 전달되어야 하는 정보가 차트라는 시각적인 요소로 웹에 표현된다. 이 차트에 스크린 리더와 같은 보조 기기로 접근하면 차트가 단순한 이미지로만 판단되어 정보 전달이 이루어지지 않게 된다. 기존 라이브러리로 차트를 구현하면 접근성을 보장하기 위해 추가적인 작업이 필요하다.

Nwagon을 사용하면 차트를 구현하는 동시에, 제공된 정보가 보조 기기를 통해서도 전달될 수 있도록 텍스트 형태의 정보를 자동으로 삽입한다. 삽입된 정보는 화면에서는 보이지 않게 처리하여 디자인 구성을 방해하지 않는다.

다음 그림은 Nwagon이 제공하는 텍스트 형태의 정보를 Chrome의 개발자 도구로 펼쳐 본 모습이다.

nwagon2

그림 1 접근성을 위해 자동으로 삽입되는 텍스트 형태의 정보

새로운 형태의 차트 구현

Nwagon으로 구현할 수 있는 차트의 종류는 약 11가지 정도다. 이 중에서 라인 차트나 칼럼 차트는 비교적 구현이 쉽고 구현 방법이 보편화되어 있어 다른 여러 라이브러리도 많이 제공한다. Nwagon을 개발할 때는 이러한 일반적인 차트에서 벗어나 복잡한 데이터를 좀 더 효율적으로 표현하는 방법을 찾기 위해 노력했다. 그렇게 해서 개발된 대표적인 차트로 Polar Area 차트와 Polar Pie 차트, 비교 차트 등을 꼽을 수 있다.

Polar Area 차트

Polar Area 차트는 우리가 알고 있는 파이 차트와 흡사하다. 파이 차트에서는 나눠진 부채꼴의 반지름은 모두 같고 나타내려는 값으로 부채꼴의 각도를 결정한다. 반면에 Polar Area 차트에서는 표현하려는 항목의 수에 따라 일률적으로 부채꼴의 각도가 정해지고, 나타내려는 값은 부채꼴의 반지름으로 표현된다. 또한 하나의 원을 원하는 개수만큼 나누어 표현할 수도 있다. 채색된 영역의 투명도도 설정할 수 있다.

Polar Area 차트는 주기적으로 일어나는 일을 기록하는 데 유용하게 쓰일 수 있다. 다음은 온도가 낮을수록 투명도가 높아지는 차트를 구현하는 코드의 예다.

예제 1 Polar Area 차트를 구현하기 위해 쓰인 코드

'dataset': {  
         title: 'Average monthly temp',
         values:[[42, 55, 66], [75, 88, 97],[77,65,45], [30, 15, 25]],
         colorset: ['#3EB400', '#DC143C', '#2BC8C9', '#666666'],
         fields: ['Sping', 'Summer', 'Fall', ;Winter'],
         opacity:[0.3, 0.5, 0.7, 0.9]
},

위의 코드로 구현한 Polar Area 차트는 다음과 같다.

nwagon3

그림 2 Polar Area 차트

Polar Pie 차트

Polar Pie 차트는 Polar Area 차트를 변형한 차트다. Polar Area 차트에서는 부채꼴의 각도가 항목의 개수에 의해 결정된다. 하지만 Polar Pie 차트에서는 부채꼴의 각도가 데이터 값을 결정하는데 사용된 하위 항목의 개수에 따라 결정된다. 예를 들어, 분당구에 있는 종합 병원의 환자별 평균 진료비와 집계에 포함된 환자의 수를 동시에 표현할 때 Polar Pie 차트가 유용하게 쓰일 수 있다.

표 1 Polar Pie 차트의 데이터 예제

병원	환자의 수	평균 진료비(단위: 천 원)
A	510	32
B	180	78
C	310	42

Nwagon으로 구현한 다음 차트에서 위 표에 있는 평균 진료비는 부채꼴의 반지름에 반영되어 있다. 집계에 참여한 환자의 수는 부채꼴의 각도를 결정하는데 사용되었다.

nwagon4

그림 3 Polar Pie 차트

Polar Pie 차트는 네이버 서비스의 접근성 현황을 집계해 보여 주는 사내 시스템인 N-WARS(NAVER Web Accessibility Reporting System)에서 본부별 접근성 현황과 평균을 집계하는 데 쓰인 본부별 표본 페이지의 개수를 동시에 보여 줄 때 실제로 사용된다.

비교 차트

비교 차트는 개발 업무에 종종 쓰이는 이슈 트래킹 시스템인 JIRA에서 착안하여 개발한 차트다. 일반적으로 사용하는 영역 차트(area chart)와 유사하지만 분명하게 다른 점이 있다. 영역 차트에서는 데이터 세트를 여러 개 사용해도 무방하지만, 비교 차트에서는 데이터 세트를 두 개만 사용해야 한다. 비교 차트는 두 개의 데이터를 비교해 그 차이를 극명하게 보여 주는 것이 목적이기 때문이다.

비교 차트는 다음 그림처럼 경쟁사와 판매 수익의 차이를 표현하는 데 효율적으로 사용될 수 있다.

nwagon5

그림 4 테이터의 차이를 색으로 표현하여 우열 관계를 표시하는 비교 차트

레이더 차트 강화

부분 비활성화

레이더 차트에 보편적으로 쓰는 데이터에는 한 개 이상의 영역에 '해당 없음(N/A)' 값이 입력될 수 있다. 기존 차트 라이브러리는 '0'인 값과 '해당 없음' 값을 표현할 때 차이가 없다. 이를 구별해서 보이려면 이미지를 추가로 겹치는 등 별도의 작업이 필요하다. 이러면 마크업 작업에도 어려움이 있고, 이미지에 가려진 차트 부분이 제 기능(예를 들어, 마우스 이벤트나 클릭 이벤트에 반응하기)을 할 수 없어 또 다른 문제가 일어날 수도 있다.

이 문제를 해결하기 위해 '해당 없음'이나 'N/A'로 표기된 영역을 라이브러리가 자동으로 처리하게 했다. '0'인 값과 구별함은 물론 차트에 적용된 이벤트 등의 사용에도 문제가 없게 됐다.

nwagon6

그림 5 Epilepsy Prevent 영역이 비활성화 된 레이더 차트

겹쳐 보이기 기능

레이더 차트를 사용할 때 여러 개의 데이터 세트를 한 배경 위에 겹쳐 그려 목표에 어느 정도 도달했는지 측정하는 경우가 있다. 기존 차트 라이브러리에서는 그리는 폴리곤의 수만큼 배경이 그려지기 때문에 뜻하지 않게 중복되는 배경이 생겨 배경이 흐리게 보일 수 있고, 불필요한 요소를 렌더링하기 때문에 배경의 수가 많을수록 성능도 저하된다.

Nwagon은 JSON 데이터에 값을 추가하는 간단한 방법으로 이 문제를 해결한다. 다음 예처럼 두 세트 이상의 데이터가 있으면 하나의 배경에 겹쳐서 그리기를 자동으로 실행한다. 아래는 데이터 세트를 추가한 코드의 예다.

예제 2 겹침 기능을 위해 추가된 데이터 세트의 예

'dataset': {  
         title: 'Web accessibility status',
         values:[[74, 93, 67, 23, 78, 45, 69, 98],
               [65, 84, 67, 85,89, 67, 95, 67],
               [89, 87, 95, 65, 34, 67, 85, 45]],
         bgColor: '#F9F9F9',
         fgVolor: '#DC143C'
},

다음은 위의 데이터를 이용해 Nwagon으로 구현한 레이더 차트다.

nwagon7

그림 6 데이터가 겹쳐진 레이더 차트

SVG 기반으로 빠르고 선명한 그래프 생성

Nwagon은 빠른 렌더링과 고화질을 강점으로 꼽는 SVG(scalable vector graphics)를 기반으로 개발되었다. SVG는 또한 객체 하나하나를 DOM 요소로 간주하여 CSS 속성과 이벤트를 DOM 요소와 동일하게 적용할 수 있다.

다음 그림은 jQuery 사용자들 사이에서 많이 쓰이는, Canvas 기반의 jqPlot 라이브러리로 구현한 파이 차트와 SVG 기반의 Nwagon으로 구현한 파이 차트를 비교한 그림이다. 원과 구분선이 Canvas를 기반으로 한 그래프보다 선명한 것을 확인할 수 있다.

nwagon8

그림 7 Canvas 기반의 차트(왼쪽)와 SVG 기반의 차트(오른쪽)

사용 방법

소스코드 다운로드

Nwagon 사용 방법은 다른 라이브러리의 사용 방법과 비슷하다. Nwagon 페이지(http://html.nhncorp.com/nwagon) 에서 소스코드를 다운로드한 다음 차트를 구현할 페이지에 CSS 파일과 JS 파일을 포함시킨다.

<link rel="stylesheet" href="Nwagon.css" type="text/css">  
<script src="Nwagon.js"></script>

JSON 문법

차트를 구현하기 전에 준비해야 할 것은 JSON 형태의 데이터다. 차트의 종류에 따라 차이가 있으나 기본 형식은 다음과 같다. 차트 종류별로 더 자세한 사용 방법은 Nwagon 페이지를 참고한다.

표 2 레이터 차트를 위한 JSON 데이터 형식

키 이름		값의 형식	설명
legend		JSON 객체	차트 항목의 이름과 링크 정보
	names	문자열	차트 항목의 이름
	hrefs	배열	항목에 링크할 URL로 이루어진 배열(선택)
dataset		JSON 객체	차트의 기본 정보와 차트에 표시할 값
	title	문자열	차트의 제목
	values	배열	차트 항목의 값으로 이루어진 배열
	bgColor	문자열	차트의 배경색(예: #f9f9f9)
	fgColor	문자열	차트 항목의 값을 연결해 생성된 폴리곤의 색깔(예: #30a1ce)
chartDiv		문자열	차트를 그릴 DIV 요소의 ID
chartType		문자열	차트 종류
chartSize		JSON 객체	차트의 크기 정보
	width	숫자	차트의 너비(단위: 픽셀)
	height	숫자	차트의 높이(단위: 픽셀)

다음은 JSON으로 데이터를 생성해 레이더 차트를 구현하는 예제 코드다.

예제 3 레이더 차트를 위한 JSON 데이터 예제

<div id="Nwagon"></div>  
<script>  
    var options = {
        'legend':{
            names: [
                'Perceivable', 
                'Information Loss', 
                'Understandable', 
                'Enough Time', 
                'Epilepsy Prevent', 
                'Operable', 
                'Navigation', 
                'Error Prevent'
            ],
            hrefs: [
                'http://nuli.nhncorp.com/accessibility#k1',
                'http://nuli.nhncorp.com/accessibility#k2',
                'http://nuli.nhncorp.com/accessibility#k3',
                'http://nuli.nhncorp.com/accessibility#k4',
                'http://nuli.nhncorp.com/accessibility#k5',
                'http://nuli.nhncorp.com/accessibility#k6',
                'http://nuli.nhncorp.com/accessibility#k7',
                'http://nuli.nhncorp.com/accessibility#k8'
            ]
        },
        'dataset': {
            title: 'Web accessibility status', 
            values: [[34,53,67,23,78,45,69,98]], 
            bgColor: '#f9f9f9',
            fgColor: '#30a1ce',
        },
        'chartDiv': 'Nwagon',
        'chartType': 'radar',
        'chartSize': { width: 500, height: 300 }
    };
    Nwagon.chart(options);
</script>

위의 코드로 구현한 레이더 차트는 다음과 같다.

nwagon9

그림 8 레이더 차트

마치며

웹 페이지에서 제공하는 정보의 형태가 일반 텍스트를 넘어서 그래프, 이미지, 동영상, 애니메이션 등 점점 더 다양해지고 있다. 한편으로는 정보의 종류가 다양해지고 풍부해짐을 의미하지만, 접근성 측면에서 생각하면 그만큼 다양한 혜택에서 소외당하는 사용자가 생겨날 수 있음을 의미하기도 한다. 접근성 데이터를 고려한 차트를 개발하게 된 계기도 정보를 어떤 형태로 제공하든지 모든 사용자에게 동일한 정보를 제공해야 한다는 웹의 근본이념을 고려했으면 하는 바람에서였다. 필요하면 그때 가서 처리하면 되겠지 하는 생각을 버리고 시작부터 접근성을 염두에 둔다면 시간과 노력을 줄일 수 있을 뿐 아니라 사용자의 만족도 또한 높아질 것이다.

Nwagon 개발 초기에는 네이버의 사내 시스템에서 사용할 작은 라이브러리를 만드는 것이 목표였는데 이런저런 아이디어를 담다 보니 독창적이고 신선한 그래프들이 탄생했다. 오픈소스로 공개되는 만큼 많은 사용자의 의견을 받아 완성도를 높이는 작업을 지속적으로 시행할 예정이다. 새로운 차트 종류에 대한 아이디어도 같이 공유했으면 하는 바람이다.

홈페이지 제작팁