Adobe AIR 2.7 SDK 기반 아이폰, 안드로이드 앱 개발 및 배포 - Flash Builder 4.5.1 기준

2011/07/21 10:37

Flash Builder 4.5.1에는 Flex SDK 4.5.1기반으로 개발 할 수 있으며 이 SDK는 Adobe AIR 2.6 을 지원하고 있다. 하지만 AIR 2.7기반으로 iOS 앱을 만들때 퍼포먼스 차이가 상당히 차이가 나므로 AIR 2.7로 업그레이드 시켜 개발하는 것이 더 좋을 것이다. 다음 글을 보면 AIR 2.7에 대해서 좀더 이해할 수 있을 것이다.

Adobe AIR 2.7 SDK 및 Runtime 정식 런칭. iOS환경에서 4배 빨라졌다!

항상 그렇듯, 개발은 하고 싶은데 못하는 가장 큰 이유는 어떻게 하는지 몰라서이다. 그것을 찾기 위해서 자료를 찾고 책을 봐야하는데, 특히나 최신기능 및 툴이 나올때마다 또 연구에 대한 압박이 있다. 데모 및 예제들은 수도없이 나오는데... 근데 그거 어떻게 개발하는데에 대한 답변은 찾기가 쉽지 않은게 사실이다. 이 부분에 대해서 약간의 수고를 덜어주고자 이 글을 작성했다. ^^

1. Flash Builder 4.5.1로 설치/업그레이드 하기
AIR 2.7을 사용하기 전에 Flash Builder 4.5를 4.5.1로 업그레이드 하길 바란다.

Flash Builder 4.5.1로 업그레이드 하는 방법은 다음과 같다.

1. Flash Builder 4.5를 다운로드 받아 설치한다.
Adobe Flash Builder 4.5 Premium Try 버전을 다운로드 받는다.

2. (현재는 이 부분이 필요없음)Flash Builder 4.5를 4.5.1로 업데이트 한다.
Help > Search For Flash Builder Updates... 로 업데이트 하면 되겠다.
또는 Adobe Flex Support Center 에서 직접 다운받아 Updater를 설치한다.

참고로 Flash Builder 4.5.1로 설치후 Eclipse 플러그인으로 설치를 원하시는 분은 다음글을 참고하길 바란다.

Eclipse Indigo에 Flash Builder 4.5.1 plug-in 설치 http://blog.jidolstar.com/774


2. Flash Builder 4.5.1에 AIR 2.7 SDK 설치

윈도우 기준으로 설명하겠다. Mac에서는 파일덮어쓰기 개념이 윈도우와는 다르므로 아래글을 참고하면 되겠다. 

Mac에서 AIR 2.0 Beta 개발환경 만들기 http://blog.jidolstar.com/626 

1. AIR 2.7 SDK을 다운로드 받고 압축을 풀자.
http://www.adobe.com/products/air/sdk/
2. {Flash Builder 4.5 설치경로}/sdks/4.5.1 을 복사해서 같은 폴더에 붙어놓자.
3. 복사한 폴더의 이름을 "4.5.1 with AIR 2.7" 로 바꾸자.
4. 받은 AIR 2.7 SDK 안에 내용을 전부 복사해서 "4.5.1 with AIR 2.7" 내부에 덮어쓰자. (맥 사용자의 경우에는 덮어쓰면 폴더가 대치되므로 이 방법으로 하면 안됩니다.)
5. 이것으로 AIR 2.7을 개발할 수 있는 Flex 4.5.1 SDK가 만들어진 것이다.


3. Flash Builder 4.5.1에서 AIR 2.7 SDK 개발환경 만들기 

Flash Builder 4.5.1는 기본적으로 Flex 4.5.1을 기본 SDK로 설정되어 있다. 앞서 AIR 2.7을 지원하는 Flex 4.5.1 SDK를 사용하기 위해서 Flash Builder 에서 간단한 설정이 필요하다. 

1. Flash Builder 4.5.1을 실행한다.
2. 메뉴에서 Window > Preperences 로 들어간다. 
3. 아래 화면처럼 Preperences 설정창에서 Flash builder > Installed Flex SDKs를 선택한다. 현재 Flex 4.5.1이 기본 SDK로 설정되어 있음을 알 수 있다. Add 버튼을 누른다.

4. Browse... 버튼을 눌러 "{Flash Builder 4.5 설치폴더}/sdks/4.5.1 with AIR 2.7"를 찾아 Flex SDK location을 입력하고 Flex SDK name은 Flex 4.5.1 with AIR 2.7 로 수정하자. 그리고 OK를 누른다.


5. 다음 화면처럼 Flex 4.5.1 with AIR 2.7이 추가되었다. 이것을 기본 Flex SDK로 삼기 위해 Flex 4.5.1 with AIR 2.7을 체크하자. 그리고 OK버튼을 누른다.

