지도 기반 웹 서비스 UI 디자인 분석
An Analysis of UI Design for Web Service Based on Map
주저자 : 곽소정(Kwak, Sojung)
김포대학교 게임콘텐츠학과 겸임교수 [email protected]
공동저자 : 권기윤(Kwon, Giyoon)
상명대학교 대학원 감성공학과 석사과정 [email protected]
교신저자 : 권지은(Kwon, Jieun)
상명대학교 융합공과대학 휴먼지능정보공학과 교수 [email protected]
목 차 1. 서 론
1.1. 연구 배경 및 목적 1.2. 연구 방법 및 범위
2. 웹 기반 지도 서비스 UI 디자인 2.1. 웹 기반 지도 서비스 개념 및 특징 2.2. 시각적 요소
2.3. 인터랙션 요소 3. UI 디자인 분석
3.1. 분석 범위 및 방법 3.2. 분석 내용 3.3. 분석 결과 3.4. UI 디자인 방향성 4. 결 론
참고문헌
(요약)
최근 위치 기반 디지털 서비스가 증가하고 정보 기 술의 발전과 컴퓨터의 고성능화에 따라 지리정보시스 템, 위성위치 확인 시스템 등을 적용한 웹 서비스들 이 등장하고 있다. 텍스트나 이미지, 동영상 정보를 제공하는 일반적인 웹 콘텐츠와는 다르게 지도를 기 반으로 하는 웹 서비스는 지도 위치 파악, 지도 화면 조정, 검색 등의 그 특징에 맞는 인터페이스 디자인 이 사용되고 있다. 따라서 본 논문의 목적은 지도를 기반으로 한 웹 서비스 UI(User Interface) 디자인 을 분석하여, 효과적인 지도 기반 웹 인터페이스를 제안하고자 한다. 이를 위하여 첫째, 논문, 기사, 단행 본을 포함한 문헌조사를 통해 지도 기반 웹 서비스와 디자인 요소를 연구한다. 둘째, 문헌연구를 통해 도출 한 디자인 요소를 바탕으로 지도 형태를 포함한 웹 서비스를 하고 있는 사이트 9개를 대상으로 UI를 분 석한다. 마지막으로 분석한 내용을 통하여 현재 서비 스하고 있는 웹 기반 지도 서비스 UI 디자인의 시각 적 요소에 대한 특징과 방향에 대하여 제시하고자 한 다.
주제어 : 지도, 웹서비스, UI 디자인
(Abstract)
Recently, web services using geographic information systems and satellite position systems are emerging with the increase of location-based digital services, the advancement of information technology and improvement of computers. Unlike general web contents that provide text, image, and video information, a map-based web service uses interface design suitable for characteristics such as map positioning, map screen adjustment, and search. Therefore, the purpose of this paper is to propose an effective map-based web interface by analyzing a web-based user interface design based on maps. To do this, first, we study map-based web services and design elements through literature research including papers, articles, and books. Second, base on the design elements derived from the literature studies, the user interface is analyzed for nine sites that provide web services including maps. Finally, this paper presents the characteristics and directions of the visual elements for the web-based map service UI design.
Keyword : Map, Web Service, UI Design
1. 서 론
1.1. 연구 배경 및 목적
최근 위치기반 지도 서비스가 활성화 되면서, 포털 사이트에서의 지도 서비스 경쟁 및 SNS(Social Network Service)를 통한 위치 기반 콘텐츠와 마케 팅 사업이 증가하고 있다. 또한, 웹 정보기술의 발전 과 컴퓨터의 고성능화에 따라 위성지도나 항공지도 서비스 및 지리정보 시스템 (GIS, Geographic Information System)과 위성위치확인시스템(GPS, Global Positioning System) 등의 전문 위치 정보가 제공되고 있는 시점이다. 최근에는 오픈 API (Open Application Program Interface) 서비스를 제공하여 누구나 접근하여 데이터를 사용할 수 있도록 하고 있 다. 따라서, 웹 플랫폼을 통해 일반적인 지도 서비스 가 대중화되고, 자율주행자동차, 드론, 포켓몬 GO 게 임 등과 같은 전문 서비스들로도 확장 되고 있다. 본 논문은 지도 기반 웹 서비스의 특징 및 UI 디자인 분 석을 통해 지속적으로 증가할 것으로 예상되는 지도 기반 서비스 제작 시 활용될 수 있도록 고려사항을 제시한다.
1.2. 연구 방법 및 범위
첫째, 웹을 기반으로 하는 지도 서비스 개념 및 특 징에 대하여 연구한다. 단행본을 포함한 도서, 출판 물, 논문 등 문헌조사를 통하여 시각적 요소, 인터랙 션 요소 등 UI 디자인과 관련한 이론을 연구하고 그 중요성은 언급한다. 둘째, 앞서 연구한 이론을 근거로 웹을 기반으로 하는 지도 서비스 사이트를 분석한다.
대표적인 위치기반 서비스인 포탈 사이트의 네이버와 구글을 포함하여 해외 지리 관련 정부 사이트인 미국 지질 조사국, 유럽 환경청과 특정 서비스 지도 사이 트인 호갱노노, 오픈스트리트맵을 포함한 총 9개의 웹 사이트를 분석하였다. 마지막으로 지도 기반 웹 서비스 UI디자인에 대하여 분석한 내용을 바탕으로 특징을 연구하여 효과적인 디자인을 위한 가이드로 제공하여 앞으로의 제작과 디자인에 대한 활용 방안 과 고려사항을 제시한다.
2. 웹 기반 지도 서비스 UI디자인 2.1. 웹 기반 지도 서비스 개념 및 특징
웹 기반 지도 서비스(WMS: Web Map Service) (OpenGIS Consortium, http://www.opengeospati-
al.org, 2019)는 인터넷 웹서비스와 GIS를 연동하여 지리 공간 정보를 포함하여 교통, 문화, 관광, 마케팅 정보 등 다양한 부가 정보를 제공하는 인터넷 서비스 를 말한다(Kirsi Virrantaus, 2001, p.66). 이러한 서비스는 여러 가지 형태의 하드웨어와 접목하여 LBS/텔레매틱스 서비스 등으로 확장하고 있는 추세 이다. 지리정보 시스템(GIS, Geographic Infor- mation System)은 지리 정보 체계로 국토 공간상의 자연물과 인공물 등의 속성 정보와 위치정보(GPS)를 컴퓨터에 입력하고 지도화 된 정보 시스템을 의미하 며, 각종 지도 관련 데이터베이스를 통한 거리, 면적, 위치 등의 정보를 포함한 공간 정보 시스템을 의미한 다(R&DBiz, 2009, p.209). 최근의 지도서비스는 자 동차, 자전거, 보행자와 같은 다양한 사용자가 원하는 길 찾기 정보와 항공 뷰, 파노라마 사진 보기 등의 서비스를 종합하여 제공해주고 있다. 또한 날씨, 교 통, 주변 검색과 같은 생활정보에 맞는 정보들을 추 가하며 진화를 거듭하고 있다. 특히 구글맵의 경우 구글어스라는 3차원 지도와 위성지도에서 우주지도까 지 포함하여 이용할 수 있다는 특징이 있다(S.
Eliyahu Safra, 2000, p180). 또한 위치 기반 서비 스와 소셜 네트워크 서비스를 결합한 서비스가 대두 되었다. 사용자가 방문한 장소 정보를 다른 사용자들 에게 제공하거나 공유하는 서비스로, 사용자들은 장 소에 대하여 체크인을 하거나 리뷰, 만족도 등을 부 여하고 해당 정보는 소셜 네트워크의 사용자들에게 공유하는 방식이다(이규남, 2018, p.284). 최근에는 사용자가 SNS에 기록한 위치 기록을 기반으로 하여 라이프로그 형태로 개인화된 추천 서비스를 제공하는 등의 서비스(Paul Aniruddha, 2019, pp.284)가 시 작되고 있는데, 자율주행자동차, 드론, 포켓몬 GO와 같은 위치기반 서비스를 기반으로 된 전문 서비스로 확장되고 있다.
2.2. 시각적 요소 2.2.1. 색채
색채의 사용은 상징성을 갖게 되고, 독특한 색의 사용으로 흥미를 가질 수 있다. 시각 인지를 가장 먼 저 받는 요소가 색상임으로 UI 디자인에서 가장 중요 하게 생각해야 하는 요소로 사용자 시각에 혼란이 없 도록 컬러의 수를 제한해서 사용하여야 한다(김나영, 2014, p.14). 웹 기반 지도 서비스의 색채는 일반 색 채 이론을 기반으로 모니터나 모바일 디바이스에서 표현되는 디지털 색채이다. 웹 사이트를 서비스 하는
브랜드나 포털 사이트 등을 상징하는 색상 등을 주색 으로 표현하여 해당 사이트의 정체성을 느낄 수 있도 록 디자인된다. UI 디자인에 사용된 각 색에 대한 컨 셉은 다음 이미지 스케일을 기준으로 고려될 수 있다.
[그림1]의 단색 이미지 스케일은 가로축과 세로축으 로 나누어져 있다. 가로축은 왼쪽에서 오른쪽으로 동 적인 것에서 정적인 색으로 배치되어있고, 세로축은 위쪽에서 아래쪽으로 부드러운 것에서 딱딱한 색으로 배치되어있다(IRI디자인연구소, 2019).
[그림1] IRI 단색이미지스케일 2.2.2. 레이아웃
디지털 콘텐츠에서 레이아웃은 한 페이지 내에 콘 텐츠를 배치하는 작업으로, 레이아웃 작업은 콘텐츠 구성을 통일성 있게 제작하고, 즉각적으로 정보를 전 달할 수 있도록 인터페이스를 효율적으로 구축하는 것을 말한다(강은정, 2018, p.99). 효과적인 레이아 웃이란 웹사이트의 성격과 유형에 맞게 구조화되어서 설계, 배치, 정렬되며 배치된 요소들이 웹 콘텐츠에서 제공하고자 하는 메시지를 효과적으로 잘 전달할 수 있도록 적절한 변화와 함께 디자인되어야 한다. 레이 아웃의 기본요소인 사용자에게 흥미를 일으키는 주목 성, 조형적인 형태나 요소로 구성된 심미성, 구성 요 소나 디자인에 차별성이 있는 창조성, 사용자에게 전 달하려는 내용이 쉽게 이해되도록 가독성을 고려한 디자인을 고려해서 디자인되어야 한다(송민정, 2006, p.48). 최근의 웹 서비스 트랜드로 불필요한 요소를 줄이고 전달하고자 하는 메시지에 초점을 맞추어 심 플하게 디자인하는 미니멀리즘 디자인과 이와 함께 웹 페이지의 로딩 속도 때문에 필요해진 방식인 싱글 페이지 방식이 많이 적용 되고 있다.
2.2.3. 타이포그래피
타이포그래피란 문자를 배열하거나 레이아웃을 만
들고, 문자를 가지고 디자인하는 것으로 디지털의 발 달로 인하여 자유롭고 다양한 문자 표현이 발달되고 있다. 웹디자인에서의 타이포그래피는 정보를 효율적 으로 전달하고 문자로 표현된 의미와 내용을 정확하 게 이해할 수 있어야 한다(권지은, 2018, p.197).
또한 가독성을 고려하여 폰트를 선택하여야 하는데, 모니터 화면에서 가독성을 좌우하는 조건으로 글자크 기, 서체의 종류, 자간, 행간, 여백 등이 있으며 배경 에 이미지가 있을 경우 배경 이미지와의 조화도 가독 성에 영향을 준다(강은정, 2018, p.163). 웹의 특성 상 저해상도의 글자 서체를 보여주므로 세리프체의 세부적인 부분을 완벽히 보여주지 못하기 때문에 가 독성과 판독성을 높이기 위하여 산세리프체를 주로 사용한다. [그림2]의 상단에 위치한 서체가 세리프체 로 활자의 기둥의 양 끝을 맺는 돌출된 형태로 되어 있는 서체로 바탕체, 궁서체 등이 여기에 속하고, 하 단에 위치한 서체는 산세리프체로 돌출된 부분이 없 는 서체로 고딕체, 굴림체 등을 포함한다. 최근에는 채도 높은 색상을 사용하여 중요한 단어나 문장을 타 이포그래피로 디자인하여 존재감을 가지도록 하며 단 순 명료하게 메시지를 전달하는 방식을 취하는 형태 를 많이 발견할 수 있다.
[그림2] 세리프체와 산세리프체
2.3. 인터랙션 요소
지도 기반 웹 서비스에서의 인터랙션은 PC 기반의 경우 마우스를 중심으로, 스마트폰의 경우에는 터치 를 기반으로 이루어진다. 주로 지도를 확대하거나 축 소하는 등의 기본적인 지도를 조작하는 인터랙션과 사용자의 정보 검색에 따라 지도위에 정보를 표시해 줄 수 있도록 해주는 정보 검색 인터랙션 그리고 사 용자가 직접 지도를 편집할 수 있는 지도편집 인터랙 션으로 구분할 수 있다.
지도 조작 인터랙션은 지도 위에 그 기능을 조작할 수 있는 아이콘이나 메뉴가 존재한다. 예를 들어 확 대 축소의 경우 마우스 휠로 제어가 가능하며 플러스 마이너스의 아이콘을 클릭하도록 되어 있다. 그 이외 에 주로 정보 검색 인터랙션은 일반적으로 상단에 글
로벌 메뉴 형태로 표시되는데 지도상의 거리나 면적 등을 측정하거나 레이어 형태로 추가 정보를 표시하 는 등의 해당하는 웹 서비스의 특징에 따라 화면에 표시된다. 사용자가 원하는 정보를 텍스트 기반으로 정보를 검색하면 시각화되어 지도에 결과가 표시된다.
마지막으로 지도 편집 인터랙션의 경우 지도를 편 집할 수 있는 툴이 새 창의 형태로 수정할 수 있도록 제작되어 있다. 사용자에게 따라 커스터마이즈할 수 있는 기능이 있거나 다른 사용자들과 공유 또는 결과 물들이 공동 편집되는 기능이 제공되고 있다.
3. UI 디자인 분석 3.1. 분석 범위 및 방법
본 연구에서는 지도를 기반으로 웹 서비스를 하고 있는 국내외 서비스를 대상으로 하였다. 2019년 7월 15일부터 30일까지 서비스 되고 있는 국내외 웹 페 이지 9개를 기준으로 하여 분석하였다. 공공기관 및 민간 기업의 지도 서비스가 활발히 이루어지고 있는 웹 페이지를 [표1]과 같이 선정하였다.
분석방법은 각 사이트에 접속하여 직접 사용해보고,
앞서 연구한 이론을 바탕으로 하였다. 분석은 PC화면 을 기본으로 하여 시각적인 요소에 따른 웹페이지 분 석과 인터랙션 요소 분석의 2가지 관점에서 실행하였 다. 첫째, 시각적인 요소에 따른 분석은 각 웹 페이지 에 대하여 색채, 레이아웃, 타이포그래피, 모션 요소 별로 분석하고 둘째, 인터랙션 요소에서는 각 페이지 에 적용되어 있는 사용자 인터랙션 방법에 대하여 연 구하였다.
3.2. 분석 내용
3.2.1. 시각적인 요소에 따른 분석
[표2] 지도 기반 웹 서비스의 시각요소에 따른 분 석은 각 웹사이트를 색상, 레이아웃, 타이포그래피 요 소에 따라 구분하여 분석하였다. 선정된 9개의 웹 서 비스의 색채는 메인 색상(메인색상, 서브색상)과 색 조를 구분하여 분석하였다. 색상은 디지털 색상 코 드로 작성하였고, 색조(Tone)는 Vivid(V), Strong(S), Bright(B), Light(L), Deep(Dp), Pale(P), Very Pale(Vp), Dull(D), Light Gray(Lgr), Gray(G), Dark(Dk) 중에서 전체적으로
순서 웹서비스 사이트 주소 개요 플랫폼
1
미국 지질조사국 (United States Geological
Survey)
https://www.usgs.gov/
미국 영토 내의 지형이나 천연 자원, 자연재해 등을 측정하며, 지형도와 지질도를 제작 및 배포 하는 사이트
반응형 웹 (PC 1920*1080px)
2
유럽 환경청 (European Environment
Agency, EEA)
http://discomap.eea.europa.e u/Index/
유럽의 환경을 감시하기 위한 감 시망을 구축하는 유럽 연합의 기 관 사이트
반응형 웹 (PC 1920*1080px)
3 영국지형측량국
(Ordnance Survey)
https://osmaps.ordnancesurve y.co.uk/
영국지도 서비스로 웹이나 앱을 통해 지도와 경로를 검색하고 자 신의 경로를 만들어 공유할 수 있는 사이트
반응형 웹 (PC 1920*1080px)
4 호갱노노 https://hogangnono.com/ 아파트 실거래가를 알려주는 사 이트
반응형 웹 (PC 1920*1080px) 5 네이버맵 https://map.naver.com/ 네이버에서 제공하는 지도 한국
지도 서비스.
반응형 웹 (PC 1920*1080px)
6 구글맵
(Google Map) https://map.google.com/ 구글에서 제공하는 지도 서비스 로 전세계 대상 지도 서비스
반응형 웹 (PC 1920*1080px)
7 카카오맵 https://map.kakao.com/
한국 지도 서비스로 다음과 카카 오가 합병하여 업데이트 된 사이 트
반응형 웹 (PC 1920*1080px)
8 오픈스트리트맵
(Opensteet Map)
https://www.openstreetmap.or g/
영국의 비영리기구 오픈스트리트 맵 재단이 운영하는 오픈 소스 방식의 참여형 무료 지도 서비스
반응형 웹 (PC 1920*1080px)
9 아틀라스
(ATLAS)
https://www.atlasderschweiz.c h/maps/
스위스 취리히의 지리정보학 지 리학회 지도제작연구소의 지도 서비스
반응형 웹 (PC 1920*1080px) [표1] 지도 기반 웹 서비스 기본정보
통일된 것으로 표기하였다. 레이아웃은 메인화면과 서브화면으로 구분하여 분석한다. 타이포그래피는 서체를 산세리프체와 세리프체를 구분하였고, 서체 의 색상을 따로 작성하였다. 마지막으로 웹 페이지 디자인에서 참고할 사항에 대하여 기타에 작성하였 다.
3.2.2. 인터랙션에 따른 분석
지도 기반 웹 서비스를 기본 인터랙션과 정보 인 터랙션으로 분류하여 분석하였다. 기본 인터랙션과 정보 인터랙션의 지도 위에 표시되는 위치와 해당하 는 기능들에 대하여 [표3]에 작성하였다.
3.3. 분석 결과
3.3.1. 시각적인 요소에 따른 분석 결과
첫째, 지도 이외에 사용된 주요 색채는 정적인 것 보다 동적으로 느껴지는 색채 위주로 사용되었고, 부드러운 색보다는 딱딱한 색채들이 사용된 것으로 확인할 수 있었다. 특히 지도라는 이미지를 나타내 기 위해 파란색 계열의 색상이 모든 웹 사이트에서 메인 색으로 채택되었고 이와 함께 서브색채로는 비 슷한 계열의 색상인 연두색 계열과 함께 무채색 등 을 사용하였다. 메인 색채인 파란색을 보조해 줄 수 있는 색채로는 비슷한 계열의 톤을 사용하면서 포인 트가 필요할 때는 반대색인 붉은 색 계열을 사용한
순서 웹서비스 지도 조작 인터랙션 정보 검색 인터랙션 지도 편집 인터랙션
레이아웃 기능 레이아웃 기능 레이아웃 기능
1
미국 지질조사국 (United States Geological
Survey)
지도 내 왼쪽 상단
확대, 축소, 홈, 내위 치
상단 글로벌
메뉴
정보, 베이스맵, 레이어, 범례, 데이터 추가, 공 유, 쿼리, 측정, 기타, 검색
- -
2
유럽 환경청 (European Environment Agency, EEA)
지도 내
왼쪽 상단 확대, 축소, 홈
상단 글로벌
메뉴
세부정보, 베이스맵, 인
쇄, 측정, 검색 - -
3
영국지형측량국 (Ordnance
Survey)
지도 내 오른쪽 상단
확대, 축소, 내위치, Change map, Gird ref, Expand, Print, Help
상단 글로벌
메뉴
메뉴, 검색, Routes,
Places, #GetOutside - -
4 호갱노노
지도 내 오른쪽 상단
확대, 축소, 내위치, 지도, 필터, 주변, 거 리, 규제, 숨김
왼쪽 메뉴바
검색, 실시간 인기 아파 트, 시세 세부 검색, 뉴 스
- -
5 네이버맵 지도 내
오른쪽
확대, 축소, 내위치, 검색, 지도 선택, 지 적편집도, 거리뷰, 즐 겨찾기, 교통상황, CCTV, 자전거, 등산 로, 날씨, 거리측정, 공유
왼쪽 메뉴바
검색, 길찾기, 버스, 지
하철, 즐겨찾기, 더보기 - -
6 구글맵
(Google Map)
지도 내 오른쪽 하단
확대, 축소, 내위치, 지도 선택
왼쪽 메뉴바
검색, 지구, 교통정보, 대중교통, 자전거, 스트 리트뷰, 알림, 위치공유, 내장소, 참여, 내타임라 인, 공유, 인쇄, 설정
- -
7 카카오맵
지도 내 오른쪽 상단
확대, 축소, 내위치, 거리재기, 반경재기, 면적재기, 지도선택, 신규장소 등록, 레이 어, 공유
왼쪽 메뉴바
검색, 길찾기, 버스, 지
하철, My - -
8 오픈스트리트맵
(Opensteet Map)
지도 내 오른쪽 상단
확대, 축소, 내위치, 레이어, 범례, 공유, 지도에 참고추가, 지 물정보확인
상단 글로벌
메뉴
편집, 역사, 내보내기, GPS궤적, 사용자일기, 저작권, 도움말, 소개
새창 점, 선, 공간, 지형지 물 검색, 추가, 수정
9 아틀라스
(ATLAS)
지도 내 상단 글로벌
메뉴
내위치, 확대, 축소, 높이, 거리
지도 내 상단 글로벌
메뉴
지도 설정, 인덱스, 정
보, 비문, 프로필, 추가 - -
[표3] 지도 기반 웹 서비스의 인터랙션에 따른 분석
것을 확인할 수 있었다. 웹사이트는 기본적으로 흰 색 바탕으로 되어있어 흰색에 튀지 않는 회색을 보 조색으로 사용함으로써 자연스럽게 어울리도록 하였 다.
[그림3] 지도 기반 웹 서비스의 IRI 단색이미지스케일
지도 기반 웹서비스의 배색은 주로 경쾌한, 다이 나믹한 컨셉으로 디자인되었다. 앞서 색채에서 나타 난 파란색과 연두색 그리고 붉은색계열의 색채가 배 색되어 반영된 [그림4]와 같은 형용사 배색이 적용 된 것으로 분석된다.
[그림4] 지도 기반 웹 서비스의 IRI 배색이미지스케일
둘째, 레이아웃의 측면에서는 최근의 추세에 따른 싱글페이지 디자인과 지도 서비스의 특성으로 인하 여 단일 화면으로 구성된 경우가 많이 있었고, 지도 위에 폰트와 아이콘 등을 사용하여 사용자가 편리하
게 사용할 수 있는 디자인을 취했다. 특히 최근 업 데이트한 사이트들에서 나타나는 특징으로 왼쪽이나 오른쪽에 메뉴바를 없애고 지도를 화면 전체에 표시 하는 방식을 가지며 사용자들이 전체 페이지를 활용 할 수 있도록 하고 있다. 메뉴들의 경우 사용자가 필요로 인하여 클릭하거나, 검색 결과가 나타날 때 팝업이나 펼침 화면 등으로 등장하게 디자인되어 해 당하는 메뉴가 필요 없을 경우 닫거나 접어 둘 수 있도록 하였다.
셋째, 타이포그래피 PC와 모바일에서 서비스하는 특성상 모든 웹 서비스에서 산세리프체를 주로 사용 하여 가독성과 판독성을 높일 수 있도록 하였다. 또 한 무채색의 색상을 기본으로 하며 메인 색상을 강 조할 때 사용하여 일반적으로 흰색 바탕인 웹 사이 트에서 잘 보일 수 있도록 디자인되었다. 최근 경향 에 따라 텍스트 사이즈가 12포인트 이상으로 커지 고 있는 추세도 반영되어 있다.
[그림5] 네이버 맵 웹 서비스 화면
[그림6] 유럽환경청 웹 서비스 화면
3.3.2. 인터랙션 분석 결과
지도 기반의 웹 서비스에서는 첫째, 지도 조작 인 터랙션은 일반적으로 지도 내 오른쪽 상단에 위치하 고 있으며 주로 확대, 축소, 홈, 내 위치를 포함하며 사용자가 지도를 직접적으로 조작할 수 있도록 지도 위에 레이어 형태로 위치한다. 마우스를 통하여 확 대 축소를 포함하여 아이콘 형태로 표시하여 메뉴를
바로 클릭하여 사용할 수 있도록 디자인되었다. 둘 째, 정보 검색 인터랙션은 사용자의 검색에 의한 결 과물을 보여주는 형태로 글로벌 메뉴나 왼쪽 메뉴바 에 주로 텍스트로 검색을 유도하고, 결과를 확인할 수 있도록 구성하고 있다. 마지막으로 점차 늘어날 것으로 보이는 오픈스트리트맵과 같이 사용자가 직 접 참여하여 지도를 편집할 수 있는 기능의 경우 팝 업의 형태를 통하여 편집 툴을 화면에 표시해주며 사용자가 직접 지도를 수정할 수 있다.
[그림7] 오픈스트리트 맵 웹 서비스 화면
[그림8] 호갱노노 웹 서비스 화면
3.4. UI 디자인 방향성
분석한 내용을 바탕으로 현재의 지도기반 웹서비 스 UI디자인은 시각요소로 파란색 계열의 색상을 주 로 사용하여 동적인 색채위주로 디자인 하며 지도라 는 특징 때문에 녹색과 무채색 등으로 디자인하고 있다. 내 위치나 중요 위치는 보색인 붉은 색 계열 을 위주로 사용한다. 레이아웃 측면에서 최근의 추 세에 따라 싱글 페이지 디자인으로 조작, 인터랙션 등의 정보를 줄이고 웹 화면 전체에 지도를 보여주 고, 검색결과의 경우 팝업이나 펼침 화면 등으로 지 도위에 레이어 형태로 표현한다. 대부분의 텍스트는 산세리프를 사용하여 가독성을 높였고, 다양한 디바 이스에서 12포인트 이상으로 명확히 보이도록 하였 다. 이미 지도 서비스를 많은 사람들이 오랫동안 사 용하여 완전히 새롭게 변형할 수 없기 때문에 사용
자의 NUI(Natural User Interface)를 반영하여 디 자인되었으며, 또한 최근에는 사용자들의 참여를 원 하는 니즈가 증가한 상태이기 때문에 오픈스트리트 맵처럼 사용자들이 직접 지도를 수정하는 지도 디자 인이 늘어나고 있는 것으로 파악되었다.
4. 결 론
본 연구는 지도 기반 웹서비스 UI디자인을 분석하 여 최근 경향을 파악하고 그 특징을 해석하여 지리 정보 시스템과 위성위치확인시스템 등의 최신 기술 을 활용한 기술로 인하여 지속적으로 증가할 것으로 예상되는 지도 기반 웹서비스 디자인에 도움이 되고 자 하였다. 분석 결과 다음과 같은 결론을 통하여 지도 기반 웹서비스 UI디자인의 효용성과 가치를 높 이는데 일조할 수 있기를 기대한다.
첫째, 지도 기반 웹서비스 UI디자인의 웹사이트는 일반 웹 서비스와는 다른 차별성을 갖는다. 지도 기 반이라는 특성상 색상은 파란색계열의 색상이 메인 색상으로 디자인되었고, 경쾌하면서 다이나믹한 분 위기로 색채디자인이 되었다. 또한 레이아웃 역시 지도를 중심으로 심플한 형태로 이루어져 있고, 풀 사이즈의 지도 디자인을 확인하면서 사용자가 편리 하게 사용되도록 하였다. 타이포그래피의 경우 산세 리프체를 사용하여 디스플레이 화면에서 가독성과 판독성을 높였다. 지도를 포함한 최소한의 정보들을 시각적으로 나타내어 사용자의 능동적인 사용을 유 도하였다.
둘째, 지도 기반 웹서비스의 특성상 해당 지도에 서 사용자가 원하는 정보를 얻는 것이 중요한 서비 스이기 때문에 사용자가 처음 접근하는 화면에는 지 도조작 인터랙션을 기본으로 구성하고, 정보 검색 인터랙션의 경우 사용자의 조작에 따라 팝업이나 결 과 레이어 등으로 표현하여 사용자들에게 즉각적이 고 직관적으로 반응되는 것을 확인할 수 있었다.
마지막으로, 이미 모바일 사용자를 위한 반응형 웹 서비스를 지원하고 있지만 구글맵, 네이버맵, 카 카오맵, 호갱노노를 제외한 사이트는 PC를 기반으로 하여 디자인되어 모바일에서 최적화된 웹페이지가 설계되어야 할 것으로 보인다. 지속적으로 개발되고 있는 지도 기반 웹서비스에서 적절한 터치 인터랙션 과 인포그래픽 등을 통한 지도 기반 정보 제공, 모 바일이 최적화된 레이아웃 등이 적용된 웹 서비스가 개발될 것으로 기대해 본다.
참고문헌
∙ 강은정. (2017). 실무형 웹 디자이너로 길러주는 웹 디자인 이론과 실습. 서울: 한빛아카데미.
∙ 권지은. (2018). 감성 UX 디자인. 서울: 청람.
∙ 김나영. (2014). UI디자인의 시각적요소에 관한연구.
중앙대학교 예술대학원 석사학위논문, 서울.
∙ 김소연. (2006). 모션그래픽의 감성표현기법 연구:
휴대폰 브랜드 웹사이트를 중심으로. 연세대학교 대학원 석사학위논문, 서울.
∙ 송민정. (2006). 레이아웃의 모든 것. 서울: 예경.
∙ 알앤디비즈. (2009). 新성장동력 시장백서 2009 : 시장기회발굴(Market opportunity search). 경기:
Author.
∙ 이규남, 임종태, 복경수, 유재수. (2018). 위치기반 소셜 네트워크에서 시간과 사용자 활동을 고려한 개인화된 POI 추천. 한국콘텐츠학회논문지, 18(1), pp.64-75.
∙ Aniruddha, P., 임종태, 복경수, 유재수. (2019).
소셜 미디어 상에서 개인화된 여행 경로 추천 기법.
한국콘텐츠학회논문지, 19(2), pp.284-295.
∙ Safra, E., Kanza, Y., Sagiv, Y., & Doytsher, Y.
(2006). Integrating Data from Maps on the World-Wide Web. Lecture Notes in Computer Science, 4295(17), pp.180-191.
∙ Virrantaus, K., Markkula, J., Garmash, A., Terziyan, V., Veijalainen, J., Katanosov, A., &
Tirri, H. (2001.12). Developing GIS-Supported Location-Based Services. Second International Conference on Web Information Systems Engineering, Kyoto.
∙ IRI디자인연구소. Retrieved 2019.08.05. from http://www.iricolor.com
∙ OpenGIS Consortium. OpenGIS Web Map Service Specification. 1.3.0. Retrieved
2019.08.11. from http://www.opengeospatial.org
∙ WEMX. Retrieved 2019.08.02. from https://wemx.biz
∙ windowsreport. Retrieved 2019.08.16. from https://windowsreport.com
전자우편: [email protected] 원고접수일: 2019년 11월 15일 심사완료일: 2019년 12월 06일 게재결정일: 2019년 12월 26일 3명의 익명(匿名)에 의한 심사.
