Programming2012.06.04 09:00


 


 최근엔 "하이브리드 앱"이라는 용어가 마케팅으로 사용될 정도로 PhoneGap에 대한 관심이 많습니다. 하지만 아래와 같은 장점을 가지고 있지만 단점도 가지고 있습니다.


장점

- 기존 Javascript 코드를 부분적으로 재사용 가능

- 하나의 웹 코드 (HTML, CSS, Javascript)를 작성하면 부분적으로 여러 플랫폼(iOS, Android, Window Phone, Black berry, webOS, smybian, bada) 재사용 가능 


단점

- 웹베이스로 코드가 동작 되기 떄문에 비교적(Native App과 비교하면) 느리다.

- PhoneGap API들은 가장 기본이 되는 것만 제공해 준다. (PhoneGap API 참고 : http://docs.phonegap.com/en/1.7.0/index.html)

- Native 고유의 기능을 사용해야만 구현 할 수 있는 기능들이 있다 (예) Android의 Background Service


이러한 장.단점들을 가지고 있지만 단점들을 보면 정말 부족해 보입니다. 이 단점을 어느 정도 극복 하기 위한 방법이 각 플랫폼 별로 Plugin을 개발해서 사용하는 것 입니다.


PhoneGap Plugin

Plugin을 만든다는 것은 Native 코드를 이용해서 필요한 기능들 만들어서 사용한다는 것 입니다. iOS의 경우에는 Objective-C로 Android는 Java로 기존 Native에서 동작하는 코드를 PhoneGap Plugin 형식에 맞게 제공하여 PhoneGap을 이용한 앱에서 이를 사용할 수 있도록 합니다.


무엇을 할 수 있는가?

많은 연산을 필요로 하는 작업은 Native에서 처리 (더 빠르다?)

- PhoneGap API에 없는 기능들을 추가해서 사용 (Android의 Background service, 바이너리 이미지를 PhotoLibrary에 저장)

- Native 언어적으로 복잡한 비지니스 로직을 처리 하는 방법이 있을 경우 플러그인으로 만들어서 사용




개발 방법

PhoneGap Plugin은 Javascript코드와 Native코드 쌍으로 이루어져 있습니다. 여러 플랫폼에 대응하는 Plugin기능을 만드려면 플랫폼 마다 구현해 줘야 합니다. Javascript는 기본 인터페이스를 만들어 놓고 세부적인 내용은 플랫폼 별로 다르게 작성 되야 합니다.


PhoneGap 1.5 부터 Apache Cordova로 이름이 바뀌면서 덩달아 Namespace도 모두 바뀌었습니다. 아래 내용은 PhoneGap 1.5 이후 버전에 맞게 작성 되었습니다.


iOS (wiki : http://goo.gl/fNC4c)

예제 코드는 Javascript에서 Plugin으로 Hellow World 문자열을 전달하여 전달된 문자열이 Hellow World가 맞다면 성공, 아니면 실패를 반환하는 코드 입니다. 원본 코드는 위의 wiki에서 확인 가능 합니다.


1.  사용할 Objective-C 코드 작성

(코드 출처 :  http://goo.gl/fNC4c)

#import <Foundation/Foundation.h>
#import <Cordova/CDVPlugin.h>
   
 
// CDVPlugin을 상속
@interface MyClass : CDVPlugin {
      
      // 호출된 Javascript를 참조 하는 ID
      NSString* callbackID; 
 }
 
@property (nonatomic, copy) NSString* callbackID;
 
// Instance Method 
- (void) print:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
  
@end


#import "MyClass.h"
       
 @implementation MyClass
 
 @synthesize callbackID;
 
 -(void)print:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options 
 {
           // arguments에 제일 마지막에 있는 값이 callbackID이다.
           self.callbackID = [arguments pop];
 
           // Javascript로 부터 전달된 값을 저장
           NSString *stringObtainedFromJavascript = [arguments objectAtIndex:0];                
 
           // Javsacript로 확인된 메세지를 보내기 위해 Objective-C에서 값 생성
           NSMutableString *stringToReturn = [NSMutableString stringWithString: @"StringReceived:"];
 
           // 전달된 값과 생성된 값을 합침
           [stringToReturn appendString: stringObtainedFromJavascript];
            
           // Javascript에 전달할 결과 값을 생성 CDVPluginResult 로 생성 해야만 한다. 전달하는 문자열은 UTF-8로 인코딩
           CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK
                  messageAsString: [stringToReturn stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];
 
           // Javascript로 부터 전달된 값이 HellowWorld이면 성공 Callback 실행, 실패면 실패 Callback 실행
           if ([stringObtainedFromJavascript isEqualToString:@"HelloWorld"] == YES)
           {
                  // Call the javascript success function
                  [self writeJavascript: [pluginResult toSuccessCallbackString:self.callbackID]];
           else
           {   
                  // Call the javascript error function
                  [self writeJavascript: [pluginResult toErrorCallbackString:self.callbackID]];
           }
  }
  @end


2. 위에서 작성된 Plugin 코드를 실행할 Javascript 클래스 생성 및 실행 예제


var MyPlugin = {
     nativeFunction: function(types, success, fail) {
          return Cordova.exec(success, fail, "MyPlugin""print", types);
     }
};
 
MyPlugin.nativeFunction(
      ["HelloWorld"],
      function(result) {
           alert("Success: \r\n"+result);     
      },
      function(error) {
           alert("Error: \r\n"+error);     
      }
); 



3. 위의 코드들이 제대로 동작하게 할 설정  


Cordova.plist



<plist version="1.0">

     <dict>
          ...
          <key>Plugins</key>
          <dict>
               ...

               <key>MyPlugin</key>

               <string>MyClass</string>
               ...
          </dict>
          ...
     </dict>
</plist>





다른 플랫폼에 대한 Plugin 개발 방법은 여기서(http://goo.gl/O6XHI) 확인 가능 합니다


결론


PhoneGap은 모바일 개발 인력이 부족한 환경에서 빠른 시간 안에 더 많은 플랫폼을 대응할 수 있다는 장점을 가지고 있습니다. 하지만 이러한 생산성은 모든 플랫폼에 적용되는 것이 아닙니다. 지극히 한정적인 서비스에서 그리고 웹기반으로 서비스를 구축했을때 장점을 가진 환경에서만 위의 장점을 누릴수 있습니다. 많은 서비스들이 하이브리드 앱으로 서비스를 시작했다가 결국에는 Native 로 다시 만드는 사례가 많아 지고 있는 이유는, 하이브리드 앱 개발이나 HTML5 라는 용어가 단순히 유행 처럼 서비스에 적용하는 사례들이 많아 지고 있기 때문이 아닐까 생각해 봅니다.


저도 PhoneGap에 대해 공부 하고 있는 상태지만, 서비스에 해당 기술을 도입함에 앞서서 앞으로 만드려고 하는 서비스가 퍼포먼스를 중시하는 서비스 인지, 아니면 특별한 기능이 있는데 이를 하이브리드 앱으로 개발해도 가능 할지에 대해 반드시 확인하고 적용해 보는게 좋습니다. 

제대로된 선행 조사와 서비스에 대한 이해가 있는 상태에서 PhoneGap을 선택했을때는 더할나위 없이 빠른 퍼포먼스를 낼 수도 있는 플랫폼이지만 그게 아니라면 빠른 생산성은 커녕 유지 보수 하는데 더 많은 시간과 인력이 필요하게 될거라 생각 합니다.


PhoneGap의 모든것이라는 제목으로 3개의 포스팅을 하였는데요. 모든것을 다룬것 같진 않네요. 처음 시작하기에 앞서 한번 훑어 보면 좋은 글이라고 봐주셨으면 합니다.


제가 언급한 내용중 잘못된 내용이 있으면 바로 잡아 주세요.


Posted by Flash 동강
Programming2012.05.07 08:30




이번 문서에서는 PhoneGap를 셋팅하고 (iOS) PhoneGap 프로젝트에서 javascript 초기화에 대해 다룬다.


Getting Start PhoneGap



PhoneGap을 시작하는 사람들을 모두 들어가 봤을만한 공식 사이트다. 아주 친절하게도 http://phonegap.com/start 이 주소로 들어 가면 플랫폼 별로 초기 셋팅을 어떻게 하는지에 대해 순서대로 나와 있다. 



주의 해야할 사항은 xcode 를 이용하여 iOS 플랫폼에 셋팅을 하는 경우라면 초기에 PhoneGap을 설치하고 Cordova Project로 생성을 한 뒤에 위와 같은 폴더 구조가 나오는데 바로 컴파일을 하면 제대로된 화면이 안나오고 아래와 같은 메세지를 볼수 있다.



PhoneGap에서 사용되는 javascript 와 html, css파일들은 프로젝트 하위의 www 폴더에 생성되는데 xcode에서 이를 인식하지 못하여 발생하는 문제이다. xcode에 플러그인 형식으로 설치 하는 거라 플러그인에서 생성 시킨 폴더(www)를 자동으로 프로젝트에 추가 해주지 못해서 그런것 같다. 위의 문제는 프로젝트를 한번 컴파일 한뒤에 프로젝트를 저장한 폴더에 이동해 보면 www폴더가 생성되어 있는걸 볼수 있는데 아래와 같이 프로젝트에 추가해 주면 제대로 동작 하게 된다.


www폴더를 드래그 해서 위의 phonegap_sample 프로젝트에 드랍해 주면 프로젝트에서 www를 인식 하게 된다. 





www/index.html 



<script type=
"text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript">
 
function onBodyLoad() {
 
    document.addEventListener("deviceready", onDeviceReady, false);
}
 
function onDeviceReady()
{
    // Device Ready!
}
 
  
</script>
<body onload="onBodyLoad()">
</body>


www폴더를 보면 PhoneGap을 동작하는데 필요한 cordova.js와 index.html 이 있다. cordova.js를 PhoneGap을 초기화 하고 디바이스와 통신하는데 필요한 준비 및 API로 구성되어 있다. 한번 훑어 보는것도 좋을듯 하다.


위의 코드는 index.html에서 기본적인 source만 뽑아낸 것이다. 어플리케이션이 실행 되면 처음으로 시작되는 곳이 index.html 이다. 모든 초기화는 여기서 이루어 진다. 일반 웹 페이지와 다른 것은 "deviceready" 이벤트를 통해 PhoneGap이 동작하는 기기(플랫폼)가 준비가 되었는지 확인하는 과정이 필요하다. 위의 코드에서 알수 있듯이 onDeviceReady가 호출 된 후에에 PhoneGap API 등을 사용할 수 있다. 그 전에 호출을 해봤자 실행 되지 않는다.




2개의 문서로 마무리를 지으려고 했는데, 문서를 작성하면서 생각이 덧붙여 지면서 분량이 더 많아 졌다. 다음 문서에서는 iOS와 Android 플랫폼에서 동작하는 Plugin 개발하는 방법을 다루겠다.

 

Posted by Flash 동강
Programming2012.05.02 08:30



PhoneGap

PhoneGap의 기본컨셉은 대부분의 모바일 플랫폼이 WebView를 가지고 있기 때문에 기본적인 기능들은 HTML과 CSS, Javascript로 만들어서 WebView에서 동작하게 하고 Device(Native)의 도움이 필요한 영역은 PhoneGap framework가 도움을 줘서 설치되어 동작하는 어플리케이션을 만들수 있는 방법을 제공 하는 것이다.





Apache Cordova

Adobe가 PhoneGap을 인수한 뒤에 PhoneGap을 Apache재단에 기부하였다. 그래서 Opensource가 되었고, PhoneGap 1.5 (Cordova) 버전부터 클래스 이름이 죄다 바뀌어 버렸다.


PhoneGap에서 제공하는 것들

WebView만으로는 구현이 어렵거나, Native의 도움이 필요한 기본 기능들은 PhoneGap API을 통해 사용 가능하다. 

지원하는 API 는 다음과 같다.

  • 각각의 기능별로 예제 코드와 함께 정리가 잘되어 있어서 쉽게 적응할 수 있다.
  • 각 API별로 지원하는 플랫폼이 명시 되어 있다. (iOS와 Android는 대부분 지원)


Accelerometer : Tap into the device's motion sensor.

Camera : Capture a photo using the device's camera.

Capture : Capture media files using device's media capture applications.

Compass : Obtain the direction that the device is pointing.

Connection : Quickly check the network state, and cellular network information.

Contacts : Work with the devices contact database.

Device : Gather device specific information.

Events : Hook into native events through JavaScript.

File : Hook into native file system through JavaScript.

Geolocation : Make your application location aware.

Media : Record and play back audio files.

Notification : Visual, audible, and tactile device notifications.

Storage : Hook into the devices native storage options.



PhoneGap의 동작 원리

PhoneGap을 이용하여 만든 어플리케이션들도 결국에는 Native 어플리케이션으로 컴파일되어 설치 된다. Adobe AIR과 같이 코드가 바이너리로 설치 파일에 포함되는 형식이 아니라, Native 어플리케이션 위에서 PhoneGap이 동작하고 이 PhoneGap을 통해 Javascript로 만든 어플리케이션과 통신하는 과정을 통해 실행 된다. 하지만 Javascript는 Native와 다른 환경에서(WebView) 동작한다. JavaScript는 네이티브 코드와 데이터를 공유할 수 없다. 그래서 PhoneGap에서는 별도의 통신 방법을 만들어 웹뷰에서 네이티브 코드와 데이터를 교환한다. 각각의 플랫폼(iOS, Android...) 마다 WebView와 Native와 서로 통신하는 방법이 다르다. 이렇게 통신하는 방법이 다르기 때문에 PhoneGap에서 이를 지원한다. 이러한 방법이 PhoneGap이 동작하는 원리이다.

PhoneGap을 Native에서 동작하는 코드들과 (각각 플랫폼 마다 별개) cordova.js 과의 통신을 통해 동작한다. (Plugin이 있다면 Plugin을 제어 하는 코드들도 함께 동작) 

각각의 플랫폼마다 WebView와의 통신 방법이 다르므로 모두 언급할 수 없기에 대표적으로 iOS와 Android를 설명하면 다음과 같다. 더 자세한 내용은 여기를 참고하라.


IOS


Custom Scheme 이란? (예제)

tel:01012341234
kakaolink://sendurl?msg=[message]&url=[url]&appid=[appid]&appver=[appver]
gap://ready



iOS에서는 WebView에서 Native로 명령을 전달하고 받기 위한 방법으로 Custom Scheme를 사용한다. 아래와 같은 형식으로 WebView에서 호출하면 Native에서는 클래스(class), 함수(command) 그리고 함수에 전달될 인자(arguments) 를 통해 Native Code를 실행 한다.


yourscheme://<class>.<command>/[<arguments>][?<dictionary>]


반대로 Native Code에서 WebView로 명령은 iOS SDK의 stringByEvaluatingJavaScriptFromString를 이용한다.



NSString* status = @
"Native To WebView!";
[webView stringByEvaluatingJavaScriptFromString:status];


Android

WebView에 있는 addJavascriptInterface를 통해 Javascript가 호출할 수 있는 코드정보를 미리 등록해서 이를 이용해서 WebView에서 Native코드를 실행한다.

등록


webView.addJavascriptInterface(new MyNativeAPI(), "MyNativeAPI");
Class MyNativeAPI {
 
    public String whereAmI() {
        return "I am in Native";
    }
}


호출


MyNativeAPI.whereAmI();


반대로 Native Code에서 WebView로 명령은 WebView클래스의 loadUrl() 을 이용한다.


webView.loadUrl("javascript:alert('I am in WebView')");


PhoneGap을 사용하면 위에서 언급한 제공하는 API 만으로 어플리케이션을 구현하는데 부족함이 많다. 그래서 PhoneGap에서는 이 부족한 기능을 특정 플랫폼에 맞게 PhoneGap Plugin을 개발하여 사용할수 있다. (Adobe AIR의 Native Extention 이라 생각하면 되겠다) PhoneGap의 근본 취지와는 다르게 Plugin은 특정 플랫폼에 맞춰서 따로 따로 개발해 줘야한다. 2번째 문서에서는 간단히 PhoneGap Plugin을 개발하는 방법에 대해 다룰 것이다.


Posted by Flash 동강
Flash platform2012.03.25 18:47


출처 : http://goo.gl/Je692


얼마 전에 Image Sprite 를 사용했을때의 효과에 대해서 포스팅을 한적이 있는데요. 이제서야 그 두번째 포스팅을 하게 되네요. 

테스트에 사용한 이미지들이 얼마전에 스토어에 오픈한 Pix : Pixel Mixer의 이미지들이라서 이제서야 블로그 포스팅을 할 수 있게 되었습니다. :D  생각 보다 Pix 에 대한 사용자들의 반응이 좋아서, 작업에 참여한 사람들 모두 싱글 벙글 하고 있습니다. 


이 포스팅은 이전에 작성된 Flash App Performance : Image Sprite Sheet 와 이어지는 내용입니다. 아직 이전 포스팅을 안읽으신 분들은 읽고 본 포스팅을 보시는게 좋을것 같습니다.



Image Sprite 로 만들어서 작업하는게 좋다는건 알고 있는데, 얼마나 차이가 발생할까 궁금해서 테스트를 해 봤습니다. 테스트 대상은 모바일이고 OS에 따라 차이가 나겠지만, 이정도 차이라면 확실하게 좋다고 말할 수 있겠네요. 비교는 단순히 Embed 태그를 이용해서 각각의 이미지를 따로 사용했을때와 (Image Embed) 이미지들을 Sprit 해서 하나의 이미지를 사용했을때 (Image Sprite) 경우는 비교 했습니다.


Flash Builder Profiler

Flash Builder Profiler 상에서 나타나는 메모리 점유율

왼쪽 : Image Embed (176K) , 오른쪽 : Image Sprite (68K) , 차이 108K


왼쪽 : Image Embed (5296K) , 오른쪽 : Image Sprite (5178K) , 차이 118K



Adobe AIR Simulator

AIR Simulator 에서 어플리케이션을 실행 시켰을때 나타나는 메모리 점유율

왼쪽 : Image Embed (19886080 Byte) , 오른쪽 : Image Sprite (6754304 Byte) , 차이 13131776 Byte



Device Test (iPhone 4S)

iPhone 4S 에서 어플리케이션을 실행 시켰을때 나타나는 메모리 점유율

왼쪽 : Image Embed (4890624Byte) , 오른쪽 : Image Sprite (2478080 Byte) , 차이 2412544 Byte



메모리를 줄여 준다는게 사용자가 느끼기에는 확연한 차이가 없습니다. 하지만, 모바일이나 적은 리소스만 운영을 할 수 있는 플랫폼에서는 반드시 필요한 작업이라 할 수 있습니다. 프로젝트가 대부분 마무리 되고, 더이상 디자인 수정 사항이 없다고 판단이 될때 적용해 보세요. 



댓글은 언제든지 환영 합니다. :ㅇ


Posted by Flash 동강
Review2012.03.19 11:37



Pix 는 Adobe AIR 를 이용하여 만든 어플리케이션 입니다. 기존에 작성된 Flash Player 용으로 배포된 사진 편집기의 소스(Actionscript3)를 그대로 활용하여 모바일 어플리케이션을 구현하는데 사용하였습니다. 




"하나의 코드로 모든 플랫폼을 커버 할 수 있다." 는게 Adobe가 AIR Mobile 을 설명할때 주로 사용하고 있는 말입니다. Pix 는 이 장점을 최대한 활용하여 하나의 프로젝트에서 한번의 컴파일로 iOS(iPhone, iPad), Android OS용 어플리케이션을 구현 하였습니다. 해상도를 맞추는데 어려움이 있었지만, 비교적 짧은 기간 동안 좋은 퀄러티의 어플리케이션을 만들수 있었습니다. 




지금까지는 이 블로그가 Flash 관련글을 포스팅 하는 곳이라 기술적인 부분에 대해 나열해 보았는데요. 지금부터 Pix에 대해 소개해 보겠습니다.


Pix 의 장점은 쉬운 UI 구성과 다양한 필터효과를 가지고 있다는 점 입니다. 추가로 Facebook, Twitter로 보내기 기능으로 최대한 빠르게 자신의 사진을 공유 할 수 있습니다. 일단 소개 동영상 부터 보시죠.








주요 기능


- 사진을 더 생동감 있게 해주는 30개의 필터와 24개의 레이어 효과 그리고 16개의 액자를 제공 합니다.

- 필터 중복 적용 기능을 사용하여 좀 더 세밀한 느낌을 만들수 있습니다.

- 즐겨 찾기로 추가하여 자신만의 효과를 빠르게 적용할 수 있습니다.

- Twitter, Facebook 공유 기능과 그밖에 스마트폰에 설치 되어 있는 어플리케이션과의 연동 기능을 제공 합니다.



아직 Adobe AIR를 이용한 모바일 어플리케이션 개발을 고민하고 있는 분들이 많은 걸로 알고 있습니다. Pix 를 설치해 보시고 이미 충분히 좋은 플랫폼이다라는걸 느끼셨으면 합니다. Chrome Web Store 에 등록도 준비 하고 있습니다. Chrome Web Store까지 등록이 되면 Flash Platform으로 구현한 제대로된 Hybrid Application이 될거라 생각 합니다.


 

Pix 공식 홍보 페이지 : http://goo.gl/ftnZR

iOS 다운로드 페이지 : http://itunes.apple.com/us/app/pix-pixel-mixer/id509144139

Android 다운로드 페이지 : https://play.google.com/store/apps/details?id=air.net.daum.pix


QR 코드로 다운로드 받기



Adobe AIR 를 이용하여 모바일 어플리케이션을 구현 하면서 어려운 점이나, 버그 같은데 딱히 물어 볼곳이 없다는 느낌을 많이 받았습니다. 댓글이나 메일로 문의 주시면 저희 팀이 아는 내용이라면 빠르게 답변 드리겠습니다.


Posted by Flash 동강
Adobe AIR2010.09.25 19:59

 Adobe 에서는 Openscreen project의 일환으로 Android OS 에서 돌아가는 Adobe AIR Runtime for Android 를 개발중에 있다. AIR for Android 는 Adobe AIR 를 설치한 Android OS 기반 디바이스에서 설치형 어플리케이션을 운영할 수 있게 해주는 기술(런타임) 이다. 






왜 Adobe AIR 인가?



Adobe AIR 란?


 Adobe AIR는 운영체제에 상관 없이 데스크톱에서 RIA(Rich Internet Aapplications)를 개발 및 배포할 수 있는 런타임입니다. 여러분은 전통적인 데스크톱 개발 기술을 배우지 않고도 기존에 사용하던 웹 기술(HTML, Javascript, Adobe Flash®, Adobe Flex™, Ajax)로 개발한 웹 어플리케이션을 데스크톱에서 실행할 수 있습니다.  (출처 : adoberia.co.kr )



 이전 글에서도 언급했듯이 Flash platform을 이용하여 데스트톱 앱이나, 모바일 앱을 개발하면 높은 확장성을 가질수 있다는점이 가장 큰 장점이다. 데스크탑 환경이나 모바일 환경등 여러가지 플랫폼이 존재하는 상황에서 개발하려고 하는 프로그램이 여러 플랫폼을 커버 할수 있어야 한다면 Adobe AIR 를 도입해 보는것이 좋다. 예를 들어 보면, Twitter 클라이언트로 인기를 끌고 있는 TweetDeck ( http://www.tweetdeck.com/ )은 AIR로 개발한 데스크톱 프로그램으로 Window, Mac, Linux 에서 모두 실행 가능하다. AIR를 사용하지 않는다면 각각의 플랫폼(OS)에 맞춰서 따로 개발해야 하지만, AIR를 이용하여 하나의 결과물로 여러 플랫폼에 설치되는 프로그램 개발이 가능 하였다.



AIR for Android (http://labs.adobe.com/technologies/air2/android/)


 현재는 Adobe AIR 2.5 상태이고, Adobe 에서는 2011년 상반기 릴리즈를 예정으로 Android OS ( 넥서스원, 겔럭시 A,S 디자이너 등과 같은 )를 탑재한 디바이스에서 AIR 어플리케이션을 실행 시킬수 있게 하는 런타임을 개발하고 있다. 현재 프리 릴리즈 상태로 개발자 프로그램에 가입하면 개발중인 버전을 테스트 할 수 있다. 필자가 기대하고 있는건 기존 데스크톱 환경에서 이미 구축되어 있는 게임이나 컨텐츠들을 비교적 쉽게 모바일 환경으로 가져올수 있다는 점이다. 



 하나의 소스를 이용하여, 거의 모든 플랫폼을 커버 할 수 있는 컨텐츠 개발이 가능하다. 



그러기 위해서는 앞으로 가야할 길이 많이 남아 있지만, 앞으로 데스크톱, 모바일 환경에서 Adobe AIR의 가능성은 상당히 기대가 된다. 



Posted by Flash 동강
Flash platform2010.09.19 14:53

 몇일전 Apple 이 아이폰 앱 개발 정책 약관을 변경에 따라 다시 Flash CS5 를 이용하여 아이폰 앱 개발이 가능해 졌다. 정책이 바뀌기전 심사 중이었던 플래시로 만든 앱들도 심사 완료 상태가 되었다. 


 이 문서에서는 두가지,  Flash CS5 의 Package for iPhone 으로 개발하는 아이폰앱과 Adobe 에서 2011년 상반기 런칭을 목표로해서 개발하고 있는 Android for AIR 에 대한 소개 및 가능성에 대해 다룰 것이다. 


 먼저 Package for iPhone 이다. Flash Pro CS5를 이용해 만든 결과물이 아이폰 설치 파일인 .ipa 로 나온다. 개발자는 맥에서 xcode 와 object-c를 이용하여 개발한 .ipa 를 테스트하는 방법과 동일하게 자신의 아이폰에 설치 할 수 있다. 



(출처 : http://www.mikechambers.com/blog/ )


 단순히 Flash 툴을 이용해 ( Actionscript3.0 ) 만든 코드를 LLVM ( Low Level Virtual Machine ) 을 통해 .ipa 로 컴파일하는 것이다. 


 몇 가지 테스트를 해보니, 아이폰에서 제공하는 네이티브 API 를 사용하지 않는 컨텐츠라면 데스크톱 환경에서 사용하고 있는 소스를 아이폰 용으로 컴파일해서 사용해 보니 크게 퍼포먼스가 떨어지지 않는다. 다만 폰(스마트폰)이라는 디바이스적인 한계가 있기때문에 최적화가 필요 하다. 


최적화에 대한 내용은 어도비 에반젤리스트인 마이크챔버스의 블로그 내용을 참고하라.



 장점은 데스크톱에서 사용하는 플래시 컨텐츠의 소스를 그대로 가져다 쓸 수 있다는 점이다. 다만 데스크톱은 마우스를 이용하고 폰은 터치를 이용하는 점이 다를 뿐이지 소스를 전반적으로 수정할 필요는 없다. UI 를 구성하는 뷰단과 이벤트 처리만 바꿔준다면 손 쉽게 서비스가 가능한 앱을 만들수 있다. 




 단점은 굳이 플래시를 가지고 개발을 할 필요가 없다는 것이다. LLVM 의 성능이 향상된다면 컴파일되서 나오는 결과물의 퍼포먼스도 빨라지겠지만 xcode 와 object-c 를 이용하여 개발한 앱이 같은 기능을 한다면 더 빠르다. 그리고 데스크톱 자원을 사용해서 무리 없이 실행되던 게임들도 아이폰에서 실행 시키면 느릴수 있다. 아니 느리다. 퍼포먼스 튜닝이 반드시 필요한 부분이다. 하지만 모바일 용으로 퍼포먼스 튜닝을 한다면 데스트톱에서는 더 빠르게 실행 시킬수 있기 때문에 그 소스는 더 경쟁력이 생길 것이다. 


위의 단점들을 보면 굳이 Flash를 이용하여 아이폰 앱 개발을 할 필요성을 못느낀다. 하지만 같은 소스로 Android 앱까지 개발할수 있다면 생각이 달라질 것 같다.


현재 prerelease 상태로 Android OS 에 설치되는 AIR Runtime 이 개발 중에 있다. 아이폰 앱 개발과는 방법이 조금 다르지만 Flash CS5를 이용하여 안드로이드 앱을 개발하는 건 같다. 다만 안드로이드 OS 2.2 버전 이상에서 설치되며 폰에 AIR Runtime 을 설치해야만 Flash 로 개발한 앱을 설치 할 수 있다. 


자세한 개발 방법은 아래 사이트를 참고 하라.



위의 링크에서 확인할 수 있듯 많은 앱들이 이미 개발 되었다. 아직 prerelease 상태이기 때문에 Flash CS5 Android extention을 설치해야 한다. 설치는 AIR for Android prerelease program 에 가입한 후에 해당 사이트에 가면 다운로드 받을수 있다. 


Adobe AIR 가 폰에 설치되어 있어야만 Flash 로 만든 앱들을 설치 할 수 있다는 단점이 있지만, 이 부분은 정식 릴리즈가 되는 시점에서 해결책이 나올 것으로 본다. 몇가지 앱들을 넥서스원(Android 2.2)에 설치 해봤는데 성능이 기대보다 좋다. 개인적으로 아이폰 앱 보다는 안드로이드 앱 개발의 가능성이 높게 느껴 진다. 


다만, 아이폰과 안드로이드 해상도가 다르기 때문에 같은 뷰를 보여 주기 위해서는 소스 변경이 불가피 하고 안드로이드가 탑재되는 스마트폰도 역시 폰에 불가하기 때문에 성능 최적화가 필요 하다. 하지만, 이를 제외 하면 상당히 괜찮다. 아니 나쁘지 않다. 큰 리소스를 필요로 하는 앱이라면 네이티브 코드를 이용하여 개발하는게 휠씬 좋겠지만, 가벼운 컨텐츠 개발이라면 상당히 매력적인 기능이 될 것이다. 


하나의 코드를 이용하여, 데스트 톱( Windows, Mac, Linux), 모바일 ( 아이폰, 안드로이드 그리고 추가적으로 확장 예정인  OS ) 에서 모두 실행 될 수 있는 앱을 개발할 수 있다는게 Adobe가 내세우는 장점이고 나에게도 큰 장점으로 다가 온다. 다만 아직 갈 길이 많이 남아 있다. 퍼포먼스 측면에서 HTML5를 이용해서 개발한 것과 별 다를게 없다면 HTML5의 확장성에 밀리게 될게 뻔하기 때문이다. 하지만 네이티브 API가 접근 할 수 있다는 것 만으로도 상당히 큰 장점이 될 것이다. 그리고 소스를 재사용할 수 있다는 점은 인력 부족 상태에서 하나의 대안으로 자리 잡을 수도 있을것 같다. (또한 아직 prerelease 다 )


다음은 웹에서 서비스 하고 있는 소스를 이용해 뷰만 바꾼것을 아이폰과 안드로이드 앱으로 컴파일해서 설치해본 영상이다.






'Flash platform' 카테고리의 다른 글

Flash App Performance : Image Sprite Sheet  (0) 2012.01.25
[Mobile] Flash Platform for Mobile  (0) 2010.09.19
Flex for Mobile Devices  (0) 2009.11.06
Flash / Flex 로 만든건 느리다?  (2) 2009.09.08
Posted by Flash 동강