Windows10 Mobile용 자전거 내비 개발

윈도폰을 벌써 세 개째 쓰고 있지만, 이전 폰까지는 윈도 스토어에 있는 티맵이 잘 동작해서 별 생각이 없었다. 그런데 루미아950XL로 폰을 바꾼 뒤 보니까 티맵이 여기엔 설치가 안된다!! 이유는 정확히 알 수 없지만 하드웨어 요구사항을 충족하지 않는다나... 어쨌든 최근에 자전거를 샀는데 길을 모르면 자전거를 타고 함부로 나갈 수가 없기 때문에 자전거용 내비를 만들어야겠다는 생각을 했다.

개요

윈도폰을 벌써 세 개째 쓰고 있지만, 이전 폰까지는 윈도 스토어에 있는 티맵이 잘 동작해서 별 생각이 없었다. 그런데 루미아950XL로 폰을 바꾼 뒤 보니까 티맵이 여기엔 설치가 안된다!! 이유는 정확히 알 수 없지만 하드웨어 요구사항을 충족하지 않는다나... 어쨌든 최근에 자전거를 샀는데 길을 모르면 자전거를 타고 함부로 나갈 수가 없기 때문에 자전거용 내비를 만들어야겠다는 생각을 했다.

개발 과정

개발 환경 선택

먼저 제일 중요한 건 길찾기와 지도다. 이걸 어디서 가져오느냐... 역시 티맵이 진리 아닐까? 하는 마음에 티맵 API 가 있는지 찾아봤는데, 있었다! 늘 그렇지만 API 는 iOS, Android, Web(javascript) 이렇게 세 가지만 지원하고 있었다. 앞의 두 개는 당연히 안되고, 그러면 어쩔 수 없이 js 버전을 사용할 수 밖에 없다. 결국 티맵 API 가 나머지 개발 환경을 결정지어 버렸다.

Tmap API

일단 개발자 등록을 한다. 이건 뭐 별로 설명할 건덕지가 없다. 그냥 하면 된다. 개발자 등록 하고, 앱 등록 하고, sdk 사용법을 대충 보면 된다. UWP 개발시 외부 스크립트를 불러오려고 하면 보안때문에 불러와지지 않는다. 이 부분은 package.appxmanifest 에서 Content URIs 에다가 ms-appx-web:// 를 넣고 WinRT AccessAll 로 설정한 뒤에 Application 항목의 Start pagems-appx-web://default.html 로 변경해서 해결했다. 외부 스크립트, css, 지도 데이터 등등등을 불러와야 하기 때문에 Capabilities 에서 Internet (Client), Internet (Client & Server), Private Networks (Client & Server) 를 설정해줘야 한다. 지도를 표시하는 부분은 어렵지 않지만, 현재 진행 방향에 맞춰서 지도를 회전하려고 보니까 딱히 그런 API 를 제공하지는 않는 것 같다. 그래서 그냥 지도 크기를 화면상의 지도보다 크게 만들어서 돌리는 걸로 해결했다. 왜 크게 만들어야 하냐면 지도가 사각형 공간에 표출되기 때문에 회전하다보면 빈 공간이 보이기 때문이다. 피타고라스찡이 잘 정리해준대로 화면상의 지도 영역의 대각선 길이를 구한(sqrt(ww+hh)) 다음에 각 변을 대각선길이만큼 설정한 지도를 생성하면 된다. 장소 검색이야 뭐 그냥 API 에서 잘 뱉어줬고.. 경로 탐색도 문서 보고 삽질 좀 하니까 잘 됐다. 경로 표시해주는 부분은, 그러라고 만들어 둔 거 같진 않았지만 티맵 API 페이지의 기본 예제를 뜯어보고 어떻게 요래조래 구현했다. 사실 테스트하면서 사용해보니까 별 필요는 없었지만 그래도 구색을 갖추기 위해 단계별로 안내 문구도 표시해주게 했지만... 글쎄 이게 뭐 딱히 큰 쓸모가 있을지는... 스토어 제출을 위해서 패키지를 업로드하고 나서야 재탐색 버튼을 안 만든 걸 떠올렸지만 일단 뭐 없어도 별 상관은 없으니까.. 다음에 혹시 버전업 하게 되면 추가해야지. 개인적으로 사용해본 결과, 자전거용 내비에 자동 재탐색 기능은 별 쓸모가 없었다. 그냥 길에서 좀 벗어나도 원래 경로를 계속 표시해주는 게 더 편하더라. 혹시 아닌 사람이 있을지도 모르니까 이 부분도 나중에 버전업하게 되면 추가해야겠다.

ReactJS

어차피 웹앱(이라기도 애매하다 UWP-Universal Windows Platform으로 빌드하면 js 파일을 모조리 바이트코드로 컴파일해준다)이니까 좀 편하게 개발하기 위해서 리액트를 갖다 쓰기로 했다. 일단 리액트 홈페이지에 가서 예제를 좀 보고 최신 버전 파일을 다운받아서 프로젝트에 포함시켰다. 리액트를 처음 본 거라 삽질을 꽤 하긴 했지만 jsx 가 편해서 결국은 훨씬 간단하게 구현되었다.

