[논문]웹 환경에서의 지도 기반 데이터 시각화 인터페이스 툴 개발

최진; 길선영; 임순범

doi:10.9717/kmms.2017.20.8.1216

문제 정의

사용자는 원하는 국가별 통계데이터를 가져와 지도 유형, 색상, 라벨 등 다양한 속성을 변경하여 사용자의 기호대로 직접 편집한 지도를 얻을 수 있다. 기존 사례에서 특정 툴이나 학습 없이 일반 사용자가 직접 시각화 작업을 하기 어렵거나 원하는 만큼 시각화를 할 수 없다는 한계점이 있어 본 연구에서는 지도 제작의 편리성과 완성도를 높이는 것에 초점을 두어 개발하였다. 이를 위해 기존의 지도 속성을 체계적으로 분석, 분류하여 인터페이스를 설계하였다.
본 연구에서는 기존의 지도 요소의 분류[14]에 근거하여 사용자가 지도 편집 시 필요한 속성을 추가, 삭제, 변경 등의 작업을 거쳐 최종적으로 Table 1과 같은 분류 속성표에 근거하여 인터페이스를 설계하였다. 다양한 지도 속성을 사용자가 직관적으로 접근하여 의지대로 편집할 수 있게 하는데 목적을 두었다.
이처럼 사용자는 직접 코드를 작성하지 않고도 쉽게 시각화할 수 있고, 지도 시각화에 특화되어 있어 다양한 지도 속성 편집을 사용자가 원하는 대로 손쉽게 조작할 수 있는 인터페이스를 필요로 한다. 따라서 본 논문에서는 이러한 사용자의 니즈를 반영하여 국가별 통계데이터와 인터넷만 있다면 언제 어디서든지 손쉽게 사용자가 직접 만들 수 있는 지도기반의 데이터 시각화 인터페이스 툴을 개발했다. 기존 지도요소를 분석하여 사용자가 지도 편집에 필요한 속성을 체계적으로 분류하여 인터페이스에 반영하였고, D3.
본 논문에서는 D3.js를 활용하여 웹 환경에서의 지도 기반 데이터 시각화 인터페이스 툴을 개발하였다. 웹 기술을 이용한 데이터 시각화 언어인 D3.
js를 활용하여 웹 환경에서의 지도 기반 데이터 시각화 인터페이스 툴을 개발하였다. 웹 기술을 이용한 데이터 시각화 언어인 D3.js를 이용하여 보다 쉽게 어플리케이션 구현하고자 하였다. 사용자는 원하는 국가별 통계데이터를 가져와 지도 유형, 색상, 라벨 등 다양한 속성을 변경하여 사용자의 기호대로 직접 편집한 지도를 얻을 수 있다.

제안 방법

