Aims & Scope

Journal of the Geological Society of Korea - Vol. 50 , No. 4

Development of multi-platform GEOscience information system (MGEO) based on responsive web 반응형 웹기반 멀티플랫폼 지질정보시스템(MGEO) 개발

Author: Jong-Gyu Han1, 2, Affiliation: 1Geological Mapping Department, Geological Research Division, Korea Institute of Geoscience & Mineral Resources (KIGAM), Gwahang-no 124, Yuseong-gu, Daejeon 305-350, Republic of Korea
Author: Yeon-Kwang Yeon1, 2Affiliation: 2Geophysical Exploration, University of Science & Technology (UST), Gajeong-no 217, Yuseong-gu, Daejeon 305-350, Republic of Korea
Correspondence: +82-42-868-3297, E-mail: jghan@kigam.re.kr

Journal Information
Journal ID (publisher-id): JGSK
Journal : Journal of the Geological Society of Korea
ISSN: 0435-4036 (Print)
ISSN: 2288-7377 (Online)
Publisher: The Geological Society of Korea
Article Information
Received Day: 05 Month: 05 Year: 2014
Reviewed Day: 08 Month: 05 Year: 2014
Accepted Day: 16 Month: 07 Year: 2014
Print publication date: Month: 08 Year: 2014
Volume: 50 Issue: 4
First Page: 551 Last Page: 564
Publisher Id: JGSK_2014_v50n4_551
DOI: https://doi.org/10.14770/jgsk.2014.50.4.551

Abstract

