▣ 이 책에 대해서

디자이너의 눈높이에 맞춘 국내 유일의 플렉스 지침서!

현재 인터넷 환경은 항상 새로움을 원하는 사용자의 욕구에 부응하기 위해 지금 이 순간에도 끊임없이 진화를 거듭하고 있습니다. 플렉스 2 또한 이러한 흐름에 발맞추어 출시되었으며, 현재 많은 개발자들과 디자이너들이 플렉스의 획기적인 기능에 주목하고 있습니다.
「디자이너를 위한 플렉스 2 실무 테크닉 113」는 웹 디자이너의 눈높이에 맞추어 구성한 플렉스 활용 지침서로서, 플렉스 빌더에 대한 이론 및 고급 기능의 소개는 물론 블로그와 영화 예매 사이트의 제작을 통해 현장 실무 능력을 배양할 수 있는 최적의 교재입니다. 플렉스를 이용하여 안정적이고 화려한 웹 사이트를 제작하고자 하는 디자이너라면,「디자이너를 위한 플렉스 2 실무 테크닉 113」을 이용하여 자신의 크리에이티브를 마음껏 뽐내 보시기 바랍니다.

▣ 이 책의 특징

플렉스를 단순히 개발자를 위한 프로그램으로 생각하는 사람들이 많지만, 플렉스는 개발자뿐만 아니라 디자이너에게도 매우 매력적인 툴입니다. 다시 말해서 플렉스는 멋지고 화려한 인터페이스와 자유로운 레이아웃 구성, 원하는 색과 이미지를 일괄적으로 바꿀 수 있는 마술 같은 툴입니다. 획일화된 웹 사이트를 벗어나 획기적인 변화를 꿈꾸는 디자이너를 위해 ‘디자이너가 알아야 할 플렉스의 모든 것’을 이 한 권에 담았습니다.

이 책은 다음과 같은 특징을 가지고 있습니다.

첫째, 웹 2.0과 X-Internet 등 웹 트렌드의 개념을 잡아 줍니다.
웹 2.0과 X-Internet 등과 같이 우리 주위에서 자주 듣는 용어지만, 어렵게만 느껴졌던 개념들을 누구나 이해하기 쉽도록 설명하였습니다.

둘째, 디자이너에게 필요한 플렉스 빌더를 기본부터 설명합니다.
플렉스와 액션스크립트를 이용하여 어플리케이션을 만들기 위한 최상의 개발 도구인 플렉스 빌더의 용어와 구성, 사용법 등을 상세하게 소개함으로써 프로그램을 처음 접하는 입문자들도 별 어려움 없이 사용할 수 있도록 배려하였습니다.

셋째, 세련된 디자인 예제를 통해 실무 감각을 높입니다.
플렉스를 도입하여 성공한 사례를 소개하고, 실무에 많이 사용되는 여러 가지 기본 폼을 제작해 봄으로써 업무에 적극 응용할 수 있도록 구성하였습니다.

▣ 저자 소개

김지현

현재 프라임 정보통신 연구소 디자인팀의 팀장으로, 웹 사이트 제작 PM 및 컨설팅을 맡고 있다. 「뿌리가 튼튼한 나모 웹 에디터 5.x」를 집필하였으며, 코즈니 플렉스 쇼핑몰 구축과 군인 공제회 웹 사이트를 제작하였다. 또, 플래시 리조트 예약 시스템, 테크노마트 플래시 매장 안내 시스템을 제작하였으며, SK와 삼성 등 다수의 웹 사이트 제작을 담당하였다.

채준우

현재 프라임 정보통신 연구소에 재직 중이며, 그룹 정보화 사업 구축을 담당하고 있다. 하나은행, 기업은행, 한미은행 등의 인터넷 뱅킹 UI 컴포넌트를 제작하였고, 대한통운 물류 시스템과 LG CYON 대리점 관리 시스템을 개발하였다.

김네아

현재 [사람과사람] 기획 1팀의 기획자로,「3ds Max 캐릭터 디자인 실무 테크닉 39」, 「월급쟁이보다 10배 빨리 부자 되는 쇼핑몰 창업&운영 289」를 집필하였으며, 「엑셀 기능+함수 실무 테크닉 135」, 「성공과 실패를 결정하는 포토샵 CS2」, 「일러스트레이터 디자인 실무 테크닉 61」 등을 기획하였다.

▣ 목차

Part 01. 웹 2.0을 선도할 Flex 2
Lesson 01. 웹 2.0 구현을 위한 Flex 2
 <> HTML의 한계를 극복한 Flex
 <> Flex 도입 성공 사례
Lesson 02. Flex 2 인터페이스 살펴보기
 <> Flex 2 SDK
 <> Chart
 <> FDS
 <> Flex Builder