6개 샘플의 상, 중, 하 3가지 난이도에 따라 지도속성 분류 기준을 기반으로 각 어플리케이션의 평균샘플 완성도를 측정하였다. 그 결과, Fig.
6개 샘플의 완성도와 각각 사용자 지도 제작 시간을 측정하였다. 그 결과, 구글 스프레드시트는 완성도는 낮았지만 제작 시간은 짧은 반면 CartoDB는 완성도는 높았지만 제작 시간은 길었다.
js 상의 드래그 앤 드롭 기능을 활용하여 사용자가 원하는 위치로 마우스로 척도라벨을 이동시킬 수 있다. [svg]태그의 자식인 [g]와 [text]태그에 위치 값을 나타내는 transform 속성을 추가하고 속성 값인 translate(x, y)의 x값과 y값을 변수로 설정하여, 동적인 위치 변경이 가능하도록 구현하였다. 그 외에 척도라벨 속성으로는 폰트 색상, 내림차순/오름차순, 라벨모양(직사각형, 원), 크기(가로, 세로, 반지름), 수직/수평, 간격, 표시형식(소수 자릿수, 퍼센트, 달러)이 있다.
그리고 10명의 사용자를 선정하여 각자 샘플 지도와 최대한 같게 총 18개(어플리케이션 3개*샘플의 수 6개)의 지도를 직접 제작하도록 요구하였다. 관찰자는 사용자가 데이터를 불러와 지도 제작이 완료할 때까지의 각 샘플 지도의 제작 시간을 측정하였다. 작업 완료 후, 각 어플리케이션마다 지도 속성 분류를 기반으로 기능별 조작 편리성에 대한 만족도 설문을 실시하였다.
따라서 본 논문에서는 이러한 사용자의 니즈를 반영하여 국가별 통계데이터와 인터넷만 있다면 언제 어디서든지 손쉽게 사용자가 직접 만들 수 있는 지도기반의 데이터 시각화 인터페이스 툴을 개발했다. 기존 지도요소를 분석하여 사용자가 지도 편집에 필요한 속성을 체계적으로 분류하여 인터페이스에 반영하였고, D3.js를 이용하여 보다 손쉽게 구현하고자 하였다. D3.
색상. 라벨 등을 편집할 수 있게 하여 기호에 맞는 지도를 제작하고 웹상에서 즉각적으로 확인할 수 있게 했다. 개발한 인터페이스 툴은 지도 제작의 편리성을 입증하기 위해 기존의 데이터 시각화 툴과의 비교를 통해 사용자 평가를 시행하였다.
js에서 다룰 수 있는 지도 데이터 형식에는 GeoJSON과 TopoJSON이 있으며 이것으로 좌표 데이터를 변환한다[13]. 본 논문에서 제안하고자 하는 웹 어플리케이션은 지도 데이터의 파일 크기를 줄여 지도를 그릴 때 요청 시간을 줄이기 위해 TopoJSON 지도 데이터 형식을 택했다.
지도 색상 기능에서는 사용자가 다양한 색상을 선택할 수 있도록 색상 팔레트를 제공한다. 본 어플리케이션은 범례의 계급 수(척도 수)에 따른 10여 종의 색상 팔레트를 제공하여 사용자가 보다 편리하게 색상을 변경할 수 있도록 했다. 1에서 9까지의 정수값 기준으로 계급의 수를 선택 후 선택한 데이터의 최소값과 최대값을 기준으로 선택한 계급의 수로 n 등분(n=1～9)되고 선택한 계급의 수에 따라 그에 해당하는 추천 색상 팔레트가 변화한다.
본 연구에서는 D3.js를 이용하여 SVG를 통해 시각적 요소를 생성하고 조작하여 지도를 생성하였다. D3.
지도 제작 시 가장 핵심적인 절차는 지도의 속성을 편집하는 단계이다. 본 연구에서는 기존의 지도 요소의 분류[14]에 근거하여 사용자가 지도 편집 시 필요한 속성을 추가, 삭제, 변경 등의 작업을 거쳐 최종적으로 Table 1과 같은 분류 속성표에 근거하여 인터페이스를 설계하였다. 다양한 지도 속성을 사용자가 직관적으로 접근하여 의지대로 편집할 수 있게 하는데 목적을 두었다.
본 웹 어플리케이션(DIYMAP)은 웹 기반의 환경에서 사용자가 국가별 통계 지표 데이터를 불러오거나 선택하면 시각화 툴과 연동되어 원하는 지도 유형이나 색상 등 다양한 속성을 변경하여 지도에 원하는 사회지표들을 시각화할 수 있도록 설계 및 구현하였다.
척도 수 선택 후각 척도에 해당하는 색상을 선택할 수 있다. 색상 선택의 편리함을 위해 colorbrewer.js를 활용하여 10개의 추천 색상 조합을 추가하였다. 추천 색상 조합을 선택하거나 사용자가 직접 원하는 색상을 선택하면, 지도 위 해당 영역의 색상 관련 CSS 속성이 동적으로 변하도록 구현하였다.
우선 앞 3.1절 Table 1의 지도 속성 분류표를 기반으로 상, 중, 하 3가지 난이도에 따라 각각 2개씩 총 6개의 샘플 지도를 제작하여 속성과 매칭되는 기능의 수에 따라 각 어플리케이션의 샘플 지도에 대한 완성도를 측정하였다(Fig. 6.). 그리고 10명의 사용자를 선정하여 각자 샘플 지도와 최대한 같게 총 18개(어플리케이션 3개*샘플의 수 6개)의 지도를 직접 제작하도록 요구하였다.
그 외에 척도라벨 속성으로는 폰트 색상, 내림차순/오름차순, 라벨모양(직사각형, 원), 크기(가로, 세로, 반지름), 수직/수평, 간격, 표시형식(소수 자릿수, 퍼센트, 달러)이 있다. 이 속성들은 d3-legend.js에 구현되어 있는 함수들로 호출하고, 전역변수들을 선언하여 동적으로 사용자가 선택한 값으로 속성을 변경할 수 있도록 구현하였다. 라벨 편집을 마친 화면은 Fig.
기존 사례에서 특정 툴이나 학습 없이 일반 사용자가 직접 시각화 작업을 하기 어렵거나 원하는 만큼 시각화를 할 수 없다는 한계점이 있어 본 연구에서는 지도 제작의 편리성과 완성도를 높이는 것에 초점을 두어 개발하였다. 이를 위해 기존의 지도 속성을 체계적으로 분석, 분류하여 인터페이스를 설계하였다. 사용성을 평가하기 위해 사용자 평가 및 분석을 시행해 기존의 지도 데이터 시각화 인터페이스와 비교해본 결과 본 어플리케이션은 같은 시간 안에 더 높은 완성도로, 비슷한 완성도에서는 더 빠르게 시각화 작업이 가능했다.
관찰자는 사용자가 데이터를 불러와 지도 제작이 완료할 때까지의 각 샘플 지도의 제작 시간을 측정하였다. 작업 완료 후, 각 어플리케이션마다 지도 속성 분류를 기반으로 기능별 조작 편리성에 대한 만족도 설문을 실시하였다.
js와 연동하여 불러온 통계 데이터 파일과 표준화된 지도 데이터를 매칭시켜 지도에 시각화해준다. 즉, 국가별 통계 데이터 파일과 국가 정보가 담긴 지도 데이터를 매칭시켜 D3.js의 Queue.js를 이용하여 TopoJSON형식의 표준화된 지도 데이터와 CSV형식의 통계 데이터을 매칭시킨다.
지도 속성 분류에 근거하여 크게 지도 형태, 색상, 라벨 3가지 기준으로 지도 편집 기능을 조작하는데 얼마나 편리한지에 대한 만족도 설문을 통해 각 어플리케이션의 기능별 조작 편리성을 비교하였다. 그 결과, Fig.
js를 연동하여 웹에서 지도를 표시해주기 위해서는 웹 서버가 필요하다. 지도를 그려주는 D3.js 관련 기능은 서버에 있으며, D3.js 관련 코드는 Java Script로 구현되어 있으므로 본 연구에서는 D3.js 연동과 관련된 이벤트들은 Node.js로 서버를 구현하여 처리했다. 따라서 D3.
체계적으로 분류된 지도 속성을 기반으로 구현한 본 어플리케이션을 통해 사용자가 얼마나 지도 제작을 편리하게 조작하며, 완성도 높은 지도 시각화 자료를 얻을 수 있는지를 평가하기 위해 지도 제작 시간, 제작된 지도의 완성도를 측정한 실험과 조작 편리성에 대한 사용자 설문을 통한 평가를 실시하였다. 웹을 통해 쉽게 접근 가능하며, 유사한 기능을 가진 지도 데이터 시각화 솔루션인 구글 스프레드시트와 CartoDB를 비교 대상으로 선정하였다.
js를 활용하여 10개의 추천 색상 조합을 추가하였다. 추천 색상 조합을 선택하거나 사용자가 직접 원하는 색상을 선택하면, 지도 위 해당 영역의 색상 관련 CSS 속성이 동적으로 변하도록 구현하였다. 이를 통해 사용자는 자신이 선택한 색상이 지도에 즉각적으로 적용되는 것을 확인할 수 있다.

