(2011.07.21)이 글은 조금 오래된 글로 약간 현시점과 다른 내용이 있을 수 있습니다. 현재 Flash Builder는 4.5.1 까지 공식 배포중입니다. Flex 4.5.1 SDK, AIR 2.7도 함께 배포중이므로 참고하세요. 



한동안 아이폰 개발로 Flash 관련된 일을 전혀 하지 못하다 보니 Flash를 주제로 다룬 여기 블로그도 많이 정체되어 있다는 느낌을 지울 수 없더군요. 그래서 시간내서 간단하게 하나 적어봅니다.


지난 몇일전에 미국에서 Adobe MAX가 열렸었죠. 바쁜 나머지 관심있게 지켜보지 못해 주요 주제가 무엇인지는 잘 모르겠지만 여기저기 들리는 것을 보면 결국 "모바일"인 것 같습니다. 이번에 Preview 버전으로 배포된 Flash Builder "Burrito", Flex SDK "Hero", Flash Catalyst "Panini" 모두 모바일 개발에 대한 내용이 추가되었습니다.

저는 이 글에서 Flash Builder를 이용해 Flex나 AIR 어플리케이션을 만들어본 경험이 있는 분들에게 모바일 개발을 아주 쉽게 할 수 있는 일종의 팁을 전달하고자 합니다. 먼저 Flash Builder "Burrito"에 대해서 잠깐 소개하고 Adobe AIR Launchpad를 이용해 어떻게 모바일 AIR 어플리케이션을 만들 수 있는지 소개합니다.


Flash Builder와 Mobile이 만나다. - Flash Builder "Burrito"

Flash Builder "Burrito"에는 Flex SDK "Hero"가 이미 내장되어 있기 때문에 따로 설치할 필요가 없습니다. 여러분은 아래 링크에서 Flash Builder "Burrito"를 다운로드 받을 수 있습니다. 단, Adobe 회원에 먼저 가입하셔야 합니다.

http://labs.adobe.com/technologies/flashbuilder_burrito/

설치는 기존 Flash Builder 4 와 거의 동일합니다. 기존에 설치된 Flash Builder와 별도의 위치에 설치되므로 안심하고 설치하시면 됩니다.

Flash Builder "Burrito"를 실행하시면 먼저 아래와 같은 Start Page가 눈에 띕니다. 이 화면만 보아도 알 수 있듯이 Mobile과 Desktop&Web이 나눠져 있습니다. 여기를 따라 가면 간단한 예제가 있으니 쉽게 따라하실 수 있습니다.



Flash Builder "Burrito"는 아래처럼 모바일 프로젝트를 만들 수 있습니다.


현재는 아래처럼 안드로이드 플렛폼만 지원하고 있습니다. 테스트는 데스크탑에서 가상의 장비를 선택해 시뮬레이션을 할 수 있으며 또한 장비가 있다면 직접 물려서 테스트 해볼 수도 있습니다.


개인적으로 안드로이드 폰(HTC Desire)를 소유하고 있어서 Mobile 버전으로 간단하게 만들어 디바이스 시뮬레이팅을 할 수 있었습니다. 인증서 발급이나 별도의 설정없이 너무 간단하게 만들 수 있어서 기존 Flex 개발자라면 안드로이드용 어플 개발을 쉽게 할 수 있게 되었습니다. 아래 사진이 바로 그 실행결과입니다.



배포도 상당히 간단해서 기존에 AIR 어플리케이션에서 배포버전을 배포하듯이 간단한 인증서 발급만으로 APK로 배포할 수 있습니다.


Adobe AIR Launchpad - AIR 프로젝트 자동화 생성기
Adobe AIR 라운치 패드가 새로 배포되었습니다. 이것은 금방 소개한 Flash Builder "Burrito"를 겨냥해서 제작되었습니다. 이 어플은 Flex개발자들이 데스크탑 및 모바일 AIR 어플을 만드는데 도움을 주기 위한 일정의 자동화 프로젝트 생성기입니다.
 
