[펌] Web 2.0 시대의 Flex

http://blog.naver.com/powfly/40030653765 에서 펌..

웹 2.0이라는 단어가 나온 것이 불과 몇 달 전인 듯 한데 벌써 AJAX 등을 활용한 수 많은 Web2.0 서비스가 개발되었고 활성화 되고 있습니다. ActiveX의 표준화에 관한 문제들, Refresh로 인한 불필요한 트래픽 발생 및 전송 시간 소요, 유연하지 못한 웹 인터페이스 등 이러한 단점(Web 1.0)의 해결 혹은 개선을 위해 많은 사이트들은 전체 혹은 서비스 일부 기능들을 AJAX 등을 활용하여(네이버 추천 검색어 기능 등) 기존의 단점을 해결하고 있습니다.

<일반 웹 어플리케이션과 Ajax 웹 어플리케이션의 통신 모델>

Flex로 개발한 컴포넌트나 결과물을 웹상으로 퍼블리쉬 하기 위해서는 두 가지 방법이 있습니다.

첫 째는 Flex SDK-무료(Flex Builder - 상용에디터 + SDK)를 이용하여 MXML로 개발한 파일을 컴파일 하여 최종 swf 포맷의 결과물을 얻은 후 웹으로 퍼블리쉬 하는 방법과 다음으로는 Flex Data Service를 이용하여 MXML 파일을 웹으로 올려 서버 상에서 swf 포맷으로 보여지는 방식이 있습니다.

<Flex Builder를 이용한 Flex 개발 과정>

Flex Builder를 이용하여 개발한 MXML 파일은 함께 들어 있는 SDK(SDK는 어도비 사이트에서 무료로 다운로드 가능합니다.)의 컴파일러(mxmlc.exe)를 이용하여 최종 swf로 퍼블리쉬 하게 됩니다.

Flex가 Ajax와 비슷한 이유로 Web2.0 시대에 태어났는데, 그렇다면 꼭 Flex를 써야 하는 이유가 있을 법도 합니다. 그 중 가장 큰 이유는 Ajax가 Javascript+XML 기반으로 구현의 복잡성이나 디버깅의 어려움, 브라우저 종류, 버전별로 다른 DOM 모델의 핸들링 등 개발에 많은 어려움이 있습니다. 물런 Flex에서는 Javascript 대신 ActionScript, XML 대신 MXML을 사용하고 있습니다.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel> <mx:TextArea text="Say hello to Flex!" /> <mx:Button label="Close" /> </mx:Panel> </mx:Application> <MXML 예시>

ActionScript의 경우(현재 2.0 버전은 안정화 버전이며, 3.0의 경우 http://labs.adobe.com 에서 확인 가능)는 잘 아시는 것처럼 플래쉬에 적용되는 스크립트 언어입니다. Flex가 Flash 기반의 UI 구성을 하기 때문에 ActionScript는 Flash 제어, 즉 Javascript에서 DOM 모델의 이벤트, 액션 등을 제어하고 통신 등을 담당하는 것처럼 ActionScript 역시도 SWF 상에 구현 되어 있는 객체(Radio Btn, Input Form, Pull-Down 등)  제어에 사용 된다고 보시면 됩니다.

<Flex 구성 요소>

MXML의 경우는 Ajax에서 데이터 통신에만 사용 되는 것과는 달리 Flex에서는 UI 구성을 담당하게 됩니다. 즉, 기존 HTML에서는 <input type='text' name='test' id='test' value='Say Hello to Flex!'>로 하던 것을 <mx:TextArea text="Say hello to Flex!" />형식으로 구현하면 아래와 같이 출력 됩니다. (사실 태두리 및 하단의 버튼을 따로 MXML을 코딩해야 합니다.)

그리고, MXML에서는  외부 데이터 링크 또한 아래 태그로 productsRequest라는 ID로 바인딩 후 MXML내에서 사용 가능하게 할 수도 있습니다.

<mx:HTTPService   id="productsRequest"   url="http://www.somesite.com/products.php" />

보다 자세한 내용은 http://livedocs.macromedia.com/flex/2/langref/index.html 를 참고 하시면 MXML및 Flex에서 사용 되는 Actionscript에 대한 내용을 보실 수 있습니다.

Flex를 사용하여 MXML+Actionscript로 구현한 웹 어플리케이션은 Device 제한 없이 단지 FlashPlayer가 설치되어 있다면 어디서든 작동 가능합니다.(이는 Java 어플리케이션이 JVM이 설치 되어 있으면 Device 제한 없이 사용 가능한 것과 비슷하긴 합니다.) 가령 차세대 서비스로 지칭되는 IPTV의 경우에 다양한 모델의 셋톱 박스가 개발되어 나올텐데, 이 기기들에 FlashPlayer를 탑재 한다면, 현재 사용 중인 Flex로 구현된 어플리케이션이 UI 수정을 제외하고는 모든 기기에서 웹과 동일하게 구현 가능하데 되는 것입니다.

<Flex 로드맵>

Javascript가 Text Editor 기반의 개발인 것에 비해 Flex는 VisualStudio처럼 IDE 개발툴과 비슷한 Flex Builder(Eclipes 기반)를 제공합니다. Drag&Drop으로 손쉽고 결과를 미리 볼 수 있는 개발툴의 지원으로 인해 Javascript와 같이 Text 기반 개발을 하지 않아도 되는 이점도 있습니다. 이는 꼭 Flex Builder만을 사용하여 개발하여야 한다는 말은 아닙니다. 기존과 같이 Text Editor로도 충분히 개발이 가능합니다.

Web 2.0 시대에 있어 Ajax를 사용하든 Flex를 사용하든 아니면 새로 나올지도 모르는 그 무엇을 사용하든 Rich Client의 사용은 이제 피할 수 없을 듯 보입니다. 개발, 기획, 디자인 이 세 분야의 모든 사람들은 이제 Fix된 사용자 화면을 강요하기 보다는 보다 유연하고 확장성이 있으며, 개개인의 사용자에게 대응할 수 있도록 UI설계에 많은 신경을 써야 할겁니다.

이에 있어, 기존의 단점을 회피 혹은 고려하며 개발(Ajax)을 하는 것과 새로운 언어(새롭다고는 하지만, 기존 Javascript, XML 등의 표준 기반)를 익혀 개발을 하느냐 하는 것에 있어 어떤 것이 더 좋다는 상황에 맞게 사용하면 될 듯 합니다.