지돌스타 - 쿠키랩 블로그

Adobe Flash Builder 4.5 는 Flex와 ActionScript 언어를 사용하여 모바일, 웹, 데스크탑 어플리케이션을 신속히 제작할 수 있는 통합개발도구(IDE)이다.

이번에 출시된 Flash Builder 4.5에는 Apple의 iOS, Google의 Android, Blackberry Tablet OS 모바일 어플리케이션 개발 및 테스트, 배포를 위한 기능이 추가되었다. 또한 Flash Builder 4.5는 개발 및 테스트 할 수 있는 시간을 크게 단축시키기 위한 도구 지원하고 더욱 향상된 성능으로 완성도 높은 어플리케이션을 개발할 수 있도록 도와준다. 또한 Flash Builder와 Adobe Flash Catalyst를 이용해 개발자, 디자이너간에 쌍방향 워크플로우를 가능하게 함으로써 프로젝트 디자인 및 개발을 동시에 수행할 수 있도록 했다. Flash Builder 4.5는 기존 Flex 3, Flex 4, Flex 4.5 버전에 상관없이 모든 Flex 버전에 대응할 수 있도록 했다.
 
이 문서는 Flash Builder 4.5에 어떠한 큰 변화가 있는지 구체적인 설명을 통해 이해시키는데 도움을 주는 것을 목적으로 한다.

큰변화 1. 모바일 및 멀티스크린 어플리케이션 개발
Flash Builder 4.5는 Flex 및 ActionScript를 이용해 모바일 AIR 어플리케이션을 개발, 테스트, 배포를 지원한다. 기존 Flash Builder를 이용했던 개발자들의 경험을 그대로 반영하여 웹, 데스크톱, 모바일 어플리케이션을 만들 수 있다. Flash Builder 4.5부터는 Google Android, Apple iOS, Blackberry Tablet OS 어플리케이션도 개발할 수 있게 되었다.

현재시점(2011년 5월)에 공식배포되어 있는 Flash Builder 4.5는 ActionScript Mobile Project상에서 Android, iOS 어플리케이션만 개발이 가능하며, Flex Mobile Project의 경우에는 Android 어플리케이션만 개발이 가능하다. 하지만 2011년 6월에 Flash Builder 4.5는 한번더 업데이트가 될 예정이며 앞서 언급한 모든 OS의 어플리케이션 개발이 가능하겠다.

Adobe Flex 4.5 SDK는 아래화면처럼 모바일 환경에 알맞은 일반적인 템플릿를 제공한다. Flash Builder 4.5는 이 Flex 4.5 SDK를 이용한 프로젝트를 개발할 수 있도록 지원해준다.

Flash Builder 4.5에서 모든 모바일 프로젝트는 데스크탑 시뮬레이터 또는 디바이스를 선택적으로 연결하여 테스트 및 디버깅을 할 수 있다. 중요한 것은 같은 프로젝트내에 같은 소스를 가지고 다양한 디바이스 환경에 적용할 수 있다는 점이다. 이것은 Flash Builder 4.5가 멀티스크린 어플리케이션 개발환경을 제공한다는 것을 의미한다. 또한 Flash Builder 4.5는 개발 완료시 배포를 위해 간소화된 방법을 제공하고 있다.

다음 링크를 통해 Adobe Flex 4.5 SDK와 Flash Builder 4.5를 이용한 개발에 대해서 대략적으로 학습해 볼 수 있다.

- Hello World: Build a mobile app in five minutes
- (동영상)Guided Tour of mobile application development with Flash Builder 4.5
- Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5
- [따라하기]Flash Builder 4.5로 iPhone 4용 듀얼 브라우저 앱 만들기


큰변화 2. Flex 와 ActionScript 프로젝트 코딩 및 테스트 시간 단축
Flash Builder 4.5는 최적화된 코딩 환경을 제공하기 위한 기능이 추가되었다. 이것은 좀더 코딩을 더욱 빠르고 생산적인 코딩이 될 수 있도록 한다.

코드 템플릿(Code template), 퀵어시스트(Quick Assists), 코드힌트(Code hits), 메타데이터 코드(Metadata code) 자동 완성 등 Flash Builder 4.5는 코딩 시간을 단축시키기 위한 갖가지 기능들을 제공한다.

여기서는 코드 템플릿과 퀵어시스트만 살펴보겠다.