Flash Builder에서 AIR 프로젝트를 만드는 것은 매우 쉽습니다. 하지만 AIR의 전반적인 기능을 이해해야 제대로된 설정을 할 수 있고 각종 설정은 사실 손이 많이 가는 작업일 수 있습니다. 능숙한 개발자야 문제가 안되지만 초보개발자라면 가이드라인을 제시받고 싶어할 것입니다. 이때 아주 유용할 것 같습니다.

설치하기 위해 다음 링크로 가시면 됩니다.
http://labs.adobe.com/technologies/airlaunchpad/

아래는 실행 첫화면입니다. 프로젝트를 자동으로 생성시켜주기 위한 첫번째 단계로 만들 어플이 데스크탑인지 모바일용인지 선택합니다.

어짜피 데스크탑용이야 많이 해봤으므로 저는 모바일을 선택했습니다. 아래와 같은 화면이 나옵니다. 프로젝트를 생성하기 위해 총 4단계(Setting, Configuration, Samples, Generate)를 거칩니다. 아래 화면은 그중 첫번째 단계지요.

위 화면에서 볼 수 있듯이 어플의 기본 설정을 도와줍니다. Application Name에 어플 이름을 등록하고 버전정보, 풀스크린, 자동회전, 인터넷 엑세스, GPS 등 사용여부를 결정할 수 있고 Icons를 선택하면 사용할 아이콘을 미리 등록할 수 있도록 합니다. 일반 AIR 프로젝트에서는 XML을 직접 편집해야했는데 이런 것을 이용하면 많이 편하겠네요. Install Location은 안드로이드 프로요 버전의 경우 내장 또는 외장(SD카드) 중 둘중에 한곳에 설치할 수 있습니다. 이때 설치 위치를 결정해줍니다. 일반적으로 Auto를 선택하면 되겠네요.

다음으로 아래화면과 같이 Configuration으로 넘어갑니다.  여기서는 소스 코드상에서 각종 핸들링을 지원할 것이냐 결정해줍니다. 필요한 것을 선택하면 원하는 코드가 미리 들어가 있게 됩니다. 참고로 Splash Screen은 실행전에 보여지는 로딩화면으로 생각하시면 됩니다. 여기서 미리 설정할 수 있게 해주네요. 아주 편합니다.
 


이제 아래 화면에서 볼 수 있듯이 Sample로 넘어갑니다. 초보개발자들에게는 이것처럼 좋은게 없겠다는 생각도 듭니다. 아무래도 아무것도 없는 코드보다 샘플이 일단 들어가 주면 개발에 도움이 될 것이기 때문입니다.



마지막으로 Generate 단계입니다. 지금까지 설정한 것을 토대로 AIR 프로젝트를 생성해 줍니다. 먼저 File location에서 프로젝트를 생성할 경로를 설정해줍니다. 그 다음 Generate AIR Project가 활성화 됩니다. 이 버튼을 클릭하면 생성이 완료됩니다. 이때 자동으로 탐색창을 띄워줍니다.


이제 만들어진 프로젝트를 Flash Builder "Burrito"로 열어봅시다. Flash Builder를 실행한 뒤 아래 처럼 File > Import Flash Builder Project를 선택합니다.


아래와 같은 창이 뜨면 만들어진 프로젝트를 여러분의 워크스페이스에 올려놓을 수 있습니다. 창에서 Import Project 를 보면 File과 Project folder를 볼 수 있습니다. Adobe AIR LaunchPad는 프로젝트를 폴더와 압축파일로 두개 만들어주므로 이들중 아무거나 선택해서 프로젝트를 등록하면 별 무리가 없습니다.

여기서는 File을 통해 프로젝트를 임포트 해보지요.


아래처럼 만들어진 프로젝트 압축파일을 선택하면 그 아래에 Import Method가 나옵니다. 여기서 압축된 프로젝트를 어느 곳에 어떤 이름으로 프로젝트를 압축을 풀어 만들 것인가 결정할 수 있습니다. 저는 그냥 Finish 버튼을 눌러 프로젝트를 임포트 하겠습니다.


이제 Flash Builder 에서 해당 프로젝트를 아래 처럼 열람할 수 있게 되었습니다. Adobe AIR LaunchPad를 통해 설정한 대로 프로젝트 명은 TestAIR가 되었고 각종 Sample View가 이미 만들어져 있습니다.


