1. 개요

내가 가지고 있는 유일한 웨어러블 디바이스인 Microsoft Band2(이하 Band).
이걸 이용해서 뭔가 앱을 만들고 싶었는데 마땅한 아이디어가 생각나지 않았다.
~~(아이디어가 있어도 이미 나와있는 앱들이 많았다. 배경화면꾸미기라던지, 바코드 타일같은..)~~
Smart Band라고해도 결국 시계아닌가! 간단하게 마을버스 배차 시간표를 만들어보고자 한다.

2. 준비

2.1. 플랫폼 설정

Microsoft는 개발자들을 위해서 개발도구인 SDK를 제공한다.
글 쓰는 현재 시점에선 Cloud API를 제외하곤 SDK, WebTile의 지원이 중단된 상태이다.

하지만 가장 최근에 릴리즈된 UWP, Xamarin SDK는 Nuget을 통하여 사용이 가능하다. 굳이 왜 지원을 중단했는지 아쉽다.
WebTile 또한 지원이 중단된 것으로 나오지만 WebTile의 Store역할을 하는 Gallery만 지원이 중단된 듯하고, “Get started” 버튼을 누르면 아직 사용이 가능하다.

간단한 배차 시간표 App을 만들어 볼 생각이기 때문에 플랫폼을 WebTile로 설정하기로 한다.

2.1.1. Web Tile

개발관련 문서는 역시 Microsoft다. https://developer.microsoftband.com 이곳에서 12분12초짜리 WebTile Development Tutorial 동영상과 21페이지 짜리 WebTile Document 만 있으면Band WebTile 개발준비는 끝인것 같다.

2.2. 배차 시간표

일단 우리동네 마을버스(서울 광진02)는 운행거리가 짧아서 배차간격이나 실시간 위치정보까지도 필요없이~~(있으면 좋겠지만)~~ 정해진 시간에 종점인 버스 정류소를 지난다. 배차시간표는 아래와 같이 제공된다. (급하게 찍느라 떨렸네;;)

WebTile을 만들기 위해선 json 또는 xml 이 필요하므로 위의 사진을 이용해서 간단히(~~라고 쓰고 노가다라고 읽는다~~) json파일을 작성해 보았다.

{
	"name" : "광진02",
	"timeTable" : 
	[
		{
			"weekdays" :
			[
				{
					"station" : "긴고랑",
					"times" : "06:00,06:10,06:20,06:30,06:40,06:50,07:00,07:10,07:20,07:30,07:40,07:50,08:00,08:15,08:30,08:45,09:00,09:20,09:40,10:00,10:20,10:40,11:00,11:20,11:40,12:00,12:20,12:40,13:00,13:20,13:40,14:00,14:20,14:40,15:00,15:20,15:40,16:00,16:20,16:40,17:00,17:20,17:40,18:00,18:20,18:40,19:00,19:20,19:40,20:00,20:20,20:40,21:00,21:20,21:40,22:00,22:20"
				},
				{
					"station" : "군자역",
					"times" : "06:10,06:20,06:30,06:40,06:50,07:00,07:10,07:20,07:30,07:40,07:50,08:00,08:15,08:30,08:45,09:00,09:20,09:40,10:00,10:20,10:40,11:00,11:20,11:40,12:05,12:25,12:40,13:00,13:20,13:40,14:00,14:20,14:40,15:00,15:20,15:40,16:00,16:20,16:40,17:00,17:25,17:45,18:00,18:20,18:40,19:00,19:20,19:40,20:00,20:20,20:40,21:00,21:20,21:40,22:00,22:20,22:30"
				},
			]
		},
		{
			"holidays" :
			[
				{
					"station" : "긴고랑",
					"times" : "07:00,07:25,07:50,08:15,08:40,09:05,09:30,09:55,10:20,10:45,11:10,11:35,12:00,12:25,12:50,13:15,13:40,14:05,14:30,14:55,15:20,15:45,16:10,16:35,17:00,17:25,17:50,18:15,18:40,19:05,19:30,19:55,20:20,20:45,21:10,21:35,22:00,22:20"
				},
				{
					"station" : "군자역",
					"times" : "07:10,07:35,08:00,08:25,08:50,09:15,09:40,10:05,10:30,10:55,11:20,11:45,12:10,12:35,13:00,13:25,13:50,14:15,14:40,15:05,15:30,16:20,16:45,17:15,17:40,18:05,18:30,18:55,19:20,19:45,20:10,20:35,21:00,21:25,21:50,22:10,22:30"
				}
			]
		}
	]
}

3. 개발

개발이라고 하기에도 민망하다. 위에서 준비한 json 파일을 웹서버에 올려두고 Tutorial에서 봤던대로 끌어다 놓고, 아이콘 이미지 추가하면 끝이다.

WebTile 개발자 사이트에서 “Get started” 버튼을 누르자.

3.1. Choose a layout