이것으로 Flash Builder 4.5 환경에서 AIR 2.7 SDK 기반으로 개발할 수 있는 환경이 만들어졌다.


4. Flash Builder 4.5.1에서 AIR 2.7 기반 Mobile Project 만들기

1. 메뉴에서 File > New > Flex Mobile Project를 선택한다.
2. Project Name을 입력한다. Flex SDK version이 기본으로 Flex 4.5.1 with AIR 2.7로 설정되어 있다. 앞서 설정한 탓이다. 만약 다른 SDK를 사용하고 싶으면 Use a specific SDK로 바꾸면 되겠다. Next 버튼을 누른다.

3. Target platforms와 각종 설정을 한다. 아래 화면처럼 Flash Builder 4.5를 이용해 iOS, BlackBerry, Android 어플을 1개의 프로젝트로 모두 개발할 수 있음을 알 수 있다. Finish를 눌러 프로젝트를 생성하도록 하자. 필요하다면 Next 버튼을 눌러 Server Setting 및 Build Paths를 설정하면 되겠다.


4. Package Explorer에 아래처럼 MyMobileApp 프로젝트가 생성되었다. 여기 여기서도 Flex 4.5.1 with AIR 2.7을 사용하고 있음을 알 수 있다.

5. MyMobileApp-app를 두번클릭해 열어보자. 어플의 xmlns 네임스페이스가 2.7로 잡혀있다. 만약 기존에 AIR 프로젝트나 모바일 프로젝트를 만들어 이 부분에서 에러가 난다면 2.6에서 2.7로 바꾸면 문제없이 컴파일 된다.


6. MyMobileApp 프로젝트가 선택된 상태에서 Run > Run을 해보자. Run Configuration을 설정창이 뜬다.
이창은 어플을 실행할때 어떤 장치에서 실행해줄지 결정해준다. iOS, Android만 다뤄보면 일단 창내에 Name에 MyMobileApp(iOS)라고 입력하고 Target platform을 Apple iOS로 선택하자. Launch method는 2종류가 있다. 실뮬레이션하고 싶다면 On desktop을 선택한다음 Apple iPhone 4를 선택하자.(어떤것을 선택해도 상관없다. 단지 실행되는 ADL의 해상도만 다르다.) 만약 기기에 직접 쓰고 실행하고 싶다면 On device를 선택하면 되겠다. 이 경우에는 몇가지 더 설정해야한다.
Apply 버튼을 눌러 적용해두자. 만약 Run버튼을 누르면 ADL이 실행될 것이다.


Android도 추가해보자. 아래 화면처럼 Mobile Application내에 MyMobileApp(iOS)를 선택하고 마우스 오른쪽 버튼을 눌러 컨텍스트 메뉴에 Duplicate하도록 한다.


이번에는 MyMobileApp(Android)로 바꾸고 Target platform을 Google Android, Launch method를 On desktop으로 선택한다음 원하는 기기를 선택한다. Apply를 눌러 적용시키자.


이제 원하는 Configuration을 선택해서 Run버튼을 눌러 실행하면 된다.

7. Run Configuration을 통해 실행하면 아래처럼 실행아이콘 옆에 화살표를 선택하면 최근 실행된 앱이 있으므로 빠르게 테스트 해볼 수도 있겠다.






5. 디버깅 및 배포 

지금까지 앱를 만들고 Desktop에서 ADL 기반으로 시뮬레이션하는 방법을 알 수 있었다. 하지만 제작한 어플을 디버깅 및 배포하지 못하면 아무 소용이 없을 것이다. 디버깅의 경우 안드로이드에서는 직접 디바이스에 연결하여 직접 디버깅을 할 수 있기 때문에 의외로 쉽다. 하지만 iOS 어플의 경우 애플 개발자로 등록되어야 하고 애플에서 제공하는 인증서를 p12로 변환한 파일과 프로비저닝 파일을 가지고 ipa을 만들어 itunes를 통해 아이폰/아이패드등에 배포후 디버깅이 가능하다. iOS 어플의 태생적인 문제때문에 이 방법외에는 없다. 결국 디바이스 디버깅 및 테스트는 안드로이드에서 하다가 최종적으로 아이폰에서 진행해보는 것이 좋겠다. 


배포의 경우 안드로이드는 인증서만 만들고 이것을 가지고 apk를 만들면 된다. 그리고 안드로이드 마켓을 통해 버전을 맞추어 배포하면 된다. 아이폰의 경우 개발자 인증서와 AppStore 배포를 위한 프로비저닝 파일이 있어야 배포용 ipa로 만들 수 있다. 하지만 배포는 윈도우 환경에서는 불가능하다. 왜냐하면 애플에서 제공하고 있는 배포방식을 따르지 않으면 배포가 불가능하기 때문이다. 그래서 ipa를 배포하기 위해 맥용 개발툴인 Xcode와 함께 있는 ApplicationLoader라는 프로그램을 통해서만 배포할 수 있다. 