TestAIR 메인 페이지를 열어보았습니다. 아래처럼 mxml 코드를 볼 수 있습니다. 기존 AIR와 달라진 점은 Application이 MobileApplication이라는 점입니다. 당연한 이야기 겠죠? 참고로 firstView가 views.TestAIRHome으로 설정되어 있습니다. 위 패키지에서 views에 들어간 mxml중에 가장 최상위 뷰를 TestAIRHome으로 선택한 다는 것을 의미합니다.

Adobe AIR LaunchPad 의 2번째 단계에서 각종 핸들러를 선택해서 만들어진 코드입니다. 간단하게 trace가 출력되록 되어 있으며 여러분은 필요하다면 이 부분을 수정해서 원하시는 기능을 만드시면 됩니다.

디자인 모드로 들어가 봤습니다. 아래 화면과 같이 모바일에 최적화된 화면을 보여줍니다. Flash builder에서 모바일 어플을 만들 수 있게 된 것이 흥미롭습니다.


위 프로젝트를 실행해보겠습니다. Ctrl+F11 을 누르거나 메뉴에서 Run > Run을 선택해 실행합니다. 그러면 아래와 같은 창이 나오는데 이 화면은 이 글의 초반부에도 보였던 창의 모습입니다. 실행하기 위해 어떤 플랫폼에서 그리고 어떤 디바이스에서 시뮬레이팅을 할 것인지 결정해주는 역할을 합니다. 이 설정화면은 나중에 Run > Run Configurations에서 바꿀 수 있습니다.



위 화면에서 보면 타겟 플랫폼은 안드로이드입니다. 아직까지는 이것밖에 없습니다. 왜냐하면 Flash Builder "Burrito"가 Preview 버전이니깐요. 앞으로 정식버전이 나오면 윈도우, 아이폰 등도 지원하길 희망합니다. ^^

Launch method를 보면 On desktop과 On device가 있습니다. On desktop은 말그대로 데스크탑에서 모바일 시뮬레이터를 띄워줘 테스트 하는 겁니다. 안드로이드를 보니 제가 가지고 있는 HTC Desire도 있어서 기뻤습니다. 반대로 On device는 실제 장비에 물려서 테스트 합니다. 이들 모두 별 설정없이 실행이 가능했습니다. 

이제 Run만 누르면 바로 실행됩니다. 아래는 On device에서 실행해본 것입니다. Adobe AIR LaunchPad를 이용해 등록했던 각종 뷰 종류를 리스트에서 볼 수 있습니다. 마우스로 드래그 하면 아래 있는 나머지 리스트도 볼 수 있습니다. 하지만 데스크탑에서 시뮬레이션 하는 것이므로 Accelerometer나 Multitouch, Gesture등을 수행해 볼 수 없었습니다. 대신 안드로이드 폰이 있는 분은 직접 테스트 해볼 수 있습니다.







저는 제 안드로이드 폰인 HTC Desire에 위 어플을 실행해보고자 합니다. 먼저 메뉴에서 Run > Run Configuration을 선택합니다. 아래 화면처럼 좌측 메뉴에 Mobile Application에서 TestAIR를 선택한뒤 좌측상단에 복사하기 버튼을 누릅니다. 그럼 1개가 더 생성됩니다. 새로 생성된 것은 Name을 TestAIR on Device로 하고 기존것은 TestAIR on Desktop으로 명명합니다. 그리고 새로 생성된 것의 Launch method는 On device를 선택합니다. 그리고 Run을 누르면 자신의 안드로이드 폰에 해당 어플이 실행됩니다.


하지만 여기서 안드로이드 폰이 개발폰이 되도록 먼저 설정해야합니다.
1. 자신의 안드로이드 폰의 홈화면에서 menu > 설정을 누릅니다. 그리고 응용프로그램 > 개발 화면에서 USB 디버깅이 선택되어 있어야 합니다.
2. 자신의 안드로이드 폰에 AIR 런타임이 설치 되어야 합니다. 설치가 안된 안드로이드 폰이면 설치되도록 유도하니 Market에 직접 찾지 않고도 자연스레 설치할 수 있을겁니다.

아래는 제 폰에서 실제로 실행해보는 화면입니다.





정리하며

