웹 개발 패러다임의 전환 - Flex와 Ajax의 동거

웹 개발 패러다임의 전환 - Flex와 Ajax의 동거

 

사용자 경험을 중요시하는 서비스 플랫폼 '웹 2.0'이 새로운 기술 트렌드로 주목되면서 동적인 유저 인터페이스가 보다 중요해지고 있습니다. 이 중심에 가장 대표적인 웹 애플리케이션 기술인 Flex와 Ajax가 있습니다. 언뜻 보면 경쟁관계에 있는 듯한 이 두 기술은 최근 구글 등을 통해 성공적으로 결합된 서비스가 소개되면서 특히 주목받고 있습니다. Flex와 Ajax가 갖는 기술 특징과 두 기술의 결합이 갖는 의미 등을 짚어봤습니다.

월드와이드웹은 하이퍼 링크 구조를 기반으로 하는 문서 형태의 정보 표현을 위해 출발하였습니다. 초창기 웹은 매우 정적이었고 사용자와의 상호작용(interaction)은 특정 주소의 문서를 읽고 쓰는 정도에 머물고 있었습니다. 정적 웹 구조에서 양식(Form)을 통해 사용자의 정보를 읽고 쓰는 CGI 기술의 탄생과 브라우저 전쟁 기간 중에 일어난 기술 혁신은 웹을 소프트웨어로 인식할 수 있는 발상의 전환을 가져왔습니다.

1995년 넷스케이프가 웹 브라우저와 외부 프로그램과의 통신에 보다 동적인 인터넷 경험을 제공하기 위해 플러그인(Plugin) 기술을 선보였습니다. 임베딩을 기본으로 하는 웹 S/W 플랫폼을 장악한 것은 ActiveX나 NSPlugin이 아닌 이들 위에서 브라우저 독립성과 개발 편의성을 동시에 보장해 준 플래시(Flash)였습니다. 플래시는 풍부한 유저 인터페이스를 선보였고 웹의 정적인 면을 보강해 주는 최적의 솔루션으로 인정받았다. 하지만 웹의 근본 속성을 제대로 반영해 주지는 못했습니다. DHTML이라는 기술이 반짝 인기를 끌었지만 2000년대 중반까지 이렇다 할 웹 기술의 혁신은 이뤄지지 않았습니다.

닷컴 거품 이후에 성공한 비즈니스 모델인 아마존, 구글, 이베이 등을 중심으로 사용자가 만든 정보라는 매개체를 활용해 이를 자유롭게 이용할 수 있는 서비스 플랫폼이 각광받기 시작했으며 이러한 특징을 웹2.0이라고 명명하면서 기술적 붐업이 시작되었습니다. 특히 플랫폼으로서 웹은 웹 자체를 서비스 혹은 S/W로 인식하게 함으로써 점점 데스크톱과 인터넷의 경계가 사라지게 하고 있습니다. 따라서 웹의 어플리케이션을 사용하는 사람들을 위해 동적인 유저 인터페이스가 점점 더 중요해지면서 여기에 따르는 다양한 기술 역시 수면 위에 떠 오르고 있습니다.  이것이 바로 웹 애플리케이션 기술입니다.

웹2.0의 첨병, Flex와 Ajax

웹 애플리케이션의 최전선에 있는 기술이 바로 Ajax입니다. Ajax(Asynchronous JavaScript and XML)는 대화식 웹 어플리케이션의 제작을 위해 다양한 기술 조합을 이용하는 웹 개발 기법이자 트렌드입니다. 이 기술은 Google이 Gmail과 Google Maps를 만들면서 널리 알려졌습니다. 사실 이 기술은 과거 DHTML이나 Remote Scripting이라고 불리는 동적 웹 개발 방식과 크게 다르지 않습니다. 그러나 여기에 좀 더 다른 몇 가지 특징이 있습니다.

데이터 표현 정보를 위한 HTML(또는 XHTML)과 CSS 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바 스크립트 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest 등을 사용합니다. 이 기술은 거의 웹 표준에 준하는 기술 방식만을 사용해 만들어졌습니다. 따라서 브라우저나 운영 체제에 관계없이 동작합니다.