Lesson 03. X-Internet과 웹 2.0의 결합
 <> 차세대 웹의 혁명, X-Internet
 <> 웹 트렌드를 주도하는 웹 2.0
 <> 차세대 어플리케이션, RIA
 <> Flex의 뿌리, Flash
 <> 선의의 경쟁자, Ajax
Lesson 04. 상상을 현실로 바꾼 Flex 사이트
 <> 제품 맞춤형 서비스
 <> 신속한 영화 예매, 예약 서비스
 <> 구매에서 결제까지, 더욱 편리해진 쇼핑몰
        <> 실시간 데이터 로딩 사이트
 <> 비주얼한 지리 정보 서비스
Lesson 05. Flex Builder 2 설치하기
 <> Stand-Alone 방식으로 설치하기
 
Part 02. Flex Builder 사용을 위한 기본 다지기
Lesson 01. Flex 용어와 사용법 익히기
 <> 워크벤치(Workbench)
 <> 퍼스펙티브(Perspective)
 <> 에디터(Editors)
 <> 뷰(Views)
 <> 워크스페이스(Workspace)
 <> 프로젝트(Project)
Lesson 02. Flex의 구성 이해하기
 <> 에디터(Editors)
 <> 네비게이터 뷰(Navigator View)
 <> 아웃라인 뷰(Outline View)
 <> 컴포넌트 뷰(Components View)
 <> 프러블럼 뷰(Problems View)
 <> 스테이트 뷰(States View)
 <> 프로퍼티 뷰(Properties View)
Lesson 03. 메뉴와 툴바 살펴보기
 <> [File] 메뉴
 <> [Edit] 메뉴
 <> [Source] 메뉴
 <> [Project] 메뉴
 <> [Run] 메뉴
 <> [Window] 메뉴
 <> [Help] 메뉴
 <> 툴바
Lesson 04. Flex 컴포넌트 속성 이해하기
 <> 컨트롤 컴포넌트
 <> 레이아웃 컨테이너
 <> 네비게이터 컨테이너
 
Part 03. Flex 고급 기능 익히기
Lesson 01. Flex 어플리케이션에 스타일 적용하기
 <> 스타일을 적용하는 세 가지 방법
 <> 스타일의 핵심, CSS 집중 탐구
Lesson 02. 다이내믹한 변화를 위한 Flex 이펙트
 <> Flex 이펙트로 모션 만들기
 <> Effect Trigger 활용법 알아보기
 <> 간단한 코드 삽입으로 Effect 모션 만들기
Lesson 03. Flex 어플리케이션 개발의 필수, 액션스크립트
 <> ActionScript 사용을 위한 기본 문법 익히기
  
Part 04. 실전 프로젝트 - 회원 관리 시스템 만들기
Lesson 01. 레이아웃과 Form 익히기 - 로그인 페이지
 <> 새 프로젝트 만들기
 <> HBox와 VBox 쓰임에 맞게 선택하기
 <> Form 형태 만들기
Lesson 02. Flex Form 마스터하기 - 회원 가입 페이지
 <> TextInput과 Button으로 페이지 만들기
Lesson 03. 테이블과 스테이트 완전정복 - 회원 검색 페이지
 <> DataGrid로 레이아웃 만들기
 <> States로 클릭 시 펼쳐지거나 숨겨지는 화면 만들기

Part 05. 실전 프로젝트 - 채팅 응용 어플리케이션 만들기
Lesson 01. Flex의 핵심 테이블, DataGrid 이해하기 - 대화방 리스트
 <> 새 파일에 백그라운드 이미지 넣기
 <> 외부 이미지 버튼 만들기
 <> VBox와 HBox로 정렬된 레이아웃 그리기
 <> DataGrid 스타일 활용하기
 <> DataGrid 타이틀을 이미지로 만들기
 <> DataGrid 타이틀 구분선 교체하기
 <> 테이블 디자인에 맞는 스크롤을 CSS로 바꾸기
 <> 정렬된 Form 레이아웃 만들기
 <> 대기실 사용자 목록 만들기
Special. 실력을 업그레이드해 주는 Bonus

Part 06. 실전 프로젝트 - 온라인 도우미 시스템 만들기
Lesson 01. 파격적인 레이아웃 시도하기 - 고객 질문 페이지
 <> 형식이 자유로운 Canvas 구성하기
 <> 텍스트 배열을 색다르게 하기
 <> CSS로 스타일 확 바꾸기
 <> CSS로 내가 원하는 글꼴 바꾸기
 <> 마우스에 반응하는 모션이펙트 만들기
Lesson 02. 링크 페이지 만들기 - 고객 답변 페이지
 <> mxml Component로 링크 페이지 만들기
 <> 이미지와 텍스트로 구성된 답변 페이지 만들기
 <> 내가 원하는 형태로 스크롤 바꾸기
        <> 화면 이동 모션 적용하기
Special. 실력을 업그레이드해 주는 Bonus

