추가 적립 안내

크리에이티브한 플렉스ㆍ에어 애플리케이션을 만들자!

'에이콘 UX 프로페셔널' 시리즈, 제3권 『비주얼 플렉스 UX 디자인』. 플렉스와 에어에서 탁월하고 풍부한 비주얼 UX 디자인을 만들어내는 비결을 배우게 된다. 누구나 만족할 수 있도록 플렉스 애플리케이션의 가치를 높일 수 있는 기법을 익히고 있다.

이 책은 디자이너와 개발자를 대상으로, 크리에이티브한 플렉스ㆍ에어 애플리케이션을 만드는 방법을 확실히 가르쳐준다. 계획, 디자인, 설계뿐 아니라, 검증된 UI 원칙을 기술적 구현과 함께 설명하고 있다. 스킨, 스타일, 전환, 필터, 그리고 어도비 크리에이티브 스위트 도구를 바탕으로, 이미지를 통해 플렉스 인터페이스를 다루는 방법도 배운다.

특히 플렉스에서 디자인을 접근하는 방법을 가르쳐줄 뿐 아니라, 장점과 단점을 명확하게 보여주고 있다. 적절한 기술을 선택하도록 인도한다. 실무에서 바로 적용이 가능한 예제를 가득 실었다는 것이 특징이다.

〈 소개 〉

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

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

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

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


★ 추천사 ★

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

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

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

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

옥상훈
『예제로 배우는 Adobe 플렉스』 저자
ZDNet UX 컬럼니스트 / 한국 SW 아키텍트 연합회 공동 의장


★ 찬사 ★

어도비 플렉스가 보급되면서 RIA는 더욱 빠르게 발전하고 웹은 변모했다. 개발자가 자신의 애플리케이션을 더욱 두드러지고 돋보이게 만들어 경쟁에서 앞서나갈 수 있는 방법이 무엇인지를 알려주는 책이다.
- 게리 맨검, 제너레이션 네트워크 수석 엔지니어

후안과 앤디는 방대하고 흥미로운 주제를 파고드는 멋진 글을 썼다. 단지 언어 문법을 가르치는 것을 뛰어넘어 풍부한 사용자 경험을 어떻게 만들어낼지를 알게 해주는 책이다.
- R.J 오언, 이펙티브UI 수석 개발자

플렉스 애플리케이션을 한층 빛낼 방법을 시작할 수 있는 환상적인 예제 코드로 가득하다.
- 제프리 하우저, 플렉스쇼 프로듀서

디자인 관점에서 플렉스 애플리케이션 개발을 디자인적인 시각으로 바라보게 해주는 훌륭한 책, 플렉스 개발자라면 반드시 갖고 있어야 할 책이다.
- 숀 무어, 캐노피(Kannopy) 사 플렉스 & 에어 개발자

매우 유명한 플렉스 전문가 2명이 쓴 뛰어난 책이다. 나처럼 디자인 지식이 전무한 사람도 쉽게 이해할 수 있도록 간결하게 정리해놓았다. 개발자 위주의 플렉스 책들이 넘쳐나는 시장에 신선한 자극이 될 것이다.
- 준 하이더, 리얼아이 미디어 수석 개발자, 기술 트레이너

360플렉스 컨퍼런스에서 후안과 앤디의 비주얼 이펙트에 관련된 발표를 처음 봤다. 그렇게 훌륭한 전문 지식을 갖춘 저자들이 책을 쓴다는 소식에 기쁨을 금치 못했다. 오래 전부터 기다려온 바로 그 책이다.
- 레너드 소자, 인터랙티브 크리에이티브 디렉터

초급 개발자든 중급 개발자든 모두가 참고할 수 있는 상세한 설명과 예제가 가득한 책이다.
- 개스 브레이스웨이트, 디자이너/개발자

디자이너에게 필요한 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장. 에어 애플리케이션 꾸미기: 에어는 플렉스 애플리케이션과 동일한 코드를 활용해서 데스크탑 애플리케이션을 만들게 해준다. 하지만 에어 애플리케이션은 데스크탑 환경에 특화되어 적용할 수 있는 추가 기능을 제공한다.

