플래시는 웹 브라우저에서 멀티미디어를 자유자재로 표현하고 사용자에게 친숙하면서도 편리한 인터페이스를 제공한다. 플렉스는 플래시 기술을 웹에 그대로 적용해 그래피컬하면서도 유연한 UI의 특성을 가지고 있으며, 프로그래머들이 쉽게 배울 수 있는 획기적인 개발 언어이다. 특히 프로그래밍 언어 측면에서 여러 모로 자바와 유사한데 이를 중심으로 플렉스에 한발 다가가 보자.
이 글은 플렉스를 처음 접하거나 자바 기반의 웹 개발자 모두를 위해 플렉스의 원리를 자바 기술과 비교하면서 설명하고자 한다. 특히 단락의 제목을 플렉스의 특성에 대해 함축적으로 기술해 그것만 봐도 어느 정도 감을 잡을 수 있도록 구성했다.
XML로 기술되는 플래시 웹 컴포넌트 개발 및 실행 환경 ‘플렉스’
플렉스는 웹에서 플래시 형태로 보여진다. 여러분이 직접 데모 사이트(www.macromedia.com/devnet/flex/example_apps.html)를 방문해 구동되는 모습을 보자. 화면의 하단을 보면 쇼핑몰 데모(Flex Store), 블로그 데모(Flex Blog Reader), 실행 데모(Flex File Explorer)가 있다. 플렉스의 데모를 실행하면 웹 브라우저에서 작동하는 플래시와 똑같이 작동한다.
<화면 1>은 Flex Store의 실행 화면으로 상품의 드래그앤드롭이 가능하며 하나의 화면에서 작동한다. 보통 JSP로 화면을 만들 경우에는 iframe을 써서 여러 개의 JSP 간에 파라미터를 주고받는 복잡한 코딩이 되기 때문에 이러한 드래그앤드롭은 꿈도 못 꾸는 것과 비교된다. 또한 플렉스에는 CSS(Cascading Style Sheets)를 적용함으로써 다양한 타입의 화면을 보여줄 수 있다.
웹 애플리케이션의 한계를 뛰어넘은 플렉스
일반적으로 고객이 원하는 어떤 화면을 만들기 위해 디자인은 물론 HTML 코드, 스타일시트, 자바스크립트, JSP 코드 등 엄청난 작업을 해야 하는 경우가 많다. 예를 들어 트리 메뉴를 자바스크립트에서 구현하면 코딩이 무척 복잡하다. 하지만 플렉스로 구현한 경우는 그렇지 않음을 볼 수 있다. <리스트 1>처럼 XML 구조의 트리 데이터만 정의하면 <화면 2>의 트리 메뉴를 구현할 수 있다.
풍부한 UI와 플래시의 장점 제공
플렉스의 장점 중 하나는 HTML 코드와 스타일시트, 자바스크립트 코드 등으로 표현되는 UI의 한계를 뛰어넘어 다양한 UI를 컴포넌트로 제공한다는 점이다. 특히 개발 과정에서 나온 컴포넌트들은 화면용 컴포넌트와 비즈니스용 컴포넌트로 분리할 수 있어 매우 효율적이다.
<화면 1>처럼 쇼핑몰을 구현함에 있어 기존의 세션과 파라미터 전송 방식으로 페이지를 이동할 필요 없이 하나의 플렉스 화면에서 거의 모든 처리가 가능하다. 또한 플렉스는 소스코드와 컨텐츠의 노출을 막을 수 있다는 장점이 있다. 즉 보기 메뉴에서 소스보기를 시도하더라도 속에
XML을 비롯한 표준화된 기술 사용
<리스트 1>은 플렉스로 구현한 트리 메뉴 소스코드로, 트리를 펼쳐서 해당 부분을 클릭할 때 showData 함수를 호출해 레이블 값을 alert 창으로 보여주고 있다. 그 결과는는 <화면 2>와 같다. <리스트 1>은 자바스크립트와 XML 문법을 아는 개발자라면 쉽게 와 닿으리라 생각한다. 그 이유는 플렉스에서 기본적인 코드는 XML 문법을 따르는 MXML 파일 형식으로 저장되고, 마우스 클릭 등의 이벤트 처리는 자바스크립트의 문법과 유사한 액션스크립트 2.0의 기술을 쓰기 때문이다. 그래서 필자도 플렉스의 코드를 이해하고 구현하는 데 그리 오래 걸리지 않았을 뿐 아니라 어떤 코드나 함수가 있을 것인지 예측할 수 있을 정도였다. 그렇다면 플렉스가 지원하는 표준화된 기술은 어떤 것이 있는지 살펴보자.
◆ J2EE : 플렉스는 자바 애플리케이션 서버에서 작동되며, 나중에는 닷넷 플랫폼에서도 작동되도록 지원할 것이다.
◆ XML : XML 문법을 따르는 MXML 파일 형식으로 코드를 저장하고, 'mx'라는 XML 네임스페이스를 사용한다.
◆ DOM 레벨 3 이벤트 모델 : 플렉스의 이벤트 모델이 쓰는 것으로 DOM 트리 구조를 통해 이벤트를 전달하는 방식이다.
◆ ECMAScript/자바스크립트 : 플렉스에서는 이와 유사한 액션스크립트를 적용했다.
◆ 웹 서비스 : 플렉스 애플리케이션은 HTTP 통신뿐 아니라 XML 통신 프로토콜인 SOAP 메시지로 데이터를 송수신할 수 있다.
◆ CSS : MXML 스타일은 이를 기초로 한다.
◆ 자바 객체 지원 : MXML 태그는 자바빈즈를 비롯한 일반 자바 객체를 사용할 수 있다.
◆ SWF : 플렉스는 공인된 플래시 파일 포맷인 SWF 파일로 컴파일된다.
◆ SVG(Scalable Vector Graphics) : 플렉스는 벡터 형식의 그래픽 표준인 SVG를 따른다.
자바 기반 웹 애플리케이션 개발과 유사
플렉스에서 사용하는 각 요소(컴포넌트)들은 널리 알려진 표준 기술을 사용하기 때문에 자바를 이용해 웹을 개발해본 사람이라면 그 기능이 서로 유사함을 알 수 있다. <표 1>에 플렉스와 자바 기반 웹 개발시 유사하게 쓰이는 기술들을 정리했다.
◆ 컴포넌트 및 화면 구성 : 사용자 화면을 구성하는 컴포넌트로는 자바의 AWT나 Swing과 같은 컨트롤과 컨테이너가 있다. 컴포넌트를 사용해 화면을 구성하기 위해 자바에서는 컨테이너 및 레이아웃 매니저를 사용하는데 플렉스에서는 이와 유사한 컨테이너를 사용한다.
◆ 사용자 정의 컴포넌트 : 자바에서는 자바빈즈나 태그 라이브러리를 사용하는데 비해 플렉스에서는 SWC(플래시 컴포넌트)나 커스텀 컴포넌트 및 JSP 태그라이브러리를 정의해 사용할 수 있다.
<표 1>처럼 유사한 기술이 많으므로 HTML과 자바스크립트, 그리고 AWT의 컴포넌트 배치 및 레이아웃 매니저의 개념을 알면 대충 플렉스의 코드는 이해할 수 있으리라 생각된다. 그리고 플렉스는 독립적으로 구동되는 서버가 아니라 자바 애플리케이션 서버에 배치되기 때문에 JSP를 비롯한 자바 객체, 스트럿츠 프레임워크, 웹 서비스 등과도 쉽게 연동할 수 있다. 그러면 어떻게 플렉스를 배치하는지 살펴보자.
플렉스는 서버 컴포넌트
플렉스는 독립적으로 실행되는 서버가 아니라 JRun, 톰캣 등 WAS(Web Application Server)나 JSP 컨테이너에 배치되는 서버 컴포넌트이다. 따라서 JSP 컨테이너가 설치되어 있을 경우 손쉽게 플렉스 개발 환경을 구축할 수 있다.
플렉스 인스톨 후 flex.war를/WEB-INF 밑에 풀어주면 애드온된다
플렉스 서버 환경 구축은 제목처럼 간단하다. 현재는 플렉스 1.0 설치 파일을 구하려면 매크로미디어 홈페이지에서 설치 CD를 주문해야 하지만, 향후에는 다운로드 사이트에서 바로 다운받을 수 있을 것이라고 한다. 다음은 톰캣 5.0에서 server.xml 파일에 flex와 samples라는 컨텍스트를 추가하기 위한 설정이다.
CD에 있는 설치 파일을 인스톨하면 설치 디렉토리에 flex.war이 생긴다. flex.war의 압축을 풀어서 생기는 WEB-INF 이하 디렉토리의 파일들을 <화면 3>처럼 JSP 컨테이너 루트 디렉토리의 WEB-INF 디렉토리에 복사하면 현재 설정 그대로 플렉스를 구동할 수 있다. 앞의 코드에서 samples 컨텍스트의 경우 flex.war를 복사해줘도 되나 샘플 코드가 없으므로 flex.war와 같이 생성되는 samples.war 파일들을 따로 samples라는 디렉토리를 만들어서 압축을 풀어준다. 컨텍스트와 컴포넌트 설정이 제대로 됐을 경우 JSP 컨테이너를 재가동하면 톰캣 콘솔에서 플렉스 1.0이 설정됐다는 메시지가 나오며, http://127.0.0.1:8080/samples/로 접속하면 각종 데모를 볼 수 있다.
플렉스 서버는 mxml을 .swf 파일로 컴파일해 서비스한다
JSP의 경우 서버로 JSP 페이지의 요청이 처음 들어오면 서블릿으로 컴파일해 처리 결과를 리턴한다. 그 후에는 JSP 파일의 변경 여부를 체크해 변경됐으면 JSP를 서블릿으로 컴파일해 리턴하고, 변경된 내용이 없으면 캐시 디렉토리의 컴파일된 서블릿을 그대로 리턴한다.
JSP의 서비스 방식과 마찬가지로 플렉스도 내장된 컴파일러가 있으며 MXML 파일에 대한 요청이 들어오면 .swf로 컴파일한다. 이는 소스코드가 바뀌기 전까지 캐시되어 서비스된다. 바꿔 말하면 MXML 형식으로 필요한 코드를 작성하고, JSP 문서 디렉토리에 넣어 두면 플래시의 결과 화면을 볼 수 있다.
플렉스 프레젠테이션 서버는 플렉스 개발과 실행 서비스를 제공한다
어떻게 보면 플렉스 컴파일러 실행 파일을 이용해 mxml을 swf 파일로 컴파일해 웹 서버에 올려 서비스하면 되지 않을까 하는 생각을 하는 사람도 있을 것이다. 그러나 굳이 플렉스를 프레젠테이션 서버로 해서 서비스하는 이유가 있다. 바로 변경될 때마다 재컴파일해야 하는 불편함이 있기 때문이다. 여기에 분산 환경에서 비즈니스 로직을 제공하는 일반 자바 객체뿐만 아니라 자바, 닷넷 등의 웹 서비스 객체와 연동하는 서비스를 제공한다는 것도 한 몫을 한다. 한편으로는 필자는 자바에서 PDF로 출력하는 컴포넌트처럼 swf로 만들어 주는 컴포넌트도 나오지 않을까 하는 생각을 해본다.
플렉 아키텍처
플렉스 아키텍처는 플렉스 프레젠테이션 서버를 중심으로 파악하면 된다(<그림 1>). 플렉스 프레젠테이션 서버는 크게 개발 환경 부분과 실행 환경 부분으로 구성되어 있다. 개발 환경은 MXML, 액션스크립트, 플렉스 클래스 라이브러리를 플렉스 애플리케이션 프레임워크로 묶을 수 있다. 런타임 서비스는 swf 컴파일 및 캐싱 등의 실행 서비스를 제공한다.
<그림 1>의 하단을 보면 플렉스 프레젠테이션 서버가 WAS에 애드온되는 모습을 표현하기 위해 J2EE와 닷넷을, 우측에는 텍스트 에디터와 위지윅 방식을 지원하는 ‘브래디’라는 플렉스 전용 IDE를 볼 수 있다. 브래디는 현재 베타 4 테스트 중이며, 외형은 마치 드림위버 MX 2004를 보는 것과 같다.
MXML은 플렉스 애플리케이션을 XML로 기술한다
MXML은 XML 기반이므로 자바 관련 IDE는 물론 메모장과 같은 텍스트 에디터만 있어도 쉽게 코딩할 수 있다. 또한 플렉스 전용 IDE인 브래디에서는 위지윅 방식의 코딩이 가능하다. 브래디는 플렉스 프로그램 작성시 레이아웃과 UI, 데이터 서비스 등 프레젠테이션 부분을 표현하는 데에 사용된다. MXML은 HTML에 비유될 수 있는데 그 특징은 다음과 같다.
◆ 유사점 : MXML은 HTML이 웹에서 보이는 화면을 태그로 표현하는 마크업 언어인 것처럼 플렉스에서 어떤 컴포넌트를 어떻게 보이도록 할 것인가를 기술하는 마크업 언어이다. 이것은 HTML처럼 각 컴포넌트의 속성을 지정함으로써 화면을 표현할 수 있다. 플렉스에서 사용하는 비주얼한 컴포넌트들은 <화면 5>의 컨트롤과 <화면 6>의 컨테이너로 구성되며, 컨트롤은 컨테이너에 담겨서 배치된다는 점에서 자바의 AWT와 유사하다.
◆ 차이점 : HTML은 지정된 태그만 가능하나 MXML은 커스텀 컴포넌트도 표현할 수 있다. 또한 HTML은 브라우저 화면에 나타날 것만을 기술하지만 MXML은 추가로 데이터와 연동하는 부분도 기술한다.
◆ MXML 문법 : MXML은 XML 문법만 알면 쉽게 이해할 수 있다. XML 문법을 따르므로 구조적이며 가독성이 높다. 다음의 코드는 'Hello Flex'라는 메시지를 Label 컨트롤에 찍어주는 간단한 코드이다. 2째 줄은 XML의 시작을 알리는 부분이며 인코딩 방식을 지정한다. 만약에 MXML 안에 한글이 있다면 <리스트 3>처럼 인코딩을 'euc-kr'로 지정해야 파싱 에러가 안 난다. 3째 줄의
// 간단한 플렉스 예제
// 간단한 플렉스 예제(한글)
…중략…
액션스크립트는 이벤트, 에러 및 데이터를 처리하는 스크립트이다
플렉스의 UI는 이벤트 중심으로 작동한다. 플렉스에서는 사용자가 발생시키는 이벤트 유형을 정의하고, 어떻게 반응할 것인가를 액션스크립트로 기술한다. 액션스크립트로써 이벤트를 처리하는 방법은 자바스크립트와 유사하다. 실행 중에 발생하는 에러나 데이터 검증 에러를 감지해 사용자에게 메시지를 전달하며, 플렉스 컨트롤 중에서 배열과 같은 데이터가 있어야 화면에 보여지는 것들(예 : 리스트, 그리드, 트리 메뉴 등)에 다양한 방법으로 내외부 데이터를 제공한다.
액션스크립트는 문법, 용도 등에서 자바스크립트와 유사하지만 차이점도 있다. 하나는 Document, Window, Anchor와 같은 브라우저 관련 객체를 지원하지 않는다는 것이다. 이는 일반 웹 페이지가 페이지(윈도우) 중심으로 움직이는 것과는 달리 플렉스는 한 애플리케이션에서 화면을 모두 처리하기 때문이다. 그리고 자바스크립트는 String 값의 길이가 ‘0’이 아니면 true를 리턴하고, ‘0’이면 false를 리턴하는 반면 액션스크립트는 String을 number로 변환해 ‘0’이면 false를 리턴하고, 아니면 true를 리턴한다.
플렉스 클래스 라이브러리는 플렉스 컴포넌트를 제공한다
플렉스 클래스 라이브러리는 컨트롤과 컨테이너로 구성되어 있다. 컨트롤은 사용자 작동을 핸들링하거나 데이터를 보여주는 컴포넌트이고(<화면 5>), 컨테이너는 플래시 플레이어가 그리는 화면이나 컨트롤을 배치하기 위한 컴포넌트이다(<화면 6>). 이들은 플렉스 애플리케이션의 개발 편의를 위해 다음과 같은 특성을 가진다.
◆ 모든 컴포넌트들은 MXML API를 통해 선언하고 그 속성과 이벤트를 정의할 수 있다.
◆ 액션스크립트 API는 실행시에 컨트롤의 메쏘드와 속성, 이벤트를 제어할 수 있다.
◆ 스타일, 스킨, 폰트 등을 이용해 사용자 정의의 룩앤필을 적용할 수 있다.
런타임 서비스에서는 관리적인 서버 기능을 제공한다
플렉스 런타임 서비스에서는 히스토리 관리, 원격 객체 접근 등 관리적인 서버의 기능을 제공함으로써 보다 편리하게 개발할 수 있다. 그러나 인증이나 세션 관리처럼 자바 애플리케이션 서버와 중복되는 기능은 해당 서버의 기능을 활용하도록 되어 있다. 이외에도 컴파일 및 캐싱, 플래시 플레이어 감지 및 업데이트 등의 기능이 제공된다.
한편 플렉스의 코드는 액션스크립트 클래스, MXML 파일, SWF 파일 및 외부 컴포넌트 등으로 구성된다. 이들이 컴파일된 결과는 SWF 파일로 플래시 플레이어에 다운로드되어 클라이언트에서 플레이된다. 하나의 파일로 만들어지기 때문에 MXML 파일이나 인클루드된 액션스크립트 파일 밖에서 클래스를 정의하거나 사용할 수 없으며, 임포트된 액션스크립트 클래스는 최종 SWF 파일에 추가된다.
플렉스 개발의 기본은 MXML과 액션스크립트
TV의 모 CF 광고에서 ‘북치기, 박치기’만으로 랩을 할 수 있다고 했는데 플렉스도 MXML과 액션스크립트를 알면 기본기는 터득한 셈이다. MXML은 플렉스의 XML의 확장판으로 인터페이스를 기술하며, 액션스크립트는 자바스크립트처럼 이벤트와 데이터를 처리한다고 보면 된다. MXML과 액션스크립트는 WEB-INflex 디렉토리 밑에 위치하는 플렉스 클래스 라이브러리의 각종 컴포넌트들을 사용한다. 이 세 가지 요소들이 모여 플렉스 애플리케이션 프레임워크를 구성한다.
액션스크립트는 MXML에 들어가는 이벤트 처리 스크립트이다
액션스크립트는 버튼을 누르거나 마우스를 조작하는 등의 여러 가지 이벤트 처리를 기술하는 스크립트이다. 액션스크립트에서 MXML을 사용하는 방법은 HTML 태그의 다양한 위치에서 자바스크립트를 활용하는 방법과 유사하다. 간단한 버튼 컨트롤을 예로 액션스크립트를 사용하는 방법들을 살펴보겠다.
컨트롤의 이벤트 속성에서 스크립트 처리하기
다음의 코드는 버튼 컨트롤의 click 이벤트 속성에 직접적으로 ‘클릭’이라는 메시지를 alert 창으로 뿌리도록 기술하는 예이다. 이때 mx.controls.Alert.show 함수는 system_classes 디렉토리에 기본으로 제공되는 액션스크립트 함수이다.
스크립트 태그에서 함수로써 이벤트 처리하기
다음의 코드는 자바스크립트가
지금 뜨는 기사
이시각 헤드라인
ZDNet Power Center