여기서 설명하지 않은 개발 방법이나 배포 방법에 대한 간단한 가이드는 다음 링크를 참고하면 좋을 것 같습니다.
Flex Test Drive for Mobile - Build a mobile application in an hour 

2009년 미국에서 Adobe MAX 를 참가해 Flash Builder로 아이폰 어플리케이션을 만드는 데모를 본 적이 있습니다. 당시에는 꽤 흥미를 느꼈습니다. 금방이라도 아이폰 어플을 Flash로 개발할 수 있을 줄 알았습니다. 하지만 Apple정책이 변경되면서 퇴색되었죠. 그것도 Flash CS5 런칭 몇일전에 Apple의 이기적인(?) 정책 발표였습니다. 그 후 1년이 지나 안드로이드 플랫폼이 강세가 이어지며 Flash기술은 다시 이야기 거리가 되고 있습니다. Apple도 안드로이드의 강세 행보에 위협을 느껴서(?) 일부 정책 수정있기도 했죠. 어쨌든 Flash가 모바일 디바이스에 자리 잡으려면 아직 해결해야할 과제가 산적해 있지만 그래도 노력한 만큼 성과는 있을 것이라 생각합니다. 


관련글
Flex Test Drive for Mobile - Build a mobile application in an hour
What's new in Flash Builder "Burrito"
Introducing Adobe Flex SDK "Hero"
Mobile development using Adobe Flex SDK "Hero" and Flash Builder "Burrito"
Coding productivity enhancements in Flash Builder "Burrito"

- TV, 모바일 및 PC등 다양한 스크린에서 구동되는 어도비 에어 2.5 출시
- 어도비에서 운영하는 새로운 애플리케이션 스토어, 어도비 인마켓 (Adobe InMarket) 공개

대한민국, 서울 — 2010년 10월 28일 — 한국어도비시스템즈(www.adobe.com/kr, 대표이사 지준영)는 미국 로스앤젤레스에서 10월 24일부터 27일까지 열린, 전세계 개발자와 디자이너들을 위한 컨퍼런스 어도비 맥스(Adobe MAX)에서 TV, 태블릿PC, 스마트폰 및 데스크톱을 아우르는 다양한 스크린에서 웹 브라우저 없이 인터넷 상의 플래시 컨텐츠를 구현하는 애플리케이션 런타임인 어도비 에어 2.5(Adobe® AIR® 2.5)을 발표했다. 어도비 플래시 플랫폼(Adobe Flash® Platform)의 중요 구성요소인 어도비 에어는 개발자들이 기존의 코드를 활용하여 다양한 디바이스와 플랫폼에 적합한 독립형 애플리케이션을 제작하고 전달할 수 있도록 한다.
 
현재 어도비 에어는 윈도우(Windows®), 맥킨토시(Macintosh), 리눅스(Linux®) 운영체제가 탑재된 블랙베리(BlackBerry®) 태블릿 OS, 안드로이드(Android™), iOS, 데스크톱을 기반으로 한 스마트폰과 태블릿PC를 지원한다. 또한, 스마트 TV에 어도비 에어 2.5를 최초로 탑재하는 TV 제조 업체는 삼성전자가 될 것이며, 2010년 후반이나 2011년 초반에 출시되는 에이서(Acer), HTC, 모토로라(Motorola), 림(RIM), 삼성(Samsung) 및 타기업의 태블릿과 스마트폰을 포함한 다양한 디바이스에 어도비 에어 2.5 가 탑재되어 시장에 선보이게 될 예정이다. 어도비 에어를 기반으로 개발자들은 어도비 플래시 프로페셔널 CS5(Adobe® Flash® Professional CS5), 어도비 플래시 빌더(Adobe® Flash® Builder™), 플렉스 (Adobe® Flex™)를 포함한 친숙한 개발 툴들을 활용하여 풍부하고 각 디바이스 환경에 맞는 독립형 애플리케이션을 만들 수 있다.  현재, 많은 애플리케이션이 안드로이드 마켓(Android Market), 인텔 앱업센터(Intel AppUp center), 애플 앱스토어(Apple’s App Store)에 등록되어 있다.
 
