서문
지금까지 플렉스는 개발자의 산물이었다고 해도 과언이 아니었다. 아직까지 현존하는 Flex3는 디자이너를 배려한다고 여러가지 연계 플러그인들을 (ex, photoshop, illustrator 용 플러그인) 만들어 배포했었지만, 여전히 빌더로 와서 힘들게 코딩작업을 해야했다. 이것은 HTML이외의 MXML,ActionScript의 새로운 코딩을 배워야 한다는 것을 의미하고 디자이너에게는 엄청난 도전이었다. MXML이야 그럭저럭 쉽게 이해되지만 ActionScript로 스킨을 제작해야 하는 것을 보며 당연히 거의 모든 디자이너가 포기했다. 그냥 CSS로 모든것을 해결하고 고급 스킨제작 및 드로잉은 애석하게도 디자이너가 아닌 프로그래머의 몫이 되었었다. 그래서 프로그래머들은 여러군이 나뉘었었는데, 작게는 Biz 제작 담당, UI 제작담당, Skin 제작담당, 등으로 나뉘어 작업을 하곤 했다.
하지만 Flex4에서는 모든것이 체계가 바뀌었다. 스킨체계가 새롭게 정리되고, 디자이너는 디자인만 신경쓰는 시대가 도래했다. 지금까지 Flex3까지는 프로그램 스킨은 액션스크립트로 작업했지만, 이젠 MXML로 제작이 가능하다. 또한, 이 MXML로 제작하는 것 조차 거의 필요치 않으며, 앞으로 설명할 Flash Catalyst 만 있으면 Catalyst 가 알아서 포토샵, 일러스트레이터 파일을 읽어와 코드를 만들어 준다.
Catalyst 로 플렉스 App 제작개요
Catalyst에서 포토샵이나 일러스트레이터로 제작한 어플리케이션 디자인 파일을 불러오면 포토샵이나 일러스트레이터의 의 각 레이어와 그래픽 엘리먼트를 png파일이나 플렉스 스킨 그래픽으로 변환하고 이에 맞게 플렉스 코드를 제작해준다.
그리고 각각 원하는 그래픽에 컴포넌트(ex 버튼) 등록을 해주고, 원하는 이벤트와 액션을 입력한다. 또는 그에 반응하여 트랜지션등도 줄 수 있다. 사실 이 정도만 전체적으로 돌아가게만 만들어 놓으면 그다음은 프로그래머의 영역이다. 따라서 여기서는 간단한 따라하기 샘플을 보여주며 이해를 돕겠다.
샘플개요
아래의 프로젝트는 필자가 다니는 교회에서 요청이 들어온 App 디자인이다. 디자인 자체는 웹을 염두해 두고 제작한 것이지만 필자가 Flex4로 쉽게 작업이 가능하겠다 생각하여 제작에 착수하였다. 디자인 샘플 자체가 플렉스에 익숙하지 않은 디자이너가 한 디자인이라 웹페이지의 느낌이 강하지만(예를들어 버튼의 디자인) 이 글을 보는 분들은 어플리케이션의 모습을 갖추도록 디자인 하면 더욱 좋을 것이다.
진행방식
지금까지 플렉스는 개발자의 산물이었다고 해도 과언이 아니었다. 아직까지 현존하는 Flex3는 디자이너를 배려한다고 여러가지 연계 플러그인들을 (ex, photoshop, illustrator 용 플러그인) 만들어 배포했었지만, 여전히 빌더로 와서 힘들게 코딩작업을 해야했다. 이것은 HTML이외의 MXML,ActionScript의 새로운 코딩을 배워야 한다는 것을 의미하고 디자이너에게는 엄청난 도전이었다. MXML이야 그럭저럭 쉽게 이해되지만 ActionScript로 스킨을 제작해야 하는 것을 보며 당연히 거의 모든 디자이너가 포기했다. 그냥 CSS로 모든것을 해결하고 고급 스킨제작 및 드로잉은 애석하게도 디자이너가 아닌 프로그래머의 몫이 되었었다. 그래서 프로그래머들은 여러군이 나뉘었었는데, 작게는 Biz 제작 담당, UI 제작담당, Skin 제작담당, 등으로 나뉘어 작업을 하곤 했다.
하지만 Flex4에서는 모든것이 체계가 바뀌었다. 스킨체계가 새롭게 정리되고, 디자이너는 디자인만 신경쓰는 시대가 도래했다. 지금까지 Flex3까지는 프로그램 스킨은 액션스크립트로 작업했지만, 이젠 MXML로 제작이 가능하다. 또한, 이 MXML로 제작하는 것 조차 거의 필요치 않으며, 앞으로 설명할 Flash Catalyst 만 있으면 Catalyst 가 알아서 포토샵, 일러스트레이터 파일을 읽어와 코드를 만들어 준다.
Catalyst 로 플렉스 App 제작개요
Catalyst에서 포토샵이나 일러스트레이터로 제작한 어플리케이션 디자인 파일을 불러오면 포토샵이나 일러스트레이터의 의 각 레이어와 그래픽 엘리먼트를 png파일이나 플렉스 스킨 그래픽으로 변환하고 이에 맞게 플렉스 코드를 제작해준다.
그리고 각각 원하는 그래픽에 컴포넌트(ex 버튼) 등록을 해주고, 원하는 이벤트와 액션을 입력한다. 또는 그에 반응하여 트랜지션등도 줄 수 있다. 사실 이 정도만 전체적으로 돌아가게만 만들어 놓으면 그다음은 프로그래머의 영역이다. 따라서 여기서는 간단한 따라하기 샘플을 보여주며 이해를 돕겠다.
샘플개요
아래의 프로젝트는 필자가 다니는 교회에서 요청이 들어온 App 디자인이다. 디자인 자체는 웹을 염두해 두고 제작한 것이지만 필자가 Flex4로 쉽게 작업이 가능하겠다 생각하여 제작에 착수하였다. 디자인 샘플 자체가 플렉스에 익숙하지 않은 디자이너가 한 디자인이라 웹페이지의 느낌이 강하지만(예를들어 버튼의 디자인) 이 글을 보는 분들은 어플리케이션의 모습을 갖추도록 디자인 하면 더욱 좋을 것이다.
백문이 불여일견! 앞으로 진행할 샘플의 최종 완성본을 살펴보자. 현재 종료된 이벤트이며 글쓰기 해도 저장이 되지 않는다는 것을 참고할것! (종교적 색채가 강한 사이트의 샘플인데 필자가 제작한 마땅한 샘플이 이것밖에 없으니 양해를 구한다)
포토샵 샘플 다운로드 받기 - (포토샵 소스를 제공해준 사월이야기 님께 감사한다)
Writeform.psd
준비하기
플래시 카탈리스트 다운로드하여 설치한다 (현재 Beta2)
따라하기
카탈리스트를 먼저 시작하면 다음과 같은 안내창이 열린다
여기에서 아래의 PSD파일을 여는 버튼을 클릭한다
이제 다음장에서는 리스트와 뷰 페이지 구성해 보도록 하겠다.
열린 창에서 다운로드 받은 샘플파일을 연다
최종으로 파일을 열기 전에 분석 먼저한다.
분석이 끝나면 파일의 정보가 보이고 여기에서는 기본정보만 쓸 것이므로 바로 OK버튼을 클릭한다. 만약 자세한 설정을 하고 싶으면 Advanced를 클릭해서 불러오고 싶은 레이어를 선택해준다.
먼저 포토샵 레이어 구조를 확인한다.
레이어는 총 4개의 그룹으로 되어있고, 각 레이어 그룹안에는 그래픽 요소들이 존재한다.
레이어는 총 4개의 그룹으로 되어있고, 각 레이어 그룹안에는 그래픽 요소들이 존재한다.
화면에 해당 레이어들이 선택되어 나타난다.
게시글을 설정 했던 모습이 사이즈가 들어가 있지 않은 상태로 나왔다. 아래와 같은 경우 beta1때에는 사이즈 문제가 없었지만 현재의 beta2 에서는 문제가 있는 것으로 나온다.
아래와 같이 텍스트를 확대하여 적절히 사이즈를 조절 해준다.
이제 Ctrl-Enter나 Command-Enter 를 클릭하여 미리보기로 확인해 본다.
제대로 화면이 나오나 확인했으면 저장한다.
이제 다음장에서는 리스트와 뷰 페이지 구성해 보도록 하겠다.
다음장에서 계속..
반응형