PhoneGap, 결국은 네이티브 앱인가?

Posted in 모바일 // Posted at 2010. 7. 13. 15:56
728x90

음.. 뭔가 개인적인 오해가 있는 듯 하다

폰갭이라는 프레임워크를 접한지 채 이틀이 되지 않은 이 시점, 나의 착각이 하나 있는 듯 하다

처음 폰갭 컨셉을 접했을 때는 순수 웹 환경인 줄 알았다
즉 단순히 폰갭 스크립트 파일을 참조하여 일반적인 웹 페이지를 개발해서 웹 서버에 올려 두면
폰에 내장된 (사파리와 같은) 웹 브라우저를 통해 서비스 되는 방식인 줄 알았다

그런데 프로그램의 구조를 살펴 보니,
안드로이드 네이티브 앱 환경에 포함되어 웹 페이지가 실행되는 구조인 듯 하다
다시말해, 안드로이드 마켓에 앱을 등록하는 네이티브 환경인 것 같다

물론 한번 등록하면 웹 리소스만 변경하면 되기 때문에 업데이트는 웹 환경인 것은 맞는 것 같지만..

결국 폰갭은 웹 리소스를 포함하는 컨테이너 역할을 하는 네이티브 앱 인가 ???

만일 그렇다면 초기 나의 생각과는 다르지만,
결국 각 환경에 맞는 컨테이너만 (아이폰, 안드로이드, 심비안 등) 따로 만들고 내부 웹 리소스는 
HTML, JavaScript, CSS 등을 이용하여 동일하게 개발할 수 있는, 웹의 장치 독립성의 장점은
그대로 일 것이다

'모바일' 카테고리의 다른 글

모바일 웹, 유효성 검사  (0) 2010.07.14
안드로이드 App 에 브라우저 삽입하기  (0) 2010.07.14
PhoneGap 코드구성 살펴보기  (0) 2010.07.13
Hello World 분석하기  (1) 2010.07.13
안드로이드 샘플 훓어보기  (0) 2010.07.13

PhoneGap 코드구성 살펴보기

Posted in 모바일 // Posted at 2010. 7. 13. 15:36
728x90

PhoneGap 개발환경을 구축하고 샘플 프로젝트를 생성하여 시뮬레이터에서 띄워 보았다
또한 이클립스를 이용해 안드로이드 프로젝트로 불러와서 실행해 보았다

자동으로 생성된 샘플 프로젝트이 코드 구조를 대략 살펴 보았다

phonegap.jar 라이브러리
폰갭 프로젝트는 phonegap.jar 라는 압축 형태의 클래스 모음인 라이브러리가 포함된다
안드로이드 프로젝트가 각 버전에 맞는 android.jar 가 필요하듯이 미리 정의된 폰갭 클래스들을
위한 라이브러리가 필요하다



phonegap.jar 에는 com.phonegap 패키지로 묶여 있는 많은 클래스가 정의되어 있다
여기에 폰갭 프로그램 구성을 위한 각종 클래스와 Device 고유 기능을 이용하기 위한
일종의 랩퍼 클래스들이 정의되어 있는 듯 하다

메인 클래스 구성
일반적인 안드로이드 어플리케이션의 경우 메인 클래스는 Activity 로부터 상속받는다
그리고 setContentView 메서드를 통해 View를 Activity 에 바인딩하는 구조이다

하지만 폰갭 어플의 경우 phonegap.jar 에 있는 DroidGap 클래스로부터 상속을 받도록 되어있다
그리고 이 DroidGap 클래스에 정의된 loadUri 메서드를 통해 html과 같은 웹 리소스를 바인딩 하는
구조이다. 다음 코드는 자동으로 생성된 폰갭 프로그램의 메인 클래스 전체 코드이다
라이브러리로 추가된 com.phonegap 패키지를 import 하고 DroidGap를 상속받으며
loadUrl 을 통해 html 파일을 화면에 바인딩하고 있다

package my.phonegap.demo;

import android.app.Activity;
import android.os.Bundle;
import com.phonegap.*;

public class Demo extends DroidGap
{
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
 super.onCreate(savedInstanceState);
 super.loadUrl("file:///android_asset/www/index.html");
 }
}


웹 리소스
폰갭 프로젝트를 만들면 index.html 파일과 css, js 파일 등의 웹 리소스가 자동 생성 되는데,
이 파일들은 프로젝트의 assets 폴더에 위치하게 된다

보통 안드로이드 프로젝트의 경우 assets 폴더의 역할은 컴파일 되지 않는 큰 리소스를 담는 용도이다
프로그램은 코드와 리소스로 구분되는데 리소스는 또 컴파일 되는 경량의 리소스와 원본 그대로 저장하는 큰 리소스로 구분된다

