| 플렉스 애플리케이션「기획부터 개발까지」 |
| 조성주 (이랜서) (ZDNet Korea) |
| 2004/11/01 |
| 필자가 플래시로 제작하는 리치 인터넷 애플리케이션에 관심을 가지게 된 가장 큰 이유 중 하나는 2001년 미국의 포레스터에서 제안했던 차세대 인터넷인 ‘X인터넷’ 때문이었다. X인터넷 개념 중 eXecutable(실행가능한) 인터넷에 대한 개념을 바탕으로 만들었다고 해도 과언이 아닐 정도로 플래시가 제공하는 리치 인터넷 애플리케이션 개발 환경은 X인터넷 애플리케이션의 개발 환경과 비슷하다는 느낌을 받았다. 하지만 원래 디자인 저작도구로 출발한 플래시의 개발 환경에 개발자들이 적응하지 못해 리치 인터넷 애플리케이션 보급은 기대했던 만큼 활발하지는 못했다. 매크로미디어에서는 이런 상황에 대한 해결책으로 2003년 ‘로얄(Royale)’이라는 코드명의 새로운 프로젝트를 진행하게 된다. 그 목적은 개발자들에게 맞는 리치 인터넷 애플리케이션 개발 환경의 제공으로 그 결과는 ‘플렉스(Flex)’라는 서버 제품으로 우리 앞에 나타났다. 플렉스는 웹 애플리케이션 개발자들이나 기존의 플래시 개발자들에게도 매우 생소한 개념이다. 그러므로 여기서는 독자들이 플렉스와 플렉스 애플리케이션에 대한 이해도를 높일 수 있도록 플렉스 애플리케이션 제작 프로세스에 대해 간단히 살펴보고, 예제를 통해 플렉스에 대한 이해도를 높여보도록 하겠다. 또한 마지막 부분에서는 플렉스 애플리케이션을 과연 어떤 분야에 적용할 수 있을까에 대해 생각해 보도록 할 것이다. 플렉스 애플리케이션 제작 프로젝트 플렉스는 기존의 웹 애플리케이션 개발 환경이나 플래시 애플리케이션 개발 환경과는 분명히 다른 개발 환경을 제공한다. 그러므로 플렉스 애플리케이션 제작 프로젝트 역시 별도의 프로세스를 따르게 마련이다. 이번에는 플렉스 연구과제 프로젝트를 수행한 경험을 바탕으로 플렉스 애플리케이션 프로젝트 팀의 구성과 개발 프로세스에 대해 간단히 설명해 보겠다. 프로젝트 팀 구성 플렉스 애플리케이션 제작 프로젝트 팀은 프로젝트 매니저(PM)를 중심으로 디자인팀과 개발팀으로 구성된다. 디자인팀에는 디자이너와 정보 설계자(information architect)가 필요하며, 개발팀에는 클라이언트측 개발자와 서버측 개발자가 필요하다. 물론 프로젝트의 규모에 따라 디자이너와 개발자들의 수가 늘어날 수는 있지만 기본적인 팀 조직 자체가 변할 필요는 없다. 프로젝트 매니저 프로젝트 매니저의 가장 큰 역할은 프로젝트 기간 동안 개발자, 디자이너와 고객 사이의 원활한 커뮤니케이션이 이뤄질 수 있도록 하는 것이다. 또한 프로젝트의 자원 분배와 시간 배정, 비용 산정과 같은 업무도 병행하게 된다. 또한 고객과 실제 프로젝트 수행 팀간의 커뮤니케이션 통로가 되기도 한다. 다른 애플리케이션 개발에서도 마찬가지이지만, 프로젝트 매니저는 프로젝트 기간 내내 투입돼야 하지만 100% 프로젝트에 묶일 필요는 없다. 물론 프로젝트 매니저가 시스템 아키텍처 설계나 정보 설계와 같은 업무를 병행하는 경우가 있을 수도 있다. 팀장 디자인팀과 개발팀의 팀장으로 프로젝트 규모가 커 여러 명의 디자이너와 개발자가 참여하는 경우에 필요하다. 이들은 프로젝트 매니저를 대신해 각각의 팀원들의 업무 분장과 업무 진척도를 체크하고, 팀 생산물의 단위 테스트를 수행하게 된다. 또한 이들은 프로젝트 매니저의 자원 분배와 시간 배정, 비용 산정과 같은 업무를 도와주기도 하며, 실질적인 현상을 파악해 프로젝트 매니저와 프로젝트 중간에 생기는 위험요소를 관리하기도 한다. 디자이너 디자이너는 플렉스 애플리케이션의 전반적인 디자인을 제작한다. 또한 디자인과 관련된 폰트나 색상 선정, 브랜딩 업무 등 일반적인 애플리케이션 제작과 관련된 부분도 수행한다. 한편 플렉스 애플리케이션을 제작할 때 컴포넌트나 컨트롤, 아이콘과 같은 디자인은 플래시를 이용해 SWC 컴포넌트의 스킨을 변경하거나 사용자 정의 컴포넌트를 제작해야 한다. 플래시를 어느 정도 다룰 줄 아는 디자이너들은 간단하게 SWC 컴포넌트의 스킨을 변경할 수 있지만, 복잡한 SWC 컴포넌트의 스킨 변경이나 사용자 정의 컴포넌트의 제작과 같은 경우에는 컴포넌트 개발자와 함께 작업해야 한다. 이런 경우에는 개발자가 작업하기 전에 미리 컴포넌트의 외형을 디자인해 개발자가 개발할 수 있도록 지원해야 하며, 개발 과정 중에 필요한 디자인 요소들을 개발하기도 한다. 정보 설계자 플렉스 애플리케이션 개발을 위한 정보 설계자는 일반적인 웹 애플리케이션 정보 설계 경험보다는 데스크탑 애플리케이션 정보 설계 경험이 있는 사람이 적합하다. 실제로 플렉스 애플리케이션은 하나의 애플리케이션에서 다양한 상호작용과 빈번한 데이터 교환이 일어나기 때문에, 정보 설계의 측면에서는 데스크탑 애플리케이션과 유사하다. 플렉스 정보 설계자는 애플리케이션의 전체적인 레이아웃을 잡고, 스토리보드와 유즈케이스 작성도 하게 된다. 또한 고객과의 커뮤니케이션을 통해 프로젝트 요구사항을 정리해야 한다. 실제로 플렉스 애플리케이션 개발 과정에서 가장 중요한 역할은 바로 정보 설계자이다. 기존의 웹 애플리케이션과는 다른 형태의 애플리케이션을 제작하게 되므로 창의력과 다양한 데스크탑 애플리케이션 사용자 요구 분석의 경험이 있는 사람이 적합하다. 클라이언트 개발자 클라이언트 개발자는 클라이언트 애플리케이션의 코드를 작성하는 개발자이다. 이들은 주로 디자이너나 정보 설계자와 함께 컴포넌트 커스터마이징이나 사용자 정의 컴포넌트를 개발한다. 한편 서버 개발자와는 서버와 데이터를 주고받을 수 있는 API 등을 정의하기도 한다. 플렉스 애플리케이션에서 클라이언트 개발자의 특징적인 업무 중 하나는 사용자의 키보드 입력이나 마우스 클릭과 같은 이벤트를 처리하는 코드를 작성하는 것이다. 실제로 클라이언트 애플리케이션은 사용자와 상호작용이 많기 때문에 정보 설계자와 함께 편리한 사용자 환경을 제공하기 위한 다양한 컨트롤을 제작해야 한다. 클라이언트 개발자들은 대부분 MXML과 액션스크립트를 알고 있어야 하며, XML과 액티브X 컨트롤, 웹 서비스에 경험이 있으면 도움이 된다. 한편 컴포넌트를 제작하기 위해서는 플래시를 이용한 사용자 정의 컴포넌트 제작 경험도 있어야 한다. 서버 개발자 서버측 스크립트 개발 경험이 많은 개발자가 적합하다. 물론 MXML, 액션스크립트에도 익숙해야 하며, 애플리케이션의 데이터 송수신 부분에 경험도 있어야 한다. 이외에도 XML이나 SOAP 웹 서비스도 구축할 수 있어야 하며, 클라이언트 애플리케이션에서 외부와 데이터를 송수신할 수 있는 API들을 제작해 제공해야 한다. 또한 보안이나 플렉스 서버, 데이터베이스 서버 관리와 같은 업무들도 담당한다. 플렉스 애플리케이션 제작 프로세스 플렉스 애플리케이션 제작 프로세스는 다른 애플리케이션 제작 프로세스와 크게 다르지 않다. 일반적인 애플리케이션 제작 프로세스는 준비→분석→설계→개발 및 통합으로 이뤄진다. 다음에 나올 블로그 애플리케이션 제작 과정을 가정해 각각의 범위를 간단하게 설명해 보겠다. 준비 프로젝트란 특정 문제를 해결하는 것이다. 그러므로 문제의 원인을 파악해 그 문제를 해결할 수 있는 방안 제안이 바로 준비 단계에서 중요하게 수행돼야 한다. 또한 문제 해결 과정에서 비용과 기간 등도 검토돼야 하며, 문제를 해결하기 위해 필요한 솔루션들이 검증해야 한다. 기술적이고 비즈니스적인 제한사항들에 대해서도 검토가 이뤄져야 한다. 블로그 애플리케이션 구축 프로젝트에서 해결해야 할 가장 큰 문제점은 HTML 기반의 웹 애플리케이션 형태로 제작된 기존의 블로그가 사용자들에게 불편함을 준다는 점이다. 그 불편한 사항들은 다음과 같이 정리가 가능하다. ◆ 여러 블로그를 주기적으로 검색해야 하는 경우 블로그 별로 URL을 통해 방문해야 한다. ◆ 블로그의 제목 목록이 일목요연하게 보여지지 않는다. ◆ 블로그 내용 조회시 새로운 정보가 나오면 별도로 검색 사이트 창을 띄워 해당 내용을 검색해야 관련 정보를 찾을 수 있다. ◆ 사용자의 요청에 따라 화면이 갱신되므로 일관성있는 사용자 경험을 제공하지 못한다. 이번 프로젝트는 플렉스 애플리케이션의 특징과 제작 방법에 대해 알아보기 위한 프로젝트로 기본적으로 플렉스 서버를 이용해야 한다. 또한 기간과 비용도 최소한으로 설정했다. 분석 분석 단계에서는 프로젝트의 성공을 정의하는 것이 가장 중요하다. 또한 프로젝트의 범위를 선정하기도 하며, 비즈니스적인 측면과 기술적인 측면의 정보들을 모으고 해당 애플리케이션 담당자나 사용자들과 인터뷰를 하기도 한다. 한편 프로젝트 수행에 필요한 범위와 비용, 예산 등도 확정한다. 블로그 애플리케이션 제작 프로젝트의 성공 조건은 다음과 같다. 성공 조건이 도출되면 간단한 레이아웃 시안과 그와 관련된 간단한 스토리보드 초안, 시스템 구성도 등이 포함된 프로젝트 기획서가 나와야 한다. ◆ 블로그 목록과 해당 블로그의 글 제목 목록은 한 화면에서 볼 수 있을 것 ◆ 블로그의 내용을 조회할 때도 블로그의 목록과 글 제목 목록의 상태를 유지시켜 일관성있는 사용자 경험을 제공할 것 ◆ 블로그의 내용을 바탕으로 편리한 검색이 되도록 할 것 설계 설계 단계에서 가장 중요한 것은 개발팀과 디자인팀, 그리고 고객이 프로젝트를 통해 만들어질 결과물의 형태에 대해 같은 이해를 가지도록 하는 것이다. 이 단계에서는 정보 설계가 마무리되어 상세한 스토리보드가 작성돼야 하며, 레이아웃과 디자인 시안이 확정돼야 한다. 한편 개발팀에서는 마무리된 정보 설계를 바탕으로 컴포넌트의 기능 사양에 대해 정리해야 한다. 또한 플렉스 애플리케이션과 외부 서버와의 데이터 송수신 방식에 대한 사항들도 결정해야 한다. 블로그 애플리케이션의 설계 결과물은 다음과 같다. ◆ 레이아웃 시안, 디자인 시안, 스토리보드 ◆ 정보 설계서, 컴포넌트 기능 사양서 ◆ 데이터 송수신 API 목록, ERD 등 설계 단계에서는 개발팀, 디자인팀, 고객이 프로젝트의 결과물에 대한 같은 청사진을 가져야 한다. 또한 컴포넌트 기능 사양서와 정보 설계서의 완성을 위해서는 간단한 샘플을 제작해 보는 것도 효율적인 설계를 위해 필요하다. 특히 플렉스 애플리케이션의 경우 다양한 기능과 형태의 컴포넌트가 애플리케이션에서 사용되고, 컴포넌트간의 상호작용이 많으므로 정보 설계서와 스토리보드를 바탕으로 상세한 컴포넌트 기능 사양서를 제작해야 한다. 만약 개발자들이 컴포넌트의 기능 사양을 잘못 이해하고 본래의 의도에 벗어난 컴포넌트를 제작하는 경우가 발생하면 전체 프로젝트의 수행에 차질이 생길 수 있을 정도로 심각한 상황이 발생할 수 있다.
개발 및 통합 실제로 플렉스 애플리케이션을 개발하는 단계이다. 분석 설계 과정에서 만들어질 결과물에 대한 명확한 이해를 바탕으로 팀별로 개발해 나가면 된다. 블로그 애플리케이션의 경우 플렉스의 내장 컴포넌트를 그대로 사용하면서 외부와의 데이터 송수신은 블로그 사이트에서 제공하는 RSS(Rich Site Summary)나 RDF(Resource Description Framework)와 같은 XML 문서 양식을 이용했다. 개발 단계에서는 컴포넌트의 기능들을 구현하고 관련 디자인을 개발한다. 또한 서버와의 데이터 통신을 위한 웹 서비스나 자바 객체를 개발한다. 개발하면서 단위 테스트를 수행해 각각의 기능들을 테스트해 본다. 또한 통합 단계에서는 각각의 컴포넌트를 통합해 전체적인 애플리케이션 유즈케이스에 따라 통합 테스트를 수행한다. 블로그 애플리케이션 예제 개발자들 사이에서는 ‘백견이 불여일타’라는 말이 있다. 소스코드를 백 번 보는 것보다 직접 소스코드를 작성하면서 예제를 만들어 보는 것이 제작 과정을 이해하기 쉽다는 것이다. 플렉스 애플리케이션에 대해 이해하기 위해 직접 플렉스 애플리케이션을 만들어 보는 것은 매우 중요하다. 예제로는 플렉스에서 샘플로 제공하는 블로그 애플리케이션을 이용하기로 했다. 블로그를 예제로 선택한 이유는 블로그의 사용 방법을 알고 있는 사람들이 많다는 점이다. 그러므로 플렉스 블로그 애플리케이션을 만들어 보면 기존의 웹 애플리케이션과 플렉스 애플리케이션의 차이점을 쉽게 확인할 수 있을 것이다. 또한 대부분의 블로그들이 컨텐츠를 RSS나 RDF와 같은 XML 문서로 제공하고 있으므로 별도의 웹 서비스나 자바 객체와 같이 데이터 송수신을 위한 별도의 API를 작성하지 않고도 애플리케이션을 완성할 수 있다는 장점이 있다. 한편 블로그 외에 HTTP를 통해 XML 문서를 제공하는 뉴스 사이트들의 컨텐츠들도 예제에서 보여지도록 하겠다. 구글 검색 웹 서비스를 이용해 블로그 애플리케이션에 검색 기능도 추가해 보겠다. 기존의 블로그 애플리케이션들을 생각해 보자. 하나의 컨텐츠를 읽기 위해 컨텐츠의 제목을 클릭하면, 전체 화면이 서버로부터 HTML의 형태로 전송되어 클라이언트의 웹 브라우저에 렌더링된다. 그러므로 사용자들이 블로그의 컨텐츠를 읽을 때마다 HTML 문서가 전송되어 화면에 보여지게 될 때까지 시간이 걸리게 된다. 하지만 플렉스 애플리케이션의 경우 컨텐츠의 제목을 클릭하면 컨텐츠의 내용이 보여지는 화면만 변경할 수 있으므로 전체 화면의 데이터를 모두 받을 필요가 없으며, 서버로부터 해당 데이터가 전송되면 자동으로 화면을 변경해 주므로 사용자가 대기하는 시간이 줄어들게 된다.
컨테이너를 이용한 레이아웃 지금부터 플렉스 블로그 애플리케이션 예제를 제작해 보겠다. 먼저 애플리케이션의 레이아웃부터 시작하겠다. 플렉스 애플리케이션의 레이아웃은 레이아웃 컨테이너를 이용해 구성한다. 이때에는 VBox와 HBox 컨테이너를 사용한다. 다음 MXML 코드를 살펴보자. <?xml version = "1.0" encoding = "utf-8" ?> <mx:Application width="100%" height="100%" xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:HBox> <mx:Tree /> <mx:VBox> <mx:VBox /> <mx:DataGrid /> <mx:TextArea /> </mx:VBox> </mx:HBox> </mx:Application> 기본적으로 플렉스 MXML 코드는 XML 마크업 언어이다. 맨 윗부분에 XML 문서 선언 부분을 참고하기 바란다. 그 다음 애플리케이션은 <mx:Application> 태그로 선언된다. 이 애플리케이션 내부에 HBox와 VBox 컨텐이너를 추가해 전체적인 레이아웃을 구성했다. HBox 컨텐이너에는 Tree 컴포넌트와 VBox 컨테이너를 포함하고 있다. HBox 컨텐이너는 내부의 포함하는 요소들을 왼쪽에서 오른쪽으로 정렬해 준다. 그러므로 먼저 왼쪽에 Tree 컴포넌트가 위치하고 오른쪽에 VBox 컨테이너가 위치하게 된다. VBox 컨테이너에는 또 다른 VBox 컨테이너와 DataGrid 컴포넌트, 그 아래에 TextArea 컴포넌트가 포함되어 있다. HBox와 달리 VBox는 내부의 포함하는 요소들을 위에서 아래쪽으로 정렬해 준다. 그러므로 오른쪽 상단에는 VBox가, 중단에는 DataGrid가, 맨 하단에는 TextArea가 위치하게 된다. <화면 3>은 앞의 코드를 실행시킨 모습이다. 내부에 데이터가 없는 상태로 해당 구성 요소들의 모습은 파악할 수 없으나 전체적인 레이아웃의 모습은 파악할 수 있다.
저장과 배포 플렉스 애플리케이션은 플렉스 서버를 통해 배포된다. 앞에서 작성한 MXML 문서를 플렉스 설치시 생성되는 flex 폴더 안에 blogReader라는 폴더를 만들고 BlogReader.mxml이라는 이름으로 저장한다. 필자의 경우 C:\Program Files\Macromedia\Flex\jrun4\servers\default\flex\BlogReader에 들어 있다. 이렇게 저장된 플렉스 애플리케이션은 웹 브라우저를 통해 배포할 수 있다. 웹 브라우저를 열고 해당 플렉스 애플리케이션의 경로를 입력하면 <화면 3>과 같이 플렉스 애플리케이션이 배포되어 실행되는 것을 확인할 수 있다. 필자의 시스템에서 플렉스 애플리케이션의 경로는 http://localhost:8700/flex/BlogReader/BlogReader.mxml이다. 필자의 경우 윈도우 XP에 별도의 J2EE 애플리케이션 서버를 설치하지 않고, 플렉스를 Integrated Flex Server 옵션으로 설치했다. Integrated Flex Server로 설치하면 J2EE 애플리케이션 서버인 JRun이 통합되어 설치되므로 별도로 애플리케이션 서버를 설치하지 않고도 플렉스 애플리케이션을 배포해 실행시킬 수 있어 플렉스 애플리케이션을 제작하거나 테스트할 때 매우 유용하다. Tree 컨트롤 추가 먼저 왼쪽의 Tree 컴포넌트에 블로그 목록이 나타나도록 해보겠다. 앞에서 레이아웃을 구성할 때 추가했던 Tree 컴포넌트 부분을 다음과 같이 수정한다. <mx:Tree id="blogTree" width="250" heightFlex="1"> <mx:dataProvider> {blogList} </mx:dataProvider> </mx:Tree> 먼저 <mx:Tree> 태그를 살펴보자. Id 속성은 Tree 컴포넌트를 다른 컴포넌트나 액션스크립트에서 참조할 수 있도록 blogTree라고 정했다. width 속성은 Tree 컴포넌트의 넓이를 설정해 주는 속성으로 여기서는 Tree 컴포넌트의 넓이를 250픽셀로 정했다. 특이한 것은 heightFlex 속성인데, 여기서는 heightFlex 속성을 1이라고 설정했기 때문에 웹 브라우저의 윈도우 창의 크기가 변경되면 그에 따라 Tree 컴포넌트의 넓이도 변한다. 또한 <mx:dataProvider> 요소는 Tree 컴포넌트에 표시될 데이터를 변수 이름으로 지시하게 된다. 그러므로 앞의 코드는 blogList 변수에 저장된 데이터가 Tree 컴포넌트 안의 내용으로 보여주라는 의미를 가진다. 데이터 모델과 바인딩 앞의 코드에서 <mx:dataProvider> 요소를 이용해 컴포넌트에 데이터를 맵핑시켜 주는 것이 바로 데이터 바인딩 부분이다. 이제는 ‘blogList’ 변수를 선언하고 해당 데이터를 선언해 주는 것이 필요하다. <mx:Application> 태그의 자식 요소로 <mx:XML id=“blogList” source=“blogList.xml”/>과 같은 <mx:XML> 요소를 추가해 준다. <mx:XML>는 플렉스 애플리케이션의 데이터 모델을 선언할 때 사용하는 태그이다. 이때 선언할 데이터가 XML 형태인 경우에는 <mx:XML> 태그를 사용하고, 단순한 데이터 형인 경우에는 <mx:Model>을 사용한다. 물론 액션스크립트 클래스를 이용해 데이터 모델을 선언할 수도 있다. 앞과 같이 선언함으로써 blogList.xml에 있는 XML 데이터는 blogList 변수로 참조해 Tree 컴포넌트의 내용으로 보여주게 된다. blogList.xml 문서는 다음과 같다.
blogList.xml 문서는 앞에서 제작한 MXML 문서와 같은 폴더에 저장한다. 이제 다시 웹 브라우저를 통해 플렉스 애플리케이션을 실행해 보자. <화면 4>와 같은 결과를 볼 수 있다. 웹 브라우저 창의 크기를 조절하면 Tree 컴포넌트의 높이가 자동으로 웹 브라우저 창 높이에 맞게끔 변하는 것을 확인할 수 있다. 또한 Tree 컴포넌트의 폴더 앞에 있는 화살표를 클릭하면 해당 폴더 안에 저장되어 있는 블로그의 목록들을 확인할 수 있다. HTML 기반의 웹 애플리케이션에 Tree 컴포넌트와 같은 기능을 추가하기 위해서는 상당히 많은 노력과 시간이 필요하게 될 것이다. 하지만 플렉스에서는 컴포넌트의 형식으로 제공하기 때문에 몇 줄의 코드로 Tree 컴포넌트의 다양하고 복잡한 기능을 활용할 수 있다.
블로그 제목을 보여주기 위한 DataGrid 컨트롤 추가 이제 Tree 컴포넌트의 블로그 이름을 클릭하면 오른쪽의 DataGrid 컴포넌트에 해당 블로그의 글 제목이 나타나도록 해보자. 먼저 <mx:Tree id=“blogTree” width=“250” heightFlex=“1” change=“fetchBlogEntries(event);”>과 같이 Tree 컴포넌트의 태그를 수정해 준다. 진하게 표시된 부분은 Tree 컴포넌트에 변화가 일어나는 이벤트가 발생하면 fetchBlogEntries(event) 함수가 호출되도록 선언한 것이다. 플렉스 애플리케이션에서는 이벤트 처리가 가능하므로 사용자의 특정 행동을 감지해 처리할 수 있다. 여기서는 사용자가 Tree 컴포넌트 안에 있는 블로그 목록을 선택하는 이벤트를 포착해 fetchBlogEntries 함수를 실행시키고 있다. <mx:Scirpt> 태그를 이용한 액션스크립트 입력 fetchBlogEntries 함수를 선언해 보자. 플렉스 애플리케이션에서 함수를 선언할 때는 대체로 액션스크립트 2.0을 사용한다. MXML 문서 안에서는 <mx:Script> 태그 안에 액션스크립트를 입력하 된다. 다음은 MXML 문서 안에 액션스크립트로 fechBlogEntries 함수를 선언하는 코드이다. 이 코드는 <mx:Application>의 자식 요소로 입력하면 된다. fetchBlogEntries 함수를 살펴보자. 먼저 블로그의 URL 정보를 blogURL 속성에 저장하고, blogViewHelper 클래스의 setSelectedBlog 메쏘드를 실행한다. <mx:Script> function fetchBlogEntries(event) { var blogURL = event.target.selectedItem.attributes.url; if(blogURL != null) { blogViewHelper.setSelectedBlog(blogURL); feed.send(); } } </mx:Script> 액션스크립트 클래스 선언과 인스턴스화 blogViewHelper 클래스는 blogViewHelper.as라는 별도의 액션스크립트 파일에 입력하고 BlogReader.mxml를 저장한 폴더에 저장한다. 다음은 blogViewHelper 클래스를 선언하는 액션스크립트 코드이다. class BlogViewHelper { function setSelectedBlog( blogURL : String ) { selectedBlog = blogURL; } function getSelectedBlog() : String { return selectedBlog; } public var selectedBlog:String; } BlogViewHelper 클래스에는 selectedBlog 속성이 있으며, 이 속성과 관련된 set/get 메쏘드도 작성했다. 앞의 액션스크립트에서 setSelectedBlog 메쏘드를 호출했는데, 이렇게 setSelectedBlog 메쏘드를 호출해 주면 selectedBlog 속성에 선택한 블로그의 URL 정보가 저장된다. 외부에 작성한 액션스크립트 클래스 파일을 MXML 내부에서 사용하기 위해서는 인스턴스화시켜야 한다. <BlogViewHelper id=“blogViewHelper”/>과 같은 코드를 <mx:Application>의 자식 요소로 추가시키면 외부의 액션스크립트 클래스 파일을 인스턴스화시킨다. 앞의 태그의 이름은 BlogViewHelper.as 파일 이름과 같으며, id 속성은 MXML 내부에서 해당 클래스를 참조하기 위한 이름이 저장되어 있다. 이렇게 새로운 태그가 추가되면 새로운 네임 스페이스를 추가해야 한다. 그러므로 <mx:Application> 태그 부분을 <mx:Application width=“100%” height=“100%” xmlns=“*” xmlns:mx=“http://www.macromedia.com/2003/mxml”>과 같이 수정한다. 그림과 같이 진한 부분을 추가시켜 주면 태그의 네임스페이스로 모든 이름을 사용할 수 있다. 액션스크립트 클래스 파일을 추가해 인스턴스화시킬 때는 반드시 네임스페이스를 추가하자. HTTP를 이용한 데이터 송수신 이제 Tree 컴포넌트에서 선택한 블로그의 데이터를 가져오는 일만 남았다. 플렉스 애플리케이션의 경우 외부의 XML 문서를 HTTP 프로토콜을 이용해 가져올 수 있는데, 이 때 사용할 수 있는 것이 바로 <mx:HTTPService>이다. 역시 <mx:HTTPService id=“feed” url=“{blogViewHelper.selectedBlog}”/>과 같은 코드를 <mx:Application>의 자식 요소로 추가시킨다. 앞의 fetchBlogEntries 함수에서는 feed.send()를 호출했다. 이는 해당 URL을 HTTP POST 방식으로 호출하게 된다. 여기서는 해당 URL로부터 XML 데이터를 결과 값으로 받아오게 되는데, 이 결과는 feed.result에 저장된다. 액션스크립트 클래스 파일의 확장 먼저 BlogViewHelper.as 파일에 feed.result에 저장된 XML 데이터로부터 블로그의 제목, URL 정보, 내용과 같은 데이터를 추출하는데 필요한 메쏘드를 추가해 BlogViewHelper 클래스를 확장한다. class BlogViewHelper { function getTitle( feedResult : Object ) : String { var isRSS = ( feedResult.rss != null ); if ( isRSS ) return feedResult.rss.channel.title else return feedResult.RDF.channel.title; } function getDate( feedResult : Object ) : String { var isRSS = ( feedResult.rss != null ); if ( isRSS ) return feedResult.rss.channel.lastBuildDate else return feedResult.RDF.channel.date; } ...중략 function getSelectedBlog() : String { return selectedBlog; } public var selectedEntry; public var selectedBlog:String; } 앞서 설명한 바와 같이 블로그는 다른 애플리케이션에서 데이터를 사용할 수 있도록 RDF 포맷이나 RSS 포맷의 형태로 데이터를 제공한다. 그러므로 XML 문서가 RDF인지 RSS인지를 판단해 각각 별도의 데이터를 추출하는 것을 눈여겨보기 바란다. 확장된 클래스 파일에는 RDF나 RSS로부터 각각의 데이터를 반환하는 메쏘드가 추가됐다. 블로그 정보 보여주기 블로그 목록에서 블로그를 클릭하는 경우 오른쪽 상단에 블로그의 기본 정보가 보여지도록 VBox 컴포넌트를 다음과 같이 수정한다. <mx:VBox verticalGap="0" backgroundColor="#EEF5EE" borderStyle="outset" widthFlex="1"> <mx:Label styleName="title" showEffect="Fade" text="{blogViewHelper.getTitle( feed.result )}" /> <mx:Label text="{blogViewHelper.getDate( feed.result )}" /> <mx:Link click="getUrl('mailto:'+event.target.label)" label="{blogViewHelper.getURL( feed.result )}" /> <mx:Label>은 레이블을 보여주는 태그이며, <mx:Link>는 링크를 설정하는 태그이다. styleName은 CSS 스타일 시트를 적용시키는 부분이다. 여기서는 BlogReader.css라는 스타일시트 파일을 다음과 같이 만든다. 이 스타일시트 파일 역시 BlogReader.mxml 파일과 같은 폴더에 저장한다. .title { font-family: Verdana; font-weight: bold; font-size: 18; color: gray; } 다음 작성한 스타일 시트 파일을 적용하기 위해 <mx:Style source=“BlogReader.css”/>과 같은 코드를 <mx:Application>의 요소로 추가해 준다. 이제 다시 플렉스 애플리케이션을 실행시켜 보자. Tree 컴포넌트에서 블로그 목록을 선택하면 <화면 5>와 같이 오른쪽 상단에 블로그의 기본 정보들이 화면에 표시되는 것을 확인할 수 있다.
서버 환경 설정 플렉스 애플리케이션이 외부와 데이터를 주고받기 위해서는 서버의 기본 환경 설정을 변경해야 한다. 서버의 환경설정 파일은 flex-config.xml 파일에 저장되어 있다. 필자의 경우 C:\Program Files\Macromedia\Flex\jrun4\servers\default\flex\WEB-INF\flex과 같은 경로에 환경 설정 파일이 있다. 환경 설정 파일을 살펴보면 웹 서비스를 이용한 데이터 교환과 관련된 환경 설정 정보가 들어 있는 <web-service-proxy> 태그와 HTTP를 이용한 데이터 교환과 관련된 환경 설정 정보가 들어 있는 <http-service-proxy> 태그가 있는 것을 확인할 수 있다. 각각의 태그에는 <url> 태그가 존재한다. 여기에 데이터를 주고받을 외부 서버의 URL 경로를 입력해 주면 된다. 여기서는 편의를 위해 다음과 같이 URL 정보를 입력해주었다. <whitelist> <unnamed> <url>http://*</url> <url>https://*</url> </unnamed> 앞과 같이 환경 설정 정보를 저장하면 HTTP나 HTTPS를 통해 접근하는 외부의 서버와 데이터 교환이 가능하다. 변경된 환경 설정 정보 파일을 저장해 주면 서버를 다시 시작하지 않아도 변경된 환경이 적용된다. 이렇게 하면 외부의 XML 문서를 이용한 데이터 수신과 웹 서비스를 이용한 데이터 교환이 가능하다. DataGrid 컴포넌트에 제목 보여주기 이제 DataGrid 컴포넌트에 글 제목과 작성날짜를 보여주는 코드를 제작해 보겠다. DataGrid 컴포넌트를 다음과 같이 수정해 준다. <mx:DataGrid widthFlex="1" height="220" change="blogViewHelper.setSelectedEntry(event)"> <mx:dataProvider> {blogViewHelper.getItem(feed.result)} </mx:dataProvider> <mx:columnNames> {blogViewHelper.getColumnNames(feed.result)} </mx:columnNames> </mx:DataGrid> DataGrid 컴포넌트에는 blogViewHelper.getItem(feed.result) 메쏘드의 결과 값들이, 컬럼에는 getColumnNames(feed.result) 메쏘드의 결과 값들이 보여진다. 한편 DataGrid 컴포넌트에서 블로그 글 제목을 클릭했을 경우 하단에 텍스트의 내용을 보여주는 setSelectedEntry(event) 메쏘드가 호출되도록 change 속성을 설정했다. 제작된 플렉스 애플리케이션을 실행하면 <화면 6>과 같이 제목과 날짜가 나타나는 것을 확인할 수 있다.
블로그 내용 보여주기 이제 블로그의 내용을 보여줄 차례이다. TextArea 컴포넌트를 다음과 같이 수정한다. <mx:TextArea id="description" widthFlex="1" heightFlex="1" html="true" wordWrap="true" editable="false" text="{blogViewHelper.selectedEntry.description }" /> <mx:Link id="itemLink" click="getUrl(event.target.label, '_blank')" label="{ blogViewHelper.selectedEntry.link}" /> TextArea 컴포넌트에는 블로그의 내용이 보여지게 된다. 하지만 이번 예제의 블로그 내용은 글자들만 보이고, 링크나 그림 같은 것들은 지원되지 않는다. 그러므로 원본 블로그를 볼 수 있는 URL을 <mx:Link>를 이용해 제공하고 있다. 앞에서 살펴본 바와 같이 DataGrid의 글 제목을 클릭하면 blogViewHelper.setSelectedEntry(event) 메쏘드가 실행되어 blogViewHelper.selectedEntry.description의 내용이 변하게 된다. TextArea 컴포넌트에서는 text 속성이 변할 경우 이를 바로 보여주므로 DataGrid의 글 제목을 클릭하면 자동으로 해당 글 제목의 내용이 보여진다. 다시 플렉스 애플리케이션을 실행시키면 <화면 7>과 같이 블로그의 내용이 나타나며, 그 아래에는 해당 블로그 내용이 담긴 원래 사이트의 링크도 나타나는 것을 확인할 수 있다.
TabNavigator 컴포넌트 마지막으로 블로그 애플리케이션에 구글 검색엔진과 관련된 부분을 추가해 보겠다. 먼저 화면에서 블로그의 내용이 나오는 부분을 TabNavigator 컴포넌트를 이용해 탭을 이용하는 인터페이스 변화를 구현해 보겠다. TextArea 컴포넌트 부분을 다음과 같은 코드로 수정한다. <mx:TabNavigator> <mx:VBox label="Blog 내용"> <mx:TextArea id="description" widthFlex="1" heightFlex="1" html="true" wordWrap="true" editable="false" text="{blogViewHelper.selectedEntry.description }" /> </mx:VBox> <mx:VBox label="Google 검색"> <GoogleSearch searchTerm="{ blogViewHelper.selectedEntry.title }"/> </mx:VBox> </mx:TabNavigator> TabNavigator 컴포넌트 안에는 여러 개의 VBox 컨테이너들이 존재할 수 있다. 이 때 VBox의 숫자만큼 탭의 숫자가 생기게 된다. 한편 VBox 컨테이너의 label 속성은 바로 탭의 레이블이 된다. 앞의 코드로 생성되는 첫 번째 탭의 레이블은 “Blog 내용”이며, 두 번째 탭의 레이블은 “Google 검색”이 된다. 한편 두 번째 탭에는 GoogleSearch라는 별도의 네임스페이스가 존재하게 된다. 이는 GoogleSerarch라는 새로운 컴포넌트를 인스턴스화해주는 것으로 여기서는 GoogleSearch 컴포넌트를 별도의 MXML 컴포넌트로 만들어 BlogReader.mxml 파일과 같은 폴더에 위치시켜주도록 하겠다. GoogleSearch 사용자 정의 컴포넌트 플렉스에서 사용자 정의 컴포넌트를 제작하는 방법은 앞에서 살펴본 별도의 액션스크립트 클래스 파일을 이용하는 방법과 별도의 MXML 파일을 이용하는 방법이 있다. 다음은 GoogleSearch.mxml 파일의 내용이다. 이 파일은 BlogReader.mxml에 포함되는 파일로 별도의 <mx:Application> 태그를 가지지 않는다. 전체적인 레이아웃은 하나의 VBox 컨테이너 안에 위에서부터 아래로 Button 컴포넌트, DataGrid 컴포넌트, Link 컴포넌트들이 위치해 있다.
<mx:WebService> 부분은 구글에서 제공하는 검색 웹 서비스를 이용하는 부분이다. <mx:operand> 태그 부분에는 구글 검색 웹 서비스 실행시 필요한 정보들이 담겨 있다. <key> 태그에는 구글 검색 웹 서비스를 사용하기 위한 인증 키 정보를 입력하면 된다. 이 인증 키는 구글 사이트에서 발급받을 수 있다. Button 컴포넌트를 클릭하면 ws.doGoogleSearch.send()가 실행되면서 구글 사이트에 검색어가 전달된다. 이 때 검색어는 블로그 글 제목이 된다. 실행된 웹 서비스의 결과는 ws.doGoogleSearch.result.resultElements로 반환되는데, DataGrid는 dataProvider로 이 결과를 등록해 놓고 있으므로 결과가 반환되면 DataGrid 컴포넌트에 바로 보여지게 된다. 이제 GoogleSearch.mxml이라는 이름으로 <리스트 2>를 저장해 BlogReader.mxml과 같은 폴더에 저장한다. 그리고 나서 BlogReader.mxml을 실행시켜 구글 검색이 제대로 되는지 확인해 보자.
최종 소스 정리 완성된 BlogReader.mxml 예제 소스 파일은 지면 제약상 ‘이달의 디스켓’으로 제공한다. 앞서 언급한 바와 같이 플렉스 애플리케이션 역시 별도의 애플리케이션이므로 MVC 패턴과 같은 디자인 패턴을 적용시킬 수 있다. 정리된 소스파일은 MVC 패턴에 따라 각각 Model, View, Control 부분으로 나누어 정리했다. 이렇게 해서 블로그 애플리케이션을 제작해 보았다. 플렉스가 생소한 만큼 가급적 전체적으로 제작해가는 과정을 통해 플렉스 애플리케이션의 제작 방법을 설명했다. 이제 완성된 블로그 애플리케이션을 실행해 테스트해 보자. 왼쪽의 트리에서 원하는 블로그를 선택하면 해당 블로의 정보가 오른쪽 상단에 나타나게 된다. 오른쪽 중단에는 해당 블로그에 등록된 글 제목들이 보여지게 된다. 이 중에서 원하는 글 제목을 클릭하면 블로그의 내용이 화면 오른쪽 하단에 나타나게 된다. 또한 새로운 정보를 검색해 구글을 통한 추가 정보를 원하는 경우에는 탭을 이용해 관련 정보를 담고 있는 사이트를 검색할 수 있다. 플렉스 애플리케이션 사용 소감이 어떠한가? 기존의 HTML 기반의 애플리케이션보다 훨씬 편리하지 않은가? 특히 내용을 하나씩 조회할 때마다 페이지 리로딩이 일어나지 않고, 변경돼야 할 내용만 변경되어 좀더 직관적인 UI를 제공하고 있다. 물론 플래시를 이용하면 앞서 제작한 플렉스 애플리케이션과 동일한 기능을 가진 플래시 애플리케이션을 제작할 수 있다. 하지만 플래시는 개발자들에게 익숙하지 않은 개발 환경으로 개발자들에 의한 플래시 애플리케이션의 개발을 기대하기 어렵다. 플렉스는 개발자들에게 친숙한 개발 환경에서 애플리케이션을 개발할 수 있어 개발자들에 의한 다양한 플렉스 애플리케이션이 제작될 것으로 기대된다. 구축 사례 및 적용 분야 플렉스 애플리케이션은 기존의 인터넷 애플리케이션보다 다양한 기능과 사용하기 편리하고 직관적인 인터페이스를 제공하고, 대부분 인터넷 애플리케이션을 대체할 수 있다. 하지만 플렉스가 시장에 보급되기 위해서는 좀더 많은 사람들이 플렉스를 이해해야 하고, 특히 플렉스 애플리케이션을 개발할 수 있는 회사나 개발자들이 많이 등장해야 할 것이다. 이번에는 플렉스 애플리케이션의 구축 사례를 살펴보고, 플렉스 애플리케이션이 우선적으로 적용될 수 있는 분야들에 대해 살펴보겠다. 플렉스의 구축사례와 적용 분야에 대한 고찰은 분명 플렉스에 관심을 가지는 기획자나 개발자들에게 플렉스를 이해하고 공부하는 데 좋은 지침이 될 것이다. 플렉스가 출시된 지 얼마되지 않았기 때문에 플렉스 애플리케이션의 도입 사례는 그다지 많지 않다. 특히 국내에는 알려진 구축 사례가 없으며, 개발자들이나 몇몇 회사에서 연구개발 프로젝트 차원에서 만들어진 플렉스 애플리케이션이 있는 것으로 알고 있다. ◆ Phoenix : Phoenix 애플리케이션은 매크로미디어의 전략적인 제휴사인 Optimal Payments의 제품수명 주기관리 시스템(Product Life-Cycle Management System)이다. Optimal Payments는 원래 JSP를 이용해 Phoenix 애플리케이션을 제작하다가 플렉스 베타 테스트를 통해 플렉스 애플리케이션으로 변환했다.
◆ DreamMail : DreamMail은 매크로미디어 한국지사의 파트너사인 드림헌터에서 필자가 개발에 참여한 플렉스 애플리케이션이다. 드림헌터서는 웹메일 애플리케이션의 제한적인 사용 환경을 개선하고자 플래시를 이용해 플래시 웹메일 애플리케이션을 개발 중에 플렉스 베타 테스트에 참여해 플렉스를 이용한 웹메일 애플리케이션을 개발했다. 현재 개발된 DreamMail은 일본의 포털 사이트에 도입을 추진 중이다. 구축 사례가 많지 않으므로 매크로미디어 사이트와 플렉스에서 제공하는 간단한 샘플들을 살펴보는 것도 플렉스의 이해를 높이는데 도움이 될 것이다. ◆ UNC Healthcare : 건강관리 프로그램의 사용성을 높이기 위해 플렉스를 이용했다. 다양한 측정치의 선택과 데이터 입력에 따라 실시간으로 변화하는 그래프를 제공해 사용자들의 만족도를 높이고 있다. 플렉스를 이용해 인터넷 애플리케이션 상호작용성을 높이고, 데이터 전송과 수신에 따른 대기 시간을 단축시킨 사례이다. ◆ Brocade Sales Dashboard : 영업 관련 데이터를 계기판의 형태로 일목요연하게 보여주는 애플리케이션이다. 영업 관련 데이터를 바탕으로 향후의 영업 정책을 정하는데, 다양한 형태로 데이터를 보여줘 업무의 효율성 및 의사결정 기간을 단축시켜 준다. 플래시를 이용해 컴포넌트 그래프를 만들고, 플렉스에서 만들어진 컴포넌트를 이용하는 방식으로 구현됐다. ◆ WHITTMANHART EIS Application : WHITTMANHART의 기업 정보 애플리케이션을 마이크로소프트의 엑셀 기반 시스템에서 플렉스로 대체해 실시간으로 사용자의 조작에 따라 조건에 맞는 데이터를 보여주게 된다. 기존의 데스크탑 애플리케이션의 기능을 플렉스 애플리케이션을 이용해 구현한 대표적인 사례이다. ◆ FlexStore : 플렉스로 만든 쇼핑몰이다. 상품 목록과 선택 상품의 상세 정보, 장바구니 결제 정보 입력과 같은 기능들이 모두 한 화면에 구현되어 있으며, 마우스 드래그앤드롭과 같은 기능을 제공해 편리한 쇼핑 환경을 제공한다. 플렉스 애플리케이션은 편리한 사용 환경을 제공하며, 빠른 개발과 개발자들에게 편리한 개발 과정을 제공해 기존의 HTML 기반의 웹 애플리케이션을 대체할 만하다. 특히 사용자의 입력이 많은 웹 애플리케이션이나 데이터를 사용자가 원하는 다양한 형태로 보여줘야 하는 웹 애플리케이션 등을 플렉스로 구현하면 좋을 것이다. 특히 플렉스 애플리케이션은 별도의 다운로드 없이 다양한 기능을 가진 애플리케이션을 웹 브라우저를 통해 배포할 수 있으므로 EIS나 BI와 같은 웹 기반 기업용 애플리케이션 구축에 적용할 수 있을 것이라고 여겨진다. 차세대 인터넷 애플리케이션을 향해 플렉스는 개발자들에게는 편리하고 빠른 개발을 가능하게 해주고, 사용자들에게는 좀더 다양한 기능과 편리한 배포 환경을 제공한다. 기존의 플래시 애플리케이션 역시 사용자들을 위한 다양한 기능과 편리한 배포 환경을 제공했지만 개발자들에게 접근하기 어려운 개발 환경으로 인해 활성화되지 못했다. 하지만 플렉스는 개발자들의 적극적인 참여의 장을 열어 매크로미디어의 리치 인터넷 애플리케이션 보급에 큰 역할을 담당할 것으로 보인다. 다른 X인터넷 애플리케이션 개발 환경보다 플래시와 플렉스가 유리한 가장 큰 이유는 광범위하게 배포되어 있는 플래시 플레이어 때문이다. 전 세계 인터넷에 연결된 컴퓨터의 98%에 설치되어 있는 플래시 플레이어에서 실행되는 플래시와 플렉스 애플리케이션은 HTML 기반의 웹 애플리케이션을 대체할 만한 명실상부한 차세대 인터넷 애플리케이션의 대표주자가 될 것이다. @ ▶ 전체 소스 다운로드 |
Macromedia Flex에 대한 자세한 내용
백서: 포털 환경에서 Macromedia Flex 사용
