어도비에서 얼마전에 Adobe Creative Suite 5.5를 선보였습니다.

사실 그 전에 이미 Flash Builder Burrito가 올라와서 많이 사용되었었는데

이번 CS 5.5 정식버전에서 Flash Builder 4.5로 정식 릴리즈 되었습니다.

새로 릴리즈된 버전에서는 iOS용 빌드가 포함되었습니다.



또 이번 AIR 2.7에서부터는 iOS에서도 웹 브라우저를 띄울 수 있게 되었습니다.

바로 StageWebView입니다.

그동안 이 기능이 지원되지 않아서 페이스북이나 트위터등 다양한 외부 API를 쓰기 어려웠습니다.

oAuth를 지원하기 위해서는 앱내에서 브라우저를 띄우는게 필수이기 때문입니다.

StageWebView가 지원되면서 이제 페이스북이나 네이트등의 외부 API를 사용할 수 있게 되었습니다.

oAuth는 무지 어려우므로 일단 Flash Builder 4.5를 둘러보고 iOS를 만들어보는 간단한 샘플을 만들어 보겠습니다.



브라우저를 위와 아래 두개를 띄워 트위터와 페이스북을 동시에 쓰는 앱을 만들어보겠습니다.

(급조해서 만든 아이디어치고는 괜찮지 않아요? ㅋㅋ)

자, 서론 다 빼고 간단하게 따라하기로 바로 만들어보겠습니다.

개발자 인증서 받기


Flash Builder 4.5를 실행합니다.

"Package Explorer"에서 우클릭 > New > ActionScript Mobile Project를 선택합니다.



Next를 눌러 다음과 같이 프로젝트 명을 iDualBrowser라고 입력합니다.



프로젝트명을 입력하고 Next를 선택하면 모바일 환경 설정을 할 수 있습니다.



위 그림은 기본 설정인데 우리 프로젝트에 맞게 다음과 같이 설정을 해줍니다.



"Platform Settings"에서 Target Devices를 아이폰, 아이팟용으로 설정해줍니다.

큰 의미는 없지만 설정은 설정이니까요 :)

해보진 않았지만 아마 저 설정에 따라서 앱스토어에 등록될 때 설정이 될거라고 생각합니다.

그리고 "Automatically Reorientation"은 체크 해제해주고 (아이폰을 기울이면 자동으로 회전되는 그 기능입니다, 꼭 지원되야 되는 앱이 아니면 안하는게 건강에 좋아요 ㅋ)

그리고 전체 화면에 체크해줍니다 (체크하지 않으면 시간과 통신사, 배터리를 표시해주는 상단 탭이 나타납니다)



그리고 마지막으로 애플리케이션의 ID를 지정해줍니다.

이 애플리케이션 ID는 매우 중요합니다.

꼭 기록해두시거나 알아보기 쉬운 ID를 지정합니다.



마지막으로 "Finish"를 누르면 프로젝트 생성을 마치고 코딩창으로 이동합니다.

다음과 같은 코드를 입력합니다.

StageWebView를 만드는 코드는 어렵지 않습니다.

StageWebView API 보기



한줄씩 살펴보겠습니다.

var topView: StageWebView = new StageWebView;
topView.stage = this.stage;

StageWebView 객체를 생성하고 stage를 지정해줍니다.

addChild가 아닌 stage를 등록해주는 이유는

실제로 iOS에서 보여지는 브라우저 화면은 디스플레이 객체의 하나로써 보여지는게 아니라

stage위에 즉, 캔버스보다 위에 별도로 보여지는 영역이기 때문입니다.

즉 어떤 객체 밑으로 넣을 수 없다는 점을 꼭 기억해야합니다.

topView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, this.stage.stageHeight / 2 );

브라우저의 크기를 지정해줍니다.

x, y를 따로 지정해주는게 아니라 보여질 영역을 직접 지정해주는 것입니다.

상단의 절반을 차지하도록 설정한 것입니다.

topView.loadURL( "http://twitter.com" );

그리고 나서 어떤 페이지를 보여줄지 URL을 지정해줍니다.

이렇게 상단과 하단을 나눠서 두 개의 StageWebView를 생성해줍니다.

addChild같은건 하지 않습니다.



여기서 Command + F11을 누르면 다음과 같이 뜰 것입니다.



디버그의 옵션이 중요해진 이유는

시뮬레이터로 디버깅을 할 것이냐

디바이스에서 테스트하기 위해 ipa파일을 뽑을것이냐를 선택해야하기 때문입니다.

먼저 시뮬레이터로 테스트해보겠습니다.

"Launch Method"에서 on desktop을 선택하고 iPhone 4를 선택합니다.



