Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

지도 서비스용 웹앱 개발환경 사용기

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

  • Login to see the comments

지도 서비스용 웹앱 개발환경 사용기

  1. 1. 지도 서비스용 웹앱 개발환경 사용기 이규영/시터스 2015-05-25
  2. 2. 스마트휠 VGI : Volunteered geographic information 2014.04.01 ~ 2016.02.29 Q: 왜 만들고 있나? A: 휠체어 사용자, 청각장애인, 고령자, 임산부 등 일상생활에서 걸어서 이동이 불편한 교통약 자들에게 도보용 길안내를 할 수 없을까? Q: 누가 만들고 있나? A: 서울대 유기윤교수팀이 장애인 서비스분석, 데이 터 모델, 인터페이스 디자인을 하고 시터스가 VGI 플 랫폼 및 웹앱 설계/구현
  3. 3. Q: 고민거리 오픈소스로 공개하려면 내부 라이브러리들의 라이선스도 중요하군요.
  4. 4. 가장 중요한 고려사항 • 오픈소스로 만들 것. • 클라이언트는 HTML5 웹앱으로 만들 것.
  5. 5. 그래서 결심했습니다.
  6. 6. 너무 많잖아 -.-; 그러나 이걸 한번에 해야 하는게 풀스택 개발자의 역할.
  7. 7. 하나 하나 풀어 봅시다.
  8. 8. 아키텍처 VGI서버 PostGIS Wheelchair-Accessible Features WFS & WFS-T OpenstreetMap WMS GeoServer Extentions OpenLayers Ionic / Cordova / AngularJS VGI Client WebView/DeviceAppServer VGI웹앱 RESTful 먼저 그림부터
  9. 9. 개발환경 • Mac OS X • iOS와 Android 동시 개발 가능 • 맥북프로 레티나 고급형 CTO 권장 • Ubuntu • Android만 개발할거면 VirtualBox에 올려서 사용. • Windows • 개발환경 설정이 어려움. • npm을 사용해야는데 이상하게 힘듬 npm은 Linux 모듈에 많이 의존 세미나 발표자료에 이런 멘트 한번 해줘야, 회사에 서 개발자들에게 좋은 장 비를 사줌. 다른 개발자에게 통째로 개발환경을 줘 버릴 수 있 음. 개발 머신 / 플랫폼
  10. 10. 개발환경 • 멀티플랫폼 에디터 • 서버/클라이언트, 맥/리눅스/PC, Java/Javascript/Go/CoffeeScript/… 등등 플랫폼과 언어를 넘나들며 코딩을 해야하는 풀스택 개발자에게 반드시 필요함. • ex) Sublime Text, Bracket, Atom, Light Table • 멀티플랫폼 웹브라우저 • 맥/리눅스/PC • 웹 인스펙터/파이어버그/… 에디터, 디버거
  11. 11. 개발환경 $ 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 아이오닉
  12. 12. 개발환경 아이오닉 • iOS-styled UX • Sass -> CSS UI Controls • AngularJS directive -> JS UI Controls • Ionic 웹폰트 -> 아이콘으로 활용 하면 해상도에 따라 비트맵을 만 들 필요가 없다 • 하부 프레임워크는 AngularJS에 의 존 스페셜한 에포트없이도 스타일리쉬한 웹앱을 만 들 수 있다. Ionic 스터디하면서 AngularJS가 물건임을 깨달음.
  13. 13. 개발환경 아이오닉 • 문제점 • iOS 위주라 Android용 웹앱을 위한 HW back key를 hook해서 처리를 해줘야 함. • release로 빌드할 경우 설치가 안됨. • 구글링해 보니 한글 문제로 추정. • Cordova Native 구현부가 완전히 한글화되어 있지 않음 • Ex) ImagePicker 사용할 때 영문 갤러리가 나옴. • …
  14. 14. 그러나 이 모든 문제점을 상쇄할 만큼 멋진 HTML5 모바일 프레임워크
  15. 15. 이제 다 된건가?
  16. 16. 지도란 무엇인가? mappa mundi
  17. 17. 지도 데이터 3대 요소 배경지도 시설물 네트워크
  18. 18. 배경지도 OpenstreetMap • Google Maps API – 무료이나 일일 최대 25,000번 지도로딩 제한 • 구글 어스 공익사업 프로그램을 이용할 수도 있었음. • OpenstreetMap – 제한은 없으나 배경지도 품 질은 그닥 좋지 않음 • 배경지도를 직접 만들려고 해도 측량협회 “성과심사” 라는 무시무시한 복병이 있음 map = new ol.map({ layers: [new ol.layer.Tile({ source: new ol.source.OSM() })], ... }); 결국 OpenstreetMap을 사 용하기로 함.
  19. 19. 시설물 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)
  20. 20. 네트워크 도로 보행자용으로 구축된 서울지역 네트워크 데이터 . 어찌보면 표현에 따라 무섭기도 하고 아름답기도 한 데이터다. • 사용자에게 드러나지 않은 지도 데이 터로 경로안내를 위해 필요. • Node와 Link로 이루어진 graph 형태 로 다루어진다. • Topology 정보를 포함하고 있어 공간 DB에 저장해야 함. • PostgreSQL DBMS에 PostGIS extenstion 설치해서 네트워크 데이터 를 관리함. • Back-End에서 Java나 Python으로 다룰 수 있다.
  21. 21. OpenLayers 3.0 OpenLayers/AngularJS • 웹브라우저에서 지도 데이터를 다루는 Javascript 라이브러리 • 배경, 시설물, 네트워크 • FreeBSD 라이선스 • 3.0부터 아키텍처가 무척 나이스해졌음~ • 3.0 API는 완전하지 않아, 커뮤니티에서 열심히 개발하고 있음 • AngularJS directive 프로젝트가 있으나, 공부도 할 겸 AngularJS Factory로 직접 만듦 • 컨트롤러에서 언제든 지도를 표현할 수 있게 됨 • 역시 초기화 문제 등 자잘한 문제들이 있으나, 꼼수로 해결
  22. 22. 이제 영혼까지 끌어 모아! 뭘!?
  23. 23. 감상 • Ionic은 꽤 괜찮은 모바일용 웹앱 프레임워크. • 프레임워크에서 제공하는 UI 기능만 쓴다면, 성능이 괜찮음 • UI 컴포넌트는 최대한 스케일러블 해야함. SVG나 웹폰트로 다루니 다양한 레이아웃에 대응이 편함. • AngularJS는 멋진 SPA 웹앱 프레임워크임을 새삼 느낌 • Declarative Programming – imperative 방법으로 개발하면 안됨. • $scope /service/module를 통한 격리 • OpenLayers는 2.0에 비해 3.0이 아키텍처 상으로 훌륭함 모바일용으로도 손색이 없음 • 모바일에 특화한 Leaflet도 괜찮아 보임.
  24. 24. 감상 • 늘 그러하듯 Ionic 프레임워크를 벗어나는 “갑”이 이상한 UI 기능을 요구하면 골치아픔 • OGC 프로토콜들은 RESTful API가 아니어서 거부감이 있음 • Map Design • 배경지도에 스타일을 적용할 수 있는 웹지도 서비스를 찾아보기 힘듬. • 국내 지도 성과심사에 대한 유감 • 구글을 포함한 포탈들은 자사의 서비스에 종속시키기 위해 별도의 독립 적인 배경지도 서비스를 하지 않음. • CartoDB - https://cartodb.com/

×