2.1 코드 템플릿(Code Template)
Flash Builder 4.5부터 코드 템플릿(또는 snippets: 쓸모있는 코드 조각) 지원이 추가되었다. 이것은 자주 사용하는 MXML, ActionScript, CSS 코드를 미리 추가해 개발자가 일일히 타이핑하지 않고  개발할 수 있도록 도와준다. Flash Builder 4.5에는 package, class, for 루프, while 루프, switch 블록등과 같은 100개가 넘는 코드 템플릿이 제공된다. 개발자는 자신의 커스텀 템플릿도 정의할 수 있으며 템플릿을 import/export할 수 있어 다른 개발자와 공유할 수도 있다.
 
아래 화면은 메뉴에서 Window > Preferences를 선택한뒤 Flash Builder > Editors > Code Templates를 선택했을때 모습이다. ActionScript, CSS, Flash Builder, MXML의 코드 템플릿이 적용되어 있다. 화면에서 MXML의 Button 클래스 코드 템플릿을 Preview창에서 확인할 수 있다.

실제 코딩시에는 아래 화면처럼 Button을 입력한 뒤 Ctrl+Space키를 누르면 아래와 같이 코드힌트를 볼 수 있다. 여기까지는 이전 Flash Builder에서도 제공하는 것이다. (참고 : MacOS에서는 Spotlight의 단축키가 Ctrl+Space로 되어 있으므로 설정>Spotlight에서 단축키 사용을 해제하면 된다.)

다시 한번 Ctrl+Space를 누르면 아래 화면처럼 Button에 대한 코드 템플릿만 보이게 된다. 해당 템플릿을 선택후 더블클릭 또는 Enter를 입력하면 코드가 추가된다.

아래 화면은 Button의 코드템플릿을 사용해 코드를 추가한 결과화면이다.

2.2 퀵어시스트(Quick Assists)
퀵어시스트는 코드 템플릿만큼이나 굉장히 유용하다. 이벤트 핸들러 함수를 자동으로 생성, 변수나 메서드의 이름을 리펙토링, Getter/Setter 생성, 로컬변수 및 인스턴스 변수 자동 생성, import 생성, 로컬변수를 인스턴스 변수로 변경, 생성되지 않은 클래스 및 메서드 생성 등등 거의 못하는게 없다. 퀵어시스트를 받을 부분에 커서를 올려놓고 Ctrl+1(MacOS에서는 Cmd+1)을 시도해보면 되겠다.

퀵어시스트를 조금 맛보도록 하자. 아래 코드처럼 UserVO 클래스를 만들고 생성자에 result.createCursor()을 만들었다. 앞으로 result는 ArrayCollection 클래스의 변수가 될 것이다. result위에 커서를 올려놓고 ctrl+1를 눌러보자. 아래화면처럼 2가지 선택이 나온다. 하나는 result 로컬변수 또하나는 인스턴스 변수이다. 로컬변수를 선택하자.

우리는 자동으로 아래 코드처럼 var result:Object 로컬변수가 생성되었음을 알 수 있다. 생성된 로컬변수 result위에 커서를 올려놓고 ctrl+1키를 눌러보자. 이번에는 새로운 퀵어시스트가 나온다. 첫번째는 로컬변수를 필드로 변환한다는 것, 두번째는 UserVO안에서 result 이름을 바꾼다는 것, 세번째는 Workspace내에 모든 result의 이름을 바꾼다는 것이다. 우리는 첫번째를 선택할 것이다.

아래처럼 result는 로컬변수에서 인스턴스 변수로 변경되었음을 알 수 있다.

result의 변수 타입을 Object에서 ArrayCollection으로 변경하고 ArrayCollection에서 퀵어시스트를 받아보자. 우리는 의도한바 이미 정의된 ArrayCollection을 import하는 것을 선택하면 되겠다.

아래처럼 ArrayCollection클래스가 자동으로 import 되었다.

퀵어시스트는 mxml 코드 상에서도 위력을 발휘한다.

아래 코드에 click 마우스 이벤트의 핸들러 함수인 onClick 위에 커서를 올려놓고 ctrl+1 키를 눌러보자. 그럼 아래 화면처럼 event 핸들러를 생성할 것임을 퀵어시스트가 알려주고 있다. 이것을 선택하자.

퀵어시스트의 도움으로 이벤트 핸들러 함수를 MXML 코드내에 자동으로 삽입하게 되었다.

퀵어시스트 기능은 이외에도 다양한 기능이 있으므로 필요하다면 Ctr+1(MacOS에서는 Cmd+1)을 활용하길 바란다.

