플렉스 UI는 꼭 밋밋하고 평범해야 할까? 이 책에서 소개하는 스킨과 프로그램 처리 기법을 활용하면 플렉스 애플리케이션은 더욱 돋보일 것이다. 열정적인 플렉스 개발자인 후안 산체즈와 앤디 매킨토시가 깜짝 놀랄 만큼 멋진 플렉스, 에어 애플리케이션을 만드는 비법을 알려준다. 어떤 식으로 디자인해야 하는지, 워크플로가 끊이지 않도록 플렉스나 에어 개발 단계로 디자인 작업을 어떻게 넘겨줘야 하는지 그리고 누구나 만족할 수 있도록 플렉스 애플리케이션의 가치를 높일 수 있는 최신 기법을 배운다.

저자들은 플렉스와 에어에서 다양하고 탁월한 비주얼 UX 디자인을 만들어내는 방법을 제시하며, 계획과 디자인, 설계, 검증된 UI 원칙을 기술적 구현과 함께 설명한다. 스킨이나 스타일, 전환, 효과, 필터, 어도비 크리에이티브 스위트 도구를 바탕으로 이미지로 플렉스 인터페이스를 다루는 방법을 배워본다.

저자는 플렉스에서 디자인을 접근하는 여러 방법과 관련된 장단점을 명확하게 보여주고 적절한 기술을 선택하는 방법을 알려준다. 개념과 기술을 좀 더 상세히 배울 수 있도록, 특정 문제에 대해 바로 적용 가능한 해법을 제시하는 예제를 책에 가득 담았다.

크리에이티브하고 눈에 확 띄는 플렉스와 에어 애플리케이션을 만들 수 있는 방법을 확실히 알려주는 책이다.


[ 추천의 글 ]

플렉스가 세상에 나온 지 5년이 넘었습니다. 플렉스는 일명 개발자용 플래시라는 별명이 의미하듯이 XML 태그를 이용해 플래시의 UI를 컴포넌트화하여 빠르게 UI를 만들어내는 것이 목적이었습니다. 그래서 태그에 익숙한 개발자들이 데이터와 연동해 화면으로 보여주는 프로젝트가 많았습니다. 플렉스는 UI를 만드는 일이기 때문에 결국에는 UI로 평가를 받게 됩니다. 따라서 개발자의 태그만으로 표현하지 못하는 플래시가 지닌 비주얼한 화려함은 디자이너와의 협업으로 만들어나가야 합니다.

이는 저 또한 『예제로 배우는 Adobe 플렉스』라는 책을 쓰면서, 그리고 다양한 플렉스 UI 컨설팅 프로젝트에 참여하면서 늘 고민하던 사항이었습니다. 당시는 플렉스 컴포넌트와 개발툴 활용법, 데이터 연동에 초점이 맞춰져 있었고, 예쁜 UI를 만들어 내는 것에 대한 고민은 근래에 들어 대두되고 있는 상황입니다.

『비주얼 플렉스 UX 디자인』에서는 플렉스로 화면을 만들 때 디자이너와 함께 고려해야 할 다양한 사항에 대해 생생한 노하우와 프로젝트 경험을 접할 수 있습니다. 동적 레이아웃, 스킨, 지시자와 커서, 글꼴, 필터, 이펙트, 그리고 플래시와 플렉스 연동 방법에 이르기까지 플렉스 개발자뿐만 아니라 디자이너 관점에서도 예쁘면서 효과적이고 역동적인 플렉스만의 독특한 UX를 만들어내는 데 필수적인 부분을 예제와 함께 속속들이 배울 수 있도록 자세히 다룹니다.

특히 이 책의 저자 중 후안 산체즈는 저도 플렉스 UI에 대한 영감을 얻고자 종종 방문하는 유명한 플렉스 스킨 공유사이트인 스케일나인닷컴의 운영자입니다. 이 책에서 스킨에 대한 그의 깊숙한 경험을 배우실 수 있을 겁니다. 그리고 이 책을 번역한 이준하님은 플렉스 개발자이자 RIA 정보 블로거로 유명한 ‘열이아빠’입니다. 제가 어도비에 몸담았을 때 어도비의 소식은 오히려 ‘열이아빠’님의 블로그에서 접할 정도로 열성적이고 플렉스에 대한 경험도 풍부합니다. 이 책을 다 읽고 나면 플렉스 UI를 보는 시각이 한층 올라가 있는 여러분을 발견할 것이라 믿습니다.



[ 이 책의 대상 독자 ]

디자인 작업 결과가 플렉스에서 충실하게 구현되기를 원하는 디자이너와 개발자들에게 필요한 내용을 다루는 책으로서, UX 디자인 이론과 UI 컴포넌트의 시각적 구현에 대해 설명한다. 디자이너와 개발자는 플렉스에서 구현할 수 있는 섬세한 사용자 정의 내용을 익힐 수 있다. 플렉스 개발 경험이 없더라도 플렉스에서 시각적 효과를 어떻게 구현할 수 있는지 충분히 이해할 수 있을 것이다.