대상 데이터

). 그리고 10명의 사용자를 선정하여 각자 샘플 지도와 최대한 같게 총 18개(어플리케이션 3개*샘플의 수 6개)의 지도를 직접 제작하도록 요구하였다. 관찰자는 사용자가 데이터를 불러와 지도 제작이 완료할 때까지의 각 샘플 지도의 제작 시간을 측정하였다.
체계적으로 분류된 지도 속성을 기반으로 구현한 본 어플리케이션을 통해 사용자가 얼마나 지도 제작을 편리하게 조작하며, 완성도 높은 지도 시각화 자료를 얻을 수 있는지를 평가하기 위해 지도 제작 시간, 제작된 지도의 완성도를 측정한 실험과 조작 편리성에 대한 사용자 설문을 통한 평가를 실시하였다. 웹을 통해 쉽게 접근 가능하며, 유사한 기능을 가진 지도 데이터 시각화 솔루션인 구글 스프레드시트와 CartoDB를 비교 대상으로 선정하였다.

데이터처리

라벨 등을 편집할 수 있게 하여 기호에 맞는 지도를 제작하고 웹상에서 즉각적으로 확인할 수 있게 했다. 개발한 인터페이스 툴은 지도 제작의 편리성을 입증하기 위해 기존의 데이터 시각화 툴과의 비교를 통해 사용자 평가를 시행하였다.