설정을 마치고 Run을 클릭합니다.



앗!!

사이즈가 묘하게 나옵니다??

이는 버그인지 설정인지는 판단하기 어렵지만 우선 정확하게 표현하기 위해서는

SWF설정을 해줘야합니다.



위와 같이 SWF 메타데이터 설정을 해줍니다.

잠깐, 왜 320*480인가요? 아이폰 4용이라면서요?


이렇게 설정하고 디버그를 해보면 다음과 같이 정상적으로 보입니다.



제 모니터가 작아서 스샷은 짤렸습니다만 -_-a

이제 정상적으로 보여집니다.



그러면 이제 아이폰에서 직접 테스트를 해볼까요?

먼저 디버그 버튼 옆의 아래로 향한 화살표를 선택하고 "Run Configurations"를 선택합니다.

현재 디버그 설정은 선택하고 우클릭 > Duplicate를 선택하여 하나 더 만듭니다.



좀전에 "On desktop" 대신에 "On device"를 선택합니다.

그러면 빨간색 에러표시가 나면서 "Packaging setting"을 먼저 하라며 링크를 제시해줍니다 (자상도 하여라)

파란색 "Configure"를 누르면 "Packaging settings" 창이 나옵니다.



위에서 만들어놓은 인증서와 Provisioning file을 선택해 넣습니다.

"OK"를 누르고 이전 창으로 다시 돌아갑니다.



"Run"버튼이 활성화 되어 있는 것을 볼 수 있습니다.

이제 실행을 하면 인증서의 비밀번호를 입력하면

다음과 같이 패키지가 진행되는 것을 볼 수 있습니다.



두구두구...

패키징이 끝나고 다음과 같이 어떻게 아이폰에 넣어서 테스트하는지 친절히 알려줍니다.



1. 아이폰을 USB에 연결합니다.

2. 이전 버전 앱이 설치되어 있다면 언인스톨해주세요. (안하셔도 됩니다. 뒤에 팁으로 알려드릴께요)

3. *.ipa 파일을 아이튠즈 라이브러리로 드래그 앤 드랍으로 끌어넣습니다. (걍 더블클릭하셔도 됩니다.)

4. 디바이스 > 애플리케이션 탭에서 체크가 되어 있는지 꼭 확인해주세요.

5. 동기화 해줍니다.

이전 버전을 지우지 않고

-app.xml 파일에 보면 버전정보가 있습니다.

컴파일 하기 전에 이 버전을 높여주면 됩니다.



0.01 -> 0.02 -> 0.03 이런식으로요.

새로 설치되는 앱의 버전이 더 높다면 아이튠즈는 새 앱으로 "Replace"해줍니다.

일일이 지우는거 무지 귀찮기 때문에 꼭 숙지해두시기 바랍니다.



컴파일이 모두 되었으면

bin-debug 폴더에 생긴 ipa 파일을 볼 수 있을 것입니다.



더블클릭하여 아이튠즈에 설치합니다.



디바이스 > 애플리케이션 탭을 선택하여 보면

제일 마지막에 iDualBros...라고 앱이 설치되어 있는 것을 볼 수 있습니다.

이제 하단의 동기화(Sync)버튼 또는 적용(Apply)를 눌러 동기화시켜줍니다.



동기화가 끝나기를 기다립니다.





자 이제 아이폰에서 돌려봅니다~!!





감동입니다...

플래시로 레티나 디스플레이 앱을 만들 수 있게 되다니... ㅠ.ㅠ



이제 디버깅을 익혔으면

실제로 배포를 하기 위한 방법을 알려드리겠습니다.

먼저 배포용 인증서를 발급받아야합니다.

개발자 센터에서 App IDs 탭을 눌러 앱 아이디를 만듭니다. (이 예제에서는 앱 아이디가 바껴서 헷갈리실 수도 있는데 아까 프로젝트 생성할 때와 동일한 아이디를 지정해줘야합니다.)



그리고 "Provisioning"탭으로 이동하면 상단에 "Distribution"메뉴를 클릭하여 배포용 Provisioning 파일을 발급받습니다.



이렇게 발급받은 Provisioning파일을 다운받습니다.



이렇게 발급받아놓은 다음

Flash Builder로 돌아와 디버그 버튼 옆, 옆, 옆에 있는 Release버튼을 클릭합니다.



Release 버튼을 누르면 나오는 인증서 패널에서 배포용 인증서와 배포용 Provisioning파일을 설정합니다.



Apple App Store용 패키지 타입을 설정합니다.

Ad hoc이란?


이렇게 설정하고 "Finish"를 선택하면 두구두구.... 드디어 패키지가 시작됩니다.



이렇게 릴리즈된 패키징 파일은