초중급자를 위한 서적으로서 누구나 쉽게 이해할 수 있다. 저자들도 책을 집필하며 프로젝트를 진행하면서 발생하는 다양한 이슈에 대한 해결책을 찾을 수 있었다. 여러분의 프로젝트에 도움이 되는 알찬 참고자료가 되기를 바란다.


[ 이 책의 구성 ]

앞부분에서는 플렉스 기능을 소개하고 비주얼 UX를 만드는 디자인 기초를 설명한다. 나머지 장에서는 플렉스에서 시각적인 커스터마이징을 다루는 방법과 실제 구현 방법에 대한 기술적 내용을 상세히 다룬다. 각 장에서 다루는 기술은 서로 보충적인 관계이기 때문에 앞 장에서 설명한 내용을 이해하려면 처음부터 순서대로 읽는 편이 낫겠지만, 읽고 싶은 부분부터 시작해도 괜찮다.

1장. 리치 인터넷 애플리케이션: 플렉스 애플리케이션의 최종적인 모습을 만드는 데 디자인은 막중한 역할을 수행한다. 디자인 기초와 애플리케이션의 최종 디자인을 만들면서 고려할 점을 제시한다.

2장. 어도비 플렉스와 에어: 어도비 플렉스와 에어(AIR, Adobe Integrated Runtime)의 개요를 소개한다. 2장은 이후에 다루는 기술적인 부분의 기초가 되는 내용이다.
3장. 동적인 레이아웃: 레이아웃은 애플리케이션에서 시각적인 골격을 구성한다. 다양한 컴포넌트를 이해하고 어떻게 다루는지 알아본다.

4장. 스타일: 스타일 속성을 사용해 컴포넌트를 빠르고 쉽게 재정의할 수 있다. 스타일은 사용자 인터페이스를 재정의할 때 나머지 작업을 위한 기반이 된다.

5장. 그래픽 스킨: 컴포넌트에 스타일을 적용하는 것만으로 부족한 부분을 좀 더 섬세하게 다듬어줄 수 있다. 어도비 일러스트레이터, 플래시, 파이어웍스, 포토샵 같은 익숙한 그래픽 도구를 써서 플렉스 애플리케이션의 모습을 꾸며본다.

6장. 프로그램 스킨: 프로그램을 가지고 이미지를 그리는 것은 컴포넌트에 강력함을 더해주지만 다루기는 그래픽 스킨보다 더 까다롭다. 프로그램 스킨의 강력함을 어떻게 활용할지 배우고 커스텀 인터페이스를 만들어본다.

7장. 리스트와 내비게이션 컴포넌트: 리스트와 내비게이션 컨트롤에 아이템 렌더러를 추가하고 데이터를 어떻게 표시할지에 대한 내용을 다룬다. 리스트와 내비게이션 컴포넌트는 주로 데이터를 다루고 작은 부품들이 모여 만들어지기 때문에 독특한 커스터마이징 형식을 만날 수 있다.

8장. 지시자와 커서: 애플리케이션은 사용자가 목적을 달성할 수 있도록 적절한 안내를 제공해야 한다. 필요에 따라 지시자와 커서를 사용하면 사용자를 바른 방향으로 이끌 수 있다.

9장. 글꼴과 텍스트: 텍스트를 표현하는 방법에 따라 정보뿐 아니라 감성적인 역할을 어떻게 하는지 알아본다. 조직화되고 잘 만들어진 텍스트는 플렉스 애플리케이션 내에서 사용자에게 정보를 손쉽게 전달해준다.

10장. 필터와 블렌드: 레이어와 심도의 개념을 더하면 애플리케이션의 다채로움이 한층 더해진다. 플렉스에서는 다양한 목적으로 컴포넌트에 적용할 수 있는 다양한 필터와 블렌드 효과를 제공한다.

11장. 효과와 전환: 플래시 플레이어에서 동작하는 플렉스 애플리케이션은 유연하고 몰입할 수 있는 경험을 만들기 위해 모션의 장점을 활용할 수 있다. 다양한 형식으로 모션 기반의 특징을 활용할 수 있는 방법을 배운다.

12장. 플렉스와 플래시의 협업: 플래시와 플렉스는 액션스크립트 3와 플래시 플레이어라는 공통 기반을 갖고 있다. 플래시 CS3와 플러그인으로 커스텀 컴포넌트와 스킨, 컨테이너, 모션을 만들 수 있다.

13장. 에어 애플리케이션의 커스터마이징: 에어는 플렉스 애플리케이션과 동일한 코드를 활용해서 데스크탑 애플리케이션을 만들게 해준다. 하지만 에어 애플리케이션은 데스크탑 환경에 특화되어 적용할 수 있는 추가 기능을 제공한다.


[ 서문 ]