코드 템플릿 및 퀵어시스트외에 코드힌트(Code hits), 메타데이터 코드(Metadata code) 자동 완성등 빠른 개발을 위한 기능에 대해 조금더 알아보고 싶다면 다음 글을 참고하길 바란다.

- Coding productivity enhancements in Flash Builder 4.5 



큰변화 3. 디자이너/개발자 워크플로우(workflow) 개선
이전 버전인 Flash Builder 4와 Flash Catalyst CS5는 개발자와 디자이너 간에 Flex 프로젝트를 진행하기 위한 협력도구 관계이다. 그 점은 지금도 변함없지만 이전 버전의 문제는 추가적인 개선을 위해 디자이너와 개발자간에 양방향 워크플로우를 지원하지 못했다는 점이다. 결국 개발이 끝난 Flex코드는 더이상 디자이너가 고칠 수 있는 여지를 마련되지 못했는 것이다. 하지만 Flash Builder 4.5와 Flash Catalyst CS5.5 부터는 양방향 협력이 가능하다. 다음 그림은 개선된 양방향 워크플로우를 보여주고 있다.

다음 링크를 통해 Flash Catalyst CS5.5 정보를 더욱 자세히 볼 수 있겠다.

- Flash Catalyst CS5.5 공식페이지
- Understanding new Flash Catalyst CS5.5 and Flash Builder 4.5 workflows
- What's New in Adobe Flash Catalyst CS 5.5
- (동영상)ADC Presents - Introduction to Flash Catalyst CS5.5 


큰변화 4.  최신 플랫폼 지원 및 성능 향상 
Flash Builder 4.5는 Eclipse의 마지막 버전(3.6.1 "Helios")을 지원한다. 또한 MacOS에서 Eclipse의 Cocoa 버전을 지원한다. 이전 Flash Builder는 Eclipse plug-in 버전을 따로 배포했다. 하지만 Flash Builder 4.5부터는 설치 디렉토리 > utilities 내에 Adobe Flash Builder 4.5 Plug-in Utility가 추가적으로 제공한다.

Flash Builder 4.5 설치시 함께 설치되는 Flex 4.5는 웹/데스크탑 어플리케이션을 위한 새로운 Spark DataGrid, Form, Image 컨트롤이 포함되었다. 또한 Flex 4.5는 모바일 어플리케이션 개발에 적합한 컨트롤을 제공한다. 
Flex 4.5에 대한 소개는 다음 링크를 참고한다.

- Introducing Adobe Flex 4.5 SDK 

Flash Builder 4.5는 종속되는 라이브러리가 많은 대용량 어플리케이션의 리팩토링 작업에 필요한 시간을 65% 단축했다. 또한 복잡한 어플리케이션을 프로파일링하는데 필요한 메모리를 60% 줄이고 그 응답속도도 향상시켜 Flex 어플리케이션 개발속도를 단축할 수 있게 되었다.


큰변화 5. PHP 개발 지원
Flash Builder 4.5는 PHP 개발자들을 겨냥한 새로운 버전의 Flash Builder가 소개되었다. Flash Builder 4.5 for PHP는 Flash Builder 4.5와 Zend Studio 8이 통합되었다. Flash Builder 4.5 for PHP를 이용하면 Flex와 PHP를 유연하게 개발이 가능해진다. 하나의 통합환경내에서 프로젝트 생성, PHP서비스 연결, 디버깅 워크플로우등이 모두 지원된다. PHP와 함께 개발을 원하는 개발자는 Flash Builder 4.5 for PHP 버전을 다운로드 받길 바란다.

다음 링크를 통해 Flash Builder 4.5 for PHP에 대해서 학습할 수 있겠다.

- Introducing Flash Builder 4.5 for PHP
- Streamlining Flex and PHP development with Flash Builder for PHP


더욱 많은 Flash Builder 4.5 정보
지금까지 Flash Builder 4.5의 큰변화라는 주제로 살펴보았다. Flash Builder 4.5 및 관련 기술들에 대한 문서 및 동영상을 아래 링크를 통해 공유하겠다.  

- Flash Builder 4.5 공식페이지
- Using Adobe Flash Builder 4.5 (PDF p.250) 
- Flex 4.5 SDK, Flash Builder 4.5 and Flash Catalyst CS 5.5 Now Available!
- Sharing projects between Flash Professional and Flash Builder
- Flex Test Drive for Mobile - Build a mobile application in an hour 
- Flash Builder Developer Center 
- Tour de Flex
- (동영상)Building Apps with Flash Builder 4.5
- (동영상)Mobile Flex 4.5 Demonstration
- (동영상)Tour de Mobile Flex on iOS
- (동영상)Preview of Flex on iOS devices
- (동영상)Flex on the iPad
- (동영상)Comb Over Charlie - an AIR 2.6 multiscreen game
- (동영상)Flex Charts on the iOS, Android and the PlayBook

