본래 디자이너를 꿈꾸며 커오던 나는 어느새 보니 자바에 대한 웹 프로그래머가 되어 있었다. 하지만 디자인에 대한 욕심도 버리지 못했는데, 예전에는 단순히 jpg로 구성된 홈페이지만 만들어도 괜찮다고 생각했는데 잠시 프로그래밍을 공부한답시고 디자인을 소올히 하다 보니 어느새 플래시라는 존재가 나오더라. 그리고 플래시를 사용한 동적인 웹 페이지를 너도 나도 만들고 있었고 나는 그 추세속에 들어가지 못하였다. 20살이 되서도 나는 사업을 한답시고 아무런 기술도 접하지 못하였고 뒤늦게 후회하고 그나마 꾸준히 공부했었던 웹 프로그래밍을 주로 다루게 되었는데 액션스크립트가 나오며, 그리고 플렉스라는 기술이 나올 때에도 나는 전혀 알지 못하였다.
2009년에 WPF라는 기술을 알게 되었고, RIA에 대해 알게 되었다. WPF를 통해 RIA라는 기술이 코어와 뷰로 분리되어 있다는 자체가 JSP를 공부할 때 MVC랑 비슷한 구조로 되어 있다는걸 짐작할 수 있었다. 웹에서는 ajax를 통해 닷넷과 jsp가 web 2.0 페이지를 만들려고 했다면, RIA는 나름대로 웹 어플리케이션을 cross-platform이라는 기본적인 생각 아래 점차 기능을 확장해 나갔다.
작년 초에 늦게나마 플렉스라는 기술을 알게 되었을 떄 나는 내가 여지껏 잊고 살아왔고 부족하다 생각했던 플래시 개발에 대한 기회라고 생각했다. 다른 툴 보다 xml에 대한 이해로 쉽게 UI를 구성할 수 있고, 특히 http, xml 등의 데이터와의 연동과도 강력한 기능을 발휘하는 이 녀석에 감동먹고 다시금 디자인에 대한 감각을 키워나가도록 노력하고 있다.
서론이 길었다. 어쨌든 최근 준비중인 프로젝트에서 예전처럼 포토샵에서 디자인하고 리소스를 플렉스로 가지고 와서 어떻게 효과를 주고 구현을 해야할까.. 그런 생각을 하던 차에 1주일 전에 플래시 카탈리스트를 만났다.
단순히 “협업 도구” 정도로만 이해하고 있던 이 툴은 나처럼 “디자인도 하고 싶은 개발자” 에게는 정말 기회라고 할 수 있다. 솔직히 어느정도 컴포넌트와 깔끔한 디자인 시안은 구현할 수 있는데, 이에 대해 애니메이션을 입히고 개발적인 요소로 변환하기 위해서 많은 노가다를 거쳐야 하는 플래시 개발에 있어서 혁신적인 시스템을 안겨줘왔다. 바로 fxp라 부르는 플래시 확장 프로젝트 파일이다.
이 FXP 파일은 플래시, 포토샵, 일러스트 등에서 저장할 때 생성할 수 있는데, 이 파일 자체만으로도 플래시 빌더에서 사용이 가능하지만 플래시 카탈리스트에서는 이들 프로그램의 레이어를 가져오게 된다. 포샵 등의 툴에서 보이는 화면 그대로 가져오게 되면 플래시 카탈리스트에서는 상당히 매력적인 작업을 해 주는데, 사실상 프로그래머 영역의 작업을 해 주는데 그야말로 플렉스에 꼭 필요했던 기능을 해주게 된다. 몇 가지 내 나름대로 매력적이라 생각되는 카탈리스트의 기능을 정리해 본다.
1. 스테이트(states)의 생성과 연결
states개념은 플렉스 4에서는 더욱 더 확장되어 모든 컴포넌트 테그에 includein 이라는 속성으로 네이밍된 스테이트에 할당해 줄 수 있다. 플렉스3 까지 addchild, removechild 노가다를 했던 때와는 사뭇 다르다. 일전에 작업한 뷰를 그대로 가지고 와서 작업할 수 있고, 포토샵에서 처럼 레이어 컨트롤을 통해 각 뷰에서 보여주는 레이어를 할당하게 된다 그렇게 작업된 결과물은 MXML로 반영되고 결론적으로 INCLUDEIN속성과 STATES들이 자동으로 생성되서 추출되게 된다는 점이다.
또한 아트웍(포샵 등에서 작업한 내용)을 컴포넌트로 변경하게 되면 각각에 대한 이벤트가 할당되는데 이 이벤트에서 currentstate의 변경을 자동으로 매핑해 준다. 물론 아직 보다 더 세밀한 액션까지는 컨트롤 하기 힘들지만 적어도 URL이동이나 비디오 조절 같은 기능들은 지원된다.
이벤트에서 지원하는 액션
2. 쉬운 이펙트
플래시 카탈리스트에서는 위와 같이 타임라인을 가지고 있다. 플래시의 그것과도 흡사하지만 아마 플래시보다는 기능이 떨어질 것이다. 사실 내가 플래시를 잘 못다루는 부분도 타임라인과 심볼 등의 활용을 전혀 못해서인데, 카탈리스트는 state간의 타임라인을 가지고 각각의 타임라인에서의 레이어의 변화에 대한 애니메이션 효과를 주게 된다.
따라서 포토샵만 다룰 수 있다면 하나의 PSD파일에서 layer의 보임/숨김 처리를 통해 쉽게 페이지를 구현할 수 있고, 이를 똑같이 카탈리스트에서는 각 states에서 각각의 페이지를 구현하게 되고, 각각의 레이어들은 states에서 속성만 다를 뿐이지, 실제로는 레이어 들이 유지가 되기 때문에 쉽게 애니메이션 효과를 줄 수 있다.
카탈리스트에서 지원하는 레이어 간의 이펙트들. 아직 많지는 않다.
위 사진처럼 아직 많지는 않지만 기본적인 페이드 인/아웃 이나 확대/축소 정도는 잘 되니깐(사실 개발자가 뭐 쓰면 얼마나 쓰겠나..;) 개인적으로 저정도만 있어도 강력한 기능을 내기에는 충분하다고 생각한다. x,y,z축의 3D 회전도 되니깐 괜히 transition 테그에서 노가다 할 필요가 없어졌다. 또한, 타임라인의 자체적인 재생 버튼으로 states간의 이동을 미리 볼 수도 있다. 프리미어처럼 뭐 엄청 강력한 타임라인은 아니지만.. (그걸 기대한다는 자체가 좀 그렇다.) 가볍게 쓰기에는 딱인 것 같다.
3. WIREFRAME 컴포넌트 가져다쓰기 & 컴포넌트 만들기.
플래시 카탈리스트에서는 간단한 컴포넌트를 가져다 사용할 수 있도록 지원한다.
RIA의 폼과 화면을 구성하는 데 빼놓을 수 없는 아주 기본적인 컴포넌트들을 카탈리스트에서는 기본적으로 지원한다. 스파크의 새로운 스킨인 것 같은데, 이를 가져다 쓰면서도 각각에 대한 색상이나 글꼴, 효과(그림자 효과 등)등을 쉽게 낼 수 있다. 이런 컴포넌트를 가져다가도 쉽게 자기만의 디자인에 입힐 수 있지만 이런 것에 아쉬워 하는 사람들을 위해 카탈리스트에서는 참 대단한 기능을 내 놓았는데, 바로 Custom Component이다.
스크롤바 만들기 1
스크롤바를 하나 만들어 보자. 그냥 라인이랑 네모로 해서 저렇게 스크롤바의 기본이 될 것 같은 트랙과 조절기를 만들었다. 그리고 이 두개를 선택하고 왼쪽에 뜨는 검정색 HUD창에서 convert artwork to component에서 vertical scrollbar를 선택한다. 그리고 그냥 조절기랑 트랙에 해당되는거 선택하고 체크만 해주면 자기가 알아서 만들어준다. (여태 이렇게 쉽게 스크롤바 디자인 하는 거 처음봤다.) 예전에 2004년 즈음에는 CSS로 스크롤 바 막 칼라 입히고 투명하게 하는 등 그런 기능이 인기였는데(갑자기 생각난다.) 이젠 뭐 작대기랑 네모만 있으면 그냥 스크롤바로 변한다.
어디 스크롤바 뿐이랴. 위에 있는 건 다 사용자 정의 컴포넌트를 만들 수 있다. 특히 DataList가 막강한 것 같은데, 한개의 샘플 데이터만 있으면 반복리스트 만들 수 있다. 게다가 샘플 데이터도 아래 창에서 입력 가능하다. 반복할 리스트만 선택해주면 지가 알아서 반복해준다. 스크롤바랑 연결해서 스크롤 패널을 만들고 스크롤링도 가능하다.
4. MXML컴포넌트의 자동 생성(모듈화)
이처럼 강력한 기능을 지원해 주면서도 사실 내가 가장 중요하다 생각하는 것은 바로 컴포넌트 분활하이다. 일전에 포스팅(2011/01/16 – [IZECT RIA LAB/Flex 3] – 플렉스에서는 모듈화를 어떻게 구성해야 할까?) 에서 나는 컴포넌트에 대해 고민한 적이 있는데 카탈리스트에서는 하나의 묶음을 custom/generic component로 구성해 두면 MXML로 자동으로 빼주고 이를 독립된 네임스페이스로 Main.mxml에서 사용할 수 있게 만들어준다. 화면단위로 쉽게 모듈화 해주고 메인과 연결하게 되므로 mxml컴포넌트를 굳이 생성하고 표준화 하는 등의 노가다를 할 필요가 없다는 것이다.
사용자 컴포넌트 뿐만 아니라 오른쪽 그림처럼 내가 만든 모든 컴포넌트는 모듈화 되서 들어간다. 버튼 하나까지도 저렇게 나눠지니 사실 파일이 많아져서 좀 불편한 것 같지만 난 한 화면에 엄청난 코드들이 지저분하게 있는 것보다는 백배 낫다고 생각한다. 물론, 오른쪽 화면은 내가 네이밍을 잘못해서 저렇게 된 것인데 (이런 실수는 하면 안되겠다.) 어쨌든 내가 원하는 컴포먼트가 파일로 분리되어 있다는 자체만으로도 프로그래밍을 할 때 깔끔한 코딩 효과를 불러일으킬 수 있다. 물론 이게 완전한 모듈화라고는 볼 수 없다. MXML이 분리된다는 자체는 하나의 컴파일 요소를 둘 이상으로 만드는 것은 아니니깐. SWF는 결국 한개만 나오게 되니깐 이것은 활용하기 나름이겠다.
이정도가 약 1주일 정도 카탈리스트를 써보고 내게 매력적으로 다가온 기능들이다. 그럼 언제나 좋기만 할까? 카탈리스트는 2009년 중순 쯤에 베타가 공개되었고 3년 전 어도비 MAX에서 thermo라는 코드명으로 극소수에게 공개된 프로젝트이다. 어도비의 기술을 총 망라(최소한 웹에 있어서는.)해야 했기 때문에 엄청나게 긴 개발기간을 가졌음에도 아직도 부족한 점이 많다. 나는 아직 사용기간이 그리 길지 않기 때문에 짧게 정리하고 마치도록 하겠다.
첫재는 엄청난 고사양을 요구한다는 것이다. 그냥 프로그램적으로만 봐도 수백개의 레이어들이 각 states에 따라 다른 상태로 존재하고, 메모리에 언제나 MXML은 상주되어 있어야 하고 시시각각으로 변경되고 반영되어야 한다. 한번은 내가 undo(되돌리기)를 세어 봤는데 이런, 10번정도밖에 지원되지 않는다. 그 만큼 메모리를 얼마나 먹고 있는지 알 수 있다. 결론적으로 FXP파일은 약 3.5MB짜리가 나오는데 아래 그림처럼 실제로 메모리는 470MB정도를 먹고 있다. 이 FXP를 가지고 온 플래시 빌더는 더하다. 아래는 실제로 플래시 빌더에서 FXP를 import한 다음의 캡쳐화면인데, 약 1.8배에 달하는 메모리 점유를 먹고 있다. 내 PC는 듀얼코어 3.06GHz에 4GB DDR3인데도 버벅거림을 느낄 정도이니..
카탈리스트때문에 조만간 맥북프로를 지를지도 모르겠다. 그건 그거고 카탈리스트는 안보이거나 쓸때없는 리소스는 좀 알아서 찾아서 없애줬으면 좋겠는데, 향후 FXP파일을 FB에서 보면 쓸때없는 리소스가 엄청나게 많다. 그리고 아직 지원 안되는 FB의 컴포넌트도 너무 많고.. MS Blend에 비하면 카탈리스트에서는 data binding도 안되고 뭐 안되는건 많긴 많다.
그래도 아직 발전하고 있는 단계의 제품이니깐 앞으로 보다 더 좋아지리라고 믿는다. 무엇보다 INTERECTIVE하지 못한 디자인도 함께 하고 싶은 개발자에게 일종의 기회가 될 수도 있다. 플렉스 4에서는 스킨 개념이 중시된 만큼, 개발 기간을 단축시키기 위해 카탈리스트의 쉬운 인터렉티브 기능을 활용한다면 전문 디자이너 못지 않게 멋진 RIA작품을 만들 수 있을거라고 믿어 의심치 않는다.
참고로 아래 영상은 terry white라는 에벤젤리스트의 플래시 카탈리스트에 대한 몇가지 기능에 대한 시연인데, scroll panel과 타임라인에서의 states간의 애니메이션 등 몇가지 눈으로 확인할 수 있는 따라하기식의 쉬운 설명이 나오니 한번쯤 봐 두는 것도 좋겠다. ADOBE TV에는 너무나도 좋은 내용이 많기 때문에 시간날 때 따로 빼서 괜찮다 싶은 영상들은 포스팅하도록 하겠다.