Part 07. 실전 프로젝트 - 웹 2.0 블로그 만들기
Lesson 01. 브라우저 크기에 맞게 블로그 레이아웃 만들기
 <> 브라우저 크기에 따라 달라지는 레이아웃 만들기
 <> 상단부에 로그인 만들기
 <> CSS를 만들어 Text와 TextInput 스타일 바꾸기
Lesson 02. HDividedBox, VDividedBox로 영역 나누어 콘텐츠 채우기
 <> HDividedBox로 크기 조절이 가능한 레이아웃 나누기
 <> CSS를 활용하여 레이아웃 만들기
 <> VBox로 리스트 만들기
 <> Datechooser로 달력 만들기
 <> VDividedBox로 세로 영역 구분하기
 <> Tab 방식 분류별 리스트를 만들기
 <> Flash 삽입하고 내용 글 만들기
 <> 스크롤과 달력, 탭을 내 맘대로 디자인하기
Lesson 03. CSS로 새로운 느낌의 블로그 만들기
 <> 색과 모양을 바꿔 다른 스타일 만들기
 <> 기존 디자인을 심플하게 바꾸기
Lesson 04. Visible로 HTML 기반 사이트와 차별화하기
 <> 클릭 한 번으로 콘텐츠 보여주기
Lesson 05. 이펙트 모션으로 Flash 흉내내기
 <> 마우스 클릭 시 튕기듯 이동하는 효과주기
 <> 마우스 오버 시 Glow가 생기는 효과주기
 <> 마우스 오버 시 글자가 커지는 효과주기
 <> 마우스 클릭 시 흐려지는 블러 효과주기
 <> 마우스 클릭 시 화려한 마스크 효과주기

Index  

▣ 부문별 요약

Part 01. 웹 2.0을 선도할 Flex 2
인터넷을 만드는 웹 도구인 HTML만으로는 표현하기 힘든 것이 많습니다. 플렉스는 이러한 HTML의 한계를 극복할 수 있는 것은 물론 매출 확대 및 원가 절감을 실현할 수 있는 획기적인 툴입니다. 먼저, 플렉스를 도입하여 성공한 사례를 소개하고, X-Internet과 웹 2.0 등의 웹 트렌드와 함께 플렉스의 인터페이스에 대해 알아봅니다.

Part 02. Flex Builder 사용을 위한 기본 다지기
플렉스 빌더 1.5 버전은 드림위버 기반으로, 플렉스 빌더 2.0 버전은 이클립스를 기반으로 구성되어 있습니다. 이런 차이에서 오는 몇 가지 용어와 사용법을 익힌 다음, 빌더의 구성과 메뉴, 툴바 등에 대해 알아봅니다.

Part 03. Flex 고급 기능 익히기
웹 2.0의 등장에 따라 앞으로 만들어지는 어플리케이션에는 사용자가 여러 가지 콘텐츠를 이용하여 원하는 대로 화면을 구성하는 기능이 포함되어야 할 것입니다. 이를 위해 플렉스의 스타일시트 사용법에 대해 알아보고, 다이내믹한 변화를 위해 플렉스가 기본으로 제공하는 이펙트에 대해서도 알아봅니다.

Part 04. 실전 프로젝트 - 회원 관리 시스템 만들기
웹 사이트 구축 시 필수적으로 포함되는 로그인 페이지와 회원 가입 페이지를 만드는 과정을 통해 간단한 레이아웃과 각종 폼을 익힙니다. 또한 회원 검색 페이지 예제를 통해 상호 응답형 어플리케이션에서 폼 형태 만큼이나 많이 활용되는 테이블과 스테이트를 제작해 봅니다.

Part 05. 실전 프로젝트 - 채팅 응용 어플리케이션 만들기
웹 어플리케이션을 개발할 때에 플렉스의 화려한 인터페이스를 부각하기 위해서는 디자인적인 요소가 무엇보다 중요합니다. 이를 위해 어플리케이션 UI 구조를 가진 채팅 어플리케이션을 만들어 봅니다.

Part 06. 실전 프로젝트 - 온라인 도우미 시스템 만들기
고객 질문 페이지와 답변 페이지의 예제를 통해 레이아웃을 자유롭게 구성하고, 원하는 폰트를 이용하여 디자인하며, 스크롤 및 드롭다운 등의 폼 형식을 간단하게 바꾸는 등의 파격적인 레이아웃을 시도해 봅니다.

Part 07. 실전 프로젝트 - 웹 2.0 블로그 만들기
플렉스의 장점을 가장 잘 활용할 수 있는 웹 사이트를 꼽는다면, 단연 ‘블로그 시스템’이라고 할 수 있습니다. 사용자가 배경, 레이아웃, 색, 글자 등을 바꿀 수 있는 웹 2.0 블로그를 제작하기 위해 브라우저 크기에 맞게 웹 블로그를 제작하는 방법과 HDividedBox & VDividedBox의 사용법 및 탭 이용법에 대해 알아봅니다.