다음과 같이 나타납니다.

이렇게 패키징된 파일은 앱스토어에 등록할 수 있게 됩니다.

(테스트용은 당연하겠지만 등록안되요 ㅋ)



Adobe Flash Builder 4.5는 아이폰용 뿐만아니라 안드로이드용도 동시에 개발할 수 있습니다.

안드로이드의 경우는 직접 폰에서 디버깅을 할 수도 있고

디버거의 연결로 직접 콘솔창에 trace를 찍어볼 수도 있습니다.

아이폰도 예전에 비하면 훨씬 간편해지긴 했습니다만

아직도 손이 많이 가는 것은 사실입니다.

그래도 고해상도 지원도 가능해졌고

StageWebView가 가능해지면서 무수히 많은 가능성이 열렸습니다.

이제 연락처 가져오기, APNS, In-App Purchase 등이 남아있습니다.

아마 Molehill 이 지원되는 그날만을 꿈꿔봅니다 :)



For the better.



(난 댓글을 좋아해요~ ↓↓↓)
저작자 표시 비영리 동일 조건 변경 허락
신고
  1. Favicon of http://xoul.tistory.com XOUL 2011.05.15 20:24 신고

    우와 신기하네요 ㅋㅋ
    StageWebView 페이지 스크롤은 되나요??

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2011.05.15 20:25 신고

      당연하지~

    • Favicon of http://xoul.tistory.com XOUL 2011.05.16 09:30 신고

      Flex 스크롤 보면 안드로이드나 아이폰 기본 스크롤 컴포넌트에 비해서 감도라던지 부드러움이라던지 좀 별로던데 이건 어떤가요?

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2011.05.16 10:06 신고

      스크롤바를 이야기하는거였구나 따로 스크롤바 지정은 없어~
      스크롤 시켜주는 메소드도 없고~

    • Favicon of http://xoul.tistory.com XOUL 2011.05.17 22:04 신고

      어엌ㅋ 그렇군요..
      잘봤습니다 :)

  2. 2011.05.15 20:46

    비밀댓글입니다

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2011.05.15 20:56 신고

      에러 메세지 보니까 zip 파일 오류같은데
      올릴때 ZIP 올려야되는데 이건 실제로 압축을 하라는게 아닙니다.
      그냥 확장자만 ipa에서 zip으로 바꾸고 올리시면 되요.
      ipa 자체가 zip 파일이거든요.
      확장자만 바꿔서 다시 올려보세요~

  3. 2011.05.15 21:05

    비밀댓글입니다

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2011.05.15 21:19 신고

      저도 처음보는 에러네요. 아무래도 패키징과정에서 오류가 있는거 같은데
      직접 zip 파일을 만들거나 압축하는 과정은 대게 안하는데 어떤게 문제인지 모르겠네요;;;

  4. Favicon of http://www.yangc.com 양대현 2011.05.15 21:22 신고

    아무래도 일반적인 방법이 아니라 해결방법 찾기가 쉽지않네요.
    다행이 구글링하니 관련 글이 몇 개 있어 적용해보는 중입니다.
    우야꼬님 덕분에 힘내서 반드시 업로드 시키겠습니다!
    정말 감사합니다^^

  5. Favicon of http://www.yangc.com 양대현 2011.05.15 22:30 신고

    아자! 업로드 했습니다.
    http://forums.adobe.com/thread/729402
    위 글 참고해서 Payload폴더 내의 파일명을 바꾼 다음에 압축해서 올리니 잘 올라갔네요. 아...이 감격이란...
    저 같은 경우를 위해 간단히 설명드릴께요.
    플래시CS5에서 만든 ipa를 zip으로 확장자를 바꿔 압축을 푼 뒤 맥에서 터미널을 띄워 Payload폴더 내 파일의 이름을 바꿔줍니다.(위 링크 참고)
    그리고 Payload폴더를 다시 압축하여 업로드 하니 해결됐습니다.
    우야꼬님 감사합니다~ 심사 통과하고 앱스토어에 올라오는데로 링크 걸께요 ^^

  6. 찰카닥 2011.05.16 09:34 신고

    후후 이런 알짜배기 글을!! 좋은공부 되겟다!! 오늘 이걸로 하루를 시작해보겟어+_+

  7. Favicon of http://blog.jidolstar.com 지돌스타 2011.05.16 13:46 신고

    굿 포스팅!!!! as3로 ios, android 어플 개발이 얼마만큼 효과가 있을까는 이제 개발자들의 몫이 되었군.

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2011.05.17 10:23 신고

      네 그리고 AIR 2.7 만져본 사람 이야기 들어보니까
      2.7에서는 퍼포먼스 더 좋아졌다고 하더라구요~ ㅎㅎ

  8. Favicon of http://leejimyung.com desty 2011.05.18 07:34 신고

    꼼꼼한 강좌 감사합니다 !

  9. Favicon of http://leejimyung.com desty 2011.05.21 10:34 신고

    다음책은 언제나오나요 ? +_+

  10. Favicon of http://greenys1.blog.me/ vam 2011.05.25 14:05 신고

    우아. 꼼꼼한 정리 감사합니다. 아무래도 iOS쪽으로는 설정부분에서 손댈게 많아서 여간 번거로운게 아닙니다.
    저 혹시 질문하나 드립니다. 플래시 5.5에서 iOS용으로 퍼블리싱 할때 섬네일 넣을 수 있는 기능이 있던데. 플래시 빌더에서는 퍼블리싱 되어지는 ipa파일에 섬네일을 삽입하는 방법이 있나요?

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2011.05.31 11:07 신고

      썸네일이 어떤걸 말씀하시는지 모르겠네요.
      Default.png 대표이미지는 include files에 추가하시면 되고
      icons 는 -app.xml 파일에 보면 <icon /> 노드가 있습니다~

  11. 질문자ㅎ 2011.05.31 09:59 신고

    깔끔하게 정리된거 잘봤습니다. 하나하나 따라하면서 끝까지 왔는데요 에러가 발생하는데 어떻게 해줘야할지 몰라 이렇게 질문을 드립니다..

    에런내용은 무슨 ID가 매칭이 안된다고 하는데 ㅡㅡ; provisioning파일 만들때 뭐가 잘못된건지

    The AIR application ID "Airmobileios" does not match the pattern "com.mytest.Airmobileios" specified in the provisioning profile. Either change the applications ID, or use a provisioning profile that matches the existing ID.

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2011.05.31 11:10 신고

      provisioning 파일 만들 때의 App ID와
      개발할 때 App의 App ID는 같아야합니다.

      다만 * 가 가능하기 때문에
      테스트용 provisioning 파일의 App ID를 그냥 * 으로 해놓으면

      어떤 앱이라도 다 할 수 있습니다.

      p.s) 등록할 땐 꼭 특정한 App ID를 적용하셔야되요.

  12. 질문자ㅎ 2011.05.31 11:34 신고

    App Id가 프로젝트 이름이지요? 그렇다면 똑같이 했는데도 그런 메세지가 나오네요..

    제가 windows로 개발자 인증서를 발급받았는데 그게 영향이 있을까요? ㅡㅡ;

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2011.05.31 12:54 신고

      아뇨 App ID 는 각 앱마다 고유한 ID 입니다.
      -app.xml 파일 보면 <id/> 노드에 적힌값입니다.
      그리고 윈도우 개발자용 인증서는 카테고리가 달라서
      iOS에서는 아마 인증이 안될 듯 한데 잘 모르겠네요.

  13. 질문자ㅎ 2011.05.31 15:42 신고

    해결을 했습니다. App id를 com.mytest.Airmobileios로 하니깐 인식을을 하네요 ^^

    전엔 Airmobileios로 했어거던요 ㅋㅋ 암튼 답변감사드립니다.

  14. Favicon of http://jidolstar.tistory.com 지돌스타 2011.07.20 12:36 신고

    이거 윈도우에서도 해봤는데 Xcode에서 직접 개발해봤던 나로선 디바이스에 물려서 iTunes를 거쳐야 한다는 것이 너무 불편하긴 하네. 패키징도 꽤 오래걸리는데..... 그건 참 불편하네 ㅎㅎ

  15. 김범경 2011.09.07 15:12 신고

    질문드립니다~
    이차저차해서 배포파일까지 만들었고 마지막 단계에서는 app loader로 ipa배포파일을 store에 upload를 해야 되는데...
    맥이 없거든요? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

    근데 다행히 제가 만든 어플은 저희 업체들만 사용하게 될거라 저희 게시판을 통해서 ipa파일만 배포해도
    관계는 없습니다... 그런데 그런식으로 배포 하려면 ad hoc방식으로 배포를 한다는 것인가요.??

    그렇다면 등록된 device에서만 설치 가능한 것 맞는지요...?

    • Favicon of http://wooyaggo.tistory.com 우야꼬  2011.09.07 18:04 신고

      네 ad hoc으로 배포하시려면 아마 ad hoc용 인증서를 받으셔야할거에요.
      거기에 뭔가 기기들 등록하는 그런게 있지 않을까 싶네요.

  16. Favicon of http://devbook.tistory.com LocalUser:::::: 2014.06.25 21:19 신고

    좋은 글 감솨해요~ 좋은 하루되세요~~ ^^

+ Recent posts