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

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

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

책에서 다루는 범위

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

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

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

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

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

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

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

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

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

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

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

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

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

2004년 월간지 마이크로소프트웨어에 소개된 '플렉스'를 처음 접한 후, 지루한 작업과 단순한 반복의 연속이라 생각했던 웹의 가치를 새롭게 발견할 수 있지 않을까 하는 호기심에 발을 담그기 시작한 것이 오늘날까지 오게 됐습니다. 처음 담당한 플렉스 프로젝트는 플렉스를 직접 다루는 것이 아닌 SAP의 비주얼 컴포저(http://www.sdn.sap.com/irj/sdn/nw-vc)라는 도구로 화면에 자료를 표현하는 작업이었습니다. 당시에는 작업자가 플로우 차트와 유사한 형식으로 업무를 설계하면 플렉스 1.5 SDK를 기준으로 플렉스 코드를 내부적으로 생성해주고 이를 다시 swf로 컴파일해서 화면에 보여주는 조금은 낯선 작업이었습니다. 다양한 데이터를 효율적으로 배치하는 것이 주된 목적이었기 때문에 기능성, 창의성, 시각적인 부분을 표현하는 데 제한이 많았습니다. 하지만 고객은 브랜드 가치를 극대화할 수 있을 만한 시각적 만족을 원했고 이를 충족시키기 위해 내부적으로 코드를 생성하는 모듈을 건드려야 하는 어려움이 있었습니다. 이 때문에 잘 동작하던 기능이 오작동하거나 해당 업무만을 위한 하드코딩이 들어가는 등 난관이 많은 프로젝트였습니다. 물론 기본적으로 플렉스의 UI를 사용하기 때문에 상대적으로는 만족스러운 화면을 만들 수 있었지만, 아무리 뛰어난 디자이너의 손길을 거쳐도 최종적으로 산출되는 결과물에서 고객이 원하는 이미지를 구현하기가 어려웠습니다.

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

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

디자인 작업 결과가 플렉스에서 충실하게 구현되기를 원하는 디자이너와 개발자들에게 필요한 내용을 다루는 책으로서, UX 디자인 이론과 UI 컴포넌트의 시각적 구현에 대해 설명한다. 디자이너와 개발자는 플렉스에서 구현할 수 있는 섬세한 사용자 정의 내용을 익힐 수 있다. 플렉스 개발 경험이 없더라도 플렉스에서 시각적 효과를 어떻게 구현할 수 있는지 충분히 이해할 수 있을 것이다.<br/><br/>초중급자를 위한 서적으로서 누구나 쉽게 이해할 수 있다. 저자들도 책을 집필하며 프로젝트를 진행하면서 발생하는 다양한 이슈에 대한 해결책을 찾을 수 있었다. 여러분의 프로젝트에 도움이 되는 알찬 참고자료가 되기를 바란다.<br/><br/>앞부분에서는 플렉스 기능을 소개하고 비주얼 UX를 만드는 디자인 기초를 설명한다. 나머지 장에서는 플렉스에서 시각적인 커스터마이징을 다루는 방법과 실제 구현 방법에 대한 기술적 내용을 상세히 다룬다. 각 장에서 다루는 기술은 서로 보충적인 관계이기 때문에 앞 장에서 설명한 내용을 이해하려면 처음부터 순서대로 읽는 편이 낫겠지만, 읽고 싶은 부분부터 시작해도 괜찮다.<br/><br/>1장. 리치 인터넷 애플리케이션: 플렉스 애플리케이션의 최종적인 모습을 만드는 데 디자인은 막중한 역할을 수행한다. 디자인 기초와 애플리케이션의 최종 디자인을 만들면서 고려할 점을 제시한다.<br/><br/>2장. 어도비 플렉스와 에어: 어도비 플렉스와 에어(AIR, Adobe Integrated Runtime)의 개요를 소개한다. 2장은 이후에 다루는 기술적인 부분의 기초가 되는 내용이다.<br/><br/>3장. 동적인 레이아웃: 레이아웃은 애플리케이션에서 시각적인 골격을 구성한다. 다양한 컴포넌트를 이해하고 어떻게 다루는지 알아본다.<br/><br/>4장. 스타일: 스타일 속성을 사용해 컴포넌트를 빠르고 쉽게 재정의할 수 있다. 스타일은 사용자 인터페이스를 재정의할 때 나머지 작업을 위한 기반이 된다.<br/><br/>5장. 그래픽 스킨: 컴포넌트에 스타일을 적용하는 것만으로 부족한 부분을 좀 더 섬세하게 다듬어줄 수 있다. 어도비 일러스트레이터, 플래시, 파이어웍스, 포토샵 같은 익숙한 그래픽 도구를 써서 플렉스 애플리케이션의 모습을 꾸며 본다.<br/><br/>6장. 프로그램 스킨: 프로그램을 가지고 이미지를 그리는 것은 컴포넌트에 강력함을 더해주지만 다루기는 그래픽 스킨보다 더 까다롭다. 프로그램 스킨의 강력함을 어떻게 활용할지 배우고 커스텀 인터페이스를 만들어본다.<br/><br/>7장. 리스트와 내비게이션 컴포넌트: 리스트와 내비게이션 컨트롤에 아이템 렌더러를 추가하고 데이터를 어떻게 표시할지에 대한 내용을 다룬다. 리스트와 내비게이션 컴포넌트는 주로 데이터를 다루고 작은 부품들이 모여 만들어지기 때문에 독특한 커스터마이징 형식을 만날 수 있다.<br/><br/>8장. 지시자와 커서: 애플리케이션은 사용자가 목적을 달성할 수 있도록 적절한 안내를 제공해야 한다. 필요에 따라 지시자와 커서를 사용하면 사용자를 바른 방향으로 이끌 수 있다.<br/><br/>9장. 글꼴과 텍스트: 텍스트를 표현하는 방법에 따라 정보뿐 아니라 감성적인 역할을 어떻게 하는지 알아본다. 조직화되고 잘 만들어진 텍스트는 플렉스 애플리케이션 내에서 사용자에게 정보를 손쉽게 전달해준다.<br/><br/>10장. 필터와 블렌드: 레이어와 심도의 개념을 더하면 애플리케이션의 다채로움이 한층 더해진다. 플렉스에서는 다양한 목적으로 컴포넌트에 적용할 수 있는 다양한 필터와 블렌드 효과를 제공한다.<br/><br/>11장. 효과와 전환: 플래시 플레이어에서 동작하는 플렉스 애플리케이션은 유연하고 몰입할 수 있는 경험을 만들기 위해 모션의 장점을 활용할 수 있다. 다양한 형식으로 모션기반의 특징을 활용할 수 있는 방법을 배운다.<br/><br/>12장. 플렉스와 플래시 협업: 플래시와 플렉스는 액션스크립트 3와 플래시 플레이어라는 공통 기반을 갖고 있다. 플래시 CS3와 플러그인으로 커스텀 컴포넌트와 스킨, 컨테이너, 모션을 만들 수 있다.<br/><br/>13장. 에어 애플리케이션 꾸미기: 에어는 플렉스 애플리케이션과 동일한 코드를 활용해서 데스크탑 애플리케이션을 만들게 해준다. 하지만 에어 애플리케이션은 데스크탑 환경에 특화되어 적용할 수 있는 추가 기능을 제공한다.

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

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

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

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

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

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

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