FLEX

Web 2.0과 Ajax
 

 

Web 2.0을 기술적으로 구현하는데 있어서 가장 많이 눈에 띄는 단어는 Ajax이다. Ajax로 개발 했을 경우 궁극적인 모습은 어떠한 클라이언트 사용자의 브라우저, 운영체제, 디바이스 등에 상관없이 웹상에서 Desktop Application 수준의 application을 이용하는 것이라고 할 수 있다. 이미 Google Map, Yahoo Map 등의 Ajax 레퍼런스 사이트들은 웹 브라우저에서 Desktop Application 수준의 화면과 기능을 구현할 수 있다는 여지를 충분히 보여줬다.

 

Ajax로 구현한 화면을 RIA(Rich Internet Application)라고 달리 말할 수 있는데, 이미 2000년부터 이러한 Desktop Application 수준의 UI를 구현하기 위한 많은 노력이 있어왔고, 현재 X-internet 솔루션이라는 이름으로 여러 벤더에서 제품을 출시했고 시장에서 이미 도입된 상태이다. 그 중 가장 안정적이고 화려한 UI를 자랑하는 제품이 이번에 소개하고자 하는 Adobe Flex이고 Flex의 특징이 무엇이며, Flex로 Web 2.0을 어떻게 구현하였는가도 알아보도록 하겠다.

 

Ajax와 Flex

 

 

Web 2.0에서 중요한 기술적 이슈 중 하나가 Rich Client Application이라는 개념일 것이다. 기존의 Web Application의 편리한 배포, 관리, 저렴한 유지 비용 등의 장점과 Desktop Application 수준의 사용자 편의성, 효율적인 데이터 통신, 견고한 아키텍처 구현 등의 장점을 합친 것이 RIA이라 할 수 있고 Web 2.0을 구현하고 UI에 RIA를 적용하기 위해 Google과 Yahoo에서 도입한 기술이 Ajax와 Flex 등이 있다.

 

Ajax는 차세대 웹 어플리케이션을 위한 최선의 대책이 될 수도 있지만, 아직까지 장점만큼 단점도 많이 존재하는 대안이라 볼 수 있다. Javascript + XML이라는 태생적 한계 때문에 생기는 Javascript가 가지는 언어적 한계와 구현의 복잡성, 웹 브라우저별로 상이한 DOM 핸들링 및 메모리 처리방법으로 인한 호환성 문제, Back/Forward, Bookmark등의 사용자 편의성 문제, Ajax를 이해한 제대로 된 기획안 부재와 Flash 수준의 화려한 UI API 부재 등의 단점으로 Ajax로 선뜻 개발을 주도하기가 쉽지 않은 현실이다. 그래서 Ajax의 여러 가지 문제점을 극복하고 Flash 수준의 화면을 보여주는 RIA를 만들어 Web 2.0을 실현하는 최선의 대안이 Flex 이다.

 

Flex 란?

 

Flex는 앞서 말했듯이 RIA를 구축하기 위한 솔루션으로써 정식 명칭은 Flex Presentation Server이다. 기존의 정적이고 수동적인 웹 환경에서 보다 능동적이고 개방적인 WEB 2.0 기술 구현을 쉽게 해주는 스크립트 언어이다. Flex는 데스크탑의 풍부함과 웹의 광범위함을 접목시킨 리치 인터넷 애플리케이션(Rich Internet Applications)의 UI 개발을 태그 및 스크립트로써 구현할 수 있도록 해주는 최적의 솔루션이다.

 

특히 서버 클라이언트 간에 자유롭게 커뮤니케이션 할 수 있는 개발환경을 통해 XML로써 필요한 데이터만을 적시에 서버로부터 가져오고, 특정 클라이언트가 새로운 데이터를 다른 클라이언트와도 손쉽게 공유함으로써 성능 개선뿐만 아니라 양방향 커뮤니케이션이 주는 WEB 2.0 서비스 개발환경이 되는 것이다.

