HTML5 웹앱인 스마트휠을 개발하면서 사용했던 빌드환경, 라이브러리 등등 개발환경 사용기.

1. 지도 서비스용
웹앱
개발환경 사용기
이규영/시터스
2015-05-25

2. 스마트휠
VGI : Volunteered geographic information
2014.04.01 ~ 2016.02.29
Q: 왜 만들고 있나?
A: 휠체어 사용자, 청각장애인, 고령자, 임산부
등 일상생활에서 걸어서 이동이 불편한 교통약
자들에게 도보용 길안내를 할 수 없을까?
Q: 누가 만들고 있나?
A: 서울대 유기윤교수팀이 장애인 서비스분석, 데이
터 모델, 인터페이스 디자인을 하고 시터스가 VGI 플
랫폼 및 웹앱 설계/구현

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

4. 가장 중요한 고려사항
• 오픈소스로 만들 것.
• 클라이언트는 HTML5
웹앱으로 만들 것.

5. 그래서 결심했습니다.

7. 너무 많잖아 -.-;
그러나
이걸 한번에 해야 하는게
풀스택 개발자의 역할.

8. 하나 하나 풀어 봅시다.

9. 아키텍처
VGI서버
PostGIS
Wheelchair-Accessible
Features
WFS & WFS-T
OpenstreetMap
WMS
GeoServer
Extentions
OpenLayers
Ionic / Cordova / AngularJS
VGI Client
WebView/DeviceAppServer
VGI웹앱
RESTful
먼저 그림부터

10. 개발환경
• Mac OS X
• iOS와 Android 동시 개발 가능
• 맥북프로 레티나 고급형 CTO 권장
• Ubuntu
• Android만 개발할거면
VirtualBox에 올려서 사용.
• Windows
• 개발환경 설정이 어려움.
• npm을 사용해야는데 이상하게 힘듬
npm은 Linux 모듈에 많이 의존
세미나 발표자료에 이런
멘트 한번 해줘야, 회사에
서 개발자들에게 좋은 장
비를 사줌.
다른 개발자에게 통째로
개발환경을 줘 버릴 수 있
음.
개발 머신 / 플랫폼

11. 개발환경
• 멀티플랫폼 에디터
• 서버/클라이언트,
맥/리눅스/PC,
Java/Javascript/Go/CoffeeScript/…
등등
플랫폼과 언어를 넘나들며 코딩을 해야하는
풀스택 개발자에게 반드시 필요함.
• ex) Sublime Text, Bracket, Atom, Light Table
• 멀티플랫폼 웹브라우저
• 맥/리눅스/PC
• 웹 인스펙터/파이어버그/…
에디터, 디버거

12. 개발환경
$ npm install -g cordova ionic
installed OK.
$ ionic start vgi tabs
made app’s template files.
$ cd vgi
$ ionic platform add android
...
$ ionic build android
...
$ ionic emulate android
...
$ The End
Advanced HTML5
Hybrid Mobile
App Framework
아이오닉

13. 개발환경
아이오닉
• iOS-styled UX
• Sass -> CSS UI Controls
• AngularJS directive -> JS UI Controls
• Ionic 웹폰트 -> 아이콘으로 활용
하면 해상도에 따라 비트맵을 만
들 필요가 없다
• 하부 프레임워크는 AngularJS에 의
존
스페셜한 에포트없이도
스타일리쉬한 웹앱을 만
들 수 있다.
Ionic 스터디하면서
AngularJS가 물건임을
깨달음.

14. 개발환경
아이오닉
• 문제점
• iOS 위주라 Android용 웹앱을 위한
HW back key를 hook해서 처리를 해줘야 함.
• release로 빌드할 경우 설치가 안됨.
• 구글링해 보니 한글 문제로 추정.
• Cordova Native 구현부가 완전히 한글화되어 있지 않음
• Ex) ImagePicker 사용할 때 영문 갤러리가 나옴.
• …

15. 그러나
이 모든 문제점을 상쇄할 만큼
멋진
HTML5 모바일 프레임워크

16. 이제 다 된건가?

17. 지도란 무엇인가?
mappa mundi

18. 지도 데이터 3대 요소
배경지도
시설물
네트워크

19. 배경지도
OpenstreetMap
• Google Maps API – 무료이나 일일 최대
25,000번 지도로딩 제한
• 구글 어스 공익사업 프로그램을 이용할
수도 있었음.
• OpenstreetMap – 제한은 없으나 배경지도 품
질은 그닥 좋지 않음
• 배경지도를 직접 만들려고 해도 측량협회
“성과심사” 라는 무시무시한 복병이 있음
map = new ol.map({
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
...
});
결국 OpenstreetMap을 사
용하기로 함.

20. 시설물
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)

21. 네트워크
도로
보행자용으로 구축된
서울지역 네트워크 데이터 .
어찌보면 표현에 따라 무섭기도
하고 아름답기도 한 데이터다.
• 사용자에게 드러나지 않은 지도 데이
터로 경로안내를 위해 필요.
• Node와 Link로 이루어진 graph 형태
로 다루어진다.
• Topology 정보를 포함하고 있어 공간
DB에 저장해야 함.
• PostgreSQL DBMS에 PostGIS
extenstion 설치해서 네트워크 데이터
를 관리함.
• Back-End에서 Java나 Python으로 다룰
수 있다.

22. OpenLayers 3.0
OpenLayers/AngularJS
• 웹브라우저에서 지도 데이터를 다루는 Javascript 라이브러리
• 배경, 시설물, 네트워크
• FreeBSD 라이선스
• 3.0부터 아키텍처가 무척 나이스해졌음~
• 3.0 API는 완전하지 않아, 커뮤니티에서 열심히 개발하고 있음
• AngularJS directive 프로젝트가 있으나, 공부도 할 겸 AngularJS Factory로 직접
만듦
• 컨트롤러에서 언제든 지도를 표현할 수 있게 됨
• 역시 초기화 문제 등 자잘한 문제들이 있으나, 꼼수로 해결

23. 이제
영혼까지 끌어 모아!
뭘!?

24. 감상
• Ionic은 꽤 괜찮은 모바일용 웹앱 프레임워크.
• 프레임워크에서 제공하는 UI 기능만 쓴다면, 성능이 괜찮음
• UI 컴포넌트는 최대한 스케일러블 해야함.
SVG나 웹폰트로 다루니 다양한 레이아웃에 대응이 편함.
• AngularJS는 멋진 SPA 웹앱 프레임워크임을 새삼 느낌
• Declarative Programming – imperative 방법으로 개발하면 안됨.
• $scope /service/module를 통한 격리
• OpenLayers는 2.0에 비해 3.0이 아키텍처 상으로 훌륭함
모바일용으로도 손색이 없음
• 모바일에 특화한 Leaflet도 괜찮아 보임.

25. 감상
• 늘 그러하듯 Ionic 프레임워크를 벗어나는 “갑”이 이상한 UI 기능을 요구하면
골치아픔
• OGC 프로토콜들은 RESTful API가 아니어서 거부감이 있음
• Map Design
• 배경지도에 스타일을 적용할 수 있는 웹지도 서비스를 찾아보기 힘듬.
• 국내 지도 성과심사에 대한 유감
• 구글을 포함한 포탈들은 자사의 서비스에 종속시키기 위해 별도의 독립
적인 배경지도 서비스를 하지 않음.
• CartoDB - https://cartodb.com/