webpack

요즘 리액트는 babel로 컴파일해야 되는 것 같다. 어차피 앱이란 게 배포하고 나서 라이브로 수정할 일이 없으니 사전에 컴파일해서 js 파일로 만들어 두는 게 좋다. 그래서 찾아낸 게 웹팩이었다. 하는 김에 css 대신 less 도 쓰기로 했다. 빌드 할 때 자동으로 webpack 으로 컴파일하는 과정을 먼저 넣으면 좋겠지만 컴맹인 나는 그런 설정 방법은 모른다. 그런데 시간 쓰고 싶지도 않고.. 그래서 그냥 간단하게 jsx 파일이랑 less 파일을 모아서 번들로 뽑아내도록 webpack.config.js파일을 작성하고 웹팩 빌드 명령어를 외부 툴에 넣은 뒤 단축키를 설정했다. 그냥 빌드 전에 눌러주면 bundle.js 파일이 생성된다.

GPS

처음에는 멍청하게 웹 브라우저의 location API 를 가지고 작성했다. 아마 자꾸 브라우저에서 테스트하다 보니까 그랬던 거 같다. 생각해보면 이건 어차피 윈도 스토어 앱이니까 그냥 Windows.Devices.Geolocation 네임스페이스에 있는 API 들로 변경했다. 현재 향한 방향의 경우에는... GPS 에서 주는 방향은 이동중에만 확인이 가능하다. 이 부분도 개선안을 생각은 해뒀는데 코드에 넣는다는 걸 까먹고 그냥 스토어에 패키지를 제출해버렸당...

이미지 리소스

로딩 이미지는 웹에서 찾아 썼고 나머지는 그렸다. 지도 이미지는 당연한 얘기지만 SK 제공이고, 작은 아이콘들은 Segoe MDL2 AssetsSegoe UI 폰트들에 들어있는 문자들을 그냥 썼다. 어차피 윈도 앱이니까 이런건 걱정이 없다.

스토어 등록

대충 만들고 좀 테스트 해 보고 적당히 동작하는거 확인한 후에 그냥 패키징해서 윈도 스토어에 제출했다. 투잡 금지 규정에 묶여있기 때문에 광고도 못 달고 무료 앱이라서 속은 쓰리지만, 뭐 그러니까 이렇게 대충 만든 것도 거리낌 없이 막 올리는 거니까 그 부분은 장점일지도 모른다. 개발자 등록 해 둔 게 아까우니까 뭐든간에 만들면 재깍재깍 등록하는게 좋을 것 같다. 스토어에 등록하기 전에 꼭 해야 하는 작업이 뭐냐면, .js 파일을 모조리 UTF-8 + BOM 인코딩으로 변경해서 저장하는 거다. 바이트코드를 생성하려면 이게 기본 조건이다. utf-8 까진 이해하는데 마소는 왜 이렇게 BOM 을 좋아하는건지 모르겠다. 아 귀찮은 놈들 같으니..

기타

난 디자인 감각이 정말 구리다. 내가 열심히 만든 앱을 보고 아내가 비웃더니 조금씩 조금씩 고칠 부분을 알려줬는데, 아 정말 어이없게 사소한 것들인데도 고치니까 훨씬 나아졌다. 디자인 감각을 연마하려면 뭘 해야 하는걸까... 자전거 사놓고 별로 안 타게 될 것 같아서 불안했는데 이거 만드는 동안 테스트하느라 그나마 좀 타게 된 건 정말 장점이다. 날씨 풀리면 더 타야지. 그러나 저러나 다른건 다 그렇다 치고 그냥 티맵이 설치만 됐어도 내가 굳이 이 짓은 안 했을텐데.. 다음에 이거 달고 자전거 타러 나갈 때는 앱 작동 영상을 찍어서 추가해야지. GPS 기반 앱은 방구석에 앉아서는 제대로 작동 영상을 찍을 수가 없다는 단점이 있다. 스토어 등록이 완료되더라도 사실 윈도폰 사용자가 국내에 별로 없고 그 중에 자전거를 타면서 핸드폰으로 내비를 보고 싶은 사람은 정말 별로 없을 예정이기 때문에 아마 다운로드 수는 처참할 게 분명하다. 안타까운 일이다. 선점효과 따위 없는 윈도폰의 현실 ㅠㅠ

[이전 글] 리듬게임 쿵치딱 개발기

지난 2016 던파/사퍼 한데이에 참가했던 리듬게임 "쿵치딱"의 개발 과정에 대해 간략하게 정리해본다. 각 세부항목들에 대해서도 기회가 되면 따로 글을 쓰면 좋겠지만 아마도 나는 그렇게까지 부지런할리가 없기 때문에 그런 일은 없을 것 같은 슬픈 예감이 든다..