In this paper, we introduce new geologic information system called MGEO which means Multiplatform GEOscience Information System (http://mgeo.kigam.re.kr or http://mgeo2.kigam.re.kr). The MGEO system was developed using web-GIS and HTML5 which is next generation web standard and it adapted responsive web techniques which can optimize web content according to the different screen size devices such as mobile devices and desktop computers. MGEO system is developed by free open source components and it is free from commercial licenses. The new system can use geologic information faster and easier than the existing system. MGEO system will play more important role in providing various geoscience information by extending contents and functions that users need.

Abstract, Translated

이 논문에서는 데스크톱 PC 뿐 만 아니라, 다양한 모바일 기기를 동시에 지원할 수 있는 반응형 웹기반의 멀티플랫폼 지질정보시스템(MGEO: Multiplatform GEOscience Information System, http://mgeo.kigam.re.kr or http://mgeo2.kigam.re.kr) 개발 결과를 소개한다. MGEO 시스템은 웹 GIS와 HTML5 기술을 이용하여 사용자 단말기 종류에 따라 반응하여 웹디자인을 최적화시키는 반응형 웹기술이 적용되었으며, 시스템 개발 전 과정에 오픈소스 소프트웨어를 적용하여 고가의 상용소프트웨어의 종속으로부터 벗어나고자 하였다. 새롭게 개발된 MGEO 시스템은 데스크톱 PC 뿐 만 아니라 스마트폰 등 다양한 모바일 기기를 이용하여 위치정보와 함께 지질정보를 쉽고 편리하게 검색할 수 있다. 향후 MGEO 시스템은 사용자 입장에서 필요한 기능을 지속적으로 개발하고, 지질정보 콘텐츠의 내실화 및 확충을 통해 대국민 지질정보서비스를 위한 플랫폼으로서 역할을 할 것이다.


Keywords: geology, geoscience information, web-GIS, mobile, responsive web, multi-platform, 지질, 지질정보, 웹GIS, 모바일, 반응형 웹, 멀티플랫폼

1. 서 론

인쇄 형태로 발간된 지질도는 1999년에 국가GIS사업의 일환으로 추진된 ‘국토 기본지질도 전산화사업’을 통해 처음으로 캐드 및 GIS 소프트웨어에서 사용될 수 있도록 디지털 형태로 제작되었으며, 이후 다양한 정보화사업을 통해 해저지질도, 중자력도, 지구화학도 등 지질주제도에 대한 데이터베이스가 구축되었다(Chi et al., 2001). 지질주제도 데이터베이스는 캐드, GIS 소프트웨어를 사용하는 토목건설, 자원개발, 지질환경 그리고 학술연구 등 다양한 분야에서 지질정보의 활용을 촉진시키는 중요한 역할을 하고 있다.

2002년도에 처음으로 지질주제도 데이터베이스가 인터넷 웹을 통해 일반국민들에게 서비스되기 시작하였다(Lee et al., 2002). 세계 각국에서는 일찍이 정보화를 통해 지질자료의 활용성을 높이고 있다. 2007년부터 전 세계적으로 진행되고 있는 OneGeology 국제공동프로젝트는 각국이 보유하고 있는 지질도를 인터넷 웹을 통해 공유할 수 있는 체계를 구축하여 OneGeology 포털을 통해 누구나 세계 각국의 지질도를 검색할 수 있도록 하고 있다(OneGeology, 2014). 한국지질자원연구원은 우리나라를 대표하여 1:100만 축척 지질도를 OneGeology 포털에 제공할 수 있는 시스템을 구축하여 제공하고 있다(Han et al., 2008). 이러한 국제공동프로젝트는 지질정보의 활용성을 극대화하려는 국제적인 노력의 좋은 예가 될 것이다.

2002년에 개발된 지질정보시스템은 2008년까지 운영되다가 개발사의 열악한 기술지원으로 인해 서비스가 중단되었다. 이를 대체하기 위해 2008년에 미국 ESRI사의 ArcGIS 소프트웨어를 플랫폼으로 하여 데스크톱 PC 웹 브라우져 환경에 최적화된 지질정보시스템(GEOINFO: GEOscience INFOrmation system)이 개발되어 최근까지 대국민서비스를 하고 있다(Chi et al., 2008; GEOINFO, 2014). GEOINFO 시스템이 개발되었던 2008년에는 최근처럼 스마트폰, 스마트 패드 등의 사용자가 많지 않았다. 따라서 당시 개발된 GEOINFO 시스템은 모바일 기기를 고려하여 개발되지 않았기 때문에 모바일 기기의 위치정보 서비스를 이용할 수 없으며, 지도 표출 화면이 모바일 기기의 스크린 사이즈와 달라 지도 화면을 제어하고 속성정보를 검색하는 사용자 인터페이스에 많은 불편함을 가지고 있다. 최근 사용자 컴퓨팅 환경이 데스크톱 환경에서 모바일 기기로 다양화 되고 있지만, GEOINFO 시스템은 이러한 정보수요에 적절히 대응하지 못하고 있어 이에 대한 개선이 절대적으로 필요하다(Choi et al., 2012).

최근 미디어 환경은 다양한 모바일 기기의 확산으로 인하여 새로운 스마트 미디어의 시대로 패러다임이 진화하고 있다. 스마트 미디어 환경에서는 다양한 기기들을 이용하여 정보를 검색하고 활용한다. 즉 일반적인 데스크톱 PC 환경뿐 만 아니라 스마트폰, 스마트패드, 스마트 TV 등 그 종류가 다양하다. 이러한 스마트 디바이스를 서로 연결시켜주는 N-screen 서비스의 기반이 되고 있는 반응형 웹 콘텐츠에 대한 연구가 최근 증가하고 있다(Park and Yu, 2012). 또한 정보이용 사용자들은 어떤 하드웨어와 소프트웨어에 종속되지 않고 인터넷 웹을 통해 정보를 검색하고자 한다. 이러한 인터넷 정보검색 환경을 목적으로 개발되고 있는 차세대 모바일 웹 표준인 HTML5는 차세대 모바일 애플리케이션 및 플랫폼 실현을 위한 핵심기능으로 발전하고 있다(HTML5, 2014).

이 논문에서는 차세대 모바일 웹 표준기술과 웹 GIS기술을 적용하여 데스크톱 PC 뿐만 아니라, 모바일 기기를 동시에 지원하며, 언제 어디서나 편리하고 빠르게 지질정보 콘텐츠를 검색할 수 있는 반응형 웹기반의 멀티플랫폼 지질정보시스템(MGEO: Multi-platform GEOscience information system) 개발 결과를 소개한다(MGEO, 2014).


2. 재료 및 방법
2.1 지질주제도 데이터베이스

MGEO 시스템에서 제공하는 지질주제도 데이터베이스 목록은 표 1과 같다. 기존 GEOINFO 시스템에서 제공하는 지질주제도는 Bessel 타원체를 기반으로 한 우리나라 구좌표계로 제작되었다. MGEO 시스템에서는 우리나라 구좌표계로 제작된 지질주제도를 GRS80 타원체를 기반으로 한 ITRF2000 신좌표계로 변환하여 사용한다. 지질주제도 중 벡터포맷의 공간자료는 PostgreSQL DBMS에 의해 관리되며, 래스터포맷의 자료는 GeoServer에 의해 Coverage 형태로 관리된다(GeoServer, 2014; PostgreSQL, 2014).

Table 1. 
MGEO service maps (*: will provide after Dec, 2014).
Thematic maps Scale Layer configurations Data type
Geologic map 1:50,000 Lithofacies, geologic boundaries, cleavage, faults, folds, bedding, foliation, joints, section, lineation, metamorphic zone, shear zone, rack samples, deposits, mines, fossil, facilities, flow structure Vector
1:250,000 Lithofacies, geologic boundary, fault
1:1,000,000 Lithofacies, fault
Marine geologic map 1:250,000
1:500,000
Prospect line, topography, sampling location, deposits mean particle-size distribution, deposit type distribution, organic carbon distribution, deposits isopach, gravity, magnetism, seismic data
Tectonic map 1:1,000,000 Lithofacies, tectonic boundaries, mohorovicic discontinuity depth
Geochronologic map of Gyeonggi Massif 1:500,000 Intrusion or eruption age, upper limit of sedimentation age, peak metamorphic age
Isotope map 1:1,000,000 Plutonic, volcanic rocks, metamorphic rocks, ore deposits
*Metallogenic map 1:1,000,000 Metals, non-metals and coal
*Stone mine map - Marble, sandstone, diorite, gneiss, basalt, granite
Coalfield geologic map 1:10,000 Chungnam coalfield
Multipurpose
geochemical map
- Electrical Conductivity, Hydrogen ion concentration (pH), nickel (Ni), rubidium (Rb), lithium (Li), magnesium (MgO), manganese (MnO), vanadium (V), barium (Ba), strontium (Sr), zinc (Zn), zirconium (Zr), iron (Fe2O3), potassium (K2O), calcium (CaO), cobalt (Co), chromium (Cr), titanium (TiO2), lead (Pb), copper (Cu) Raster
*Geochemical m,ap of Taebeaksan ore deposit 1:50,000 Silver (Ag), arsenic (As), bismuth (Bi), cadmium (Cd), cobalt (Co), copper (Cu), molybdenum (Mo), nickel (Ni), lead (Pb), antimony (Sb), tin (Sn), uranium (U), tungsten (W), zinc (Zn) Raster
*Gravity and magnetic anomaly map - Bouguer gravity anomaly map, free-air gravity anomaly map Raster

2.2 MGEO 시스템 아키텍쳐 설계

MGEO 시스템 개발에 있어 중요한 철학은 한 개의 개발 소스 프로그램이 데스크톱 PC와 모바일 단말기를 동시에 지원하도록 하는 것이다. 즉, 모바일 단말기 지원을 위한 별도의 개발 소스 프로그램을 개발하지 않아도 되는 것이다. HTML5는 One-Source Multi-Use, 즉 하나의 소스를 다양하게 이용할 수 있다는 의미로, 인터넷 접속만 되면 스마트폰, 태블릿, 데스크톱 PC 등은 물론, 애플이나 구글 등 벤더에 상관없이 언제 어디서나 정보서비스를 이용할 수 있도록 지원한다. 이렇게 다양한 사용자 플랫폼을 지원하고, 미래기술 환경변화에 능동적으로 대응할 수 있도록 MGEO 시스템을 설계하였다(그림 1a).


Fig. 1. 
The architecture of MGEO system.

최근 오픈소스 진영에서 개발되고 있는 소프트웨어들의 완성도 및 기술적 진보성이 상용 소프트웨어 못지않게 발전하고 있다. 또한 오픈소스 프로젝트에는 세계 각국의 많은 개발자들이 자발적으로 참여하고 있어, 각종 오류에 대한 수정이 빠르고, 소프트웨어의 버전관리가 체계적으로 이루어지고 있다. 가장 큰 장점 중의 하나는 국제GIS 표준을 지원하며, 개발 툴 도입 비용과 소프트웨어 업그레이드에 따른 유지보수 비용이 적게 든다. 이러한 이유로 MGEO 시스템 개발 전 과정에 오픈소스 소프트웨어를 도입하였으며, 이를 이용하여 MGEO 시스템의 소프트웨어 아키텍처를 구성하였다(그림 1b; 표 2).

Table 2. 
MGEO system configurations.
Components Comments
Web standard HTML5
Web application server Tomcat
Web map server GeoServer
Web map service standards WMS (Web Map Service)
Spatial DBMS PostGIS
Web map client OpenLayers
Web map cache GWC (GeoWebCache)
Mobile web framework jQuery Mobile

2.2.1 하드웨어 및 운영체제

MGEO 시스템은 HP DL380G7 모델의 워크스테이션을 사용하여 개발되었다. HP DL380G7 워크스테이션은 2개의 헥사코어 CPU, 8GB의 메모리, 그리고 300GB SAS 타입 하드디스크 2개가 탑재되어 있으며, 하드디스크는 장애발생에 대비하여 RAID로 구성하였다. 워크스테이션의 하드웨어와 응용소프트웨어를 관리, 운영하기 위한 운영체제는 리눅스 계열의 CentOS를 사용하였다.

2.2.2 개발 소프트웨어 툴

• 모바일 웹 프레임워크(Mobile Web Framework)

MGEO 시스템은 차세대 웹 표준인 HTML5와 JavaScript, CSS3를 기반으로 구성된 jQuery mobile 웹 프레임워크를 기반으로 개발되었다. MGEO 시스템은 데스크톱뿐 만 아니라, 모바일 환경을 동시에 지원해야하기 때문에 사용자 인터페이스가 무엇보다 중요하다. 즉 간결하면서도 직관적이어야 하며, 정보검색이라는 본연의 기능을 충분히 달성해야 한다. 이러한 여러 가지 사항들을 고려할 때 모바일 친화적인 사용자 인터페이스가 적합한 것으로 판단하였으며, 이를 위해 모바일 웹 프레임워크를 기반으로 사용자 인터페이스를 개발하였다. jQuery mobile은 jQuery를 기반으로 만들어졌기 때문에 개발이 용이하며, 다양한 모바일 기기를 지원하는 장점이 있다(jQuery, 2014; jQuery Mobile, 2014).

• 웹 애플리케이션 서버(Web Application Server)

인터넷 상에서 HTTP를 통해 사용자 컴퓨터에서 애플리케이션을 수행하는 미들웨어 소프트웨어 엔진인 Web Application Server (WAS)는 웹 서버와 데이터베이스 서버 사이에 위치하여 트랜잭션 처리 및 다른 기존 시스템 간의 애플리케이션 연동을 주된 기능으로 한다. WAS의 종류에는 무료로 사용할 수 있는 Tomcat을 비롯하여 Web Logic, Tmax, JBOSS, WebSphere와 같은 상용제품들이 있다(JBOSS, 2014; Tomcat, 2014; Web Logic, 2014; WebSphere, 2014). MGEO 시스템은 WAS로 Apache 재단에서 제작하여 무료로 배포하고 있는 Tomcat을 사용하였다(Apache, 2014; JSP, 2014; Tomcat, 2014). Tomcat은 Java Server Page (JSP)/서블릿 컨테이너 중의 하나로 사용자에게 JSP 요청을 받으면 서블릿으로 이를 실행하는 역할을 한다(Tomcat, 2014). 즉 JSP 웹페이지를 웹 서버에 요청을 하면 이 웹페이지를 해석하고 실행하는 역할을 한다. Tomcat에는 자체 웹 서버를 가지고 독립적으로 웹서버를 운영할 수 있다.

• 웹 맵 클라이언트(Web Map Client)

서버로부터 지도를 제공받아 단말기 화면에 보여주는 웹 맵 클라이언트는 사용자가 공간정보를 웹을 통해 다양한 응용 서비스를 받을 수 있도록 인터페이스 역할을 수행한다. 웹 맵 클라이언트는 웹 브라우저에 포함된 매핑도구로 이용되기 때문에 Stand-alone 시스템보다 기능적 제약을 지니고 있다. 이러한 제약을 극복하기 위해 최근 AJAX (Asynchronous JavaScript and XML)와 같은 기술들이 이용되고 있다. 웹 맵 클라이언트는 웹 맵 서버와 상호 요청과 요청된 결과를 반환받기 위한 통신 프로토콜로 Open Geospatial Consortium (OGC) 표준인 Web Map Service (WMS), Web Feature Service (WFS), Web Coverage Service (WCS) 등을 이용한다(OGC, 2014; WCS, 2014; WFS, 2014; WMS, 2014).

MGEO 시스템에서는 GeoServer로부터 넘겨받은 지질도를 웹 브라우저 상에 표현하기 위해 OpenLayers를 사용하였다. OpenLayers는 웹브라우저 상에서 Active-X 컨트롤 등 별도의 웹 애플리케이션을 설치하지 않고 순수 Javascript 만을 이용하여 지리공간정보를 웹상에 표현할 수 있는 오픈 소스 Javascript 라이브러리이다(Javascript, 2014; OpenLayers, 2014). OpenLayers는 웹 맵 서버와 독립적인 환경에서 동작하며 OGC 표준을 준수함으로서 OGC 표준을 지원하는 다양한 웹 맵 서버와 연동하여 사용될 수 있다. 또한 여러 개의 지도를 중첩할 수 있는 멀티 레이어 중첩기능을 지원하며, WMS, WFS 등과 같은 OGC 표준을 지원하고, Naver Map, Daum Map, Google Map, OpenStreet Map 등 널리 사용되고 있는 웹 맵 서버와의 연동이 가능하다.

• 웹 맵 서버(Web Map Server)

웹 맵 서버는 웹 맵 클라이언트로부터 요청된 서비스를 처리해 주는 역할을 수행한다. 웹 맵 서버는 공간데이터베이스 관리시스템(SDBMS: Spatial Data Base Management System) 혹은 파일형태의 GIS 자료에서 정보를 추출하여 클라이언트에서 요청한 자료형태로 변환하여 제공한다. 또한 웹 맵 서버는 맵의 스타일을 설정하거나, 외부 맵 소스들과 연계한다. 이러한 맵 서비스를 가능하게 하는 상용제품으로 ArcGIS Server가 대표적이다(ArcGIS, 2014). 하지만 이러한 상용제품들은 시스템 도입과 유지관리에 많은 비용이 요구된다. 최근 오픈소스 진영에서 개발된 웹 맵 서버는 기술적, 성능적인 면에서 상당한 발전을 이루고 있으며, 초기 제품 구입비용이 들지 않고, 유지비가 저렴하다는 장점이 있다. 또한 최근 개발자와 사용자가 급속히 증가하고 있으며, 세계 많은 나라에서 사용되고 있다. 현재 개발된 오픈소스 진영의 웹 맵 서버로는 MapServer, Deegree, GeoServer 등이 있으며(Deegree, 2014; GeoServer, 2014; MapServer, 2014), MGEO 시스템은 GeoServer를 채택하여 사용하였다. GeoServer는 OGC 표준기반의 공간데이터를 제공할 수 있도록 상호호환성 유지를 위해 설계되었으며, 기존의 Google Earth 혹은 World Wind와 같은 가상 지구 서비스 및 Google Maps, Bing Maps과 같은 웹기반 지도서비스와 연동할 수 있다(Bing Maps, 2014; GeoServer, 2014; Google Earth, 2014; Google Maps, 2014; World Wind, 2014). GeoServer는 OGC의 웹 맵 서비스 표준인 WFS, WMS, WCS를 지원한다(GeoServer, 2014). 이들 웹 맵 서비스 표준을 사용할 경우 QuantumGIS, Google Earth, ArcGIS 등과 연계하여 활용할 수 있다(ArcGIS, 2014; Google Earth, 2014; QuantumGIS, 2014).

• 웹 맵 캐쉬(Web Map Cache)

일반적으로 웹 캐쉬는 웹 클라이언트가 같은 웹페이지를 요청할 경우 웹 서버까지 가지 않고 캐쉬에 저장된 페이지를 직접 응답하여 제공하는 것을 말한다. 이를 통해 웹 서버의 부하를 줄여주어 속도를 빠르게 하는 역할을 한다. 웹 맵 캐쉬는 웹 페이지 대신 지도 이미지를 캐쉬에 저장하여 웹 맵 서버의 부하를 줄여주는 것으로 기본 적인 개념은 웹 캐쉬와 동일하다. GeoServer는 자체적으로 GeoWebCache (GWC)라고 하는 캐쉬 기능을 수행하는 모듈이 포함되어 있다(GeoServer, 2014). GWC는 캐쉬에 타일 형태로 WMS 이미지를 저장하여 캐쉬 기능을 수행한다. GWC는 SEED 기능을 가지고 있어 타일 형태의 캐쉬를 미리 만들어 놓을 수 있으며, GeoServer에 통합되어 있어 사용하기 편리한 장점이 있다(GeoServer, 2014; GeoWebCache, 2014). MGEO 시스템은 GeoServer에 포함된 GWC를 사용하였다.

• 공간데이터베이스 관리시스템(SDBMS: Spatial Data Base Management System)

SDBMS는 숫자 및 문자형 데이터만을 주로 다루는 전통적인 DBMS과 달리 숫자 및 문자형 데이터는 물론 점, 선, 면으로 구성된 공간 객체를 저장하고 관리한다. 또한 SDBMS는 공간 객체에 대한 조작을 효율적으로 처리하기 위해 공간 인덱싱 기술을 사용하며, 공간 객체의 속성이나 관계를 질의하고 처리하기 위한 확장 SQL 형태의 공간함수를 지원한다. 이러한 SDBMS로는 ESRI사의 ArcSDE가 있으며, SpatialLite, TerraLib, PostGIS 등이 사용되고 있다(ArcSDE, 2014; ESRI, 2014; PostGIS, 2014; SpatialLite, 2014; TerraLib, 2014). MGEO 시스템에 사용한 PostGIS는 오픈 소스 형태로 제공되는 PostgreSQL이라는 DBMS 기반에 점, 선, 면과 같은 공간객체타입, 공간인덱스 및 공간데이터처리 함수를 갖고 있는 SDBMS로 OGC의 ‘Simple Features Specification for SQL’을 구현하였다(PostGIS, 2014). 또한 PostGIS는 ArcGIS, MapInfo, AutoCAD Map 3D와 같은 사용 GIS 제품뿐만 아니라, MapServer, GeoServer, uDIG, GRASS, gvSIG 등과 같은 오픈 소스 GIS 소프트웨어를 지원한다(ArcGIS, 2014; AutoCAD Map 3D, 2014; GeoServer, 2014; GRASS, 2014; gvSIG, 2014; MapInfo, 2014; MapServer, 2014; PostGIS, 2014; uDIG, 2014).


3. 결 과

데스크톱 PC 뿐만 아니라, 아이패드, 갤럭시탭 등 태블릿 기기를 비롯하여, 스마트폰에서 동작하는 다양한 웹 브라우저를 동시에 지원하도록 개발된 MGEO 시스템은 웹 브라우저 주소창에 『http://mgeo.kigam. re.kr or http://mgeo2.kigam.re.kr』를 입력하면 접속할 수 있다.

3.1 반응형 웹기반 사용자 인터페이스 구현

가변 그리드(Fluid Grid), 가변 이미지(Flexible Images), 미디어 쿼리(Media Queries) 기술을 통해 접속 단말기의 화면 사이즈에 따라 웹 디자인이 다르게 적용되는 반응형 웹 기술을 사용하여 MGEO 시스템의 사용자 인터페이스가 구현되었다. 반응형 웹 기술은 데스크톱 PC 이외에 스마트폰, 스마트패드와 같은 다양한 디바이스 환경에 따라 화면의 크기가 동적으로 변하도록 하는 기법이다. 반응형 웹은 단말기에 따라 콘텐츠가 각각 다르게 제공되는 것이 아니라, 하나의 콘텐츠로 인식하여 각 단말기 플랫폼에 적합한 반응형 웹 디자인을 제공한다. MGEO 시스템은 데스크톱과 모바일 단말기의 화면 레이아웃을 동시에 지원하도록 설계되었기 때문에 접속하는 단말기의 화면 크기에 따라 화면 레이아웃이 다르게 적용된다. 데스크톱 레이아웃은 타이틀, 메뉴, 콘텐츠 영역, 공지사항, 설문 및 이미지, 관련 사이트로 구성되며, 모바일 레이아웃의 구성요소는 데스크톱과 동일하지만, 단말기 화면이 작은 특성을 고려하여 선택된 메뉴에 따라 화면을 구성하는 요소가 달라지도록 구현되었다.

MGEO 시스템에 적용된 반응형 웹 디자인은 가로 화면 크기를 기준으로 하였으며, 같은 종류의 단말기일 경우라도 화면의 크기에 따라 다르게 보일 수 있다. 그림 2a는 단말기의 가로 화면 크기가 800 pixel 이상일 때 적용되는 웹 디자인으로 주로 데스크톱 PC에 적용되며, 그림 2b는 단말기의 가로 화면 크기가 800 pixel 미만일 때 적용되는 웹 디자인으로 주로 스마트 패드나 스마트 폰에 적용된다. 데스크톱 PC에서 웹 브라우저의 크기를 조절해 보면 가로 화면의 크기에 따라 웹 디자인이 동적으로 바뀌는 현상을 볼 수 있다. 이와 같은 반응형 웹 디자인은 HTML5와 CSS3의 미디어 쿼리를 통해 동작한다(CSS3, 2014; HTML5, 2014). 사용자 단말기가 MGEO 시스템에 접속하게 되면 미디어 쿼리 기능이 작동되어 단말기의 웹 브라우저의 화면 크기에 따라 CSS3 파일에 정의된 스타일 디자인 코드가 적용된다.


Fig. 2. 
The dynamic main web page of MGEO system as accessing device.

3.2 지질주제도 웹 서비스

MGEO 시스템에서 제공하는 지질주제도는 지질도, 해저지질도, 지체구조도, 경기육괴지질연대분포도, 동위원소연대지도, 다목적지화학도 등이며(그림 3), 2014년 12월까지 태백산광화대지화학도, 중자력도, 탄전지질도, 광산분포도, 석산분포도 등이 추가적으로 제공될 예정이다.


Fig. 3. 
Screen shots of web map screen of MGEO system that provides geoscience maps.

MGEO 시스템은 모바일 단말기의 터치스크린에서 지도 확대/축소/이동 시 손가락을 이용한 조작이 가능하다. 모바일 단말기에 장착된 GPS 장치, 이동통신 기지국 안테나 및 와이파이 신호를 이용하여 위치좌표를 얻을 수 있으며, ‘현위치’ 이동기능과 단말기 이동 위치에 따라 지도 위치가 자동으로 이동하는 위치 ‘트래킹’ 기능을 가지고 있다. GPS가 장착된 스마트 패드나 스마트폰에서 GPS 기능을 활성화 시켜놓으면 GPS 신호 위치가 현재 위치가 되며, GPS 신호를 끄고, 와이파이를 켠 상태라면 와이파이 신호가 있는 곳이 현재 위치가 된다. 그리고 일반 3G나 4G를 사용하는 경우에는 이동통신 기지국 안테나를 기준으로 대략적인 위치가 현재 위치가 된다. 실제 야외에서 활용할 경우에는 이러한 위치정보의 불확실성 때문에 배경영상으로 사용된 항공/위성영상 등을 이용한 위치확인이 필요하다. 또한 주소 검색 기능을 이용할 수 있으며, 지도 상에서 원하는 지역을 클릭하면 지도 속성정보를 볼 수 있다. 예를 들어 1:5만 축척 지질도에서 유성도폭의 어느 한 지역을 클릭하면 지질기호, 지층, 대표암석, 지질시대, 도폭명(발행년도), 주소 등의 정보를 파악할 수 있으며, 도폭설명서와 지질도 원도를 PDF파일로 다운로드 받을 수 있다(그림 4). 현재 MGEO 시스템의 주요기능은 표 3과 같으며, 사용자가 필요로 하는 기능을 중심으로 지속적으로 기능을 추가 개발해 나갈 계획이다.


Fig. 4. 
Viewing attribute information, and downloading report and original map of geologic map.

Table 3. 
MGEO major functions.
Functions Comments
Web browsers · Mobile device : Android, iOS safari, FireFox, Chrome, Opera
· Desktop PC: FireFox, Chrome, Internet Explorer (v9.0 higher ver.)
Zoom out/in, Panning · Mobile device: Finger (pinch) gesture or '+' ‘-’ button use for Zoom In/Out, Finger panning
· Desktop PC: Mouse wheel or '+' ‘-’ button use for Zoom In/Out, mouse panning
Current location · ‘Current location’ button for locating and move to user location
※ According to location receiving methods, the accuracy may be different.
Location tracking Tracking is a function to automatically save locations user visited. This function is activate when ‘Tracking’ button is on.
Geocoding /
Reverse geocoding
Identify real address through user’s mouse location. Vice versa, identify and move to a specific location through user’s inputted gazetteer
Layer selection Service layers are displayed when they are on in the layer list box. User can control the layer list box for selectively displaying layers.
Layer attribute
identification
· Mobile device: finger touch
· Desktop PC: left mouse click
Legend In case raster layers such as geo-chemical maps, legend images help to understand map data. This function is available when ‘Legend’ button is on.
Water mark KIGAM logos display on service layers
Scale bar Dynamic display according to the map scales

3.3 주요 요소기술 개발
3.3.1 지질도 색상/무늬/기호 등 지도표현 스타일링 처리

지질주제도와 같은 공간정보 제공 역할을 하는 GeoServer는 웹 맵 클라이언트에서 요청한 지역에 대한 지도정보를 일정한 표현형식에 맞게 변환하여 제공한다. 일반적으로 다양한 색상/무늬/기호 등의 심벌 형태로 표현되는 지질도와 같은 지도정보의 표현형식에 대한 정의는 GeoServer에 저장되며, GeoServer는 웹 맵 클라이언트로부터 요청을 받으면 정의된 표현형식에 맞게 이미지로 변환하여 웹 맵 클라이언트에게 제공한다. 이러한 심벌에 대한 표현형식은 OGC 표준으로 정의된 Styled Layer Descriptor (SLD)를 따라야 한다. SLD는 사용자와 소프트웨어가 지도데이터의 표현에 대한 제어를 할 수 있도록 하며, SLD의 스타일링 규칙은 클라이언트나 서버에서 동시에 이해할 수 있도록 한다(SLD, 2014). OGC의 Symbol Encoding (SE) 표준은 이러한 기능의 언어를 제공하며, 반면 WMS의 SLD 프로파일은 SE 애플리케이션이 WMS의 오퍼레이션을 확장하여 WMS 레이어들에 대한 표현을 가능하도록 한다. SLD는 지도의 표현방법을 묘사하기 위한 XML 스키마이다(SLD, 2014; XML, 2014). SLD는 벡터 및 래스터 데이터의 랜더링 규칙을 포함하며, 그 구조는 그림 5와 같다. 지질도의 심벌을 표현하는 SLD는 재귀적 구조를 갖는 XML 형식의 스키마이기 때문에 문법적 구조 및 포함 가능한 코드의 오류들을 검출하기가 쉽지 않다. 이 연구에서는 지질도가 가질 수 있는 특성들을 포함한 심벌 코드 생성기를 개발하여 사용하였다(그림 6).


Fig. 5. 
Hierarchical structure of Styled Layer Descriptor (SLD).


Fig. 6. 
Styled Layer Descriptor(SLD) code generator of geologic symbols.

3.3.2 사용자 관심지역 통계수집 기능

MGEO 시스템 사용자들의 지질주제도 속성정보 검색 패턴 정보를 수집하는 기능을 개발하였다. 수집된 정보를 통계분석을 하면 사용자들이 어느 지역의 지질주제도에 관심을 많이 가지고 있는지, 왜 그 지역에 관심을 많이 갖고 있는지를 파악할 수 있다. 이렇게 분석된 자료를 이용하면 사용자들의 관심사항을 파악할 수 있고, 관련 콘텐츠를 보강하여 MGEO 시스템의 활용성 높이는데 유용하게 활용할 수 있다.

3.3.3 지오코딩(Geocoding) 기능

지오코딩은 주소를 지리적 위치좌표로 변환하는 과정이며, 역 지오코딩은 지리적 위치좌표를 주소로 변환하는 과정이다. MGEO 시스템에서는 Google Geocoding API를 이용하여 지오코딩 기능을 구현하였다(Google Geocoding API, 2014). 지도화면에서 ‘주소’ 검색 버튼을 클릭하면 주소를 입력할 수 있는 화면이 나오며, 여기에 해당 주소를 입력한 후, 주소검색 결과 목록에서 해당 주소를 선택하면 선택한 주소로 지도가 이동한다. 또한 지도 화면에서 원하는 지역을 마우스 클릭(또는 손가락 터치)하면 클릭한 지역의 지리적 위치좌표가 주소로 변환되어 속성정보를 통해 확인할 수 있다.

3.3.4 위치 트래킹 기능

위치 ‘트래킹’ 기능은 HTML5의 geolocation 기능을 이용하여 사용자가 이동할 때마다 주기적으로 현재 위치를 자동으로 표시해 주는 기능이다. 지도화면의 하단에 위치한 ‘트래킹’ 버튼을 눌려 기능을 활성화 또는 비활성화 시킬 수 있다. 아래는 트래킹 기능을 수행하는 자바스크립트 소스코드 중 일부이다. 현재 위치 트래킹 기능은 일반사용자들에게는 제공되지 않으며, 시스템 관리자가 지정한 사용자만 사용할 수 있다. 향후 충분한 테스트를 거쳐 기능이 안정화 되면 일반사용자들도 사용할 수 있도록 할 계획이다.

3.3.5 지질도 Web Map Service (WMS) 기능

MGEO 시스템은 기본적으로 국제GIS표준인 WMS를 지원하도록 개발되었다. 따라서 인터넷 웹 브라우저뿐만 아니라, WMS를 지원하는 다양한 GIS 소프트웨어들을 이용하여 서비스 지도정보들을 로딩하여 활용할 수 있다. 그림 7은 ArcGIS, Google Earth 그리고 QuantumGIS에서 WMS 프로토콜을 이용하여 지질도를 로드한 것이다. 이렇게 로드한 지질도 위에 토양도, 임상도 등 다양한 주제도를 중첩하여 공간분석 등에 활용할 수 있다.


Fig. 7. 
Geologic maps which are respectively loaded on ArcGIS, Google Earth and QuantumGIS by Web Map Service(WMS) protocol.


4. 결 론

모바일 기기의 급속한 확산과 인터넷 정보검색의 환경에 혁명적인 커다란 변화를 격고 있는 상황에서 지질정보 사용자들은 어떤 하드웨어와 소프트웨어에 종속되지 않고 언제 어디서나 인터넷 웹을 통해 지질정보를 검색하여 이용하고자 한다. 이 논문에서는 최신 정보기술을 활용하여 데스크톱 PC 뿐만 아니라, 다양한 모바일 기기를 동시에 지원할 수 있는 지질정보시스템(MGEO 시스템) 개발 결과를 소개하였다. MGEO 시스템은 최신 웹GIS 기술과 HTML5, Javascript, CSS3 기술을 이용하여 사용자 단말기 종류에 따라 반응하여 화면 사이즈 및 디자인을 최적화시키는 반응형 웹기술을 적용하였으며, 시스템 개발 전 과정에 오픈소스 소프트웨어를 적용하여 고가의 상용소프트웨어의 종속으로부터 벗어나고자 하였다. 새롭게 개발된 MGEO 시스템은 데스크톱 PC 뿐 만 아니라 스마트폰 등 다양한 모바일 기기를 이용하여 언제 어디서나 지질정보를 쉽고 편리하게 검색하여 활용할 수 있다. 향후 MGEO 시스템은 공간분석 기능 등 수요자 입장에서 필요한 기능을 지속적으로 개발하고, 지질정보 콘텐츠의 내실화 및 확충을 통해 대국민 지질정보서비스를 위한 플랫폼으로서 역할을 지속해 나아갈 것이다.


Acknowledgments

이 연구는 한국지질자원연구원의 주요사업 ‘서부 경기지괴 지구조 진화 및 지질정보 구축(GP2011- 004)’의 일환으로 수행되었다.


References
1. Apache, http://www.apache.org/ (April 12, 2014), (2014).
2. ArcGIS, http://www.geowebcache.org/ (April 12, 2014), (2014).
3. ArcSDE, http://www.esri.com/software/arcgis/arcsde (April 12, 2014), (2014).
4. AutoCAD Map 3D, http://www.autodesk.co.kr/products/autodesk-autocad-map-3d/overview (April 12, 2014), (2014).
5. Bing Maps, http://www.microsoft.com/maps/ (April 12, 2014), (2014).
6. K.H Chi, J.S Lee, M.S Jin, S.J Chi, S.W Park, I.H Hwang, J.D Jo, S.B Koo, J.H Choi, I.H Park, I.S Ko, B.Y Choi, J.H Hwang, H.I Choi, Y.S Choi, W.S Ki, J.C Kim, K.Y Song, H.J Ko, K.S Ko, Y.I Kim, B.J Lee, S.R Lee, J.G Han, N.W Park, S.H Yoo, Y.W Jeon, H.T Kang, J.M Yoon, K.S Choi, H.D Lee, J.W Kim, Construction of GIS-based geological database of South Korea area, KR-01(T)-08, Korea Institute of Geoscience & Mineral Resources, (2001), p278, (in Korean with English abstract).
7. K.H Chi, J.G Han, Y.K Yeon, J.H Hwang, Y.K Hong, Y.W Kil, C.W Lee, Y.K Kim, H.J Shin, S.K Kweon, H.S Choi, S.W Park, Standardization of geological information for the intercommunity and distribution, NP2007-014-2008 (2), Korea Institute of Geoscience & Mineral Resources, (2008), p373, (in Korean with English abstract).
8. S.J Choi, W.S Ki, H.J Ko, C.W Kweon, B.C Kim, S.W Kim, Y.B Kim, Y.H Kim, H.C Kim, S.I Park, K.Y Song, Y.K Yeon, S.R Lee, S.S Lee, S.R Lee, Y.S Lee, H.J Lee, D.R Jo, B.Y Choi, J.G Han, H.J Hyun, J.H Hwang, J.A Lee, Technical development of tectonic evolution and geologic information construction, Part.1Tectonic evolution of the western Gyeonggi Block and construction of geologic DB system, (2012), p420, (in Korean with English abstract).
9. CSS3, http://www.w3schools.com/css/css3_intro.asp, (March 8, 2014), (2014).
10. Deegree, http://www.deegree.org/ (April 12, 2014), (2014).
11. ESRI, http://www.esri.com (April 20, 2014), (2014).
12. GEOINFO, http://geoinfo.kigam.re.kr (April 6, 2014), (2014).
13. GeoSever, http://www.geoserver.org/ (March 12, 2014), (2014).
14. GeoWebCache, http://www.geowebcache.org/ (April 12, 2014), (2014).
15. Google Earth, http://www.google.com/intl/ko/earth/ (April 12, 2014), (2014).
16. Google Geocoding API, https://developers.google.com/maps/documentation/geocoding/?hl=ko-KR (April 25, 2014), (2014).
17. Google Maps, https://maps.google.com/ (April 12, 2014), (2014).
18. GRASS, http://grass.osgeo.org/ (April 12, 2014), (2014).
19. gvSIG, http://www.gvsig.org/web (April 12, 2014), (2014).
20. J.G Han, B.C Kim, B.H Yu, Construction of Korea Node for IYPE OneGeology portal, Journal of the Geological Society of Korea, (2008), 44(5), p685-691, (in Korean with English abstract).
21. HTML5, http://www.w3.org/TR/html5/ (March 23, 2014), (2014).
22. JavaScript, http://www.w3schools.com/js/DEFAULT.asp (March 7, 2014), (2014).
23. JBOSS, http://www.jboss.org/overview/ (April 12, 2014), (2014).
24. jQuery, http://jquery.com/ (April 23, 2014), (2014).
25. jQuery mobile, http://jquerymobile.com/ (April 23, 2014), (2014).
26. JSP, http://www.tutorialspoint.com/jsp/ (April 12, 2014), (2014).
27. S.R Lee, J.G Han, K.H Chi, Y.I Kim, Y.K Yeon, S.S Lee, N.W Park, D.H Hwang, S.B Im, J.S Lee, J.D Jo, S.B Koo, Y.T Yoo, Establishing public service protocol for digital geological map through the super highway network, KR-B-310, Korea Institute of Geoscience & Mineral Resources, (2002), p105, (in Korean with English abstract).
28. MapInfo, http://www.mapinfo.com/ (April 12, 2014), (2014).
29. MapServer, http://mapserver.org/ (April 12, 2014), (2014).
30. MGEO, http://mgeo.kigam.re.kr or http://mgeo2.kigam.re.kr (April 25, 2014), (2014).
31. OGC, http://www.opengeospatial.org/ (April 11, 2014), (2014).
32. OneGeology, http://www.onegeology.org (April 24, 2014), (2014).
33. OpenLayers, http://www.openlayers.org/ (April 7, 2014), (2014).
34. J.W Park, G Yu, Considering a Responsive Web Contents which bases on N-screen in the Smart Media Environment, (2012), 12(3), p258-266.
35. PostGIS, http://postgis.net/ (April 12, 2014), (2014).
36. PostgreSQL, http://www.postgresql.org/ (March 8, 2014), (2014).
37. QuantumGIS, http://www.qgis.org/en/site/ (April 12, 2014), (2014).
38. SLD, http://www.opengeospatial.org/standards/sld (April 12, 2014), (2014).
39. SpatialLite, https://www.gaia-gis.it/fossil/libspatialite/index (April 12, 2014), (2014).
40. TerraLib, http://www.terralib.org/ (April 12, 2014), (2014).
41. Tmax, http://kr.tmaxsoft.com/main.do (April 12, 2014), (2014).
42. Tomcat, http://tomcat.apache.org/ (April 10, 2014), (2014).
43. uDIG, http://udig.refractions.net/ (April 12, 2014), (2014).
44. WCS, http://www.opengeospatial.org/standards/wcs (April 12, 2014), (2014).
45. Web Logic, http://www.oracle.com/technetwork/middleware/weblogic/overview/index.html (April 12, 2014), (2014).
46. WebSphere, http://www-01.ibm.com/software/kr/websphere/ (April 12, 2014), (2014).
47. WFS, http://www.opengeospatial.org/standards/wfs (April 12, 2014), (2014).
48. WMS, http://www.opengeospatial.org/standards/wms (April 12, 2014), (2014).
49. World Wind, http://worldwind.arc.nasa.gov/java/ (April 12, 2014), (2014).
50. XML, http://www.w3schools.com/xml/default.ASP (April 12, 2014), (2014).

Appendix

Appendix 1. 
Nomenclature.
AJAX: Asynchronous JavaScript and XML
API: Application Programming Interface
CSS: Cascading Style Sheets
DBMS: Data Base Management System
ESRI: Environmental Systems Research Institute
GB: Giga Byte
GIS: Geographic Information System
GPS: Global Positioning System
GWC: GeoWebCache
HP: Hewlett-Packard
HTML5: HyperText Markup Language 5
HTTP: Hypertext Transfer Protocol
ITRF2000: International Terrestrial Reference Frame 2000
JSP: Java Server Page
OGC: Open Geospatial Consortium
RAID: Redundant Array of Independent Disks
SAS: Serial Attached SCSI
SCSI: Small Computer System Interface
SDBMS: Spatial Data Base Management System
SE: Symbol Encoding
SLD: Styled Layer Descriptor
WAS: Web Application Server
WMS: Web Map Service
WFS: Web Feature Service
WCS: Web Coverage Service
XML: Extensible Markup Language