모바일 웹앱 (WebApp)
Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android And the many variations of the Nokia platform . . .
- Vic Gundotra , Google EngineeringVP
구글 부사장 빅 곤도트라는 이러한 스마트폰OS가 난무하는 상황에서 모두에게 동일한 서비스를 하는 방법은 모바일 웹사이트를 적극 활용하는 것이 라는 것이다.
웹앱(WebApp)은 기존 웹사이트를 모바일 디바이스(ex: 320px / 480px)에 사이즈에 맞도록 최적하하여 만든 사이트를 의미한다. . 또한 iphone 사파리 브라우저의 경우 몇개의 태그를 지원해고 있는데 , 이를 이용하면 다음과 같이 홈스크린 화면에 북마크를 추가할 수 있는데 네이티브 앱처럼 만들 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
/* device-width (디바이스 가로size) 로 웹사이트가 고정되고 확대축소가 안된다. */
<meta name="apple-mobile-web-app-capable" content="yes" />
/* yes 라고 하면 주소바와 네비게시션 바가 살아지고 풀스크린화면이 되면서 static한 리소스가 cash 된다 */
<link rel="apple-touch-icon-precomposed" href=“IMG PATH" />
/* 홈스크린 화면에 보이슨 아이콘을 지정할 수 있다. */
<link rel="apple-touch-startup-image" href=“IMG PATH" />
/* 웹사이트를 로딩할때 나타나는 이미지 (로딩이미지: 320*480) */
물론, 구글은 웹에 장점이 있는 회사이고 웹리소스가 풍부하기 때문에 강조한것도 있지만. . 스마트폰 OS가 여러개인것은 정말 현실이고 문제이다.
위와 같이 다양한 스마트폰이 생겨나고 있고 스마트폰OS와 사용 언어가 상이하기 때문에 기업에서 스마트폰으로 앱을 만들때 타겟디바이스 갯수만큼 개발을 해야한다. 이것은 인건비 상승 및 개발인력 확보의 어려움이 생겨나고 있다.
PhoneGap 소개
스마트폰사용자는 웹(Web)을 선택할까? 앱(App)을 선택할까?
이제 사람들은 일상에서 일반 웹을 통한 인터넷보다는 다양하고 유용한 앱 (애플리케이션)을 더 자주 많이 쓰게 된다. <중략> PC보다 모바일 장치를 점점 많이 쓰고, 편리하고 빠른 앱을 더 찾게 될 수밖에 없으며, 이는 개방형이고 유연한 웹(Web) 보다는 폐쇄적이지만 효율적인 서비스와 앱(App)을 찾게 된다.
크리스 앤더슨 (잡지 <WIRED>의 편집장, <롱테일> <프리>의 저자)
사용자들은 앱스토어를 통해 앱(App)를 다운받는 것이 웹브라우저에 주소를 치는것보다 더 익숙해져 있다.
문제는 앱를 개발하려면 OS와 개발언어에 존속되는 문제가 있다. 국내에선 아이폰과 안드포이드가 스마트폰의 대부분을 차지하고 있는 상황인데, 아이폰은 object-C, 안드로이드는 java를 개발언어로 사용하기 때문에 똑같은 앱을 만들어도 두명의 개발자와 다른 개발환경이 필요하다.
phoneGap은 앱개발을 웹기술(Javascript/CSS/HTML)을 통해 개발하고 모든 스마트폰OS에서 돌아가는 앱을 만들 수 있도록 도와 준다. 그 원리는 다음과 같다.
PhoneGap은 웹기술(Javascript/CSS/HTML)만으로 iPhone, 안드로이드, 블랙베리 App을 개발할 수 있다. 이 프레임워크 내에는 위치 정보, 진동, 가속도, 사운드, 지원정보 등에 대한 인터페이스까지 제공하고 있다. 예를 들어 위치를 지도에 표시하고 싶다면 javascript로 phoneGap에서 제공하는 API를 사용해서 값을 가져올 수 있다.
즉 Objective-C나 안드로이드 자바에 대한 지식이 전혀 없이도 그럴듯한 App을 만들어 낼 수 있게 되는 것이다. (그러나 좀괜찬은 앱를 만드려면 약간의 Objective-C/JAVA를 알아야 할 듯...)
모든 스마트폰OS는 웹브라우저를 포함하고 있는데. 각 환경에서 개발할 때 WebView라는 형태로 네이티브 어플리케이션처럼 디바이스 자원을 가져다 쓸 수 있다. phoneGap은 이러한 webView를 통해 지금까지 모바일웹 사이트로 할 수 없었던 스마트폰 자원을 활용할 수 있도록 도와준다.
phoneGap은 디바이스 자원을 사용할 수 있도록 네이티브 쪽 개발이 다 되어있는 라리브러리(템플릿?)이다. 개발자는 각 환경은 phonegap.js 에 정의되어 있는 함수들을 통해 콘트롤할 수 있다.
필자는 phoneGap으로 아이폰 앱을 몇개 개발해 봤는데, 오프젝트C를 하나도 안쓰는 것은 아니고 대부분은 웹기술로 개발하지만, 원하는 기능이 phoneGap에 없을 때 플러그인을 찾아보거나 약간의 개발을 통해 원하는 앱을 만들 수 있었다.
현재 phoneGap은 많은 개발자들의 참여로 버전업 되어있고 점점 강력해지고 있다. 본 강의를 통해 phoneGap을 이용한 아이폰 앱개발을 주로 다루면서 앱개발에 도움이 되는 웹기술도 소개하도록 하겠다.
PhoneGapTutorial.zip