어도비 에어 2.5 공개에 이어, 어도비는 개발자들이 온라인 상에서의 에이서, 인텔 및 타 기업의 다양한 디바이스 타입을 넘나들며 그들의 애플리케이션을 사고 팔 수 있는 자체 애플리케이션 스토어인 어도비 인마켓(Adobe InMarket, http://www.adobe.com/devnet/inmarket.html)를 공개하였다. 사용자들은 어도비 인마켓의 스토어프론트에서 직접 애플리케이션을 다운로드 받을 수 있다. 
 
어도비 크리에이티브 및 인터랙티브 솔루션 사업부의 데이비드 와드화니(David Wadhwani) 수석 부사장은  “ 어도비 에어 2.5의 발표로 3백만 명 이상의 플래시 개발자들이 다양한 애플리케이션 스토어 및 디바이스를 넘나들며 쉽게 게임 및 애플리케이션을 개발하고 운영할 수 있게 되었다.”라고 말하며, “이는 풍부하고 혁신적인 애플리케이션을 제공하고자 하는 개발자들과, 개별 디바이스 및 플랫폼을 구축할 때 발생되었던 비용을 절감하고자 하는 이들에게 큰 도움이 될 것으로 기대된다.”라고 말했다.
 
에어 2.5는 가속계, 카메라, 비디오, 마이크, 멀티 터치 및 동작감지를 포함한 다양한 새로운 기능들을 통해 풍부한 애플리케이션 사용자경험의 기반을 제공한다. 위치 정보 기능은 개발자들이 위치 기반의 애플리케이션 서비스를 제공할 수 있도록 한다. 또한, 에어 2.5는 HTML5와 플래시(확장자 .SWF) 컨텐츠를 통합함으로써 애플리케이션 내에 네이티브 브라우저 컨트롤(native browser control)을 보여줄 수 있으며, SQLite 을 지원하여 에어 애플리케이션 내에 데이터베이스를 쉽게 저장할 수 있다. 또한, 브로드컴社(Broadcom Corporation), 인텔社, 엔비디아社, ST마이크로일렉트로닉스社, 트리던트社 (Trident), 텍사스 인스트루먼츠社(Texas Instruments), 퀼컴社(Qualcomm) 등을 포함한 주요 반도체 기업 들의 제품에서 어도비 에어를 위한 하드웨어 가속화를 지원한다.
 
어도비 플래시 플레이어 10.1 (Adobe® Flash® Player 10.1)
안드로이드 마켓에서 5만 여 명 이상이 5개 만점에서 별 4.5개의 평가로 이미 무료 인기 애플리케이션 중 하나가 된 플래시 플레이어 10.1은 모바일 디바이스 상에서 브라우저를 통한 풍부한 플래시 컨텐츠를 구동시키는 런타임이다.  현재, 어도비 런타임은 12 종류의 안드로이드 디바이스에서 구동되고 있으며, 앞으로 더 많은 안드로이드 디바이스에 구동 될 예정이다. 또한, 공식적으로 안드로이드 마켓에서 플래시 플레이어 10.1이 2백 만 번 이상이 다운로드 되었다고 발표된 바 있다.
모바일 용 런타임은 안드로이드 마켓에서 디바이스 제조업체 따라 배포되며, 이미 설치한 운영자와 운영시스템에 의해 업그레이드 된다. 플래시 플레이어 10.1은 현재 안드로이드와 구글 TV에서 이용가능하며, 앞으로 블랙베리 플랫폼, HP 웹 OS 2.0, 윈도우(Windows®)폰 차기 버전, 리모(LiMo), 미고(MeeGo) 및 심비안 OS 에서도 지원될 계획이다. 플래시 플레이어 10.1이 지원되는 디바이스는 어도비 웹페이지(http://www.adobe.com/flashplatform/supported_devices/smartphones.html)에서 확인 할 수 있다.
 
플래시 플랫폼 개발 툴
어도비는 멀티스크린 상에서의 개발 과정을 보다 간소화 시켜주는 개발자 툴 베타버전을 발표했다. 어도비 에어 2.5 소프트웨어 개발 키트(SDK)를 포함한 새로운 플래시 플랫폼 툴의 출시로, 개발자들은 디자인과 개발 생산성을 극대화시키면서 스마트폰, 태블릿 및 TV 용 모바일과 멀티스크린 애플리케이션을 구축할 수 있다. 플렉스 프레임워크의 오픈소스 업데이트는 개발자들에게 웹, 데스크톱, 그리고 현재 모바일 애플리케이션을 위한 광범위한 프레임워크를 제공한다. 개발자들은 웹과 데스크톱의 플랫폼상에서와 같이, 손쉽게 고품질의 모바일 플렉스 애플리케이션을 구축할 수 있다. 더 자세한 사항은 어도비 웹페이지(http://www.adobe.com/go/flexsdk_preview/)에서 확인할 수 있다.
 
어도비 플래시 빌더 베타버전은 개발자들의 개발 비용을 절감시키며, 익숙한 개발언어와 구성요소, 툴을 활용하여 멀티스크린을 위한 애플리케이션을 구축할 수 있도록 한다. 특히, 모바일 디바이스로의 확장과 디바이스상에서의 디버깅, 빠른 개발을 위한 코딩 툴들의 매우 놀랍고 새로운 기능들이 플렉스 등에 추가 되었다.
 
이용 방법
윈도우, 맥킨토시, 리눅스가 탑재된 안드로이드 및 데스크톱 OS 용 어도비 에어 2.5 와 어도비 에어 2.5 SDK는 현재 이용 가능하다 .어도비 에어를 위한 블랙베리 태블릿 OS SDK는 블랙베리 태블릿 OS용 애플리케이션을 제작하기 위해 어도비 에어 2.5 SDK와 함께 작동하는 것으로 림(RIM)에서 이용 가능하며 이것은 블랙베리 플레이북에 미리 탑재될 예정이다.


------------------------------------------------------------------------------
회사일이 너무 바뻐서 Adobe MAX 2010 행사에는 관심을 가지기가 힘들었네요.

작년 맥스 행사에서 Open Screen Project 일환으로 다양한 모바일 기기로 Flash 기술이 도입되는 시점이였다면 이제 본격적인 진입시점에 도달한 것 같습니다. 실제로 국내에도 스마트폰이 엄청나게 보급되어가고 있으니깐요. 이번 AIR 2.5도 이런 차원에서 모든 것이 진행된 것을 판단합니다. ACC분들의 생생한 Max 중계를 다음 링크에서 확인할 수 있습니다.

http://twitter.com/#!/search?q=%23atMAX2010
http://www.action-scripter.com/blog/search/Adobe%20Max%202010
http://twitter.com/#!/FlashLovesMe
http://me2day.net/lovedev
http://koko8829.tistory.com/tag/Max%202010

그외 소식
Adobe MAX 2010
MAX Online
어도비, 모바일로 진화
11월 13일, 모바일+플래시 개발자를 위한 즐거운 수다
12월 7일, FITC Seoul 2010
삼성 스마트TV에 어도비 AIR 탑재된다
Introducing the Molehill 3D APIs
타임라인으로HTML5컨텐츠 작성을 가능하게 한다---Adobe MAX 2010기조 강연
Adobe 앱 Air 2.5, 스마트폰, 태블릿, TV 모두 같은 앱을 사용한다?!
어도비 AIR 2.5, RIM 플레이북 앱 개발로 확산 시동 
Adobe AIR features
3D APIs for Adobe Flash Player and Adobe AIR
Adobe Flash Builder "Burrito"
Flash Player features

스타플 모바일 웹사이트(http://m.starpl.com)에 이어 어플리케이션도 오픈했습니다.


아이폰, 아이팟터치, 안드로이드폰을 가지고 계신 분들은 스타플 모바일 어플리케이션을 설치하실 수 있습니다.

 

다음 링크에서 다운로드 받으세요.

- 아이폰/아이팟터치 사용자
  한국 : http://itunes.apple.com/kr/app/id396402081?mt=8
  미국 : http://itunes.apple.com/us/app/id396402081?mt=8


- 안드로이드폰(디자이어,넥서스원,겔럭시 S등) 사용자 
  http://www.cyrket.com/p/android/com.starpl.android/


자세한 설명 보기 : http://starpl.com/wecon/11357889


아이폰 스크린샷 






안드로이드 스크린 샷 




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

+ Recent posts