성능/효과

6개 샘플의 상, 중, 하 3가지 난이도에 따라 지도속성 분류 기준을 기반으로 각 어플리케이션의 평균샘플 완성도를 측정하였다. 그 결과, Fig. 7과 같이 난이도에 관계없이 DIYMAP 가장 높은 완성도를 보인 반면, 구글 스프레드시트는 가장 낮은 완성도를 보이고 난이도가 높아질수록 완성도가 큰 폭으로 하락하였다.
지도 속성 분류에 근거하여 크게 지도 형태, 색상, 라벨 3가지 기준으로 지도 편집 기능을 조작하는데 얼마나 편리한지에 대한 만족도 설문을 통해 각 어플리케이션의 기능별 조작 편리성을 비교하였다. 그 결과, Fig. 9와 같이 사용자들은 3가지 기능 모두 DIYMAP, CartoDB, 구글 스프레드시트 순으로 높은 만족도를 나타냈다.
6개 샘플의 완성도와 각각 사용자 지도 제작 시간을 측정하였다. 그 결과, 구글 스프레드시트는 완성도는 낮았지만 제작 시간은 짧은 반면 CartoDB는 완성도는 높았지만 제작 시간은 길었다. DIYMAP은 완성도가 가장 높으면서 제작 시간은 완성도가 낮은 구글 스프레드시트와 비슷했다.
사용성을 평가하기 위해 사용자 평가 및 분석을 시행해 기존의 지도 데이터 시각화 인터페이스와 비교해본 결과 본 어플리케이션은 같은 시간 안에 더 높은 완성도로, 비슷한 완성도에서는 더 빠르게 시각화 작업이 가능했다. 또한 조작편리성 측면에서 가장 높은 만족도를 나타냈다.
본 어플리케이션인 DIYMAP과 각각 비교해보면, 지도 형태 기능에서는 DIYMAP이 구글 스프레드시트보다 2.68배, CartoDB보다 약 1.81배씩 만족도 수치가 높으며, 지도 색상 기능은 각각 약 2.06배, 약 1.33배씩, 지도 라벨 기능은 각각 약 4.69배, 약 1.74배씩 높았다. 이를 통해 지도 색상보다도 지도 형태와 라벨 기능의 조작 편리성에 대한 만족도 차이가 특히 더 크며, DIYMAP이 지도 속성 분류에 근거한 조작 편리성이 높음을 확인하였다.
이를 위해 기존의 지도 속성을 체계적으로 분석, 분류하여 인터페이스를 설계하였다. 사용성을 평가하기 위해 사용자 평가 및 분석을 시행해 기존의 지도 데이터 시각화 인터페이스와 비교해본 결과 본 어플리케이션은 같은 시간 안에 더 높은 완성도로, 비슷한 완성도에서는 더 빠르게 시각화 작업이 가능했다. 또한 조작편리성 측면에서 가장 높은 만족도를 나타냈다.
이를 바탕으로 산점도를 그려 분석해 본 결과, 완성 가능한 기능의 수가 비슷한 CartoDB보다 DIYMAP으로 사용자가 더 빨리 시각화 작업을 완료할 수 있으며, 제작 시간이 유사한 구글 스프레드시트보다는 DIYMAP으로 같은 시간 내에 더 완성도가 높은 지도 제작이 가능함을 확인하였다(Fig. 8).
74배씩 높았다. 이를 통해 지도 색상보다도 지도 형태와 라벨 기능의 조작 편리성에 대한 만족도 차이가 특히 더 크며, DIYMAP이 지도 속성 분류에 근거한 조작 편리성이 높음을 확인하였다.

후속연구

본 연구는 지도 시각화 측면에 초점을 두어 개발하였지만, 추후 시각화 기능 외에 사용자가 불러온 국가별 통계데이터을 웹에서 직접 편집할 수 있는 기능도 추가한다면 사용자의 만족도가 더욱 높아질 것으로 예상한다. 본 연구가 지도기반 데이터 시각화 분야에서 널리 사용되길 기대한다.
본 연구는 지도 시각화 측면에 초점을 두어 개발하였지만, 추후 시각화 기능 외에 사용자가 불러온 국가별 통계데이터을 웹에서 직접 편집할 수 있는 기능도 추가한다면 사용자의 만족도가 더욱 높아질 것으로 예상한다. 본 연구가 지도기반 데이터 시각화 분야에서 널리 사용되길 기대한다.