Adobe CS 5.5가 출시 되었습니다. 동시에 Flash Builder 4.5와 Flash Catalyst CS 5.5도 함께 출시되었습니다. 개인적으로는 Flash Builder 4.5를 많이 기다렸습니다. 

Flash Builder 4.5의 공식 홈페이지는 다음과 같습니다.

Adobe Flash Builder 4.5 : http://www.adobe.com/products/flash-builder.html 

개인적으로 보는 Flash Builder 4.5의 가장 큰 변화는 모바일, Flex 4.5, PHP 개발지원등이 아닌가 싶습니다. 
특별히 기존 beta버전으로 공개되었던 Burrito에서는 안드로이드 기기 컴파일만 지원했는데 이번에는 iOS 어플 개발도 지원해줍니다. Flash IDE를 잘 사용할 줄 모르는 저로서는 가장 기다렸던 기능중에 하나입니다. 

다운로드는 다음 링크에서 Try버전으로 다운받을 수 있습니다. 

Adobe Flash Builder 4.5 다운로드 : http://goo.gl/hDi55

아래 화면은 Flash Builder 4.5를 설치하는 중간 화면입니다. AIR For Apple iOS Support가 눈에 띕니다. 

Flash Builder 설치후 실행한다음 ActionScript Mobile AIR Project를 만들면 다음과 같은 Setting 화면을 볼 수 있습니다. 기존에는 Android 어플만 개발이 가능했으나 이제 1개의 프로젝트로 아이폰, 안드로이드 개발이 모두 가능해졌습니다. (참고 : Flex Mobile AIR Project 에서는 여전히 Android 기반으로밖에 지원하지 않는 것 같았습니다.)

처음 실행해보면 아래와 같은 설정화면이 나옵니다. 이 부분은 Flash Builder Burrito를 이용해 Android 개발을 해본 사람은 친숙한 화면입니다. Apple iOS가 Target platform으로 등록되어 있음을 주목하세요. (참고 - Flex로 쉽게 모바일 어플을 만들자. - Adobe AIR Launchpad)

이제.... Flash Builder 에서도 iOS, Android 어플 개발이 모두 가능해졌군요. 더불어 테스트 해볼 것이 많아졌습니다.

참고로 Adobe CS 5.5는 현재 Try버전으로 다운받아 설치해 볼 수 있습니다. 다음 링크를 참고하세요.

Download a free trial of Creative Suite 5.5 Master Collection 

위 링크에서 다운로드 받아 설치하고 있는 화면입니다. Adobe AIR를 이용해 설치하네요. 

Adobe Flash CS 5.5, Flash Builder 4.5, Flash Catalyst CS 5.5 에 대해서 더욱 자세히 알고 싶다면 다음 링크를 참고하면 좋겠습니다.

Adobe Flash Builder 4.5 : http://help.adobe.com/en_US/flashbuilder/using/index.html
Adobe Flash Professional CS 5.5 : http://help.adobe.com/ko_KR/flash/cs/using/index.html 
Adobe Flash Catalyst CS 5.5 : http://help.adobe.com/ko_KR/flashcatalyst/cs/using/index.html 


좀더 학습을 원하시면 다음 링크도 유용합니다.

Adobe Flex 4.5 문서 : http://help.adobe.com/en_US/flex/using/index.html
Adobe Flash Platform용 ActionScript 3.0 참조 설명서 : http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/3/index.html
Adobe AIR : http://help.adobe.com/ko_KR/air/build/index.html 
Adobe 개발자 센터 :  http://www.adobe.com/devnet.html 
Tour de Flex : http://www.adobe.com/devnet/flex/tourdeflex.html 
 