지난 몇 년 동안 웹을 다루는 디자이너와 개발자의 범위는 점점 더 방대해져 왔습니다. 웹사이트는 좀 더 고품질의 디자인과 비디오, 애니메이션 그리고 재미있고 유용하며 다채로운 경험을 만들기 위해 사용자 인터랙션과 통합돼가고 있습니다. 많은 사이트가 어도비 플래시 플랫폼으로 제작되고 있으며, 많은 플래시 사이트 또한 어도비 플렉스를 활용해 만들어지고 있습니다.

플렉스에 대한 많은 오해 중 하나가 플렉스는 플래시와 다르다는 것입니다. 물론 아닙니다. 플렉스는 플래시입니다. 플렉스 애플리케이션은 플래시 플레이어 위에서 동작합니다. 플렉스는 플래시 파일 형식으로 프로그램 언어, API를 사용합니다. 플렉스는 이전 개발에 사용하던 도구들과 플래시 플레이어의 다채로운 기능을 사용할 수 있습니다.

몇 년 전 플렉스 애플리케이션을 봤다면 믿어지지 않는 사건일 겁니다. 플렉스로 만든 애플리케이션은 딱 정말 플렉스 애플리케이션처럼 보였습니다. 몇 번의 조작만으로도 멋지게 보이는 애플리케이션을 만들었고, 처음 보더라도 다른 것들과 충분히 구분되는 것이었습니다.

왜일까요? 플렉스 초기 버전은 플래시 플랫폼을 전통적인 소프트웨어 개발자들이 접근할 수 있게 했고, 제품을 구입하면 멋진 애플리케이션을 바로 만들 수 있었습니다. 기업에서 사용할 수 있는 애플리케이션을 만들기 시작할 때 플래시를 전혀 다루지 못하는 사람들도 쉽게 다가갈 수 있었습니다. 다채로운 애플리케이션을 개발하기 위한 장벽을 플렉스가 사라지게 만들었습니다.

하지만 플렉스 1.0을 공개했을 때 우리는 다채로운 애플리케이션을 디자인하는 방법에 대해서는 정리할 시간이 없었습니다. 플렉스에 포함된 컴포넌트 스킨을 유연하게 만들려고 했고 컴포넌트의 시각적인 부분을 조절할 수 있도록 방대한 스타일 속성을 제공했습니다. 하지만 디자이너가 플렉스와 함께하기 위해서는 좀 더 많은 것이 필요하다는 사실을 깨달았습니다.

그래서 플렉스 2와 3를 공개할 때는 이미지와 모션 디자인을 플렉스 애플리케이션으로 쉽게 구현할 수 있게 했습니다. 플렉스 2에서는 스테이트와 전환을 추가해 디자이너와 개발자가 복잡하고 역동적인 애플리케이션의 움직임과 모습을 구성할 수 있도록 지원했습니다. 또 제약기반 레이아웃 메커니즘은 세밀한 이미지를 크기가 변하는 애플리케이션에 쉽게 적용할 수 있게 했습니다. 플렉스 3에서는 매크로미디어가 어도비로 합병되면서 어도비 CS 도구와 플렉스 빌더 사이의 스킨 작업을 간결하게 만들어 기본으로 제공되는 컴포넌트의 모습을 다양하게 적용할 수 있게 했습니다.

앤디 매킨토시와 후안 산체즈는 플렉스의 시각적 디자인 기능을 배우는 데 있어 완벽한 안내자입니다. 디자이너로서 개발분야까지 이펙티브UI(EffectiveUI)를 비롯한 기타 RIA 개발 경험은 플렉스의 세계로 깊이 몰입하게 만들 겁니다. 이 책에서는 멋진 플렉스 애플리케이션에 대해 디자이너와 개발자가 알아야 할 기본 이론과, 좀 더 심화된 주제로서 복잡한 애플리케이션의 룩앤필을 만드는 실용적인 예제를 보여줍니다.

이 책에서는 프로그래밍에 관심이 있는 디자이너나 디자인 감각을 지닌 개발자가 멋진 플렉스 인터페이스를 만들 수 있는 방법을 알려줍니다. 코드를 전혀 다뤄보지 못했지만 플렉스 개발자와 어떻게 의사소통해야 하는지 이해하길 원하는 디자이너나, 디자인팀에서 받은 멋진 시안을 어떻게 구현할 수 있는지 배우고 싶은 순수 개발자에게 이 책은 좀 더 효과적으로 디자인/개발 협업 관계를 유지하는 비법을 알려줄 것입니다.

물론 어도비는 여기서 멈추지 않을 것이고 플렉스 4부터는 굉장히 멋지고 풍부한 기능을 통해, 디자이너와 개발자들은 함께 한층 더 풍부한 경험을 만들어갈 수 있을 것입니다. 매력적인 애플리케이션을 디자인하고 만드는 방법, 이 책과 함께 한번 시작해보시죠!

[ 저자 서문 ]

