이 글은 어도비 공식블로그에도 발행되었습니다.
큰변화 1 : http://blog.naver.com/adobe_korea/100129033987
큰변화 2 : http://blog.naver.com/adobe_korea/100129042984 
큰변화 3 : http://blog.naver.com/adobe_korea/100129043356


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를 이용한 프로젝트를 개발할 수 있도록 지원해준다.

Adobe Flash Builder 4.5의 Mobile Project Wizard

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 Labs에서는 Learn to Use Flash Catalyst 라는 제목으로 Flash Catalyst에 관련된 페이지를 오픈해두었습니다.

아래 링크를 통해서 어렵지 않게 Flash Catalyst에 대해 접할 수 있습니다.

 

http://labs.adobe.com/technologies/flashcatalyst/tutorials/

 

Adobe Developer Center에서는 Flex에 관련된 새로운 소식이 속속 올라옵니다. 유용한 기술문서가 자주 올라오기 때문에 참고하시면 도움이 됩니다.

 

http://www.adobe.com/devnet/flex/

 

여기에 최근에 올라온

등을 한번쯤 구독해 보심을 권합니다.

 

Flex 4 및 Flash Builder에 대해서 자세히 알고 싶다면 아래 Flex 4 Livedocs를 참고합니다.

 

http://livedocs.adobe.com/flex/gumbo

 

Flash Builder 4와 더불어 Flash Catalyst Beta 버전이 배포되었습니다. 이것도 여전히 공식배포 버전은 아니며 테스트 버전이라고 볼 수 있지만 거의 완성단계가 아닌가 판단이 됩니다.

 

Flash Catalyst(이하 FC)는 개발자와 디자이너가 협업의 도구입니다. 지금까지 Flex Builder의 디자인 모드 및 CSS를 통해 어느정도 디자인이 가능했지만 디자이너가 접근하기에는 너무나도 불편한 구조였습니다. 또한 디자이너가 MXML, ActionScript 3.0 코드까지 알아야하는 경우도 발생해서 더욱 다루기 어렵고 개발자와의 협업이 어려웠던 것이 사실입니다.

 

FC는 디자이너가 프로그래밍 코드를 전혀 알것없이 PhotoShop 또는 Illustrator 와 같은 디자인 툴로 작업한 PDS나 AI파일을 카탈리스트로 불러와 레이아웃, State등을 잡고 각종 Effect도 잡을 수 있도록 만들 수 있습니다. 그 결과물(MXML코드)을 개발자에게 넘겨주면 개발자가 MXML에 비지니스 로직을 추가하는 방법으로 진행이 됩니다. 완벽한 디자인 분리가 될 것이라는 것은 해봐야 알겠지만 아무튼 이런 툴이 만들어진 것은 분명 반가운 일입니다.

 

FC는 기존 Flash를 사용해본 디자이너라면 쉽게 접근해서 사용할 수 있는 구조로 되어 있습니다. 그러므로 학습하는데도 큰 무리가 없을 것으로 보입니다.

 

FC로 작업한 결과물은 Flex뿐 아니라 AIR로도 개발이 가능해집니다. 이것 또한 큰 매력이라고 할 수 있습니다.

 

FC는 아래 링크에서 다운로드 받을 수 있으며 30일 Trial버전으로 테스트해볼 수 있습니다.(Adobe 가입/로그인을 해야합니다.)

http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashcatalyst

재미있는 것은 Serial Number를 함께 제공해줍니다.

 

FC에 대해서 더욱 자세히 알고 싶다면 아래 링크를 참고하세요. 동영상을 꼭 보시길…

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

 

아래 링크는 GotoAndLearn 사이트에서 제공하는 Flash Catalyst and Flex 4에 대한 간단한 강의입니다.

Flash Catalyst and Flex 4: Part 1

Flash Catalyst and Flex 4: Part 2

 

 

1. Flash Catalyst 설치하기

시리얼 번호를 입력하라는 창이 나옵니다. 배포 페이지에서 Serial Numbers를 함께 제공하므로 그것을 입력해서 사용합니다.

 

사용권 계약입니다. 당연히 동의해야 설치가 가능하겠죠?

 

옵션 설정인데… 뭐 선택할 것이 없네요. 그냥 설치합니다.

 

아래 화면처럼 설치 진행률을 보여줍니다.

 

 

2. Flash Catalyst 사용해보기

필자도 처음 해보는 것이라 자세한 기능 설명은 해드릴 수 없습니다. 엉성하게 나마 소개해 드리겠습니다.

 