Band의 레이아웃을 선택하는 화면이다. 평일/공휴일별, 긴고랑/군자역의 시간표가 필요하기때문에 총 4페이지로 App을 구성하도록 한다. 그래서 Multiple page tile을 선택하고 화면은 시간이 여러줄 보여야하므로 Scrolling text wrap를 선택하고 Next 버튼을 클릭해서 다음 화면으로 넘어간다.

3.2. Submit your data

webtiledev3
위에서 만들어놓았던 json 파일을 웹서버에 업로드하고, 그 주소를 텍스트박스에 입력후 Next 버튼을 누른다.

3.3. Assign your data

json 파일이 한글깨짐과 함께 멋지게(?) 파싱된다. 일단 한글문제는 놔두고, Tutorial에서 보았던 것처럼 원하는 항목을 Drag&Drop으로 채우면 된다.
조금 다른점이 있다면 빨간색으로 표시한 ‘1’과 ‘+’버튼이 보인다. Tutorial은 Single page로 했지만 난 Multi page로 레이아웃을 설정했기 때문이다.
왼쪽의 ‘+’버튼은 Band의 페이지를 추가하는 기능이고, 오른쪽의 ‘+’버튼은 Submit your data 페이지에서 보았던 json, xml을 추가하는 기능이다.
[평일-긴고랑, 평일-군자역,공휴일-긴고랑,공휴일-군자역] 이렇게 4개의 페이지를 구성하고 데이터를 채워넣어보았다.

…
역시나 이 세상의 모든 문서는 빨간글씨와 작은 글씨를 맘에 세겨둬야 된다는 것을.. 새삼 느낀다 ㅠㅠ
160자 제한.. 시간표가 짤린다. 일단 이부분은 나중에 해결하기로 하고..
주황색박스는 직접타이핑해서 넣었고, 그 외 빨간색박스는 Drag&Drop으로 채웠다. Next 클릭으로 다음 화면으로 넘어간다.

3.4. Set up notification

Tutorial에 있는 것 처럼 Notification(알림)은 필요없기에 Skip~

3.5. Give your tile an identity

미리보기 화면이 상당히 불안(?)하기는 하지만 일단 app 만들기가 목표이므로…무시하고..
App의 테마는 Band의 기본설정을 따라적용되도록 미리보기화면의 아래 체크박스에 체크를 했다.
적당히 App의 정보를 입력한다. Name, Description, Creator, 그리고 적당한 Bus 아이콘을 웹에서 찾아서 추가하였다. 반드시(Must be) 46×46 픽셀의 transparent 배경의 png이미지를 추가하여야 한다고 한다.(까다롭네..) 이제 거의 끝난듯 하다. Next 클릭~

3.6. Download

모든 개발과정(?)이 끝났다. ‘Download my tile’ 버튼을 누르면 ‘mytile.webtile’이라는 파일이 다운로드 시작된다. 적당한 이름(gwangjin02.webtile)으로 파일명을 바꾸고, Tutorial에서 보았던 것 처럼 메일이나 Web에 올려두고 Microsoft Band App이 설치된 핸드폰에서 실행하면 Band에 설치가 된다.

4. 설치

메일이나 웹 링크를 통하여 gwangjin02.webtile을 다운로드후 실행하면 아래와 같은 화면이 나온다.
실행하기 전에 이미 Microsoft Band App이 설치되어있어야 한다.

위에서 입력한 타일 Icon, Name, Description, Author, 그리고 우리가 입력했던 Data source의 경로를 확인할 수 있다. Confirm 버튼을 누르면 ‘Adding a tile…’ 메세지와 함께 Tile App이 Band에 설치된다.

Microsoft Band App을 실행하여 타일관리 메뉴에 확인해보면 맨 아래쪽 ‘Tiles you added’ 카테고리에 방금 설치한 ‘광진02’ 타일이 등록되어 있다.

5. 실행

이제 손목의 Band를 확인해 보면 내가 만든 Tile App의 아이콘이 떡하니 자리잡고 있다. 아 뿌듯해 ^-^
wp_20161116_20_41_14_pro
실행해보자.

…아, 시간이 짤린다…160자 제한…
뭐 그나마 다행인건, 한글이 깨지지 않는다는거!! 그리고 구현했던 4페이지 모두 정상적으로 보인다는거!!

2부에서는 앱을 좀더 가다듬어야 겠다.
첫째로 평일일때는 평일 배차시간표만, 휴일일때는 휴일배차시간표만 나오도록 하여 2페이로 줄이기.
두번째는 160자 제한이 걸리므로, 시간표의 내용을 줄이고, 좀더 가독성을 높이도록 수정하기.
일단 1부는 Band Tile App을 성공적으로 만들고 배포까지 했다는 것에 의의를 두기로 하고 2부에서 계속 진행하고자 한다.

마을버스 배차 시간표 for Microsoft Band using WebTile – 1부