웹은 새로운 기술과 함께 끊임없이 진화하고, 사용자의 요구사항은 점점 다양해져 가고 있다. 플래시가 1996년 처음 소개되면서 웹은 링크를 클릭해서 페이지를 다시 가져오는 정적인 방법에서, 페이지를 다시 불러오거나 뒤로가기 버튼의 도움 없이 동적으로 새로운 데이터를 처리하는 경험으로 변화하는 과정을 만나게 된다. 그 이후로 많은 기술이 등장하면서 끊임없이 커져 가는 사용자들의 요구를 만나고 이를 보완하는 새로운 규약도 생겨났다. 플래시도 기술이 성숙해지면서 강력한 데스크탑 애플리케이션에서 기대했던 인터랙션 경험들을 요구 받기 시작했다. 플래시는 브라우저 기반 애플리케이션을 만드는 데는 유용한 기술이지만 모든 환경에 적합하지는 않았다.

플래시 플레이어는 어도비 플렉스와 함께 엔터프라이즈 수준의 애플리케이션을 만들어낼 수 있을 만큼 성장했다. 플렉스를 비롯한 많은 경쟁기술이 등장했고 다채로운 사용자 경험의 중요성이 강조되고 있다. 이제는 혁신과 디자이너와 개발자 간의 협업, 사용성, 배포 등 여러 과정에 관심을 둬야 한다. 이러한 변화는 디자이너와 개발자가 플렉스에서 돋보이는 시각적 경험을 만들기 위해 극복해야 할 새로운 도전 과제다.

플렉스로 비주얼 UX 디자인을 만듦으로써, 다양한 현실세계 이야기로부터 모은 지식을 바탕으로 플렉스 애플리케이션을 새롭게 구성하고 다채로운 사용자 경험을 만날 수 있다.


책에서 다루는 범위

플렉스 애플리케이션을 만들면서 시각적 커스터마이징이 필요 없는 경우는 거의 찾아보기 힘들다. 그리고 플렉스 애플리케이션의 비주얼 UX를 만들어내는 다양한 접근방법을 다루는 모든 지식을 찾는다는 것도 쉽지 않은 일이며, 그런 지식을 실제 애플리케이션에 반영하기란 더더욱 까다로운 작업이다. 이 책은 플렉스를 처음 접할 때 필요한 지식에 초점을 맞춘다. 그중에서도 플렉스의 비주얼 UX를 표현하는 작업의 출발점이 될 것이다. 원하는 것을 바로 찾을 수 있도록 충분한 정보를 주고 스스로 해답을 찾을 수 있는 방향을 제시하는 것이 이 책의 목표다.

이 책에 담은 내용은 실제 기업용 애플리케이션에서부터 간단한 RSS 리더에 이르기까지 어떤 형태로든 적용할 수 있다. 적절하고 명확하게 문제에 대해 접근한다. 우리 저자들은 애플리케이션의 필요에 따라 다양한 예제를 다루면서 플렉스를 익혔기 때문에 이 책에서도 코스요리보다는 일품요리1와 같은 경험을 제공한다. 방대한 코드 속에서 작은 조각을 찾으려 고생할 필요 없이 원하는 내용을 바로 찾을 수 있다.

이 책에서 다루는 대부분 주제는 플렉스에서 바로 적용할 수 있는 것들이다. 커스텀 컴포넌트를 만드는 방법적인 접근과 데이터 시각화, 기능 구현을 위한 컴포넌트는 다루지 않는다. 물론 이러한 것도 사용자 경험을 위해 중요하지만 이 책의 범위를 벗어나기 때문이다.

또한 어떤 표준을 제시하거나 엄격한 기준을 이야기하지는 않는다. 실제 프로젝트에서는 다양한 요구사항을 만나게 된다. 마감일이나 예산, 사용자의 요구, 피드백 등을 바탕으로 주관적인 판단을 내려 상황에 맞는 시각적인 경험을 구현해야 한다. 애플리케이션을 설계하는 것에서부터 사용자에게 전달되는 것까지 모든 면에서 만족스러운 결과를 원할 것이다.


[ 저자 소개 ]

앤디 매킨토시
덴버에 있는 RIA 개발업체 이펙티브UI의 초기 멤버 중 한 명이다. UX 아키텍트로서 인터랙션 디자인과 커스텀 컴포넌트 개발, 프로그램 스킨을 만드는 전문가다. 최근에는 엔터프라이즈 애플리케이션을 플렉스와 에어 기반의 솔루션으로 적용하는 데 관심이 많다.
덴버의 콜로라도 예술대학교에서 인터랙티브 미디어 디자인으로 학사를 받았고, 재학 중에 애플리케이션 디자인 분야가 아직 활성화되지 않았음을 발견하고 자신의 진로 목표로 삼았다. 레고 마니아면서 얼리 어댑터인 그는 애플리케이션을 하나하나 분해해서 다시 조립하는 형식으로 개발을 배웠다. 개발과 디자인 분야에서 그의 관심은 작업의 질을 높이는 것이다. “개발은 도구가 다른 디자인이다”라고 늘상 이야기한다.
시각디자인 전공과 기술 지식을 바탕으로 어도비나 워크데이, 사이온, 유나이티드항공사 등 고객사의 성공적인 프로젝트에서 중요한 역할을 해왔다. 그리고 플렉스를 위한 오픈 소스 그래픽 프레임워크인 데그라파(Degrafa)의 고문도 맡고 있다.
현재는 덴버 시내에 살면서 업무와 휴가 차 해변가를 자주 여행한다. 책, 자동차, 음악, 산업디자인, 창고개조에 관심이 많으며, 유용한 정보나 아이디어를 andymcintosh.com에서 공유한다.