Flex는 최근 출시된 Flash player 8이 주는 우수한 성능과 파일 접근을 비롯한 자바스크립트 인터페이스 API 등의 다양한 API를 제공함으로써 웹 브라우저 안에서 해결하고 있다. 또한 자바스크립트, AJAX 및 ActiveX와 연동하는 인터페이스 API를 제공하고, 웹 서비스, 자바 빈즈 등의 비즈니스 객체들을 호출할 수 있는 서비스를 제공하여 애플리케이션과 연동을 가능하게 한다.

 

Flex는 Flash 기술로부터 탄생했다. 그래서 Flash나 Flex로 구축된 사이트는 비슷한 UI를 가진다. Flex는 Flash의 컴포넌트들을 XML 태그로 표현할 수 있도록 컴포넌트화 하였다. Flash는 Flash8로써 각종 도형과 컴포넌트들을 마우스로써 디자인하는 반면, Flex는 그런 Flash 컴포넌트들을 XML 태그 스크립트를 이용하여 코딩한다.

 

Flex, 어떤 기술이 적용되어 있나?

 

개발언어 측면에서 플렉스는 XML, ECMAScript, CSS, UTF-8 기술요소를 사용한다.

플렉스의 mxml은 'mx'라는 XML 네임스페이스를 사용하며 XML 문법을 따르며, ECMAScript는 플렉스 액션스크립트가 준수하는 표준으로 자바스크립트와 유사하다. 또한 MXML 스타일은 CSS 문법을 지원하고, MXML 파일은 UTF-8로 작성 및 저장되어 서버에서 처리된다.

서버 서비스 측면에서 DOM 레벨 3 이벤트 모델은 플렉스의 이벤트 모델로 사용되며 DOM 트리 구조를 통해 이벤트를 전달한다. 플렉스 애플리케이션은 HTTP 통신뿐 아니라 XML 통신 프로토콜인 SOAP 메시지로 데이터를 송수신할 수 있다. 이외에 플렉스는 자바 애플리케이션 서버에서 작동되며 플렉스에서 자바빈즈 컴포넌트의 메쏘드를 호출하여 결과를 받을 수 가 있다.

Flex 서버는 어떻게 구성되나?

 

Flex의 구성요소는 모두 국제 표준에 기반한 것으로 ActionScript(Javascript), MXML(XML), DOM3 등의 표준 위에 Adobe의 API와 클래스 라이브러리가 추가된 형태이다.  Javascript의 언어적인 단점을 보안한 ActionScript는 강력한 객체지향 언어로 거듭났을 뿐만 아니라, Flash의 기존 버전에서 검증되었던 강력한 라이브러리들을 Flash보다 훨씬 편리하고 쉽게 이용할 수 있는 길을 제공해 준다.

 

MXML은 요즘 웹 어플리케이션 개발 방법론에 부합하게 XML 태그 형식으로 UI를 구성하게 해주는 훌륭한 도구라 할 수 있다. 또한 Flex는 Flash Player가 동작한다면 운영체제, 브라우저, 디바이스를 가리지 않고 실행되 는 완벽한 유비쿼터스 솔루션이라고 할 수 있다. 즉, 한번의 개발로 ActiveX나 JVM등에 관계없이 IE, Firefox, PDA, 핸드폰, 위성 단말기 등 어디에서든지 인터넷으로 같은 어플리케이션을 공유할 수 있게 해주는 미래지향적인 환경을 제공한다.

Flex 도입의 궁극적인 목표는 화려한 UI와 다양한 기능을 가진 Desktop Application수준의 Web Application을 만들어 내는 것에 있다. 이미 많은 다국적 기업과 국내 대기업에서 Flex를 도입해서 기존에 Clinet/Server 환경 기반에서 사용해 왔던 Install 기반의 Desktop Application을 웹으로 전환을 하고, 또 거기에 따른 많은 비용 절감과 높은 사용자 만족도를 가져올 수 있게 되었다

 

 