디버깅 및 배포를 위해 다음 몇가지 정보를 참고하면 좋겠다. 

맥이 있는 유저라면 인증서를 p12로 만드는데 키체인이라는 프로그램을 이용하면 된다. 하지만 맥이 없다면 다른 방법으로 p12 파일을 만들 수 있는데, 다음 링크를 참고하길 바란다.

- 개발자 인증서를 p12 파일로 변환하는 방법:  http://goo.gl/DLpor 

다음글로부터  안드로이드 기반에서 디바이스를 연결에 개발하는 방법을 알 수 있다.
- Flex로 쉽게 모바일 어플을 만들자. - Adobe AIR Launchpad  : http://blog.jidolstar.com/717 

우야꼬님의 다음 글로부터 아이폰 환경에서 개발/배포하는 방법을 알 수 있다.
- Flash Builder 4.5로 iPhone4용 듀얼 브라우져 앱 만들기 : http://goo.gl/p3n2P 

아래 링크는 우야꼬 님이 만든 Flash 앱입니다. Flash Builder가 아닌 Flash CS 5.5 기반에서 만들어 배포한 것이다.
-  아쿠아알리미 - Flash로 아이폰 앱 안드로이드 앱을 동시에 개발했습니다 : http://goo.gl/iZWVp

아이폰용 어플을 개발하기 위한 전반적인 지식을 습득하기 위해 다음 링크를 참고한다.
- Packager for iPhone : http://goo.gl/qWFgS


6. Flash Platform 환경에서 모바일 개발을 위한 다양한 정보 

Flash Platform 환경에서 개발을 하기 위한 정보는 이미 많이 있다. 기본적으로 Adobe의 개발자 센터의 모바일 파트에 가면 다양한 사례와 개발 방법을 학습할 수 있다.

Mobile and Devices Developer Center : http://www.adobe.com/devnet/devices.html

그중에 다음 링크들을 참고하면 학습에 도움이 될 것이다. 

Reference
Flex 4.5 Mobile Apps : http://help.adobe.com/en_US/flex/mobileapps/index.html 
ace

Beginning 

- Build your first mobile Flex Application - Twitter Trends : http://goo.gl/fEBnE 

- Flex Test Drive for Mobile  : Build a mobile application in an hour #1: http://goo.gl/DCLg 

- Flex Test Drive for Mobile  : Build a mobile application in an hour #2 : http://goo.gl/pfRRq 

- Flex Test Drive for Mobile  : Build a mobile application in an hour #3 : http://goo.gl/hxuyz 

- Flex Test Drive for Mobile  : Build a mobile application in an hour #4 : http://goo.gl/x8eus 

- Flex Test Drive for Mobile : Debug and package the application #1 : http://goo.gl/XCMHO 

- Flex Test Drive for Mobile : Debug and package the application #2 : http://goo.gl/j3ERb 

- Flex Test Drive for Mobile: Add application functionality #1 : http://goo.gl/1dXUH 

- Flex Test Drive for Mobile: Add application functionality #2 : http://goo.gl/4yoTB 


Flex Mobile skins 

- Part1 : Optimized skinning basics : http://goo.gl/0VAjD 

- Part2 : Handling different pixel densities : http://goo.gl/MGbyb 
- Part3 : Multiplatform development :  http://goo.gl/E7Jzr

- (동영상)Default Flex Mobile Theme vs. iOS Theme Concept : http://goo.gl/DJcjP 

- Support multiple screen sizes and DPI values in a mobile application : http://goo.gl/9A1iZ 


오픈소스

- Flexpad : http://code.google.com/p/flexpad/


배포관련 

- (동영상)Build iOS Applications using Flex and Flash Builder 4.5 : http://goo.gl/MoQyv 

- Packager for iPhone : http://goo.gl/qWFgS