후안 산체즈
콜로라도 덴버에 있는 RIA 개발업체 이펙티브UI의 UX 아키텍트다. 치코의 캘리포니아 주립대학을 졸업하고 커뮤니케이션 디자인으로 학사를 받았다. 후안의 전공은 인쇄 디자인, 브랜딩, 광고지만, HTML과 CSS, 플래시 그리고 플렉스까지 다양한 웹 기술 분야로 빠르게 관심사를 넓히는 중이다.
창조적 시각과 논리적 마인드를 갖춘 후안은 디자이너와 개발자 간의 가교 역할을 하며, 최근에는 사용자 경험과 사용성, 디자이너/개발자 협업, 오픈 소스 프로젝트에 관심이 많다. 활발하게 플렉스 커뮤니티에 참여하고 있으며 플렉스를 위한 스킨과 테마를 다루는 ScaleNine.com을 운영하며 사용자 그룹과 기업 워크샵, 360|Flex와 웹매니악스 같은 컨퍼런스에서 발표자로 활동한다. 또한 플렉스를 위한 오픈 소스 그래픽 프레임워크인 데그라파를 이끌어가고 있다.
후안은 덴버 시내에서 여자친구 그레이스와 마들이라는 작은 치와와와 함께 살고 있다. 이 책을 마치고 나면 후안은 66년형 포드 머스탱을 타며 드럼도 즐기는 신나는 생활로 복귀할 예정이다.


[ 옮긴이의 말 ]

2004년 월간지 「마이크로소프트웨어」에 소개된 ‘플렉스’를 처음 접한 후, 지루한 작업과 단순한 반복의 연속이라 생각했던 웹의 가치를 새롭게 발견할 수 있지 않을까 하는 호기심에 발을 담그기 시작한 것이 오늘날까지 오게 됐습니다.