1부. RIA 기초 다지기

1장. 리치 인터넷 애플리케이션
사용자
컨텐츠
사용자 인터랙션
시각적인 영역
색상
모션
타이포그래피
아이콘
레이어링과 심도
추가적인 요소
정리

2장. 어도비 플렉스와 에어
플렉스 3.0 프레임워크
동적인 레이아웃
확장 가능한 시각적인 컴포넌트
시각적 효과
모션 기능 활용
플렉스 애플리케이션 개발
플렉스 3 SDK와 MXML 컴파일러
어도비 크리에이티브 스위트
플렉스 애플리케이션 배포
정리

2부. 플렉스 3 프레임워크

3장. 동적인 레이아웃
플렉스 레이아웃의 이해
자리배치 자동화
선형 레이아웃
다차원 레이아웃
여백과 간격
자동 레이아웃에서 제외되는 컴포넌트
Spacer 컨트롤 활용
절대좌표
직각좌표계로 컴포넌트의 좌표 지정
제약기반 레이아웃에서 컴포넌트 좌표값 지정
컴포넌트의 크기 지정
픽셀로 지정
백분율로 지정
컴포넌트 자체적인 크기 연산
제약기반에서의 크기 설정
스크롤 관리
정리

4장. 스타일
스타일 속성의 이해
상속
데이터 타입과 형식
코드 내에 스타일 지정
CSS로 적용하는 스타일
외부 스타일시트
CSS 선택자
HTML과 플렉스 CSS
스타일의 우선순위
액션스크립트를 이용한 스타일 적용
위젯에 적용하는 스타일
스타일 관리자
디자인 뷰에서의 스타일 적용
CSS 디자인 뷰
테마
정리

5장. 그래픽 스킨
비트맵과 벡터의 차이
플렉스 3에 삽입된 그래픽
9-슬라이스 안내선
9-슬라이스 안내선 설정
스킨 가져오기를 위한 명명규칙
일반적인 규칙
클래스 선택자를 위한 명명
부속 컴포넌트를 위한 명명
스킨 가져오기 마법사
CSS 디자인 뷰에서의 스킨 작업
스킨 템플릿
통합된 도구의 사용
정리

6장. 프로그램 스킨
드로잉 API 소개
선은 어떻게 그려질까
프로그램 스킨 생성
기본 클래스 선택
인터페이스 구현
메소드 재정의
측정과 프로그램 스킨의 이해
정리

7장. 리스트와 네비게이션 컴포넌트
리스트 기반 컴포넌트
List, HorizontalList, TileList
Tree
DataGrid
Menu
아이템 렌더러와 에디터
드롭인 아이템 렌더러/에디터의 사용
인라인에서의 아이템 렌더러/에디터 구현
분리된 컴포넌트로 아이템 렌더러 구현
트리나 메뉴를 위한 아이템 렌더러 구현
네비게이션 컨트롤
버튼바
토글버튼바
탭바
링크바
네비게이션 컨테이너
라벨과 아이콘
네비게이션을 위한 리스트 기반 컴포넌트
정리

8장. 지시자와 커서
예제에 대한 이해
아이콘
아이콘 구현
아이콘 위치 지정
포커스 테두리
툴팁
툴팁 생성하기
에러팁
데이터팁
스크롤팁
툴팁에 스타일과 스킨 적용
툴팁 매니저
프로그램으로 툴팁 생성하기
툴팁의 타이밍과 움직임
커서
커서 매니저
정리

9장. 글꼴과 텍스트
관심을 끄는 텍스트
글꼴 커스터마이징
디바이스 글꼴
시스템 글꼴
삽입된 글꼴
로컬 글꼴 적용
TTF 파일 삽입
SWF에 포함된 글꼴 사용
안티앨리어스 속성의 기능 향상
문자 범위 지정
@font-face 구문에서 문자열 범위 지정
플래시에서 문자열 범위 지정
CSS 디자인 뷰에서 글꼴 다루기
일관성을 위한 텍스트 스타일 적용
텍스트 작업
텍스트 위치 지정
HTML 텍스트 작업
HTML 텍스트 지정하기
HTML 텍스트 내에서 캐릭터 스타일 지정하기
HTML 텍스트용 스타일시트
정리

