FLEX 2 제품구성과 FLEX builder 2 사용법 홍성원 한국어도비시스템즈기술영업부차장 웹 2.0 이라는화두와함께어플리케이션의사용자인터페이스에대한중요성이더욱강조되고있다. 웹 2.0의대표적인성공사례로꼽히는구글 (www.google.com) 도구 글맵이나 Gmail 서비스에서드래그앤드랍같은기존웹어플리케이션에서는볼수없었던편리한인터페이스를제공함으로써다른사이트와의차별화를꾀하고있다. 이처럼효과적이고편리한사용자인터페이스는어플리케이션의성공여부를결정짓는핵심요소라해도과언이아니다. 어도비의 FLEX는벡터그래픽기술인 Flash 기술을기반으로웹어플리케이션에 Flash 형태의화려한 UI를결합시켜사용자경험을크게향상시킬수있는리치인터넷어플리케이션개발도구이다. 이번글에서는 2006년 7월에출시된 FLEX 2 제품구성과개발도구인 FLEX Builder 2 사용법에대해자세히알아보도록하겠다. 다양한컴포넌트로구성된 FLEX 2 Flash Player 9 FLEX로구축된어플리케이션은바이트코드로컴파일된후 Flash Player에서실행된다. Flash Player는전세계적으로사용되고있는보편적인플러그인으로, FLEX 어플리케이션이다양한브라우저버전과 OS 환경에서일관적으로실행될수있도록지원하는 FLEX 제품군의핵심요소중하나다. 이번에 FLEX 2와함께새롭게출시된 Flash Player 9은엔터프라이즈어플리케이션실행에최적화된것이특징으로, 클라이언트단에서의데이터처리속도, just in time 방식의컴파일러, 효과적인메모리관리등의기능추가로성능이획기적으로향상됐다. FLEX Software Development Kit(SDK) 2 FLEX 2가출시되면서가장크게변화된것중하나는 FLEX SDK 2가무료로제공된다는점이다. FLEX SDK 2는 FLEX 프레임워크 (100여개의 FLEX 컴포넌트 ) 와컴파일, 디버깅을위한각종명령줄유틸리티로구성되어있다. 기존에비용때문에 FLEX 어플리케이션개발을망설였던개발자들도무료로배포되는 FLEX SDK 2에서제공되는 FLEX 클래스라이브러리와컴파일러, 디버거를사용해부담없이 FLEX 개발을시작할수있다. FLEX 2 제품구성과 FLEX builder 2 사용법 1/11
FLEX Builder 2 FLEX Builder 2는 FLEX SDK 2와 FLEX Data Service 2를이용해 FLEX 어플리케이션을개발할수있는통합개발환경이다. FLEX Builder 2는이클립스기반으로구성되어표준기반의프로그래밍프레임워크를제공하며개발자들은익숙한환경에서코딩, 디버깅, 사용자인터페이스디자인등의주요개발작업을수행할수있다. FLEX Data Service 2 FLEX SDK 2 기능에 FLEX Data Service 2를추가하면기존의 response/request 모델을뛰어넘는새로운차원의어플리케이션을구축할수있다. FLEX Data Service 2의주요기능은다음과같다. 실시간데이터푸시, 퍼블리시 / 가입메시징, OCC 지원 클라이언트와서버간바이너리형태로대용량데이터전송 클라이언트와서버간데이터동기화를자동화하여개발생산성증대 FLEX Charting 2 FLEX Charting 2에는가로막대형, 파이형, 선형, 세로막대형, 영역형, 거품형, 촛대형, 원형, 분산형, HLOC(High-Low Open Close) 차트가포함되어있으며이를통해사용자요구사항에맞는차트를만들수있다. FLEX Charting 2는별도구매하거나 FLEX Builder 2 추가옵션으로구매할수있다. FLEX 2 제품구성과 FLEX builder 2 사용법 2/11
FLEX 2 개발환경의 7 가지장점 < 그림 1> FLEX 2 제품군 그러면이러한 FLEX 제품군을사용해서어플리케이션을개발했을때의장점은무엇이있을까? 1. 사용자경험이향상된다일반웹어플리케이션이나기업용웹어플리케이션의사용자인터페이스를 Flash 기반의편리하고유려한컴포넌트를사용해재구성할수있어, 사용자가보다편리하게어플리케이션을사용할수있도록어플리케이션을구성할수있다. 2. RIA(Rich Internet Application) 개발을위한강력한개발환경을제공한다 FLEX 는일반적인디자인패턴을지원하는표준기반프로그래밍언어와개발생산성을고려한 이클립스기반통합개발환경을제공함으로개발자들이신속하게 RIA 를개발할수있다. 3. Flash Player 9의호환성이보장된다 FLEX 어플리케이션은 Flash Player 9에서실행되기때문에클라이언트단에별도의소프트웨어를설치할필요가없다. 또한 Flash Player 9는다양한브라우저와 OS 환경을지원하므로개발자들은브라우저호환성에대해고민할필요가없다. 4. FLEX Data Service 2를이용한견고한어플리케이션구축이가능하다 FLEX Data Service 2를사용하면데이터동기화및실시간데이터푸시 (Push) 등의새로운차원의엔터프라이즈어플리케이션을구축할수있다. FLEX Data Service 2에서제공되는메시지서비스는네트워크가잠깐끊어졌다가다시연결되었을때도계속해서동작할수있는 OCC를지원하기때문에더욱견고한어플리케이션을구축할수있다. 5. 데스크탑애플리케이션처럼쉽게사용할수있다 Flash Player 에서실행되는 FLEX 어플리케이션은데스크탑어플리케이션처럼구동가능해, 여러 개의화면을이동할수있고서버로부터계속페이지를로드할필요가없다. FLEX 2 제품구성과 FLEX builder 2 사용법 3/11
6. 표준언어를사용한다 FLEX 어플리케이션을개발하는데사용되는언어인 MXML과 ActionScript는표준기술에맞춰설계되었다. MXML은 XML 호환언어로 CSS(Cascading Style Sheets) level 1 스펙기반으로스타일을구현하고 W3C DOM level 3 이벤트스펙기반으로이벤트모델을구현할수있다. Action Script는객체지향프로그래밍모델을지원하는 ECMASciprt 기반언어이며 FLEX 서버는표준 J2EE 플랫폼이나서블릿컨테이너상에서실행된다. 7. 브라우저별로개발할필요가없다 Flash Player는다양한브라우저와 OS 환경에서동일하게동작하므로 Flash Player에서실행되는 FLEX 어플리케이션역시다양한브라우저와 OS 환경에서동일하게동작한다. 개발자는브라우저별로어플리케이션을따로제작하는번거로움에서벗어날수있으며하나의어플리케이션으로다양한환경의사용자에게일관된경험을제공할수있다. FLEX Builder 2의사용법그러면이제 FLEX 2 제품군중에서개발자들이사용하는통합개발환경인 FLEX Builder 2의사용법에대해살펴보도록하자. FLEX Builder 2는 FLEX 2 프레임워크와 Flash API를사용한어플리케이션개발을지원하는통합개발환경이다. 드림위버 (Dreamweaver) 기반이었던 FLEX Builder 1.5와달리, FLEX Builder 2는이클립스기반으로구축되었기때문에개발자들이보다친숙하게 FLEX 어플리케이션을코딩, 디자인, 디버깅할수있다. FLEX Builder 2에는 Standard 버전과 FLEX 2 Charting을포함한버전두종류가있으며각버전은단독설치및플러그인형태설치의 2가지설치옵션을제공한다. 단독설치옵션은 FLEX 어플리케이션과 ActionScript 3 어플리케이션작성을위해특별히만들어진이클립스와 FLEX Builder 플러그인의통합패키지이다. 또한플러그인옵션은이미이클립스를사용하고있는사용자들을위한옵션으로, 기존에사용하고있는이클립스에 FLEX Builder 플러그인을추가하는형태다. FLEX Builder 2 의 Start Page 그러면단독설치옵션으로설치한 FLEX Builder 2 화면을보면서각세부기능을살펴보도록하 FLEX 2 제품구성과 FLEX builder 2 사용법 4/11
자. 아래의 < 그림 2> 는 FLEX Builder 2 를설치하고처음실행했을때뜨는 Start Page 화면이다. < 그림 2> FLEX Builder 2 의 Start Page 이화면을통해다음과같은도움말및정보를확인할수있다. How FLEX Works - FLEX 어플리케이션을작성할때알아야할기본적인 6가지도움말설명 FLEX Component Explorer - FLEX에서제공하는다양한컴포넌트의실행및코드샘플제공 FLEX Style Explorer - FLEX에서제공하는기본컴포넌트스타일의변경 Restaurant Finder 어플리케이션 - 어플리케이션링크및샘플 Getting started 문서 - FLEX를처음사용하는사용자를위한전반적인사용법과튜토리얼 FLEX 2 제품구성과 FLEX builder 2 사용법 5/11
FLEX Builder 2의에디터와뷰구성 FLEX Builder 2의인터페이스를살펴보기전에 FLEX 퍼스펙티브 (Perspective) 라는개념을알아보자. FLEX에서퍼스펙티브란에디터 (Editor) 와특정작업을지원하는여러가지뷰 (View) 의그룹을말한다 ( 에디터는소스모드나디자인모드로코드를작성하기위한편집도구이며, 뷰는이러한코딩작업을지원하는다양한도구를말한다. FLEX Builder 2의뷰는 Navigator View, Problem View, Outline View가있다 ). FLEX Builder 2는기본적으로개발퍼스펙티브 < 그림 3> 와디버깅퍼스펙티브 < 그림 4> 를제공하며수행하고있는작업에따라자동으로퍼스펙티브가바뀐다. 예를들어 FLEX 프로젝트를처음생성하면개발퍼스펙티브로바뀌고, 디버깅세션을시작하면자동으로디버깅퍼스펙티브로바뀐다. < 그림 3> FLEX Builder 2 의개발퍼스펙티브 FLEX 2 제품구성과 FLEX builder 2 사용법 6/11
< 그림 4> FLEX Builder 2 의디버깅퍼스펙티브 또한 Wndows Perspective 메뉴에서원하는퍼스펙티브를선택하여특정퍼스펙티브로이동하 거나퍼스펙티브메뉴 < 그림 5> 에서원하는퍼스펙티브를선택하여수동으로원하는퍼스펙티브로 이동할수있다. < 그림 5> FLEX Builder 2 의퍼스펙티브메뉴 FLEX 2 제품구성과 FLEX builder 2 사용법 7/11
또한에디터나특정뷰의위치나크기를변경하거나추가하여자신만의퍼스펙티브를만들고 Wndows -> Perspective -> Save Perspective As 메뉴를선택하여자신이만든퍼스펙티브를저장하 고사용할수도있다. FLEX Builder 2 개발퍼스펙티브 FLEX Builder 2 개발퍼스펙티브는 < 그림 6> 에서보는것과같이 Editor, Navigator 뷰, Problem 뷰 로구성되어있다. < 그림 6> FLEX Builder 2 개발퍼스펙티브 ( 소스모드 ) Editor를사용하면 MXML, CSS, ActionScript 코드를작성할수있다. 코드힌트, 코드포맷기능및디자인모드를제공하기때문에 FLEX 어플리케이션을시각적으로디자인할수있으며, 통합된 FLEX 디버깅도구를사용해작성한코드의에러를체크하는등의편리한디버깅이가능하다. FLEX 2 제품구성과 FLEX builder 2 사용법 8/11
< 그림 7> FLEX Builder 2의코드힌트기능 Editor - MXML, CSS, ActionScipt에대한코드힌트기능을제공한다. 기본적으로코드를작성할때마다자동으로코드힌트가제공되며 Ctrl+Space 키를눌러서수동으로코드힌트가나오도록할수있다. Navigator 뷰 - 여러프로젝트와프로젝트내의모든리소스를보여주고해당리소스로이동할수있는기능을제공한다 Problem 뷰 - 문법에러나컴파일시발생한에러를디스플레이한다 개발퍼스펙티브는 < 그림 6> 과 < 그림 8> 에서보듯이소스모드와디자인모드두가지모드를제 공하는데 Editor 툴바에있는 Source 버튼과 Design 버튼을눌러서소스모드와디자인모드로 이동할수있다. 단디자인모드는 ActionScript 어플리케이션을작성할경우에는사용할수없다. FLEX 2 제품구성과 FLEX builder 2 사용법 9/11
< 그림 8> FLEX Builder 2 개발퍼스펙티브 ( 디자인모드 ) FLEX Builder 2 디버깅퍼스펙티브 FLEX Builder 2 디버깅퍼스펙티브는 FLEX 어플리케이션을디버깅하기위한여러가지뷰를포함하고있다. < 그림 4> Debug 뷰 - 현재디버깅하고있는 FLEX 어플리케이션의쓰레드를보여주고디버깅세션을재시작하거나 Step into, Step over 등의기능을수행할수있다 Breakpoints 뷰 - 프로젝트내의모든 Breakpoints( 중단점 ) 을보여준다 Console 뷰 - ActiopScript 코드에서사용한 trace 문의결과를보여준다 Vairables 뷰 - 다른디버깅도구의 locals 기능을제공하는도구로, 변수값을보여주기위해사용된다 Expression 뷰 - 다른디버깅도구의 watch에해당하는도구로, 특정변수값을모니터링하기위해사용된다 이상으로 FLEX Builder 2의기본적인인터페이스를살펴보았다. 다음회에서는 Flex Builder2로간단한 FLEX 어플리케이션을제작하는방법을알아보도록하겠다. <Tip> FLEX Builder 2에대한추가정보는 Using FLEX Builder 2 문서 (http://download.macromedia.com/pub/documentation/en/flex/2/flex2_usingflexbuilder.pdf ) 나 FLEX Builder 2의 FLEX 2 제품구성과 FLEX builder 2 사용법 10/11
Help 메뉴에서제공되는도움말을참고하면된다. FLEX 2 제품구성과 FLEX builder 2 사용법 11/11