안드로이드 프로젝트이 res 폴더는 경량의 리소스를 위한 폴더이며 assets 는 큰 리소스를 위한 폴더이다. HTML 파일이나 동영상과 같은 큰 데이터를 위한 공간이 assets 인 셈이다

폰갭 프로그램의 사용자 화면에 해당하는 html 파일과 Device 기능 호출을 위한 js 파일 등 웹 리소스가assets 폴더에 위치하고 있다



이후부터는 일반적인 웹 개발을 진행 하듯 웹 리소스들을 추가, 수정 하면 될 듯 하다
물론 폰갭이 제공하는 각종 디바이스 접근 기능을 사용하려면 폰갭 스크립트에 대한 학습이 있어야 할 것 같고...

728x90
모바일 웹은 모바일 단말기의 브라우저에서 동작하기 때문에 앱(App)처럼 별도의 설치나 업데이트
과정이 필요치 편리하다.

그리고 모바일 앱(App)의 경우 아이폰, 안드로이드, 윈도모바일 등 각 플랫폼마다 개발하는 환경이나
언어가 서로 상이해서 각각 별도로 개발해야 하지만 웹은 그럴 필요가 없다

이러한 특징은 전통적인 데스크탑의 윈도우어플리케이션과 웹어플리케이션과의 차이점과 거의 동일한 개념이다.

모바일 시장의 성장과 환경의 보편화로 모바일 앱(App)도 성장을 하겠지만 모바일 웹도 그에 못지않은 영역을 구축해 나갈 것 같다

물론 모바일 웹이 모바일 앱에 비해 가지는 단점도 몇 가지 있는데...
그중에서도 모바일 단말기 즉 디바이스의 고유 기능을 사용할 수 없다는 것이 가장 안타깝다
고유기능이라 함은 디바이스의 전화번호부, SMS, 일정관리, 사진, 파일시스템 등을 말하며 이들 컨텐트에 접근해서 핸들링 할 수 없다는 것이다

웹 자체가 브라우저에서 해석되고 실행되기에 어찌보면 당연한 것이지만 그래도 이러한 제약이
모바일 웹의 기능 확장에 걸림돌이 될 소지는 충분히 있어 보인다

모바일 장치 자체가 굉장히 개인화된 영역이고 이러한 개인성향의 컨텐츠가 웹 컨텐츠와 융합될 수 있다면 다양한 모바일 웹 어플리케이션이 개발 가능하지 않겠는가?

그런데. 이것이 불가능 하지 않다 !!!
바로 PhoneGap 이다. http://www.phonegap.com/

폰갭은 HTML, JavaScript 을 기반으로 하는 오픈소스 개발 프레임워크로 아이폰, 안드로이드폰, 블랙베리 등의 SDK 핵심 기능을 지원하는 굉장히 고마운 놈이다

폰갭을 이용하면 모바일 웹에서도 디자이스의 고유 기능을 가져다 쓸 수 있다고 한다
점점 알아볼것이 많이 생긴다 --;

그리고 폰갭 이외에도
Bondi, Titanium Mobile 라는 것도 있는데, 역시 유사한 기능을 제공해 주는 프레임워크라 한다

PhoneGap Roadmap

 

RED - not possible for this device

YELLOW - we're working on it!

GREEN - works!

  

 

 

iPhone

Android

Blackberry
(OS 4.5)

Symbian1

Windows

Mobile

Palm

Maemo*

Geolocation

 

 

 

 

 

 

 

Accelerometer

 

 

OS 4.7

 

HTC only 

 

 

Camera

 

 

 

 

 

 

 

Vibration

 

 

 

 

 

 

 

Contacts API

 

 

 

 

 

 

 

SQLite Functionality

 

 

 

 

 

 

 

XMPP API

 

 

 

 

 

 

 

File system IO

 

 

 

 

 

Read only

 

Gesture / Multitouch

 

Android 2.0

 

 

 

 

 

SMS API

 

 

 

 

 

 

 

Telephone API

 

 

 

 

 

 

 

Copy / Paste

 

 

 

 

 

 

 

Sounds (Play)

 

 

 

 

 

 

 

Sounds (Record)

 

 

 

 

 

 

 

Bluetooth

 

 

 

 

 

 

 

Wifi Adhoc connection

 

 

 

 

 

 

 

Maps

 

 

 

 

 

 

 

Orientation change

 

 

 

 

 

 

 

Network availability

 

 

 

 

 

 

 

Magnetometer

 3GS only

 

 

 

 

 

 

Storage