지난 1일, Flash Builder4, Flash Catalyst의 베타가 공개되었습니다. 플렉스빌더의 브랜딩네이밍 변경 소식이 알려진 지 약 2주만인데요. 공개 베타가 출시되자마자 국내외에서도 이와 관련된 소식이 전파되고 있습니다.
[Adobe RIA 소식]Flash Builder 4 Beta 배포
[Adobe RIA 소식]Flash Catalyst 배포
Flash Catalyst/Flash Builder 4/Flex SDK 4에 대해서 공부해보자.
어도비에서 작년 NA MAX에서 밝힌 공개베타 시점에 비해 약 3개월 정도 늦어진 시점에 공개베타가 발표된점을 미루어보아, 정식 릴리즈도 올 연말에서 내년 초로의 연기가 불가피해 보입니다.
플렉스3 공개베타에는 Adobe AIR(베타 Apollo)로 시끌시끌 했는데, 이번 공개베타에서는 플래시 빌더로의 브랜딩네이밍 변경, 그리고 새롭게 도입되는 플래시플랫폼 협업툴인 카탈리스트의 첫 공개로 시끌시끌 하네요. ^^;
2년의 기다림, 그리고 Thermo
플래시 카탈리스트는 2년전 어도비 최대 컨퍼런스인 MAX에서 처음으로 공개되었습니다. 공개베타가 올 중순에 공개되었고, 정식 릴리즈가 올연말~내년으로 예정되어 있는 만큼, 어도비의 여러 플랫폼 가운데 가장 긴 개발 기간을 가진 플랫폼으로 기록되는군요.
플래시 카탈리스트의 코드네임은 Thermo였습니다. 여기서 필자의 상식(?)을 동원해보자면, Thermo는 물리학에서 열의 양을 뜻합니다. 물리문제를 풀때 흔히들 약어로 Therm이라고 쓰기도 합니다. 물론, Adobe Thermo가 물리학에서 다루는 열량인지에 대해선 아직 확실하진 않습니다.. ^^
위의 화면은 초기 Thermo의 모습이었다는데 지금과는 인터페이스가 다른 면이 많습니다. cs4 출시전이라 더욱 그랬을까요? 하지만, 저 때 당시에도 포토샵, 일러스트레이터와 같이 어도비 크리에이티브 플랫폼에서 작성된 파일들도 그대로 불러와서 작업할 수 있고, 그 결과를 그대로 플렉스로 내보낼 수 있었습니다.
그리고, 작년 MAX에서는 Thermo의 브랜드네이밍이 Flash Catalyst로 확정되었습니다. 또, 참석자와 관계자에게 처음으로 비공개베타버전을 배포하였지만, 당시 가장 뜨거웠던 이슈가 바로 Flex builder의 브랜드네이밍이 Flash Platform으로 통폐합 한 것이 아닐까 싶네요. ^^;;
Catalyst는 한국어로 “촉매제”입니다. 열량에 이어 촉매제라.. 뭔가 과학적인 뉘앙스가 물씬 풍기네요. Catalyst의 stinger동영상에도, 많은 동위원소들이 지나가면서 여러 플래시플랫폼과, 크레이티브플랫폼 가운데에 화학반응이 일어나면서 플래시 카탈리스트가 새롭게 만들어지는 모습을 볼 수 있습니다.
Catalyst가 촉매제인 만큼, 어도비에서도 플래시플랫폼 개발자와 크레이티브 플랫폼 디자이너가 서로 잘 섞일 수 있는 플랫폼임을 강조하는 바가 크다고 보여집니다.
플래시 촉매제(Flash Catalyst)
플래시 카탈리스트는, 플래시 빌더와 함께 지난 1일 개발자와 디자이너들에게 공개되었습니다. 공개 당일, 다운로드 속도가 50kb를 맴돌 만큼 폭발적인 인기를 보였습니다.
플래시빌더는 그 전신인 플렉스빌더3를 거쳐오면서 인터페이스와 여러 기능들이 많이 알려지고, Flex4(코드네임 Gumbo)의 SDK도 공개되어 있는 만큼 많은 개발자들이 익히 사용할 수 있는 데에 반해, 플래시 카탈리스트는 이번 베타가 처음으로 공개되어서, 아직 많은 분들이 플래시 카탈리스트에 대해 생소할 것이라고 생각합니다.
플래시 카탈리스트는 간단히 말하자면, 크레이티브 스위트와 플래시 빌더 사이의 중간 다리로써, 디자이너가 작업한 결과물의 페이지, 인터렉션, 타임라인을 정의하여 플래시 빌더에서 바로 활용할 수 있는 협업 툴입니다.
Flash Catalyst는 페이지, 인터렉션, 타임라인과 같이 크게 세가지 부분으로 나뉩니다. 페이지는 swf 출력물에서 보여질 화면으로, 플렉스에서는 state와 같은 역할을 합니다.
(flex4에서는 state의 구조가 바뀌었습니다.(참고))
페이지에는, 아트워크와 컴포넌트를 삽입할 수 있는데, 아트워크는 그림, 원, 선, 면과 같이 그래픽 오브젝트를 뜻합니다. 일단, 디자이너가 작업한 모든 레이어들은 아트워크 형태로 페이지에 담기게 됩니다.
그리고, 아트워크들은 플렉스에 정의된 컴포넌트로 변환할 수 있습니다. 컴포넌트로 변환을 하게 되면, 아트워크가 플렉스4의 컴포넌트로써 기능을 하게 되는데, 카탈리스트에서 정의할 수 있는 컴포넌트(베타기준)는 버튼, 텍스트입력상자, 가로/세로 스크롤막대, 데이터목록등이 있습니다.
각 아트워크와, 컴포넌트사이에는 인터렉션(동작)에 따른 타임라인의 변화를 설정해 줄 수 있습니다. 먼저 애플리케이션 로드와 같이 응용프로그램과 관련된 인터렉션을 정의 할 수 있고, 마우스 클릭, 마우스 오버와 같이 각 컴포넌트에 정의된 이벤트로 인터렉션을 정의 할 수 있습니다.
타임라인은 플래시 타임라인과 같이, 여러 모션 효과등을 지정할 수 있습니다. 카탈리스트에서 모션은, Flex에 정의된 모션(페이드인, 리졸브, 3d효과)를 뜻합니다. 지정할 수 있는 타임라인은 크게 두 가지로, 앞서 다룬 페이지 전환에서의 효과와, 그 이외에 동작 시퀀스를 정의 할 수 있습니다.
이렇게 플래시 카탈리스트로 저작된 결과물은 mxml과 fxg 형태로 담기게 되며, 프로젝트에서 사용된 여러 라이브러리(asset)와 함께 fxp 파일 형태로 저장되게 됩니다. 이 fxp 파일을 이용해 카탈리스트에서 계속해서 작업을 진행 할 수 있고, 개발툴인 flash builder에서 불러와 개발자가 코딩을 진행 할 수 있습니다.
또한 재미있는 점은, 카탈리스트를 통해 인터렉션이나 타임라인을 제작하는 중에도, 페이지에 담긴 아트워크들은 영향을 받지 않기 때문에, 포토샵, 일러스트레이터와 같은 크레이티브 스위트에서 디자인을 변경 할 수 있고, 그 변경사항은 바로 카탈리스트에 반영 됩니다.
어떻게 협업이 이루어질까?
이처럼, 플래시 카탈리스트는 페이지, 인터렉션, 타임라인으로 나뉘어져 있고, 페이지를 구성하고 있는 여러 아트워크들은 따로 분리되어있기 때문에, 크레이티브 스위트 제품군을 사용하고 있는 디자이너와의 협업도 가능하며, 플래시 카탈리스트에서 저작한 결과물도 mxml, mxml 컴포넌트, fxg, asset와 같은 형태로 담겨, 플렉스 개발자와의 협업도 가능합니다.
정리하자면, 플래시 카탈리스트는 디자이너와 플렉스 개발자 사이의 중계자 역할을 하는 툴이라고 볼 수 있습니다.
하지만, 위에서 설명한 것 처럼, 플래시 카탈리스트에서 진행할 수 있는 작업은 페이지 설계, 인터렉션 설계, 타임라인 지정 정도입니다. 실제 플래시/AIR 애플리케이션 프로젝트를 진행할 때에는 이외에도 많은 작업이 필요합니다. 특히, 동적인 모션을 활용하는 부분이 많은 애플리케이션의 경우 카탈리스트에서 사용할 수 있는 모션만으로는 역부족하므로, 별도로 플래시를 이용한 작업이 필요하게 됩니다.
위처럼, 카탈리스트가 할 수 없는 부분은, Flash Builder에서 보충해 주고 있습니다.
기획, 프로토타이핑과 같은 과정을 거쳐, 디자인 과정 이후(사실상 동시지만), 애니메이션, 모션, 커스텀 컴포넌트개발처럼 카탈리스트에서 할 수 없는 작업은 플래시에서 진행하고, 이외의 작업들은 플래시 카탈리스트에서 진행 하고, 위 두 결과물을 Flash Builder에서 개발 시 합치면 됩니다.
“그렇게 해서 협업이 가능한가?” 라고 생각하실 분들이 있으실텐데, 결론부터 말씀드리자면 아주 원할히 잘 됩니다. Flash CS4에서 부터는 FXG라는 새로운 그래픽 포맷이 도입되었으며, 카탈리스트 처럼, 포토샵, 일러스트레이터에서 작업한 그래픽 결과물을 그대로 Flash CS4상으로 불러올 수 있습니다. 그리고, Flash CS4에서 작업한 결과물을 swc 형태로 내보낸후, Flash Builder에서 불러와서 개발시에 활용 할 수 있습니다, 그리고 Flash Builder4에서는 Flash CS4와 협업할 수 있도록, Flash Component 기능이 추가 되었습니다.(참고)
뭔가 더 복잡해지고 애매해진것 같죠? 하지만 결론은 간단합니다. 플래시 카탈리스트에서는 화면, 인터렉션, 타임라인을 정의 할 수 있고, 이외에 애니메이션, 모션, 커스텀 컴포넌트와 같은 카탈리스트에서 지원하지 않고, 좀 더 복잡한 모션이나 기능이 필요한 경우엔 Flash CS4에서 작업을 진행 할 수 있습니다. 물론, Flash CS4, Flash Catalyst 모두 크레이티브 스위트 제품군(포토샵, 일러스트레이터)와 완벽히 연동이 되며, Flash Builder을 통해 개발자와도 협업을 할 수 있습니다.
아쉬운 카탈리스트
필자의 극진한 카탈리스트 찬양(?)에 이어, 카탈리스트에 대한 쓴소리도 함께 해보고자 합니다. 아직, 카탈리스트가 베타버전이어서, 이러한 쓴소리를 꺼내는 것 자체도 좀 그렇네요.
아쉽게도 이번 플래시카탈리스트의 베타1버전에서는 알파베타때 future로 표시된 많은 기능들이 제외된 채로 출시되었습니다. 그 예로, 이번 베타에서는 플래시 빌더에서 카탈리스트 프로젝트의 변경사항을 임포트하면 자동으로 리팩토링 하는 기능이 이번 베타에선 제외되었군요.
그리고 플래시카탈리스트의 인터페이스 중, HUD 창에 대해서도 불만을 토로하고자 합니다. HUD창은 위의 창 처럼, 아트워크에 대한 여러 가지 설정을 할 수 있는 창입니다. 실제로 플래시카탈리스트의 거의 모든 작업들은 HUD창에서 이루어진다고 해도 과언이 아닌데요. 문제는, 이 HUD창에 소소한 오류들이 많다는 점입니다. HUD창이 카탈리스트의 창을 벗어난다거나, HUD창에서 체크한 부분이 지워지지 않는 문제등인데, 이 문제들이 빠른시일내로 수정되길 바랍니다.
또, 플래시카탈리스트가 디자이너-개발자간의 협업을 강조하면서도, 정작 개발자와 디자이너가 서로 만날 공간이 없다는 점입니다. 물론, 작은규모의 회사에선 직접 부딪히면서 일을 하겠지만, 규모가 클 수록 또 여러명의 개발자와 디자이너가 투입되는경우 가능할까요? 또, 결과물을 같이 보면서, 함께 이야기 나눌 경우도 종종 생기구요. 어도비 애크로뱃9에 있는 문서공유협업 기능이 플래시 카탈리스트에 도입되면 어떨까 하는 바람도 있습니다.
마지막으로 다루고자 하는 문제는, 필자가 관심을 두는 한글문제 인데요. 카탈리스트의 Textinput 컴포넌트는 포토샵, 일러스트의 텍스트 레이어 아트워크를 텍스트입력 컴포넌트로 변환해서 지정 할 수 있습니다. 문제는, 이때 디자인툴에서 사용한 폰트가 리소스(asset)에 함께 포함이 되는데요. 영문폰트의 경우, 대체로 폰트의 크기가 작아서 문제가 없지만, 한글 폰트의 경우 용량이 상당히 커지기 때문에, 개발자가 플래시 빌더에서 이에 대한 부가 작업이 필요하게 됩니다.
블랜드와 카탈리스트
실버라이트 vs 플렉스의 경쟁구도가 있다면, 새롭게 출시되는 플래시플랫폼 협업툴인 플래시 카탈리스트는 마이크로소프트의 익스프레션 블랜드와 닮은 모습이 많아 보입니다.
Microsoft Expression Blend는 .NET Framework 3.5 기반의 WPF, 실버라이트 애플리케이션의 XAML을 저작하는 협업툴로, 최근엔 베타3버전도 출시되었다고 합니다. 이제 막 출시되는 카탈리스트에 비해 뼈는 굵은 편인데요.
블랜드도 크게, 인터렉션, 개체, 타임라인과 같이 세개의 요소로 나뉩니다. 즉, 화면상에 있는 개체의 인터렉션과 타임라인을 정의하고, 그 결과는 XAML형태로 저장되며, 개발자는 그 파일을 이용해 작업을 진행 할 수 있습니다.
두가지 툴을 비교함은 좀 그렇지만, 가장 다른점은 카탈리스트는 중계자에게 많은 권한을 주진 않지만, 블랜드는 중계자에게 많은 권한을 주는것에 있겠네요.
카탈리스트는 위에서 살펴본것 처럼, 사실상 포토샵이나 일러스트레이터로 작성된 파일을 불러와, 작업을 하게 됩니다. 중계자가 하게 될 작업도, 아트워크를 컴포넌트로 변환하고, 화면전환과 같은 모션을 타임라인에 지정하고, 각 컴포넌트의 인터렉션을 정의해서 타임라인에 엮는 일 이외엔 없죠. 디자인에서 변경 및 추가사항이 생기면 크레이티브 스위트 제품군에서 작업을 하고, 조금 더 복잡한 모션이나 커스텀 컴포넌트를 만들게 될경우엔 Flash CS4상에서 작업을 하게 되죠.
하지만 블랜드는, 위에서 나열된 크레이티브 스위트, 플래시CS4, 플래시카탈리스트에서 할 거의 모든 작업들을 중계자가 하게 됩니다. 그러다 보니, 처음 접하는 디자이너에겐 약간의 부담이 될 수도 있겠습니다만, 그 만큼 전문적인 중계자 툴을 형성한 점은 어도비에 있어서도 큰 위협이 될 수 있겠네요.
이 두가지를 놓고 보면, 서로서로 어느 정도 장단점은 있어 보입니다. ^^;
최근 익스프레션 블렌드3의 베타도 출시되었다고 하네요. 블렌드3에서는 포토샵 파일도 불러올 수 있다고 하니, 중계자가 해야 할 노가다 작업은 약간은 줄어들게 되는걸까요?