7. 정리하며 
Flash builder 4.5.1 환경에서 AIR 2.7 SDK를 이용해 아이폰 및 안드로이드용 앱을 개발하고 배포하는 방법에 대해서 전반적으로 소개했다. Flash로 앱을 만든다는 것의 큰 장점은 아무래도 기존 Flash 개발자가 언어의 제약없이 기존 개발경험으로 개발할 수 있다는 점이다. 수개월 동안 Xcode 에서 아이폰 앱 개발을 한 경험으로 비춰봤을때 안드로이드, 아이폰용 앱을 한번에 동시에 개발할 수 있다면 정말 좋겠다는 생각을 많이 가졌다. Adobe Flash Platform을 이용해 사실 이러한 것들이 가능한 것이다. 그러나 분명한 것은 장점이 있으면 제약점도 있다. 각각의 OS는 특색이 있기 때문에 각 OS에 특정적인 기능은 수행하는 것은 불가능하다. 가령 안드로이드의 C2DM이나 iOS의 APNS와 같은 Push서비스는 각 플랫폼에 의존적이다. 위젯기능도 안드로이드 의존적이기 때문에 당연히 이런 것도 개발할 수 없다. 안드로이드용으로 배포할때는 프로요이상이어야 하며 AIR가 설치되어야만 한다. 이러한 제약점과 한번의 개발로 여러 플랫폼에 배포할 수 있다는 장점을 명확히 알고서 개발하는 것은 매우 중요하다. 


추가사항
이 글을 페이스북에 공유하면서 얻은 정보입니다. 아이폰 개발을 지금까지 하면서 이걸 모르고 있었다니... ㅎㅎㅎ 김병규님께 감사드린다는... 이래서 열심히 활동해야한다는 ^^




글쓴이 : 지돌스타(http://blog.jidolstar.com/776

저작자 표시 비영리 동일 조건 변경 허락

Adobe AIR , , , , , , , , , , , ,

  1. Blog Icon
    익군

    제약점이 ... 그러니까 ios의 경우 push 기능은 사용할 수 없네요.. 결제 플랫폼도 마찬가지인가요??

  2. 음... AIR로는 제약점이 분명히 있습니다. 하지만 그런 제약점을 극복할 만한게 있으니 AIR로 개발한다고 생각합니다. 개발자는 선택해야겠지요. ^^

  3. Blog Icon
    익군

    http://www.adobe.com/devnet/air/native-extensions-for-air/extensions/notification.html

    이건 플래시빌더 4.6인가 native Extention 관련 글인데요.
    여기서 말하는 Push는 Apple의 APNs를 이용하지않은거죠??
    제가잘 몰라서리.. -_-;;;; 엄청 헤매는 중이라 조언부탁드립니다.

  4. NE도 완벽하지 않습니다. 노티피케이션은 2가지 종류가 있는데 하나는 APNS 또는 c2dm이고 하나는 지역노티피케이션입니다. 주신 링크는 후자에 속한 것 같네요.

    iOS용으로 http://blog.jidolstar.com/758 관련된 글을 적었었습니다.

    개인적으로 AIR로 모바일 개발하는 것은 포기했다는....^^

  5. Blog Icon
    익군

    감사합니다. ^^; 스토커처럼 몇일간 지돌님 블로그를 머물렀네요.
    저희회사에서 게임이 플래시라 -_-;;; 이걸 아이폰 용으로 어거지로 하다보니..
    선택이 없네요.. IAP도 push랑 같은 방식으로 확장기능에 있더라구요.
    제가 AIR를 잘 몰라서 -_-;;; 과연.. 잘 될지는 ..ㅎㅎㅎ

  6. 음... 그렇군요. 간단한 게임은 충분히 만들어도 되지만 말씀하신걸 보면 푸쉬도 해야하고 다양한 기능을 추가해야하는 것으로 봐서는 크게 만드시는 것 같습니다. 얼마전에 선데이토즈에서 아쿠아 스토리를 에어버전으로 출시했습니다. 필요하다면 개발자를 연결해드릴께요. 저는 AIR로 게임개발은 잼뱅입니다. ^^

  7. Blog Icon
    익군

    오오..그러시면 감사하죠.
    저흰 KYSC라는 회사구요. 어떤식으로 연락드려야 하나..;;
    http://www.kysc.co/ 저희회사 홈피에요 ㅎㅎ 왠지부끄럽네요 ^^;;
    저 며칠전에 지돌님 페북 친추신청도 해버렸어요; 완전 스토커된... -_-;;
    근데 댓글로 연락을??? 아님 제가 전화를 드릴까요??
    쿠키랩의 전화번호는 잘 모르겠고..
    일단 제 메일주소 남길께요 ^^; 댓글로 말씀해주셔도 됩니다. justice@ysci.jp ^^

  8. 일본회사에 다니시는군요.
    http://wooyaggo.tistory.com/
    이 사람인데, 글남겨보시고 연락안되면 페북에서 대화창으로 말 걸어주세요. ^^

  9. Blog Icon
    익군

    앗... 이 블로그는 ㅋ 제가 검색을 좀 많이한듯 ㅋㅋ
    신경써주셔서 정말 감사합니다. ^^ 페북에서도 자주 뵐께요 ㅋ

  10. ㅎ 아 감사합니다.ㅎㅎ 지금 4.6을 쓰는데 이 방법으로 변경해서 잘 쓰고 있습니다.