10장. 필터와 블렌드
필터
필터 작업
필터 속성
필터 적용
filters 태그 사용
filters 속성 사용
액션스크립트를 통한 필터 적용
블렌드
블렌드 적용
정리

11장. 효과와 전환
효과와 전환 사용
생각해야 할 부분
현실세계에서의 시나리오
효과
효과 적용
적용할 컴포넌트 정하기
효과 발생
이벤트의 시작과 끝
효과 커스터마이징
타이밍 조정
실행 조정
여러 효과를 같이 사용
가속함수
가속함수 사용
커스텀 가속함수 생성
커스텀 가속함수 사용
효과를 같이 사용
데이터 효과
기본 데이터 효과
데이터 효과 이벤트
기본 데이터 효과 사용
커스텀 데이터 효과
커스텀 데이터 효과 적용
액션 효과
필터 속성
그 밖의 트위닝 선택항목
트위너
부스트워씨 AS3 애니메이션 시스템
키친씽크
전환
뷰 스테이트
뷰 스테이트 생성
오버라이드 클래스
전환 추가
전환의 생성
오버라이드 액션
전환과 레이아웃
정리

3부. 다채롭게 활용하는 플렉스

12장. 플렉스와 플래시의 협업
플렉스 컴포넌트 키트
프레임 라벨 사용
경계선 지정
커스텀 컴포넌트 통째로 만들기
모션 XML
정리

13장. 에어 애플리케이션의 커스터마이징
시작하기
윈도우 크롬 다루기
플렉스 크롬 커스터마이징
커스텀 윈도우 크롬
커스텀 애플리케이션 아이콘
정리

4부. 실습

4.1. 실행 중에 스타일 불러오기
정리

5.1. 플래시에서 그래픽 스킨 만들기
시작하기
이미지 만들기
이미지를 심볼로 변경하기
9-슬라이스 크기조절 안내선 설정하기
플래시 이미지를 플렉스로 가져오기
최종 결과
예제의 활용
플래시에서의 비트맵 이미지 사용
플래시용 스킨 템플릿
정리

5.2. 일러스트레이터에서 그래픽 스킨 만들기
시작하기
이미지 만들기
스킨 이미지를 플렉스로 가져가기
최종 결과
예제의 활용
이미지 만들기
스킨 템플릿의 사용
정리

5.3. 파이어웍스에서 그래픽 스킨 만들기
시작하기
이미지 만들기
스킨을 플렉스로 가져가기
최종 결과
예제의 활용
이미지 만들기
스킨 템플릿의 사용
정리

5.4. 포토샵에서 그래픽 스킨 만들기
시작하기
이미지 만들기
스킨 이미지를 플렉스로 가져가기
최종 결과
예제의 활용
이미지 만들기
스킨 템플릿의 사용
정리

6.1. 프로그램 스킨 만들기
테스트 하네스 설정하기
스킨 클래스 만들기
버튼에 스킨 적용하기
이미지 그리기
updateDisplayList 재정의하기
경계선 그리기
버튼 상태에 따라 채우기
스타일 적용하기
최종 결과
예제의 활용
정리

7.1. 리스트를 이용해 메신저 대화창 만들기
시작하기
애플리케이션 테스트
정리

7.2. 타일리스트를 사용해 사진갤러리 만들기
정리

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. 유용하고 참고할 만한 정보
사용자 경험 디자인
플렉스 스킨과 테마
플렉스 컴포넌트 키트
플렉스 예제
플렉스 컴포넌트 커뮤니티
플렉스 라이브러리와 프레임워크
도움말
다운로드
커뮤니티
어도비 블로그
기타 블로그
플렉스/에어 샘플
아이콘
글꼴
그래픽