설치가 완료되면 실행해보시길 바랍니다. BETA 1이 선명하게 표시되어 있군요.

 

아래는 실행화면입니다. 한글버전이 지원되는군요. 매우 좋습니다.

 

잘 보시면 Adobe Illustrator AI파일에서, Adobe Photoshop PSD 파일에서, 마지막으로 FXG 파일에서 작업을 시작할 수 있음을 알 수 있습니다. 아직 이런 작업물이 없으므로 그냥 새로운 프로젝트를 만들어보겠습니다.

 

아래와 같은 창이 나옵니다. 프로젝트 이름과 폭,높이,색상을 정합니다. 이름에 한글입력은 전혀 안됩니다. 프로젝트 명이니 당연한 것인지도..

 

프로젝트를 만들어봤습니다. 매우 단순해보입니다. 아래 그림의 상단에 Page1은 Flex의 State(상태)를 의미합니다.


즉, 화면전환을 위한 것이지요. 오른쪽에 간단한 도구와 Flex Component도 볼 수 있습니다.

 

맨 아래 타임라인을 클릭해보면 아래처럼 볼 수 있습니다. 이것은 State 전환을 위한 설정입니다. FC로 State 및 각종 Effect도 줄 수 있다는 것을 예상 할 수 있습니다.

 

버튼을 올려봤습니다. 버튼이 선택되어 있는 상태에서 버튼 설정을 쉽게 할 수 있도록 만들어져 있습니다. 필자는 개발자라 오히려 한글로 표현된 것이 어색하네요.

 

단추모양편집을 눌러보겠습니다.

 

아래처럼 버튼의 상태모양을 편집할 수 있습니다. 버튼의 State를 변경할 수 있도록 되어 있군요. 되돌아 가려면 검정색으로 보이는 바에 프로젝트명을 클릭하면 됩니다.(아래 그림에서는 jidolstar를 클릭합니다.)

 

응용프로그램 상호작용의 +버튼을 눌러보면 Flex 컴포넌트의 CreationComplete 이벤트가 발생했을때 처리를 설정할 수 있도록 되어 있습니다. 가령 상태 변환 및 동작시퀀스 제작등입니다.

 

그 아래 사용자 정의 상호 작용을 누르면 마우스 이벤트에 대한 다음 동작을 정의할 수 있습니다.

 

다른 주제로 넘어가서…

 

FC의 화면의 페이지 상태 밑에 중복상태, 비어있는 상태 버튼이 있는 것을 볼 수 있습니다. 차이점은 선택되어 있는 상태를 중복해서 상태를 만들것이냐 아니면 새로 상태를 만들것이냐 차이입니다. 확실한 것은 눌러보면 알 수 있다는 ^^

 

아래처럼 상태를 만들어 봤습니다. 타임라인 부분도 변경된 것을 확인할 수 있습니다.

 

각 상태 변화를 보기 위해  다른 컴포넌트를 올려보겠습니다.

아래는 2번째 상태입니다. 기존 상태를 중복한 겁니다. 확인(CheckBox)를 추가했습니다.

 

아래는 가로 스크롤 막대(HScrollBar)를 넣어봤습니다.

 

이제 이것을 저장해보겠습니다. 확장자가 FXP이군요. 기억해야겠네요.

 

 

3. Flash Builder 4에서 로드해보기

 

Flash Builder 4를 실행해보시고 방금 만들 FC파일을 로드합니다.

 

아래처럼 Flex 프로젝트가 만들어지고 MXML 코드가 들어가 있습니다. 상태 및 각 컴포넌트 배치, Transition 설정까지 모두 다 있습니다. 또한 components에는 만든 컴포넌트의 스킨도 포함되어 있는 것을 확인 할 수 있습니다. 개발자는 이제 FC에서 만들어진 결과물을 가지고 비지니스 로직만 구축하면 됩니다.

 

4. 정리하기

Flash Catalyst는 필자도 처음 사용해본 것입니다. 그러기 때문에 더 자세한 내용은 전달 할 수 없었습니다. 앞으로 필자도 이와 관련된 연구를 계속해서 함께 정보공유를 할 수 있는 분위기가 만들어졌으면 합니다. 기존 Flex 개발자는 Flash Builder 4 및 Flex 4 SDK를 공부해야할 것이고 디자이너는 Flash Caalyst를 익혀야 할 것입니다. Flash Builder와 Flash Caalyst는 Adobe RIA 개발/디자인 최초(?)의 협업도구 입니다. 첫번째 버전이라 아마도 부족한 점이 있을 것이지만 앞으로의 발전을 기대해봅니다.

+ Recent posts