PhoneGap으로 Windows 8 앱 개발하기

PhoneGap for Windows 8이 아주 오래 전(몇 개월 전)에 나왔다는 소식은 알고 있었지만, 실용성이 있을까 의문이 있어서 사용해 보지 않았다.

하지만 JavaScript(이하 JS)로 윈8앱을 개발을 하는 경우에 Windows API나 WinJS 라이브러리에 너무 의존해서 다른 플랫폼으로 포팅하는 것이 어려운 약점을 보완할 수 있을까 싶어서 한번 테스트해보기로 했다.

마침 딸래미를 위해서 간단한 앱을 만들어 주고 싶은 게 있어서 PhoneGap을 적용해 봤다.

1. PhoneGap for Windows 8 설치

일단, PhoneGap for Windows 8은 Cordova 웹서버를 설치해야 하는 일부 플랫폼과 다르게 cordova.js 파일 하나만 추가해주면 된다!(얼마나 쉬운지는 여기를 참고)

Windows 8 JS App의 프리젠테이션 레벨이 이미 최신 IE나 마찬가지이기 때문에 별도의 웹뷰나 웹서버 없이도 HTML5를 그대로 사용할 수 있다.

2. PhoneGap API 사용하기

그 다음에 할 일은 Windows RT나 WinJS의 API 대신 대응하는 PhoneGap API를 사용하는 것이다.

내가 잘 몰라서 그런지도 모르겠지만 PhoneGap API는 생각보다 복잡하지 않고 쉽게 되어 있다. Windows API도 굉장히 쉽다고 생각했는데 그보다 더 간결한 정도이다.

예를 들어, 윈8에서 메시지 팝업을 띄우려면 다음과 같이 한다.

new Windows.UI.Popups.MessageDialog("Hello World").showAsync();

똑같은 것을 PhoneGap API로 하면 다음과 같다.

navigator.notifications.alert("Hello World");

이렇게 동작하기 위해서 내부적으로 cordova.js 파일에서 navigator.notifications.alert() 함수를 Windows.UI.Popups.MessageDialog로 구현해 놓았다. 다른 플랫폼에서도 같은 함수가 똑같이 동작하도록 PhoneGap이 중간에서 처리해준다. 하지만, 여러 플랫폼에서 동작해야 하기 때문에 각 플랫폼에서 제공하는 고유의 컨트롤이나 API등은 많이 누락되어 있는 듯 한다. 일반적으로 플랫폼에서 제공되는 기능들이 PhoneGap API로 제공되고 전체 API 목록은 여기에서 볼 수 있다.

3. PhoneGap을 이용한 윈8앱을 스토어에 등록하기

PhoneGap API에서 Capture와 Notifications 정도를 이용하고, 나머지 필요한 기능은 HTML5 API의 video,  IndexedDB 등을 이용해서 간단한 윈8 앱을 만들어 봤다. 아무래도 PhoneGap for Windows 8은 나온지 얼마 되지 않았기 때문에 exception 처리나 Windows RT를 활용할 수 있는 정도에 제약이 있다. 따라서 cordova.js 파일을 직접 수정해서 필요한 부분을 개선 및 발전시켜서 쓰거나, Windows 에서만 실행하는 구문을 추가해서 처리해 주는 것이 필요했다.

PhoneGap을 이용해서 스토어에 등록 테스트를 한 결과 앱은 문제 없이 등록이 되었고, 현재 테스트를 위해서 캐나다 스토어에만 등록되어 있는 상태이다. 지역 설정을 캐나다로 변경해야 스토어에서 검색 및 다운로드가 가능하다.

앱 테스터 / 서울, 18개월

앱 테스터 / 여, 18개월

4. PhoneGap for WindowsPhone으로 윈폰8용으로 만들어 보기

기존 윈8 코드 그대로 윈폰8용으로 포팅을 시도해봤다. 윈8이 cordova.js만 추가하면 됐다면, 윈폰8은 웹뷰를 사용하기 때문에 전용 템플릿을 만들어서 사용해야 한다. 시작방법 참고

그리고 윈8과 윈폰8의 앱 컨텐츠 코드를 공유하기 위해서는 VS 프로젝트의 파일 링크 기능을 이용해서 W8과 WP8 프로젝트가 공통의 index.html/js/css 파일을 사용하도록 프로젝트를 구성한다. VS에서 파일을 선택하고 Alt키를 누른 상태에서 드래그하면 파일에 대한 링크를 만들 수 있다.

WP8 프로젝트에서 www 폴더 밑에 index.html, index.js 파일에 바로가기 표시가 있는 것을 확인할 수 있다.

WP8 프로젝트에서 www 폴더 밑에 index.html, index.js 파일아이콘에 바로가기 표시가 있는 것을 확인할 수 있다.

일단 CSS나 이미지 요소 등 수정 없이 그대로 윈폰8에서 실행해봤다.

css를 적용 안해서 html가 맨몸으로 나옴.

css를 적용 안해서 html가 맨몸으로 나옴.

버튼들을 눌러봤는데 제대로 동작을 안 했다. 아마 WinJS 등을 빼지 않아서 자바스크립트 오류가 발생한 것 같다. 이렇게 해놓고 모바일 용으로 앱을 포팅하면 어떨까 잠시 생각해봤는데 폰에서 구현하기에 적절하지 않은 부분이 있어서 이 정도로 마무리하고 더 이상 하는 것을 일단 잠정 보류하기로 했다. 나중에 윈8 앱이 잘 되고 야외에서 앱을 사용해야 하는 경우가 생기면 한번 좀 더 진행해 볼까 싶다. 윈폰 뿐 아니라 iOS나 안드로이드 용으로도…

결론적으로, PhoneGap으로 윈8과 윈폰8앱 모두 만들 수 있고 생각보다 실용적이라는 것을 확인했다.

앞으로 개발할 윈8 JS앱은 무조건 PhoneGap으로 할까 싶기도… 다만, 윈8의 다양한 컨트롤을 쓰려면 윈8 전용 코드가 들어가야 하고, 그렇다고 플랫폼 중립적인 UI 프레임워크를 쓰자니 적절한 것도 없다.

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중