지도서비스용웹앱

개발환경사용기이규영/시터스

2015-05-25

스마트휠VGI : Volunteered geographic information2014.04.01 ~ 2016.02.29

Q: 왜만들고있나?A: 휠체어사용자,청각장애인,고령자,임산부등일상생활에서걸어서이동이불편한교통약자들에게도보용길안내를할수없을까?

Q: 누가만들고있나?A: 서울대유기윤교수팀이장애인서비스분석,데이터모델,인터페이스디자인을하고시터스가 VGI 플랫폼및웹앱설계/구현

Q: 고민거리

오픈소스로공개하려면내부라이브러리들의라이선스도중요하군요.

가장중요한고려사항

• 오픈소스로만들것.

• 클라이언트는 HTML5

웹앱으로만들것.

그래서결심했습니다.

너무많잖아 -.-;

그러나이걸한번에해야하는게풀스택개발자의역할.

하나하나풀어봅시다.

아키텍처

VG

I서버

PostGIS

Wheelchair-AccessibleFeatures

WFS & WFS-T

OpenstreetMapWMS

GeoServer

Extentions

OpenLayers

Ionic / Cordova / AngularJS

VGI Client

WebView/DeviceAppServer

VG

I웹앱

RESTful

먼저그림부터

개발환경

• Mac OS X• iOS와 Android 동시개발가능• 맥북프로레티나고급형 CTO 권장

• Ubuntu• Android만개발할거면

VirtualBox에올려서사용.

• Windows• 개발환경설정이어려움.• npm을사용해야는데이상하게힘듬

npm은 Linux 모듈에많이의존

세미나발표자료에이런멘트한번해줘야,회사에서개발자들에게좋은장

비를사줌.

다른개발자에게통째로개발환경을줘버릴수있

음.

개발머신 / 플랫폼

개발환경

• 멀티플랫폼에디터• 서버/클라이언트,

맥/리눅스/PC,Java/Javascript/Go/CoffeeScript/…등등플랫폼과언어를넘나들며코딩을해야하는풀스택개발자에게반드시필요함.

• ex) Sublime Text, Bracket, Atom, Light Table

• 멀티플랫폼웹브라우저• 맥/리눅스/PC• 웹인스펙터/파이어버그/…

에디터, 디버거

개발환경

$ npm install -g cordova ionicinstalled OK.

$ ionic start vgi tabsmade app’s template files.

$ cd vgi$ ionic platform add android...$ ionic build android...$ ionic emulate android...$ The End

Advanced HTML5 Hybrid Mobile

App Framework

아이오닉

개발환경아이오닉

• iOS-styled UX• Sass -> CSS UI Controls• AngularJS directive -> JS UI Controls• Ionic 웹폰트 -> 아이콘으로활용하면해상도에따라비트맵을만들필요가없다

• 하부프레임워크는 AngularJS에의존

스페셜한에포트없이도스타일리쉬한웹앱을만

들수있다.

Ionic스터디하면서AngularJS가물건임을

깨달음.

개발환경아이오닉

• 문제점

• iOS 위주라 Android용웹앱을위한

HW back key를 hook해서처리를해줘야함.

• release로빌드할경우설치가안됨.

• 구글링해보니한글문제로추정.

• Cordova Native 구현부가완전히한글화되어있지않음

• Ex) ImagePicker 사용할때영문갤러리가나옴.

• …

그러나이모든문제점을상쇄할만큼

멋진

HTML5 모바일프레임워크

이제다된건가?

지도란무엇인가?

mappa mundi

지도데이터 3대요소

배경지도

시설물

네트워크

배경지도OpenstreetMap

• Google Maps API – 무료이나일일최대25,000번지도로딩제한• 구글어스공익사업프로그램을이용할

수도있었음.• OpenstreetMap – 제한은없으나배경지도품

질은그닥좋지않음• 배경지도를직접만들려고해도측량협회

“성과심사” 라는무시무시한복병이있음

map = new ol.map({layers: [new ol.layer.Tile({

source: new ol.source.OSM()})],...

});

결국 OpenstreetMap을사용하기로함.

시설물GeoServer

• GeoServer• OSGeo 레퍼런스서버• 한국어매뉴얼 -

http://www.osgeo.kr/149• 따라서상용서비스를하

려면튜닝각오를해야함.• 단독서버로돌리지말고

톰캣에서 WAR로돌릴것.

• WFS & WFS-T• 장애인시설물 DB와클라이언트와의인터페이스를위해사용함.• 이유는 GeoServer의 WFS와 WFS-T 프로토콜을이용하기위함임.

아니면시설물 CURD를위해별도의 RESTFul API를구현해야함.• HTTP/GML 조합의 OGC 프로토콜 (Web Feature Service)

네트워크도로

보행자용으로구축된서울지역네트워크데이터 .

어찌보면표현에따라무섭기도하고아름답기도한데이터다.

• 사용자에게드러나지않은지도데이터로경로안내를위해필요.

• Node와 Link로이루어진 graph 형태로다루어진다.

• Topology 정보를포함하고있어공간DB에저장해야함.

• PostgreSQL DBMS에 PostGISextenstion 설치해서네트워크데이터를관리함.

• Back-End에서 Java나 Python으로다룰수있다.

OpenLayers 3.0OpenLayers/AngularJS

• 웹브라우저에서지도데이터를다루는 Javascript 라이브러리

• 배경, 시설물, 네트워크

• FreeBSD 라이선스

• 3.0부터아키텍처가무척나이스해졌음~

• 3.0 API는완전하지않아, 커뮤니티에서열심히개발하고있음

• AngularJS directive 프로젝트가있으나, 공부도할겸 AngularJS Factory로직접

만듦

• 컨트롤러에서언제든지도를표현할수있게됨

• 역시초기화문제등자잘한문제들이있으나, 꼼수로해결

이제영혼까지끌어모아!

뭘!?

감상• Ionic은꽤괜찮은모바일용웹앱프레임워크.

• 프레임워크에서제공하는 UI 기능만쓴다면, 성능이괜찮음

• UI 컴포넌트는최대한스케일러블해야함.

SVG나웹폰트로다루니다양한레이아웃에대응이편함.

• AngularJS는멋진 SPA 웹앱프레임워크임을새삼느낌

• Declarative Programming – imperative 방법으로개발하면안됨.

• $scope /service/module를통한격리

• OpenLayers는 2.0에비해 3.0이아키텍처상으로훌륭함

모바일용으로도손색이없음

• 모바일에특화한 Leaflet도괜찮아보임.

감상• 늘그러하듯 Ionic 프레임워크를벗어나는 “갑”이이상한 UI 기능을요구하면

골치아픔

• OGC 프로토콜들은 RESTful API가아니어서거부감이있음

• Map Design

• 배경지도에스타일을적용할수있는웹지도서비스를찾아보기힘듬.

• 국내지도성과심사에대한유감

• 구글을포함한포탈들은자사의서비스에종속시키기위해별도의독립

적인배경지도서비스를하지않음.

• CartoDB - https://cartodb.com/