웹은 새로운 기술과 함께 끊임없이 진화하고, 사용자의 요구사항은 점점 다양해져 가고 있다. 플래시가 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를 참고하세요).