** Flex 서버 아키텍쳐

 

 

 

Flex는 어떻게 구동되나?

 

사용자가 플렉스로 구현된 사이트로 접속하면 웹애플리케이션 서버에 설치된 플렉스 서버는 MXML 코드를 SWF(플래시 실행파일)로 컴파일해서 사용자PC에 전송되어 플래시플레이어가 이를 보여준다.

사용자의 플래시플레이어에서 구동되기때문에 사용자는 브라우저에 상관없이 동일한 화면을 보게됩니다. 아래는 플렉시 구동절차에 대해 간략히 표현된 그림이다.

 

** Flex 사이트 구동절차

 

Flex로 구축하였을 때의 장점은?

 

Flex를 통한 Web 2.0 구현시 장점은 사용자 측면과 개발자 측면에서 살펴볼 수 있다.

사용자 측면에서 플렉스는 기본적으로 제공하는 컴포넌트 외에 플래시 컴포넌트 및 사용자 정의 컴포넌트가 있어 사용자에게 편리한 유저인터페이스를 제공할 뿐만 아니라, 플래시플레이어에서 작동하므로 어떤 환경의 클라이언트더라도 동일한 화면을 볼 수가 있다.

플렉스는 한번 로딩되면 그 다음부터는 서버로부터 실행코드를 받을 필요가 없으므로 실행속도가 빠르며 서버에 부하를 적게 준다. 모든 플렉스 컴포넌트는 화면크기에 맞게 자동으로 사이즈를 조절하므로 해상도에 따라 애플리케이션을 따로 개발할 필요가 없다.

개발자 측면에서 플렉스는 표준을 준수하는 XML태그(mxml)과 액션스크립트로 코딩되므로 html 코딩을 이해하는 수준정도면 쉽게 배울 수 있다. 다양한 유저 인터페이스를 기본 컴포넌트로 제공하므로 개발자의 코딩량이 줄어들어 개발속도를 향상할 수 있고, 다양한 방법으로 컴포넌트를 만들 수 있어 코드재사용성이 높아 개발속도를 향상할 수 있다. 기존 시스템 및 다른 애플리케이션과 연동할 수 있는 다양한 방법을 제공한다.

 

맺음말

 

 

Web 2.0과 Flex에 대해 간략하게 알아보았다. 사실 Web 2.0을 설명하는 부분이 너무 빈약하고 Ajax를 너무 비판적으로 설명했지만, Ajax는 단점보다 장점을 많이 이용해야 하는 것이 바람직한 것이고, 단지 Flex는 그러한 단점까지도 극복하게 해준다는 점을 말씀 드리고 싶다.

 

Web as Platform, 사용자 중심/참여, 개방성, Simple&Lightweight, Decentralized, Long Tail, Blog, RSS, tag, Mashup, Internet Clipboard, 개발자 중심 생태계 등 Web 2.0을 설명하기 위해 담고 싶은 말이 너무나도 많지만 간단히 Adobe Flex를 소개하는 자리인지라 태깅정도의 언급만 하고 유저들이 직접 찾아보는 수고를 기대하고 싶다.

 

 

 

 

 

 

플랙스2 의 기본 사용법

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part1_GetStarted.html

 

플랙스2 유저 가이드

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part6_Using_FB.html

 

플랙스2 래퍼런스

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/langref/index.html

 

플랙스2 개발가이드

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part2_DevApps.html

 

플랙스2 컴퍼넌트의 작성과 확장

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part3_CreateComps.html

 

플랙스2 어플리케이션의 구축과 데프로이

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part7_Build_Deploy.html

 

Flex Data Service 2 to Java

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/fds2javadoc/

 

액션스크립트 3.0

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/docs/Part5_ProgAS.html

 

액션스크립트 2.0 -> 3.0 마이그래이션

http://j2k.naver.com/j2k_frame.php/korean/livedocs.adobe.com/flex/2_jp/langref/migration.html