핵심어	질문	논문에서 추출한 답변
	지도 데이터 시각화 어플리케이션에는 무엇이 있는가?	D3.js나 R을 이용하여 직접 코드를 작성하거나 태블로, 구글 스프레드시트, CartoDB 등과 같이 지도 데이터 시각화 어플리케이션을 이용하면 지도 데이터를 시각화 할 수 있다[2-6]. 프로그래밍에 대한 지식이 있고 D3.
	태블로의 장단점은 무엇인가?	태블로는 데이터 분석, 시각화 등을 포괄적으로 제공하는 범용 소프트웨어이다[4]. 그래프, 지도 등 다양한 그래픽 제작을 지원하며, 쓰기 쉽고 빠른 데이터 탐색이 가능하지만, 원하는 차트 옵션을 찾을 수 없으면 소용없다는 소프트웨어의 제약을 벗어날 수 없다.
	데이터 시각화란 무엇인가?	데이터 시각화는 데이터 분석 결과를 쉽게 이해할 수 있도록 시각적으로 표현하고 전달하는 과정을 말한다. 데이터 시각화는 태블로(Tableau)와 같은 범용 시각화 소프트웨어, D3.

내보내기 구분	파일저장 인쇄 메일전송
구성항목	기본정보 상세정보 관리번호, 논문명, 저널/프로시딩명, 저자 , 발행년, 권, 호, 시작페이지, 끝페이지, 발행기관 관리번호, 논문명, 대등논문명, 저자 , 저널/프로시딩명, 발행기관, 발행년, 발행언어, 권, 호, 시작페이지, 끝페이지, ISBN, ISSN, 주제분야, 키워드, 초록(한글), 초록(영문), 저자(소속기관)
저장형식	Text(ASCII format) Excel format RefWorks Direct Export RIS format (for Reference Manager, ProCite, EndNote), Scholar's Aids, Mendeley
메일정보	받는사람 (필수) @ 보내는사람 (선택) @ 제목 내용 KISTI 검색결과 이메일 서비스
안내	총 건의 자료가 검색되었습니다. 다운받으실 자료의 인덱스를 입력하세요. (1-10,000) 검색결과의 순서대로 최대 10,000건 까지 다운로드가 가능합니다. 데이타가 많을 경우 속도가 느려질 수 있습니다.(최대 2~3분 소요) 다운로드 파일은 UTF-8 형태로 저장됩니다. 파일의 내용이 제대로 보이지 않을실 때는 웹브라우저 상단의 보기 -> 인코딩 -> 자동선택 여부를 확인하십시오. ~ Text(ASCII format) Excel format

연합인증

웹 환경에서의 지도 기반 데이터 시각화 인터페이스 툴 개발
Development of Web-based Interface Tool for Map Data Visualization 원문보기

Abstract ▼ AI-Helper

주제어

AI 본문요약
AI-Helper

문제 정의

제안 방법

대상 데이터

데이터처리

성능/효과

후속연구

질의응답

참고문헌 (16)

이 논문을 인용한 문헌

저자의 다른 논문 :

관련 콘텐츠

원문 보기

원문 URL 링크

오픈액세스(OA) 유형

이 논문과 함께 이용한 콘텐츠

AI-Helper ※ AI-Helper는 오픈소스 모델을 사용합니다.

선택된 텍스트

연합인증

웹 환경에서의 지도 기반 데이터 시각화 인터페이스 툴 개발 Development of Web-based Interface Tool for Map Data Visualization 원문보기

Abstract ▼ AI-Helper

주제어

AI 본문요약 엑셀 다운로드 AI-Helper

문제 정의

제안 방법

대상 데이터

데이터처리

성능/효과

후속연구

질의응답

참고문헌 (16)

이 논문을 인용한 문헌

저자의 다른 논문 :

임순범 (108)

관련 콘텐츠

원문 보기

원문 URL 링크

오픈액세스(OA) 유형

이 논문과 함께 이용한 콘텐츠

AI-Helper ※ AI-Helper는 오픈소스 모델을 사용합니다.

선택된 텍스트

웹 환경에서의 지도 기반 데이터 시각화 인터페이스 툴 개발
Development of Web-based Interface Tool for Map Data Visualization 원문보기

AI 본문요약
AI-Helper