처음 담당한 플렉스 프로젝트는 플렉스를 직접 다루는 것이 아닌 SAP의 비주얼 컴포저(http://www.sdn.sap.com/irj/sdn/nw-vc)라는 도구로 화면에 자료를 표현하는 작업이었습니다. 당시에는 작업자가 플로우 차트와 유사한 형식으로 업무를 설계하면 플렉스 1.5 SDK를 기준으로 플렉스 코드를 내부적으로 생성해주고 이를 다시 swf로 컴파일해서 화면에 보여주는 조금은 낯선 작업이었습니다. 다양한 데이터를 효율적으로 배치하는 것이 주된 목적이었기 때문에 기능성, 창의성, 시각적인 부분을 표현하는 데 제한이 많았습니다.

하지만 고객은 브랜드 가치를 극대화할 수 있을 만한 시각적 만족을 원했고 이를 충족시키기 위해 내부적으로 코드를 생성하는 모듈을 건드려야 하는 어려움이 있었습니다. 이 때문에 잘 동작하던 기능이 오작동하거나 해당 업무만을 위한 하드코딩이 들어가는 등 난관이 많은 프로젝트였습니다. 물론 기본적으로 플렉스의 UI를 사용하기 때문에 상대적으로는 만족스러운 화면을 만들 수 있었지만, 아무리 뛰어난 디자이너의 손길을 거쳐도 최종적으로 산출되는 결과물에서 고객이 원하는 이미지를 구현하기가 어려웠습니다.

최근의 RIA 개발도구들은 워크플로에 많은 관심을 갖고 투자를 하고 있습니다. 예전에는 개발자와 디자이너가 각자 다른 언어로 이야기하며 몸짓으로 겨우 의사소통이 가능한 수준이었다면 이제는 같은 언어로 서로 간의 이야기를 풀어나갈 수 있습니다. 플렉스에서도 새로운 기능과 도구를 추가하면서 디자이너와 개발자의 단절을 해소할 수 있는 더욱 효율적인 기반을 만들고 있습니다. 하지만 여전히 많은 개발자와 디자이너는 플렉스에서 제공하는 강력한 협업을 위한 도구를 전혀 알지 못하거나 사용하지 않습니다. 대부분 기존 웹사이트 개발과 동일하게 이미지를 생성하고 스타일을 적용해서 html 대신에 mxml 파일을 만들 뿐입니다. 생산성 면에서 큰 차이가 없다고 생각하기 때문에 이러한 작업방식을 크게 문제 삼지 않는 것 같습니다. 물론 규모가 작다면 그럴 수도 있겠지만 프로젝트 성격이나 규모에 따른 생산성을 비교해본다면 큰 차이가 있을 것입니다. 사실 대부분 플렉스 서적에서도 기능 구현을 우선시했기 때문에 플렉스에서 디자인은 오랫동안 공유되지 못하고 이야기하기 힘든 부분이 되고 말았습니다.

이 책은 기존 책이 제대로 다루지 못한 부분을 설명합니다. 물론 다룰 내용이 방대하기 때문에 많은 부분을 “관련 문서를 참고하세요”라고 끝맺고 있지만, 플렉스에서 어떻게 시각적인 경험을 더욱 풍부하게 만들 수 있는지에 대한 핵심적인 개념과 내용을 잘 정리해줍니다. 디자인 작업이나 개발 단계에서의 여러 가지 팁은 실제 프로젝트를 진행하면서 고민스러웠던 부분을 해결해주는 역할을 해주기도 합니다. 원서에서는 다루지 않지만 일부 플렉스 4에서 변경된 내용을 추가했습니다. 하지만 기본 내용을 바탕으로 추가 기능이나 기존 업무를 좀 더 편하게 할 수 있도록 개선된 만큼 이 책의 내용이 새로운 기능을 익히는 데도 도움이 되실 겁니다. 또한 저자들이 참여하고 있는 오픈 소스 그래픽 프레임워크인 데그라파(Degrafa)는 플렉스 4 SDK에 많은 영향을 끼쳤고 파생된 프로젝트들도 생겨나는 중입니다(데그라파에 대한 간단한 소개는 http://network.hanb.co.kr/view.php?bi_id=1597를 참고하세요).


[ 옮긴이 소개 ]

이준하
열이 아빠의 RIA 이야기(http://koko8829.tistory.com)라는 블로그를 통해 다양한 시각에서 새로운 RIA에 대한 이야기를 나누고, 새로운 경험을 중심으로 나타나는 여러 가지 현상을 탐구하며 지식을 공유하고 있다.

목차

• 1부 | RIA 기초 다지기
  
• 1장. 리치 인터넷 애플리케이션
  • 사용자
  • 컨텐츠
  • 사용자 인터랙션
  • 시각적인 영역
    • 색상
    • 모션
    • 타이포그래피
    • 아이콘
    • 레이어링과 심도
    • 추가적인 요소
    • 정리
      
• 2장. 어도비 플렉스와 에어
  • 플렉스 3.0 프레임워크
    • 동적인 레이아웃
    • 확장 가능한 시각적인 컴포넌트
    • 시각적 효과
    • 모션 기능 활용
  • 플렉스 애플리케이션 개발
    • 플렉스 3 SDK와 MXML 컴파일러
    • 어도비 크리에이티브 스위트
    • 플렉스 애플리케이션 배포
  • 정리
    
• 2부 | 플렉스 3 프레임워크
  
• 3장. 동적인 레이아웃
  • 플렉스 레이아웃의 이해
  • 자리배치 자동화
    • 선형 레이아웃
    • 다차원 레이아웃
    • 여백과 간격
    • 자동 레이아웃에서 제외되는 컴포넌트
    • Spacer 컨트롤 활용
  • 절대좌표
    • 직각좌표계로 컴포넌트의 좌표 지정
    • 제약기반 레이아웃에서 컴포넌트 좌표값 지정
    • 컴포넌트의 크기 지정
    • 픽셀로 지정
    • 백분율로 지정
    • 컴포넌트 자체적인 크기 연산
    • 제약기반에서의 크기 설정
  • 스크롤 관리
  • 정리
    
• 4장. 스타일
  • 스타일 속성의 이해
    • 상속
    • 데이터 타입과 형식
  • 코드 내에 스타일 지정
  • CSS로 적용하는 스타일
    • 외부 스타일시트
    • CSS 선택자
    • HTML과 플렉스 CSS
  • 스타일의 우선순위
  • 액션스크립트를 이용한 스타일 적용
    • 위젯에 적용하는 스타일
    • 스타일 관리자
  • 디자인 뷰에서의 스타일 적용
  • CSS 디자인 뷰
  • 테마
  • 정리
    
• 5장. 그래픽 스킨
  • 비트맵과 벡터의 차이
  • 플렉스 3에 삽입된 그래픽
  • 9-슬라이스 안내선
    • 9-슬라이스 안내선 설정
  • 스킨 가져오기를 위한 명명규칙
    • 일반적인 규칙0
    • 클래스 선택자를 위한 명명0
    • 부속 컴포넌트를 위한 명명0
  • 스킨 가져오기 마법사
  • CSS 디자인 뷰에서의 스킨 작업
  • 스킨 템플릿
  • 통합된 도구의 사용
  • 정리
    
• 6장. 프로그램 스킨
  • 드로잉 API 소개0
    • 선은 어떻게 그려질까1
  • 프로그램 스킨 생성1
    • 기본 클래스 선택1
    • 인터페이스 구현
    • 메소드 재정의
  • 측정과 프로그램 스킨의 이해
  • 정리
    
• 7장. 리스트와 내비게이션 컴포넌트
  • 리스트 기반 컴포넌트
    • List, HorizontalList, TileList
    • Tree
    • DataGrid
    • Menu
  • 아이템 렌더러와 에디터
    • 드롭인 아이템 렌더러/에디터의 사용
    • 인라인에서의 아이템 렌더러/에디터 구현
    • 분리된 컴포넌트로 아이템 렌더러 구현
    • 트리나 메뉴를 위한 아이템 렌더러 구현
  • 내비게이션 컨트롤
    • 버튼바
    • 토글버튼바
    • 탭바
    • 링크바
  • 내비게이션 컨테이너
  • 라벨과 아이콘
  • 내비게이션을 위한 리스트 기반 컴포넌트
  • 정리
    
• 8장. 지시자와 커서
  • 예제에 대한 이해
  • 아이콘
    • 아이콘 구현
    • 아이콘 위치 지정
  • 포커스 테두리
  • 툴팁
    • 툴팁 생성하기
    • 에러팁
    • 데이터팁
    • 스크롤팁
    • 툴팁에 스타일과 스킨 적용
  • 툴팁 매니저
    • 프로그램으로 툴팁 생성하기
    • 툴팁의 타이밍과 움직임
  • 커서
    • 커서 매니저
  • 정리
    
• 9장. 글꼴과 텍스트
  • 관심을 끄는 텍스트
  • 글꼴 커스터마이징
    • 디바이스 글꼴
    • 시스템 글꼴
  • 삽입된 글꼴
    • 로컬 글꼴 적용
    • TTF 파일 삽입
  • SWF에 포함된 글꼴 사용
  • 안티앨리어스 속성의 기능 향상
  • 문자 범위 지정
    • @font-face 구문에서 문자열 범위 지정
    • 플래시에서 문자열 범위 지정
  • CSS 디자인 뷰에서 글꼴 다루기
  • 일관성을 위한 텍스트 스타일 적용
  • 텍스트 작업
    • 텍스트 위치 지정
  • HTML 텍스트 작업
    • HTML 텍스트 지정하기
    • HTML 텍스트 내에서 캐릭터 스타일 지정하기
    • HTML 텍스트용 스타일시트
  • 정리
    
• 10장. 필터와 블렌드
  • 필터
  • 필터 작업
  • 필터 속성
  • 필터 적용
    • filters 태그 사용
    • filters 속성 사용
    • 액션스크립트를 통한 필터 적용
  • 블렌드
    • 블렌드 적용
  • 정리
    
• 11장. 효과와 전환
  • 효과와 전환 사용
    • 생각해야 할 부분
    • 현실세계에서의 시나리오
  • 효과
  • 효과 적용
    • 적용할 컴포넌트 정하기
    • 효과 발생
    • 이벤트의 시작과 끝
    • 효과 커스터마이징
    • 타이밍 조정
    • 실행 조정
  • 여러 효과를 같이 사용0
  • 가속함수
    • 가속함수 사용
    • 커스텀 가속함수 생성
    • 커스텀 가속함수 사용
  • 효과를 같이 사용
  • 데이터 효과
  • 기본 데이터 효과
    • 데이터 효과 이벤트
    • 기본 데이터 효과 사용
  • 커스텀 데이터 효과0
    • 커스텀 데이터 효과 적용0
    • 액션 효과0
    • 필터 속성1
  • 그 밖의 트위닝 선택항목
    • 트위너
    • 부스트워씨 AS3 애니메이션 시스템
    • 키친씽크
  • 전환
  • 뷰 스테이트
    • 뷰 스테이트 생성
    • 오버라이드 클래스
  • 전환 추가
    • 전환의 생성
    • 오버라이드 액션0
    • 전환과 레이아웃1
  • 정리2
    
• 3부 | 다채롭게 활용하는 플렉스
  
• 12장. 플렉스와 플래시의 협업
  • 플렉스 컴포넌트 키트
    • 프레임 라벨 사용
    • 경계선 지정
    • 커스텀 컴포넌트 통째로 만들기
  • 모션 XML
  • 정리
    
• 13장. 에어 애플리케이션의 커스터마이징
  • 시작하기
  • 윈도우 크롬 다루기
    • 플렉스 크롬 커스터마이징
    • 커스텀 윈도우 크롬
  • 커스텀 애플리케이션 아이콘
  • 정리
    
• 4부 | 실습
  
• 4.1 실행 중에 스타일 불러오기
  • 정리
    
• 5.1 플래시에서 그래픽 스킨 만들기
  • 시작하기
  • 이미지 만들기
  • 이미지를 심볼로 변경하기
  • 9-슬라이스 크기조절 안내선 설정하기
  • 플래시 이미지를 플렉스로 가져오기
  • 최종 결과
  • 예제의 활용
  • 플래시에서의 비트맵 이미지 사용
  • 플래시용 스킨 템플릿
  • 정리
    
• 5.2 일러스트레이터에서 그래픽 스킨 만들기
  • 시작하기
  • 이미지 만들기
  • 스킨 이미지를 플렉스로 가져가기
  • 최종 결과
  • 예제의 활용
    • 이미지 만들기
  • 스킨 템플릿의 사용
  • 정리
    
• 5.3 파이어웍스에서 그래픽 스킨 만들기
  • 시작하기
  • 이미지 만들기
  • 스킨을 플렉스로 가져가기
  • 최종 결과
  • 예제의 활용
    • 이미지 만들기
  • 스킨 템플릿의 사용
  • 정리
    
• 5.4 포토샵에서 그래픽 스킨 만들기
  • 시작하기
  • 이미지 만들기
  • 스킨 이미지를 플렉스로 가져가기
  • 최종 결과
  • 예제의 활용
    • 이미지 만들기
  • 스킨 템플릿의 사용
  • 정리
    
• 6.1 프로그램 스킨 만들기
  • 테스트 하네스 설정하기
  • 스킨 클래스 만들기
  • 버튼에 스킨 적용하기0
  • 이미지 그리기
    • updateDisplayList 재정의하기
    • 경계선 그리기
    • 버튼 상태에 따라 채우기
  • 스타일 적용하기0
  • 최종 결과1
  • 예제의 활용1
  • 정리
    
• 7.1 리스트를 이용해 메신저 대화창 만들기
  • 시작하기
  • 애플리케이션 테스트
  • 정리
    
• 7.2 타일리스트를 사용해 사진갤러리 만들기
  • 정리3
    
• 9.1 플래시를 이용해 SWF 파일에 글꼴 삽입하기
  • 정리
    
• 9.2 글꼴을 포함한 CSS 파일을 SWF로 만들기
  • 정리
    
• 9.3 HTML 텍스트용 스타일시트 만들기
  • 정리
    
• 11.1 커스텀 효과 적용하기
  • 정리
    
• 11.2 뷰 스테이트 사이에서 전환 만들기
  • 정리
    
• 12.1 플렉스 컴포넌트 키트를 사용해 그래픽 스킨 만들기
  • 스킨 기본 구조 만들기
  • 스킨 이미지 만들기
  • 전환 효과 만들기
  • 9-슬라이스 안내선 설정하기
  • 플래시 스킨을 플렉스로 가져가기
  • 최종 결과
  • 이미지 만들기
  • 정리
    
• 12.2 플래시 스킨 템플릿 사용하기
  • 정리
    
• 12.3 플렉스 컴포넌트 키트를 이용해 커스텀 컨테이너 만들기
  • 플래시에서 기본 컨테이너 만들기
  • 커스텀 컨테이너를 플렉스로 가져가기
  • 정리
    
• 12.4 모션 XML 사용하기
  • 플렉스에서 준비할 것
  • 정리
    
• 5부 | 부록
  
• A. 스킨과 스타일 도표
• B. 필터 속성 정리
• C. 유용하고 참고할 만한 정보
  • 사용자 경험 디자인
  • 플렉스 스킨과 테마
  • 플렉스 컴포넌트 키트0
  • 플렉스 예제0
  • 플렉스 컴포넌트 커뮤니티1
  • 플렉스 라이브러리와 프레임워크1
  • 도움말2
  • 다운로드
  • 커뮤니티
  • 어도비 블로그
  • 기타 블로그
  • 플렉스/에어 샘플
  • 아이콘
  • 글꼴

[ p146 예제 8-5 아래로 본문 1행 ]
MXML 컴포넌트의 많은 속성처럼 toopTip 속성의 값도 동적으로
→ MXML 컴포넌트의 많은 속성처럼 toolTip 속성의 값도 동적으로

[ p201 예제 11-9 1행 ]
<mx:Sequence id="mySequenceEffect" target="{[myButton,myComboBox]}">
→ <mx:Sequence id="mySequenceEffect" targets="{[myButton,myComboBox]}">

[ p201 예제 11-9 5-8행 ]
<mx:Zoom zoomXFrom=".5"
         zoomXTo="1"
         zoomYFrom=".5"
         zoomYTo="1"/>
↓
<mx:Zoom zoomWidthFrom=".5"
         zoomWidthTo="1"
         zoomHeightFrom=".5"
         zoomHeightTo="1"/>

[ p309 예제 6.1-12 8행 ]
getStyle('upFillColors') || 0x26A7DF, 0x375BF]; → getStyle('upFillColors') || [0x26A7DF, 0x375BF];