|
|
|
|
1.GUI 트렌드 과거와 현재 |
 |
2006년 10월 31일 00:00:00 |
데이터넷 관리자
|
 |
|
|
 진화하는 GUI 트렌드, 웹2.0 전환점 맞아
아키텍처·비즈니스 개념까지 포괄…AJAX·플렉스로 차세대 웹 애플리케이션 구상
김태완// 대우정보시스템 대리 okcode@gmail.com
2006년의 IT는 시스템 아키텍처 전반에 대한 새로운 시각이 대두되는 시점으로 애플리케이션의 체제에 또 한 번의 대변혁의 시작점이라고 생각해 볼 수도 있다. 역사를 알면 미래를 예상할 수 있다는 말이 있듯, IT만큼 짧은 스케일로 잘 적용되는 분야도 적을 것이다. IT의 애플리케이션 개발 환경은 현재의 환경을 극복하는 방향으로 지속적으로 회귀하며 진화한다. 이러한 관점에서 현 시점의 GUI 트렌드를 살펴본다. <편집자>
1.GUI 트렌드 과거와 현재 (이번호)
2.플렉스의 아키텍처와 개발환경
3.웹2.0 시대의 플렉스
애플리케이션 기술 시장에서 2006년의 최대 키워드는 SOA와 웹2.0일 것이다. SOA(Service Oriented Architecture)가 애플리케이션의 비즈니스 로직과 전체 아키텍처를 어떻게 관리할 것인가에 중점을 둔다면, 웹2.0은 GUI(Graphic User Interface) 관점에서 사용자에게 더 효율적인 GUI를 어떻게 제공할 것인가를 화두로 한다. 애플리케이션의 비즈니스/아키텍처적인 측면과 GUI 적인 측면을 다루는 두 키워드는 기업형 애플리케이션의 앞면(GUI)과 뒷면(비즈니스/아키텍처) 모두를 포함한다.
메인프레임에서 X-인터넷 애플리케이션까지
과거에 우리는 메인프레임 환경에서 기업형 애플리케이션을 구축했다. 애플리케이션 사용자의 PC는 까만 화면에 커서만 깜빡이는 터미널 수준이었다. 모든 데이터와 애플리케이션은 메인프레임에 집중화돼 있었고 고성능의 메인프레임을 독점해 사용하고 애플리케이션을 개발하고 데이터를 처리하는 역할을 전산실에서 전담하고 있었다.
1990년대 초반 퍼스널 컴퓨터의 가격이 저렴해 지고, 윈도로 대표되는 편리한 운영체제가 보급되면서 메인프레임의 시대는 저물고 클라이언트/서버 방식이 주류가 됐다. 고성능·고가인 메인프레임보다 저렴한 서버를 이용해 데이터를 관리하고, 클라이언트에는 비즈니스 로직과 윈도 GUI를 관리하는 방식이다. 클라이언트/서버 방식은 서버의 부하를 최소화하고 클라이언트의 자원을 최대한 사용하여 효과적인 편리성을 제공한 반면, 클라이언트 프로그램의 배포에 엄청난 비용과 노력이 들어간다는 단점을 갖고 있었다.
1990년대 후반에 썬은 ‘The network is the computer’라는 슬로건을 내걸었다. 1990년대 후반부터 인터넷이라는 거대한 물결이 시작됐고, 그 당시에는 애플리케이션 접근성이 가장 중요한 요소로 간주된 시기였다. 인터넷과 웹 애플리케이션은 인터넷과 닷컴 열풍에 맞물려 클라이언트 서버를 대체할 황태자로 등극하게 된다. 웹 애플리케이션은 WAS(Web Application Server)에서 실행돼 생성된 HTML을 클라이언트의 브라우저에 전송하는 형태로 구동된다. 클라이언트/서버 방식은 클라이언트의 자원의 사용을 가장 극대화한 형태로 팻(Fat) 클라이언트라고 한다.
반면, 웹 애플리케이션은 클라이언트로 브라우저만 있으면 실행 가능한 형태로 클라이언트 자원 사용을 최소화한 씬(Thin) 클라이언트 형태다. 웹 애플리케이션은 기존의 클라이언트/서버 방식에 비해 접근성과 배포의 효율성 면에서 강점을 갖는 한편 클라이언트/서버의 윈도 GUI에 비해 극단적으로 취약한 UI를 극복해야 하는 과제를 안고 있었다.
HTML의 한계를 뛰어넘기 위해 수많은 기술이 적용되고 소멸되면서 X-인터넷이라는 이름의 새로운 애플리케이션 형태가 나타나기 시작했다. X-인터넷은 2000년 포레스터 리서치(Forrest Research)에서 처음 사용한 용어로 ‘X’는 ‘eXtended’ 혹은 ‘eXecutable’을 의미한다. 기존의 HTML을 확장해 상호작용을 극대화하는 것을 지향하는 기술이다. X-인터넷의 GUI는 팻 클라이언트와 씬(Thin) 클라이언트의 장점을 흡수한 형태로 리치(Rich) 클라이언트라고 한다.
X-인터넷 제품은 배포의 효율성을 유지하면서 풍부한 GUI를 제공하기 위해 다양한 기술로 만들어 졌다. X-인터넷은 기술 형태라기보다는 기존의 웹 애플리케이션의 표현 한계를 극복하기 위한 일종의 컨셉이다. 배포와 GUI 두 가지 요소를 모두 충족하기 위해 Active-X와 애플릿(Applet)을 이용한 제품과 클라이언트 PC에 독립적으로 실행되는 프로그램을 설치하는 두 가지 형태가 주류를 이루고 있었다.
Active-X와 애플릿을 기반으로 하는 제품들은 서버에서 클라이언트로 UI 컴포넌트를 다운로드 한 후 브라우저를 통해서 실행되는 형태이고 독립실행형은 GUI를 실행하는 PC의 프로그램을 엔진으로 사용하는 형태다. Active-X 방식에는 트러스트폼, 마이플랫폼(MiPlatform)이 대표적이고 독립 실행 형으로는 컬(Curl)과 플렉스(Flex)가 유명하다. 메인프레임으로부터 X-인터넷으로의 변화를 요약하면 <그림 1>과 같고, X-인터넷 제품은 일반적으로 다음과 같은 특징을 제공한다.
· HTML의 한계를 극복하는 다양한 UI 컴포넌트 라이브러리를 제공
· UI 컴포넌트를 처리를 위한 엔진을 제공
· 실행 코드가 서버에서 클라이언트로 전송
· 다양한 장치에서 동일한 인터페이스를 제공
X-인터넷과 RIA(Rich Internet Application)라는 용어가 혼용되어 사용되는 것을 간혹 볼 수 있다. 이 두 용어는 어떤 상관관계가 있는 것일까? 결과부터 말하면 RIA와 X-인터넷은 같은 의미다. RIA는 현재는 어도비에 합병된 매크로미디어가 풍부한 GUI를 제공하는 애플리케이션을 정의하는 단어로 2003년 3월에 발간된 백서에서 처음 사용한 용어다.
그 후 매크로미디어는 자사의 플래시 기반의 애플리케이션과 솔루션에 RIA라는 이름으로 광범위하게 사용했다. 그 후 RIA는 특정 제품이 아닌 기존의 웹 애플리케이션 보다 향상된 UI를 제공하는 웹 애플리케이션에 범용적으로 사용됐고, 현재는 보통명사화 돼 X-인터넷과 RIA는 거의 동일한 의미로 사용되고 있다.
구글과 팀 오라일리 그리고 웹2.0
요즘 IT관련 종사자들이 모인자리에서 단연 화제가 되는 단어는 웹2.0이다. 웹2.0이란 무엇일까? X-인터넷/RIA와는 어떤 연관성이 있을까? 위에서 X-인터넷은 제품의 공통적인 특징이고 RIA는 특정 제품의 이름이 보편화 돼 보통명사화 된 것이라고 말했다.
그렇다면 웹2.0은 무엇일까? 웹2.0은 웹 애플리케이션의 GUI 중심의 확장을 넘어서 아키텍처, 비즈니스 개념까지 포괄해 새로운 차원의 웹 애플리케이션을 구상한다는 의미이다.
구글은 2004년 하반기에 구글 맵과 지메일(Gmail), 구글 서제션(Google Suggestion) 기능을 오픈 하면서, 웹 개발자들은 구글에 다시한번 주목하게 됐다. 이미지 처리가 자유로운 지도 애플리케이션과 페이지 리로딩 없이 갱신되고 메일 정보가 수정되는 지메일, 구글 검색 창에 문자를 입력하면 제공되는 추천어 기능은 기존의 웹 애플리케이션과는 차원이 다른 특별한 것이었다. ‘Active-X나 애플릿, 플래시를 사용한 것도 아니고 순수 HTML과 자바스크립트만으로 어떻게 이런 괴물을 만들었을까?’라는 의문으로 많은 개발자들이 괴로워한 시기였다.
2005년 2월에 어댑티브패쓰(AdaptivePath)의 제임스 가렛은 자신의 블로그에 이러한 기술을 AJAX(Asynchronous JavaScript and XML)라고 명명하고 비동기 통신을 지원하는 표준 HTML과 자바스크립트를 이용한 코딩 기법이라고 소개했다. AJAX로 표시된 이 신개념의 코딩 기법은 사실 전혀 새로운 것은 없었다. 기존에 10여 년간 우리 주위에 개별적으로 존재했던, 사실 언어나 스크립트로 전혀 인정받지 못하고 천대 받던 기술이었다. 그런데 당대 최고의 기술을 자랑하는 구글이 주위에 널려있는 기술을 그것도 조합하고(그것도 표준기법으로) 이전과 차별화된 괴물 애플리케이션을 만든 것이다.
AJAX의 핵심에는 자바스크립트 객체인 XMLHttp Request라는 객체가 존재한다. 이것은 아직 표준은 아니지만 조만간 표준으로 등록될 것이다. 표준은 아니지만 메이저 브라우저들이 모두 이 객체를 지원함으로써 실질적인(defacto) 표준으로 활용되고 있다.
이런 움직임에 앞서 2004년 10월 팀 오라일리는 웹2.0 컨퍼런스를 개최하면서 웹2.0이라는 용어를 처음 사용했다. 이 컨퍼런스가 개최될 당시에는 AJAX라는 용어가 없었기는 하지만 구글, del.icio.us, 플리커 등을 거론하며 신개념의 애플리케이션이 등장하는 것을 주목하고 이것에 기존과 구별되는 새로운 특징을 갖는 시대로의 진입을 강조하기 위해 웹2.0이라는 용어를 제안했다. 웹은 정적인 데이터를 공유하려는 목적으로 만들어졌다. 정적이고 변화하지 않는 데이터를 중심으로 만들어진 웹은 여러 스펙과 기술들이 서서히 성장하고 안정화 되면서 이제는 과거와 구별되는 더 풍부한 UI와 웹상에 떠다니는 정보들 사이에 관계성을 부여할 수 있는 다양한 기법이 제안되면서, 새로운 플랫폼으로 탄생하고 있다는 점을 강조한 용어가 바로 웹2.0이다.
웹2.0 시대의 변화
웹2.0 시대의 웹 애플리케이션은 AJAX 기법을 이용해 서버와 비동기 통신을 하고 화면의 갱신 없이도 화면의 부분적인 데이터가 수정되고, DHTML을 이용한 드래그&드롭이 지원된다. 화면만 화려해진 것뿐만 아니라 데이터 간 연관관계나 메타데이터 분석을 중요시 한다. 요즘 유행하는 블로그는 자신의 블로그에 글을 남기면 독자는 이 글에 대해 이렇게 생각한다라는 글을 자신의 블로그에 남기고 트랙백을 걸어 버린다. 트랙백을 설정하는 순간 두 블로그의 글은 양방향 링크가 걸리면서 두 데이터는 연관관계를 형성하게 된다. 이러한 방식으로 한 주제의 글은 계속적으로 연결돼 거대한 띠를 이루게 된다.
요즘 포털 사이트를 가보면 ‘태그’라는 말을 많이 들을 수 있다. 기존에 애플리케이션에서 일괄적으로 제공하던 카테고리가 아니라 작성자가 자신이 작성한 글의 주요 키워드라고 생각하는 것을 한 개 혹은 여러 개를 입력하면 동일한 키워드를 입력한 글의 목록이 만들어 지고 동일한 태그를 설정한 글들은 상호 관련성을 맺게 된다. 외국의 사진 전문 사이트인 ‘플리커’는 사진의 일정 구역을 분할해 구역별로 태그를 정의하는 것이 가능하다. 이러한 작업을 통해 한 장의 사진은 여러 가지 메타 정보를 확보하게 되고 향후에 검색 등에 이 데이터를 이용하게 된다. <그림 2 참조>
기존에 애플리케이션은 자신이 소유한 데이터를 어떻게 표현해야 하는가? 라는 것이 주요 관심사였다면 웹2.0 시대의 웹 애플리케이션은 내가 소유한 데이터를 어떻게 오픈 할까? 그리고 다른 사이트가 오픈한 데이터를 어떻게 사용할까? 라는 것이 주요 관심사이다. 다른 사이트에서 제공하는 데이터와 자신이 소유한 데이터를 결합해 새로운 유형의 데이터를 생산하는 것은 매쉬-업(Mash-up)이라고 한다. 부동산 사이트에서 구글맵의 지도 정보를 이용해 지도 위에 부동산 정보를 표시하는 시도를 한 ‘www.housingmap.com’은 매쉬-업의 첫 번째 사례로 유명하다. <그림 3 참조> 지금까지 살펴본 것과 같이 웹2.0의 특징은 참여, 공개, 창조(Mash-up), 연관성이라고 할 수 있다.
웹2.0 시대에 주목할 RIA 솔루션 플렉스
AJAX가 지원되고 DHTML로 웹 화면의 제어가 가능해 졌으며, XML의 표준 데이터 교환 방식이 지원되는 웹2.0의 시대에는 RIA 솔루션이 퇴조되는 시기일까? 그 반대인 듯하다. 더 많은 RIA 제품이 나오고 있다. 많은 RIA 제품 중에서 Flex는 주목 해 볼 만한 가치가 있는 솔루션이다. Active-X를 기반으로 하는 RIA 제품은 윈도 익스플로러에서만 실행된다는 단점을 갖고 있으며 배포나 버전관리가 쉽지만은 않다.
애플릿 방식의 X-인터넷은 인터넷 익스플로러의 자바실행환경(JRE)의 기본 버전이 낮아 추가적인 설치가 필요하다. 독립 설치 형 제품들은 클라이언트에 별도의 엔진을 설치해야 하고 운영체제 및 브라우저에 완벽하게 독립적이지 않는 경우가 많다. 이러한 이유에서 플렉스는 기존의 RIA 제품 중에 상당히 돋보인다. 플렉스는 매크로미디어에서 개발한 제품으로 매크로미디어가 어도비에 합병된 이후 플렉스2.0을 출시한 상태이다.
플렉스는 XML 태그로 스크립트를 작성하고 이 파일을 컴파일 하면 플래시로 된 리치 인터넷 애플리케이션이 만들어지는 개발 솔루션이다. 플렉스2.0은 플렉스 개발 툴로 이클립스 기반의 플렉스 빌더 2.0과 컴포넌트 라이브러리와 플렉스 데이터 서비스 2.0으로 구성돼 있다.
플렉스는 구동환경으로 플래시 플레이어 9 버전이 필요하다. 위에서 말한 것처럼 플래시 플레이어는 플렉스의 구동 엔진 역할을 담당한다. 물론 플렉스 플레이어는 독립 실행 형 프로그램이다. 플렉스를 구동하기 위해서는 구동 엔진을 인스톨해야 한다면 위에서 언급한 제품들과 무엇이 틀린 것일까?
예를들어 PC방에 가서 웹 상에서 PDF 파일을 보거나 특정 사이트에 들어갔는데 플래시 플레이어가 설치되어 있지 않아 경고 창이 뜬다면 어떤 생각이 들까? “이 PC방 관리 안 하는 구만…”이라는 생각이 들것이다. PDF와 플래시는 Adobe가 소유한 기술로 한 기업에서 기술을 독점하고는 있지만 웹 기술 중 가장 대중화가 많이 된 기술이다. 포털 사이트 중에서 플래시를 사용하지 않는 사이트는 거의 없을 것이다. 그 만큼 플래시 플레이어는 대중적으로 많이 사용되고 있고 플렉스가 아니라 컴퓨터 소유자의 필요로 자발적으로 설치하고 업그레이드하는 프로그램이다. 또한 플래시 플레이어는 모든 운영체제와 메이저의 브라우저에 포팅돼 있고 핸드폰과 같은 다양한 디바이스에서 사용되고 있다. 이점이 다른 RIA 기술과 구별되는 장점 중 하나다.
플렉스2.0은 XML과 ActionScript3.0으로 만들어진 파일을 이용해 플래시 파일을 생성하는 기술이다. 플래시 기술은 과거부터 게임이나 극장 예약 프로그램 등 다양한 용도로 사용돼온 기술이었다. 그렇다면 과연 플렉스와 플래시는 무엇이 다른 것일까? 간단하게 말하면 플래시는 디자인적 성향이 강한 반면 플렉스는 태그 기반 스크립트로 돼있어 개발자 성향이 강하다. 플래시는 벡터 기반 애니메이션 개발이 주목적이라면 플렉스는 화려하고 역동적인 RIA 애플리케이션의 개발을 지향한다.
플렉스는 화려한 UI 컴포넌트를 라이브러리 형태로 제공하고, 이 컴포넌트들은 ActionScript와 XML 태그로 제어가 가능하고 텍스트 기반으로 HTTP와 웹서비스 통신이 가능하다. 또한 바이너리 형태로 AMF 프로토콜과 통신이 가능하고 AMF 프로토콜을 이용해 서버의 자바객체를 참조하고 실행할 수 있다. 이러한 특성으로 레거시 시스템과의 통합 및 웹 애플리케이션 개발에 많은 장점을 갖는다. 일반적인 X-인터넷은 컴포넌트 실행환경, 실행엔진, 실행코드, 컴포넌트 라이브러리로 구성된다. 이것을 플렉스와 맵핑해 보면 <표>와 같다.
플렉스의 장점 중 하나는 철저하게 뷰(View)만을 대상으로 한다는 것이다. 현재 웹 애플리케이션은 데이터 관점(M - Model), 제어관점(C - Control)과 디자인 관점(V - View)으로 분리해 개발하는 것이 보편화된 상태다. 이것을 MVC 모델이라고 한다. X-인터넷 제품 중 일부는 이러한 구조를 파괴하는 제품도 있다. 화면을 그리기 위해 데이터베이스의 컬럼 명과 컬럼 사이즈를 요구하는 경우도 있고 서버 측에서 제공하는 데이터 형태를 X-인터넷 제품의 데이터에 맞춰 재가공을 요구하기도 한다. 플렉스는 기존의 아키텍처와 데이터 형태를 그대로 유지하면서 서버에서 제공하는 데이터를 이용해 화면구성만을 전담한다. 플렉스는 향후 웹2.0 시대의 주요 구현기술로 자리 잡을 것으로 생각된다.
지금까지 과거로부터 현재진행중인 GUI 트렌드를 살펴봤다. 컴퓨터 하드웨어의 발전과 사회적인 요구로 다양한 모습으로 애플리케이션은 발전했다. 이와 함께 데이터에 대한 확장과 기반 기술의 발전으로 웹2.0이라는 전환점을 맞고 있다. 현재로서는 웹2.0을 대표하는 구현기술로 AJAX와 플렉스를 꼽을 수 있다. 이런 관점에서 다음에는 플렉스의 아키텍처적인 특징과 개발환경에 대해서 다룰 것이다. |
|
|
|
|
|
|
|
|
|
| ⓒ 데이터넷(http://t564.ndsoftnews.com) 무단전재 및 재배포금지 | 저작권문의 |
|
|
|
|
|
|
| |
| 가장 많이 본 기사 |
|
|
 |
|
KT, ‘28GHz 기업전용 5G 네트워크’ 개발 성공