여기 또 하나의 대안인 Flex가 있습니다. Flex는 기존의 Flash라는 플러그인 플랫폼을 무기로 Adobe에서 야심차게 개발한 서버와 클라이언트의 중간 개념인 미들티어(middle-Tier) 플랫폼입니다. Flex는 리치 인터넷 어플리케이션(RIA)나 온라인 프리젠테이션을 쉽고 간단하게 만들고자 하는 서버 쪽 개발자를 위한 맞춤복 같은 솔루션입니다.

Flex는 웹 표준에 기반한 ActionScript와 MXML(XML) 및 DOM3를 사용하므로 기존 자바스크립트 개발자나 ASP/JSP 등의 서버 개발자가 Flash를 사용하지 않고도 화면 구성을 제어할 수 있습니다. Flash는 그 스스로 웹 표준은 아니지만 웹 브라우저와 운영 체제에 종속적이지 않는 개발 플랫폼을 제공하고 있다는 점에서 중요한 기술 중 하나입니다.

특히 Flex는 Ajax가 가지고 있는 비동기 XML 통신 및 스크립트 핸들링의 기능을 그대로 보유하면서도 다양한 기능을 가진 Flash의 미려한 유저 인터페이스를 그대로 사용할 수 있다는 점에서 매우 뛰어난 플랫폼이라 할 수 있습니다. Ajax가 기술 트렌드이기 때문에 가지는 한계점, 즉 통합 개발 도구(IDE)의 남발 혹은 낮은 완성도에 비하면 Flex는 개발 비용 절감 및 편리성 강화에서 좋은 점수를 얻고 있습니다.

Flex와 Ajax, 공존 가능한가?

Flex와 Ajax는 사용되는 기술 스펙이나 구조 및 개발 방법론 등 많은 부분에서 닮아 있습니다. Flex의 장점이라고 할 수 있는 풍부한 UI는 결국 Flash의 장점인데 이것은 또한 바이너리 형식이라는 점에서 Ajax에 비해 상호 운용성 측면의 제약을 갖는다는 단점이 있습니다. Flash는 멀티미디어 데이터를 압축 저장하는 목표로 만들어진 것이기 때문에 웹 상의 정보 표현이라는 기본 목표에 충실하기는 어렵습니다. 이에 반해 Ajax는 웹 상에서 사용자 경험을 한층 높여 주면서도 웹 표준에 입각한 데이터 교환 및 문서 내 데이터를 쉽게 사용할 수 있는 장점을 가지고 있습니다. 물론 Flex 만큼의 강력한 인터페이스를 제공하기는 어렵습니다.

이러한 서로의 장단점을 보완해 주는 서비스들이 계속 나오고 있습니다. 이러한 방법론의 물꼬를 튼 것이 바로 MeasureMap입니다. Measuremap.com은 유명한 웹 디자이너인 제프리 빈이 만든 블로그 통계 서비스입니다.

이 서비스를 보면 특정 블로그를 방문한 통계 수치들을 웹에서 보여주는데 이 때 미려한 UI를 가진 Flash에서 선택한 조건에 따라 웹 페이지를 로딩해 눕니다. 즉 차트나 다이어그램 같은 것은 Flash를 쓰고 기타 통계 수치는 웹 페이지로 제공해 주는 것입니다. Measuremap은 아이디어의 우수성 때문에 Google에 인수되었습니다.

그림 1. Ajax와 Flash가 적절히 조화된 최초의 웹 서비스 MeasureMap. 차트와 웹 페이지 데이터가 상호 연동됩니다.

Google은 Flex와 Ajax를 조합한 새로운 서비스를 내 놓았는데 바로 Google Finance입니다. 이 서비스에서는 구글 뉴스, 구글 그룹스, 블로그 검색, 웹 검색을 비롯해서 AMEX와 NYSE 주가 데이터, 로이터의 상장사 데이터 등을 종합적이고 유기적으로 보여주는 간결하면서도 직관적인 인터페이스를 구현했습니다. 특히 Flash로 제공되는 차트에서 드래그앤드랍과 시간별 스크롤링 기능이 제공되고 이에 맞는 필터링 된 뉴스 기사를 오른쪽에 보여주는 방법을 사용합니다. 뿐만 아니라 관련 기사나 인물 정보를 표현할 때도 상세 정보를 Ajax와 DOM Scripting을 적절히 이용해서 보여 주고 있습니다.