글쓴이 : 지돌스타(http://blog.jidolstar.com/765)  

올해들어 Adobe Flash/AIR에 관련된 기술이 모바일의 흐름에 따라 급변하고 있습니다. 바쁘게 일하고 있는 사람으로써 이런 신기술을 흡수하기가 너무 어려울 정도입니다.

최근 새로운 CS 5.5버전이 발표되었고 Flash Builder 4.5가 함께 소개되었습니다. Flash Builder 4.5부터는 안드로이드 뿐만 아니라 블랙베리, iOS기반 어플도 개발할 수 있게 되었습니다. 현재 브라질에서 열리고 있는 Flash Camp에서 Flash Runtime의 미래라는 주제로 멀티스레드지원, 빠른 GC, 새로운 숫자형, Stage3D, StageVideo, Threaded video pipeline등의 차세대 Flash에 추가될 내용들이 소개되어지고 있고요. Adobe가 Flash의 GPU가속에 대한 지원을 아끼지 않으면서 3D렌더링에 대한 다양한 API가 만들어져 이미 Flash Player 11 Incubator 버전이 개발자들 사이에서 실험되고 있습니다. 모두 모바일에 초점이 맞추어 제한된 화면, 제한된 밧데리, 전혀 다른 사용자 경험에 따라 변해가고 있다는 생각입니다. 굉장히 전략적이고 빠른 대응을 하고 있습니다. 결국 시장의 급격한 변화에 Flash 기술이 따라가고 있으며 어찌보면 Cross Device, Cross Platform분야에서 만큼은 매우 선도적입니다.

Flash 기술이 급변함에 따라 예전처럼 쉽게 접근할 수 있던 Flash가 이제 더 이상 아닌 것처럼 느껴집니다. 더욱 전문성이 더해지기 시작했고 Flash의 원래 장점이였던 개발의 저변화를 통한 다양한 컨텐츠 생산이 약간 없어지는 상황이 발생하지 않을까라는 조심스런 추측도 합니다. 하지만 한편으로는 Flash IDE는 여전히 디자이너 접근을 용이하게 해주기 때문에 별 영향이 없을 것 같다는 생각도 합니다. 그러나 분명한 것은 모바일 디바이스의 대중화에 따른 사용자 경험이 바뀌고 이에 따라 기존 웹중심의 컨텐츠는 모바일 중심으로 변화하고 있다는 것에 대해 발빠르게 대응해야한다는 점은 인정해야할 사실이고 또한 준비해야합니다.

새로운 트랜드 대응에 도움을 주기 위해 관련된 정보를 링크해둡니다. 참고하시고 이를 통해 국내에서도 관련된 다양한 정보가 쏟아져 나오길 기대해 봅니다.

• Adobe Creative Suite 5.5 제품군 : http://goo.gl/5Fa1c
• Sneak Peek of Future of the Flash Runtime! : http://goo.gl/atCZk 
• Adobe Flash Builder 4.5 : http://goo.gl/N8UiN
• AIR 2.7 beta : http://goo.gl/b9ffW 
• Introducing Adobe Flex 4.5 SDK : http://goo.gl/6q0wU
• Adobe Flash Player 10.3 Beta : http://goo.gl/jKROP 
• Adobe Pixel Bender 3D : http://goo.gl/lgL1u 
• Adobe AIR and Adobe Flash Player Incubator : http://goo.gl/pvwzd 
• Adobe Flash Builder 4.5 and Flex 4.5 Accelerate Mobile App Development for Android, BlackBerry Tablet OS and iOS : http://goo.gl/IfQhK  
• Compatibility Matrix for Mobile Development with Flash Builder 4.5 : http://goo.gl/AbmRF
• Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5 : http://goo.gl/RjjkH
• CS5.5 발표자료들 : http://goo.gl/WdNPb
• 왜 플래시 빌더 4.5 일까? : http://koko8829.tistory.com/1036 
• Adobe Flash Player 11 Incubator의 "Molehill" 3D를 활용하기 위한 개발환경 만들기 : http://blog.jidolstar.com/759
  
• Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5 : http://goo.gl/RjjkH

아래는 관련 동영상입니다.

• Sneak Peek of Mobile Application Development with Flex And Flash Builder : http://goo.gl/Grc9d
• 360|Flex Denver 2011 - Day1 Keynote : http://goo.gl/y4J6q
• Introduction to Flash Catalyst CS5.5 : http://goo.gl/ZYHSa
• Importing Artwork in Flash Catalyst CS5.5 : http://goo.gl/GAmJf
• Wireframing and prototyping in Flash Catalyst CS5.5 : http://goo.gl/S8UZV
• What's new in Flash Builder 4.5 : http://goo.gl/EeNyA
• Mobile Web app Develpment with jQuery mobile : http://goo.gl/38IFN
• Developing For iOS with AIR 2.6 : http://goo.gl/o9dEF
• Getting Started with Coldfusion Builder 2 : http://goo.gl/BM7e5
• Molehill 3d APIs : http://goo.gl/SAST

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