그림 2. Google Finance 화면. Flash 차트를 선택하면 Ajax로 데이터를 가져온다. 웹 데이터를 선택해도 Flash 차트에 표시됩니다.

실제 이러한 사례들이 Flex만 혹은 Ajax만 쓰는 서비스에 비해 훨씬 고객 만족도가 높습니다. 이러한 흐름 때문인지 Flex 2에서는 Ajax의 연동을 공식 지원하고 있으며, 이를 장점으로 내세우고 있습니다. 특히 얼마 전 Adobe Labs에서 공개한 FABridge(Flex AJAX Bridge)와 ACFDS(AJAX Client for Flex Data Services) 등의 오픈 기술은 주목할 만합니다. FABridge는 Flex와 Ajax를 연동할 수 있는 오픈소스 프레임워크로, 간단한 자바스크립트로 액션스크립트 객체 조정이 가능하며 오픈API 방식으로 FABridge 사이트에 공개돼 있습니다.

ACFDS는 Ajax에서 새로 나올 Flex 2.0이 제공하는 데이터 서비스를 조정할 수 있도록 하는 기술로서 Ajax에서는 다소 어려운 메시징 서비스나 실시간 데이터 스트리밍 등의 서비스를 Ajax에서 쉽게 불러서 쓸 수 있습니다.

기술 선택의 요건 1순위 '미래 지향성'

현재 다양한 웹 애플리케이션 기술이 나와 있습니다. 기술을 선택할 때 가장 중요시 해야 되는 것은 바로 사용자 접근성입니다. 웹 브라우저 지원 범위와 운영 체제, 기타 디바이스 지원에 대한 것을 따지는 것이 중요합니다. 그 다음으로 드래그앤드롭, 자동 저장 등 풍부한 UI 경험 제공 여부도 빼 놓을 수 없습니다.

특히 웹 브라우저 기능과 연관성(Back/Forward, History 동작 여부), 유지 보수 용이성, 프로그램 수행에 대한 지표들 즉, 다운로드 크기 및 수행 속도, 통신 방법, 서버 데이터에 대한 UI 변경 방법 등도 고려할 요소입니다. 개발에 있어서 손쉬운 플랫폼을 사용하는지, 통합 개발 도구(IDE)가 있는지도 고려 해야 합니다.

무엇보다 가장 중요한 것은 미래 지향성입니다. 독특한 기능적 특징뿐만 아니라 향후 표준으로서 가능성이 있는가 하는 점입니다. 이런 점에서 Ajax와 Flex는 웹 서비스 회사 및 SOA를 제공하는 기업에서 가장 각광 받는 대안입니다. 특히 이들 둘은 서로의 장단점을 보완해 줄 수 있고 결합해서 사용되었을 때 강력한 시너지를 냅니다.

웹 2.0의 경험적 요소 중에는 웹을 더욱 동적으로 만들고 풍부한 UI를 선보이고 있다는 특징이 있습니다. 이것은 자사의 웹 서비스와 데스크톱 애플리케이션과의 경계를 모호하게 해서 웹 S/W나 애플리케이션으로 진화하도록 해 플랫폼 효과를 누리고자 하기 때문입니다. 웹의 근본 속성을 지키면서 이러한 목적을 달성할 수 있는 현재 최적의 조합은 Flex와 Ajax라고 볼 수 있습니다. 이들은 현재 웹의 문서 구조와 쉽게 연결될 뿐만 아니라 실제 많이 닮아 있기 때문입니다.

 

------------------------------------------------------------------------------------

출처 : 웹 개발 패러다임의 전환 - Flex와 Ajax의 동거

저자소개

윤석찬은 (주)다음커뮤니케이션 R&D센터에 근무중이며 한국 모질라 커뮤니티(www.mozilla.or.kr) 리더로 파이어폭스 개발에 관여해 왔다. 오픈 소스, 웹 표준 관련 활동을 지속적으로 해 왔기 때문에 최근 부각되는 웹2.0과 웹 어플리케이션 기술에 대한 관심 또한 높다. ZDNet 컬럼니스트로 활동하고 있으며 개인 블로그(http://channy.creation.net/blog)를 운영하고 있다.