Flash « Digital Angel Master

웹SW 개발, 무엇을 이용할까?「콜드퓨전·자바·닷넷」

March 13, 2008 — Digital Angel Master

초기의 CGI부터 IIS 기반의 ASP, PHP, JSP 등 많은 웹 애플리케이션 개발 언어들 속에서 개발자들은 어떤 선택을 해야 할까. 그중 하나인 콜드퓨전은 국내에서는 잘 알려지지 않았지만 상당히 많은 매력을 가진 웹 애플리케이션 제품이다.
특 히 콜드퓨전 MX는 J2EE 기반으로 출시되어 진정한 WAS(Web Application Server)로서 자리잡았다는 평을 받고 있다. 지금부터 콜드퓨전에 대한 모든 것을 담아내기는 힘들지만 간단하게나마 콜드퓨전의 특징을 살펴보고 매크로미디어 MX 제품군으로 개발한 펫 마켓(Pet Market) 웹 애플리케이션 샘플을 통해 콜드퓨전과 플래시 리모팅 기술의 결합을 살펴본다.

개발 시간 단축과 유지보수의 용이
우 선 콜드퓨전의 동작 원리부터 살펴보자. 콜드퓨전도 대부분의 웹 애플리케이션들이 동작하는 구조와 비슷한 원리를 갖는다. 즉 클라이언트로부터 요청을 받아 CFML(ColdFusion Markup Language) 기반으로 구성된 콜드퓨전 태그를 분석해 처리하고, 결과 값을 다시 클라이언트에 보내주는 방식이다.
콜드퓨전의 동작 원리를 보면 다른 웹 애플리케이션과 큰 차이가 없지만 콜드퓨전이 갖고 있는 기능과 코드의 간편함, 이를 통한 개발 시간의 단축과 유지보수의 용이함은 타 웹 애플리케이션과 비교될 수 없을 정도의 성능을 자랑한다. 또한 콜드퓨전 MX에 와서는 드림위버 MX, 플래시 MX와의 완벽한 연동을 지원하므로 웹 애플리케이션 개발의 효율성을 증대시킨다. 이밖에 콜드퓨전의 다양한 기능들을 타 웹 애플리케이션과 비교해 살펴보자.

편리한 웹 기반의 관리자 콘솔 지원
웹 애플리케이션 언어를 이용해 개발해 봤다면 시스템의 환경설정을 위해 고생해 본 경험이 있을 것이다. 전문적인 지식을 가진 사람만이 시스템의 환경설정을 변경할 수 있기 때문이다. 환경설정 관련 파일을 텍스트 편집기를 이용해 직접 수정하거나 별도로 지원하는 콘솔을 이용해 설정하면서 상당히 많은 어려움에 처하게 된다. 물론 이러한 것이 시스템 운용의 지침일 수도 있지만 모든 시스템은 관리자에게 좀더 쉬운 인터페이스를 제공해야 한다는 것은 분명한 진리이다. 이런 점에서 콜드퓨전은 웹 기반의 관리자 콘솔을 지원한다는 장점을 갖고 있다.

콜드퓨전에서는 데이터베이스 설정을 비롯한 캐시, 메일 서버, 웹 서비스, 검색 엔진, 디버깅, 로그 등에 관한 셋팅을 웹에서 쉽게 할 수 있다. 이렇게 설정된 시스템 환경은 이후에 실제 코드를 줄여주는 데 큰 역할을 하는데, 데이터베이스에 관련된 정보를 관리자 콘솔에서 등록하고 실제 코딩에서는 설정한 내용을 토대로 개발하기 때문에 코드에 불필요한 정보를 매번 적지 않아도 된다. 또한 로그 설정 및 로그 내용도 편리하게 웹 기반으로 볼 수 있으며 메일 서버, 스케쥴링 환경설정을 통해 다른 웹 애플리케이션에서 개발하기 힘든 항목도 아주 짧은 몇 줄의 코드로 개발할 수 있다.

<그림 1> 콜드퓨젼 MX서버의 구조

<그림 2> 콜드퓨전의 동작 원리

코드의 간결함
앞 서 언급했던 것처럼 콜드퓨전은 다른 웹 애플리케이션 언어와 달리 관리자 콘솔을 통해 직접 코드에 기록해야 할 부분을 실제 코드에 추가하지 않도록 했다. 예를 들면 CFMX라는 데이터소스를 관리자 콘솔을 통해 콜드퓨전에 등록했다면 이후에 데이터베이스와의 연동을 다음과 같이 할 수 있다.

이처럼 몇 줄의 코드만으로 데이터베이스에 접속해 데이터를 가져올 수 있다. 또한 가져온 데이터들은 이나 태그를 이용해 실제로 웹 페이지에 출력할 수 있는데, 이 또한 다른 언어들보다 상당히 간단하다.

동일한 프로그램을 다음과 같이 ASP, JSP, PHP의 세 언어로 작성해 봤다. 콜드퓨전이 타 언어에 비해 문법 구조와 실제로 작성하는 코드가 간결함을 비교할 수 있다.

◆ ASP
<% set cnn = server.createobject(”ADODB.Connection”)
   cnn.ConnectionString = “DSN=TBTest;
   database = tbwork;UID;PWD=;”
   cnn.Open
   Set rst = cnn.Execute(”Select * From test”)
   While Not rst.EOF
   Response.Write rst(”FirstName”) &_ ” ” & rst(”LastName”) & ” ”
   rst.MoveNext
   Wend
%>
◆ JSP
<%@ page import = “javax.sql.*, java.sql.*, java.util.*” %>
<% InitialContext context = getInitialContext();
   ConnectionSource ds = context.lookup
   (”java:comp/env/jdbc/TBTest”);
      Connection conn = ds.getConnection();
   RowSet Qtest;
   try { Statement stmt = conn.prepareStatement
      (”Select * From test”);
      Qtest = stmt.execute();
   }
   finally { conn.close(); }
%>
<% while (Qtest.next()) { %>
   <%= Qtest.getString(”FirstName”) %>
   <%= Qtest.getString(”LastName”) %>
<BR>
<% } %>
◆ PHP
<?php $Connection = mysql_connect(”localhost”, “”, “”)
   $db = mysql_select_db(”tbwork”, $connection)
   $sql = “Select * from test” ;
   $sql_result = mysql_query($sql)
   while ($now = mysql_fetch_array($sql_result)) {
      $FirstName = $row["FirstName"];
      $LastName = $row["LastName"];
         echo “$FirstName $LastName”; }
   mysql_free_result($sql_result);
   mysql_close($connection);
?>

또 하나의 예를 들어, 메일을 보내는 프로그램을 작성할 때 다른 웹 애플리케이션으로 개발한다면 상당히 복잡한 코드나 다른 컴포넌트들과 연동해 사용해야 한다. 그렇지만 콜드퓨전에서는 태그를 이용해 쉽게 메일을 보낼 수 있다.

<화면 1> 메일 서버 절정 화면

태그를 사용하기 위해서는 <화면 1>과 같이 메일 서버의 주소를 관리자 콘솔의 메일 서버 항목에서 설정해야 한다. 그리고 나서 다음과 같이 메일을 보내는 코드를 작성한다.

이처럼 어렵게만 생각했던 메일 발송 프로그램을 단 세 줄로 만들 수 있다. 또한 데이터베이스에 전자주소를 가져와 단체 발송할 경우도 앞서 설명한 태그와 함께 쉽게 만들 수 있다.

<cfquery name=”get” datasource=”test”>
SELECT email
FROM table이름
</cfquery>
<cfloop query=”get”>
<cfmail from=”보내는 사람의 이메일 주소” to=”#email#” subject=”제목”>
메일 내용
</cfmail>
</cfloop>

데이터베이스에 가져온 결과 값을 태그를 이용하여 루프를 돌면서 메일을 하나씩 보내게 된다. 단지 몇줄을 추가해 단체 메일을 발송하는 코드를 작성한 것이다. 콜드퓨전은 이 외에도 다양한 기능을 태그 기반으로 쉽게 작성할 수 있다.

<화면 2> 콜드퓨전의 디버깅 설정 메뉴

편리한 디버깅 환경
웹 프로그래밍을 해 본 사람이라면 작성한 프로그램에 에러가 발생했을 때 어디서 에러가 나왔는지 찾기 힘들어서 고생한 적이 있을 것이다. 필자도 불과 한 달 전 JSP 코드에서 데이터 포맷을 잘못 작성해 발생한 에러 때문에 상당히 고생을 했다. 결국 모든 코드를 한 줄씩 분석해가며 문제가 되는 부분을 찾을 수 있었다. 많은 프로그래밍 언어들이 컴파일이나 코드 실행시 프로그램의 오류를 체크해 출력해 주지만 모든 정보가 정확하게 맞는 것은 아니다.
콜드퓨전을 사용하면 관리자 콘솔을 통해서 디버깅 설정을 할 수 있다. 디버깅 설정을 하고 개발하면 시스템에 대한 정보 및 에러가 발생했을 경우 약 98∼99% 이상의 정확한 오류 정보를 출력해 준다. 또한 , 등의 디버그 태그를 이용해 쉽게 개발할 수 있다.

<화면 3> cfdump 기능 사례

다음의 의 기능을 예로 살펴보자. 데이터베이스에 쿼리문을 보내어 결과값을 가져왔다. 이때 그 결과 값들을 정상적으로 가져왔는지 보려면 어떻게 해야 할까? 콜드퓨전은 다음과 같이 한 줄의 코드를 삽입함으로써 <화면 3>처럼 결과 값을 볼 수 있다.

<cfquery name=”get” datasource=”test”>
SELECT *
FROM table이름
</cfquery>
<cfdump var=”#get#”>

개발 툴과의 완벽한 연동
콜 드퓨전은 같은 회사 제품인 드림위버 MX와 플래시 MX와의 완벽한 연동을 자랑한다. 웹 개발을 하면서 디자인과 코딩은 떼어놓을 수 없는 관계이다. 위지윅(WYSIWYG) 웹 에디터로 강력한 기능을 자랑하는 드림위버 MX와 콜드퓨전 서버의 연동은 다양한 방식으로 이뤄진다.
FTP나 RDS(Remote Develo pment Service) 방식을 통해서 원격 콜드퓨전 서버와 연결해 작업할 수 있으며, 콜드퓨전 파일을 드림위버에서 직접 실행해 디스플레이해 볼 수도 있다. 또한 뒤에서 더 자세하게 볼 플래시 리모팅을 이용한 플래시 MX와의 연동도 지원한다. 큰 확장력을 지닌 플래시 인터페이스의 애플리케이션을 개발할 수 있다는 점에서 최근에 각광받고 있는 이슈 중 하나다.
WAS로서의 기능
콜 드퓨전은 WAS이다. 그러므로 WAS가 갖고 있어야 할 기본 기능을 모두 갖추고 있다. 콜드퓨전이 WAS로 자리잡기 이전부터 기본적으로 가지고 있었던 기능들을 포함해 로드밸런싱, 분산 처리, 보안 기능, 웹 서비스 기능 등을 갖고 있다. 고가로 제공되던 기존의 WAS들은 사용상에도 어려운 점이 많았지만, 저렴한 비용의 콜드퓨전을 이용한다면 보다 손쉽게 웹 애플리케이션을 개발할 수 있다.
관련 자료 지원은 어떻게?
필자가 콜드퓨전을 3년 정도 접하면서 느껴온 점은 국내에 콜드퓨전 관련 자료가 너무 부족다는 점이다. 수많은 웹 애플리케이션 언어 서적 중에서 콜드퓨전 서적은 한 권도 없으며, 한글로 된 자료 또한 구하기가 어렵다. 최근 들어 한국 매크로미디어를 통해서 조금씩 자료들이 생산되기는 하지만, 아직까지는 콜드퓨전에 대한 자료는 외국에 비해서 턱없이 부족한 편이다.
그렇지만 혼자서 콜드퓨전을 배울 수 있었던 것은 콜드퓨전 자체가 쉽게 배울 수 있는 언어이고, 회사 차원에서 생산되는 수많은 문서들이 좋은 자료가 되었기 때문이다. 수 백장의 태그와 함수에 대한 레퍼런스부터 특정 기술에 대한 기술 문서까지 수많은 예제와 함께 생산되는 다양한 자료는 콜드퓨전을 이용하여 웹 개발을 좀더 효율적이며, 강력하게 할 수 있는 초석이 된다. 아직까지 이런 자료들이 한글로 완벽하게 제공되는 것은 아니지만 웬만한 수준의 영어 실력을 갖췄다면 쉽게 이해할 수 있을 것이다.
콜드퓨전과 플래시가 만났을 때
지 금까지 간단하게 다른 웹 애플리케이션 서버와 비교해 콜드퓨전의 특징들을 살펴봤다. 모든 웹 애플리케이션 서버는 나름대로의 특징이 있으며 개발하고자 하는 웹 애플리케이션이 어떠한 것인지에 따라 가장 잘 맞는 웹 애플리케이션 서버를 선택하는 것이 가장 중요한 일일 것이지만, 그중에서도 콜드퓨전을 이용한 개발시 장점을 엿볼 수 있었다. 이번에는 플래시 리모팅 기술을 접목시킨 콜드퓨전의 활용을 살펴보겠다.
플래시 리모팅, 플래시로 통신하자
플래시의 등장은 웹을 사용하는 사람들에게 상당히 신선한 것이었다. 엽기토끼, 플래시 카드, 플래시 애니메이션 등 플래시는 다양한 분야에서 사용되었다. 플래시 플레이어만 설치돼 있으면 어디서든지 플래시로 제작된 컨텐츠를 볼 수 있다는 장점도 있지만 플래시가 갖고 있는 가장 큰 장점은 웹 페이지를 정적인(움직이지 않는) 상태에서 역동적으로 움직이도록 만들어 낼 수 있다는 점일 것이다. 이전에 자바스크립트나 DHTML 등을 이용해 몇 가지 효과를 줄 수 있었지만 플래시가 나타내는 효과와는 비교할 수 없다.
국내에 플래시가 보편적으로 보급되면서 플래시로 제작된 페이지, 컨텐츠는 이용자들에게 많은 관심과 흥미를 가져다 줬는데, 그런 플래시에도 몇 가지의 단점들이 있었다. 그것은 하나의 swf 파일로 구성돼 있는 플래시는 하나의 파일에 모든 것을 담아야 하기 때문에 파일 자체의 용량이 커진다는 것이다. 즉 긴 애니메이션이나 용량이 큰 사운드가 포함됐다면 초기 로딩 시간이 많이 소요됐다.
이 러한 문제를 풀기 위해서 파일을 분할하여 각 경계에서 다른 파일 플래시 파일을 호출한다거나, 사운드의 압축 등 용량을 줄이는 여러 가지 방식을 채택해 봤지만 근본적인 플래시의 단점을 해결하지는 못했다. 이러한 문제는 플래시 5.0에 와서 XML 데이터를 이용해 데이터를 주고받는 것이 추가되면서 해결하려 했다. 그러나 XML 데이터를 이용하기 때문에 상당히 고난도의 XML 기술이 필요했으며 코드 또한 상당히 복잡해지면서 플래시와 XML을 이용한 방식은 그리 큰 호응을 얻지 못했다.
그러나 콜드퓨전 MX와 플래시 MX가 출시되고, 플래시 리모팅 기술이 추가되면서 데이터베이스와의 직접적인 접근이 가능해졌다. 플래시 리모팅은 콜드퓨전 뿐만이 아니라 자바 클래스, 닷넷 컴포넌트 등 다른 플랫폼과의 연결 또한 가능하므로 플래시 인터페이스를 다양한 시스템과 연결해 이용할 수 있는 기술이다.
<그림 3>에서처럼 플래시는 플래시 플레이어가 설치된 어떤 미디어에서든지 실행되는데 swf 파일은 http 프로토콜을 통해 애플리케이션 서버와 통신하게 된다. 이 때 애플리케이션 서버는 플래시 리모팅을 이용하여 웹 서비스나 데이터베이스와 통신하게 되는 것이다. 즉 플래시 리모팅 기술로서 역동적인 인터페이스에 동적인 데이터의 조작까지 가능해진 것이다. 그것도 모든 미디어에서 말이다.

<그림 3> 플래시, 플래시 리모팅, 애플리케이션 서버의 관계도

플래시 리모팅 위한 준비
플 래시 리모팅을 정확하게 이야기하자면 플래시와 데이터를 주고받기 위한 일종의 게이트웨이라고 할 수 있다. 기존에는 플래시와 데이터를 주고받기 위해서는 XML 구조의 데이터를 복잡한 코드와 함께 사용해야만 했다. 그렇지만 이제 그럴 필요없이 다른 플랫폼의 언어와 플래시 리모팅을 사용하여 쉽게 주고받을 수 있다. 특히 플래시 리모팅으로 플래시 MX와 콜드퓨전 MX를 연결하면 다른 어떤 경우보다 손쉽게 플래시 애플리케이션을 개발할 수 있다. 플래시 리모팅을 이용한 플래시 MX와 콜드퓨전 MX와의 통신을 위해서는 다음과 같은 몇 가지 소프트웨어를 설치해야 한다.

◆ 플래시 MX
◆ 콜드퓨전 MX
◆ 플래시 리모팅 컴포넌트 for 플래시 MX

콜 드퓨전 MX를 설치했다면 플래시 리모팅은 자동으로 설치된다. 콜드퓨전 MX 설치에 관한 내용은 한국 매크로미디어 홈페이지(www.macromedia.com/kr)에 게재된 ‘콜드퓨전 MX와 플래시 리모팅 : 개념잡기부터 따라하기까지’ 문서를 참고하기 바란다. 앞의 스프트웨어가 모두 설치됐다면 이제 플래시 리모팅을 이용해 플래시 애플리케이션을 제작할 준비가 다 된 것이다. 지금부터 간단한 플래시 애플리케이션을 만들어 보면서 플래시 리모팅을 자세히 보도록 하겠다.
CFC를 이용한 통신
플 래시가 애플리케이션과 통신을 하기 위해서는 서버 측 액션스크립트(Server Side ActionScript, SSAS)를 사용하는 방법과 CFC를 사용한 웹 서비스 방법이 있다. 이번 예제에서는 CFC를 이용해 통신하는 방법을 살펴보겠다. 이번에 만들 플래시 애플리케이션은 서버 측에서 특정 문자열을 출력하는 프로그램을 실행하여 플래시 인터페이스에 출력하는 것이다. 먼저 서버 측 코드를 작성해 보자. 다음의 코드를 작성하고 HelloWorld.cfc로 저장한다.

앞의 코드는 CFC 방식으로 작성된 코드이다. 보다시피 CFC는 와 , 으로 기본적인 구조를 형성한다. CFC 파일 구조를 보면 파일이 CFC라는 것을 알리기 위해서 태 그를 사용하고 컴포넌트 안에 cffunction을 이용해 함수를 추가한다. 하나의 컴포넌트에는 여러 개의 함수가 들어갈 수 있다. 함수는 고유한 이름과 몇 가지 옵션을 설정할 수 있는데 예제에서의 access는 함수를 접속하는 권한을 원격까지 지원하겠다는 내용이다. 앞에서 sayHello라는 함수는 “안녕하세요”라는 문자열을 반환해주는 함수이다.
다음과 같은 형식으로 컴포넌트를 작성해주는 것이 플래시 리모팅에서 서버 측 코드를 작성하는 전부이다. 서버 측 코드가 정확하게 동작하는지 살펴보려면 다음과 같은 코드를 작성하고 실행한 후, “안녕하세요”라는 문자열이 출력되면 정상적으로 코드가 동작되는 것이다.

<cfoutput>
   <cfinvoke component=”com.macromedia.test.HelloWorld”
      method = “sayHello”
      returnVariable = “message”>
   #message#
</cfoutput>

이 코드에서는 태 그를 이용해 컴포넌트 내의 함수를 호출한다. 이때 component 옵션에는 콜드퓨전의 웹 루트 경로에서부터 컴포넌트 파일이 있는 폴더까지의 구조를 적는다. 예를 들어 콜드퓨전이 설치된 폴더가 c:\cfusionMX이고 Hello World.cfc 파일이 c:\cfusionMX\wwwroot\com\macro media\test에 있다면 이것을 앞과 같이 표현하는 것이다(콜드퓨전을 설치하면 웹 루트는 기본적으로 c:\cfusionMX\wwwroot가 된다).HelloWorld 컴포넌트를 호출하고 그 안의 sayHello 메쏘드(함수)를 실행해 반환되는 값을 message라는 변수에 담는 것이 바로 태그의 역할이다. 그리고 변수의 값을 출력하는 코드가 있다.
이 렇게 서버 측 코드를 작성하고 정상적으로 실행되는지 봤다면, 이제 실제로 플래시 파일을 작성하고 CFC와의 웹 서비스 연결을 통해 결과 값을 가져오는 코드를 작성해 보겠다. 플래시 MX에서 새로운 무비를 작성하고 프레임에 다음과 같은 스크립트 코드를 삽입해 보자.

1 #include “NetServices.as”
2 #include “NetDebug.as”
3 function Result()
4 {
5 //receives data returned from the method
6 this.onResult = function(result)
7 {
8 trace(”Data received from server : ” + result);
9 }
10
11 this.onStatus = function(error)
12 {
13 trace(”Error : ” + error.description);
14 }
15 }
16 NetServices.setDefaultGatewayUrl
(”cfrootMX/flashservices/gateway”);
17 var gw = NetServices.createGatewayConnection();
18 var server = gw.getService
(”com.macromedia.test.HelloWorld”, new Result());
19 server.sayHello();

앞 의 코드를 자세히 보면, 1∼2행은 액션스크립트의 라이브러리를 추가하는 코드이며, 3∼15행까지는 서버로부터 통신 결과를 받아 상황에 따라 결과 값을 출력하거나 에러 메세지를 출력하는 함수이다. 실질적으로 서버 측과 통신을 하는 코드는 16∼19행이다.
NetServices.setDefaultGatewayUrl (“cfrootMX/flash/services/gateway”);를 통해서 연결할 서버의 주소를 설정하는데, 이때 cfrootMX는 콜드퓨전 MX의 루트 경로이다. 그리고 그 다음 var gw = NetServices.createGatewayConnection();을 통해서 서버와 연결하고, var server = gw.getService(“com.ma cromedia.test.HelloWorld”, new Result());를 통해서 서버의 HelloWorld 컴포넌트와 연결하여 Service 객체를 생성한다. 그리고 sayHello 함수를 실행해 서버로부터 결과 값을 반환받게 된다.

<화면 4> sayHello 함수의 실행

<화면 5> 공원 타입선택 화면

파일을 저장한 후 실행하면 이전에 작성했던 HelloWorld.cfc 파일에서 설정했던 반환 값이 서버로부터 보내졌다는 메시지를 볼 수 있다.
지 금까지 본 CFC 파일과 플래시 리모팅을 이용하여 서버와 통신을 하는 애플리케이션을 작성해 봤다. 직접 작성해 보면 알겠지만, 기존의 XML 데이터를 처리하는 방식에 비해 훨씬 간단한 방식으로 서버와의 통신이 몇 줄의 코드로 이뤄지는 것을 볼 수 있다.
플래시 리모팅의 활용 예
앞 에서 우리는 CFC와 액션스크립트를 이용해 서버와의 통신이 어떻게 이뤄지는지 살펴봤다. 플래시 리모팅은 데이터베이스와의 자유로운 통신으로 화려한 플래시 인터페이스에 동적인 정보를 제공할 수 있음에 따라 그 활용의 예가 무궁무진하다. 앞에서 본 예는 상당히 간단하지만, 플래시 리모팅을 통해 콜드퓨전과 플래시간의 통신이 이뤄지도록 하는 가장 근본적인 원리를 설명한 예다.
플래시 리모팅의 방식을 이용해 작성한 하나의 예제를 살펴보도록 하자. 이 예제는 매크로미디어 웹사이트(www.macromedia.com/kr/desdev/mx/articles/remoting)에서 다운받아 실행할 수 있는데, 이 예제 또한 앞의 예제를 구현하기 위해 필요한 환경을 먼저 마련해야 한다.
이 예제에서는 미국 국립공원의 종류를 공원 타입에서 선택하면 공원 리스트가 출력된다. 그리고 <화면 5>와 같이 파크 리스트에서 공원을 클릭하면 하단에 공원에 대한 상세 정보가 출력된다. 이 모든 것은 순간순간 데이터베이스와의 통신을 통해 이뤄진다는 점에 명심하자. 이 샘플과 같은 역할을 하는 플래시 파일을 데이터베이스와의 통신없이 제작한다고 하면, 생각해야 할 부분과 복잡한 코드를 감당하지 못할 것이다.
즉 방대한 데이터를 처리해야 할 경우 플래시 리모팅 기술을 사용하면 적은 용량으로 필요한 정보들을 효과적으로 전달할 수 있어 유용하다. 이러한 플래시 리모팅의 장점은 여러 분야에 적용시킬 수 있는데, 실제로 인사 관리 시스템, 예약 시스템, E-Test 시스템 등 여러 응용 분야에 적용한 사례가 있다. <화면 6>은 실제 구축된 사례로 한 호텔의 예약 시스템이다.

<화면 6> 플래시 리모팅을 이용한 예약 시스템

플 래시로 구성된 화면을 사용하여 투숙 일시부터 비용의 결재까지 모든 것을 한 화면에서 처리할 수 있다. 2∼3페이지 이상의 페이지 이동이 필요한 여타 예약 시스템에 비해 훨씬 간편한 구조를 갖고 있다. 실제로 기존 예약 시스템에서 입력을 잘못한 실수나 오류로 웹에 타이핑했던 정보들을 손실했던 경우가 종종 있을 것이다.
그러나 플래시 리모팅을 이용해 <화면 6>과 같이 구성한 예약 시스템은 기존의 시스템보다 효과적인 정보를 제공하고, 한 화면에서 일괄 처리되므로 고객들로 하여금 좋은 반응을 얻을 수 있을 것이다. 또한 필요한 정보만을 그때 그때 데이터베이스와의 통신을 통해서 가져오기 때문에 초기 로딩 시간도 줄일 수 있다. 플래시 리모팅은 이 밖에도 아이디어만 있으면 다양한 분야에서 활용될 것으로 보인다.
콜드퓨전과 플래시 리모팅 이용한 펫 마켓
앞 서 설명한 플래시 리모팅 기술을 활용한 대표적인 예로 펫 마켓(Pet Market)을 소개하겠다. 펫 마켓은 매크로미디어가 플래시 리모팅 기술을 활용한 리치 인터넷 애플리케이션 실례를 보여주기 위해 작성한 데모용 온라인 애완동물 쇼핑몰 프로그램이다. 매크로미디어는 펫 마켓에 관련된 모든 소스 코드와 제작 과정 및 산출물 등을 모두 공개해 자사의 MX 제품군, 특히 플래시 리모팅 기술을 활용해 차별화된 사용자 경험을 전달하는 웹 사이트를 만들고자 하는 개발자들에게 가이드라인을 제시하고 있다.

<화면 7> 펫 마켓 초기화면

<화면 8> Dogs 카테고리를 선택하고 상세 정보 검색

펫 마켓이라는 용어를 처음 듣는 순간 자바 개발자라면 썬에서 배포하고 있는 자바 펫 스토어(Pet Store)를 연상하게 될 것이고, 자바에 대응하기 위해 닷넷에서 출시한 닷넷의 펫 샵(Pet Shop) 역시 떠오를 것이다. 그러면 매크로미디어의 펫 마켓은 무엇일까.
펫 마켓이란?
펫 마켓에 대한 모든 정보는 www.macromedia.com/desdev/mx/blueprint에서 찾을 수 있다. 펫 마켓의 개발 과정, 사용된 기술, 데모용 URL 등 다양한 정보가 있으며, 전체 샘플 프로그램을 다운받아 자신의 PC에서 테스트해볼 수 있도록 모든 소스 코드와 설치 파일을 제공한다. 또한 단순히 사이트가 어떻게 구성될 수 있는지 확인만을 원하는 사용자들을 위해 데모용 웹 사이트(examples.macromedia.com/pet market/flashstore.html)를 별도로 운영하고 있다
백 문이 불여일견이라는 속담이 있듯이 플래시로 구축된 역동적인 사용자 인터페이스는 직접 실행해 봐야만 확인할 수 있다. 펫 마켓 샘플을 다운받아 설치하기 전에 한 번 데모용 사이트를 방문해 그 기능을 확인해 보기를 당부한다. examples.macromedi a.com/petmarket/flashstore.html를 방문하면 <화면 7>이 나타난다.
초기 화면에서 Dogs를 선택하면 전체 페이지는 바뀌지 않은 채 화면 왼쪽에 Dogs 카테고리에 해당하는 상세 정보를 보여주는 별도의 윈도우가 역동적으로 나타난다. 이 상세 정보 윈도우에서 원하는 항목, 예를 들어 Bulldog을 선택하면 <화면 8>이 표시되는 것을 볼 수 있다. 모든 사용자 화면이 플래시로 구축돼 역동성을 느낄 수 있으며, 플래시로 구축된 사용자 화면에 표시되는 정보들이 서버에 위치한 데이터베이스와의 연동을 통해 전송된다는 점에서 기존의 단순한 플래시 웹 사이트와 차별화된다. 이제 펫 마켓 샘플을 다운받아 설치해 보고 소스 코드를 분석하는 단계로 넘어가도록 하자.
펫 마켓 설치
펫 마켓을 설치하기 위한 샘플 파일은 www.macromedia.com/desdev/mx/blueprint에서 다운받을 수 있다. 펫 마켓은 크게 세 가지 종류로 콜드퓨전에서 동작하도록 구성된 매크로미디어 펫 마켓, 자바 개발자를 위한 자바 펫 스토어에서 동작하는 자바 펫 마켓 버전, 닷넷 개발자를 위한 닷넷 펫 샵에서 동작하는 닷넷 펫 마켓 버전으로 구분된다. 즉 동일한 애완 동물 쇼핑몰 예제에 대해 전체를 콜드퓨전으로 구현한 펫 마켓 버전, 닷넷이나 자바를 선호하는 개발자를 위해 기존 코드는 그대로 재사용하고 플래시 프론트 요소만 설치할 수 있는 닷넷 버전과 자바 버전 세 가지로 구성해 놓았는데, 이 글에서는 매크로미디어 MX 펫 마켓을 다운받아 설치해 보겠다.
일단 사이트에서 zip 파일 형식의 펫 마켓 샘플 파일을 다운받는다. 압축을 풀면 몇 개의 html 파일, 이미지 파일과 car 파일이라는 콜드퓨전 배포 방식의 파일을 찾을 수 있다. car 파일은 자바에서 사용하는 ear 혹은 war 파일과 유사한 것으로 콜드퓨전 관리자 콘솔의 ‘아카이브 배포 및 배포 메뉴’에서 샘플 파일을 콜드퓨전에 설치할 수 있다.

<화면 9> 콜드퓨젼 관리자 화면 - 샘플 파일 배포하기1

<화면 10>콜드퓨젼 관리자 화면 - 샘플 파일 배포하기2

콜 드퓨전 관리자 콘솔 메뉴에서 아카이브 및 배포 매뉴를 클릭해 나온 화면에서 기존 아카이브 배포 항목의 브라우즈 서버 버튼을 클릭한다. <화면 10>처럼 나타난 브라우저 탐색기와 같은 창에서 압축을 푼 후 나온 car 파일을 선택한다. 그 후 배포 버튼을 누르면 관련된 파일이 자동으로 해당 폴더를 생성해 CFC, 이미지, SWF, FLA, CFM 파일이 생성되고 데이터베이스 또한 콜드퓨전 데이터 소스에 자동으로 등록된다. car 파일 배포가 완료된 후 브라우저를 열어 http://localhost:8500/petmarket/ store.html라는 주소를 입력하고 실행하면 자신의 컴퓨터에 설치된 펫 마켓을 실행할 수 있다.
펫 마켓의 아키텍처
펫 마켓 구현에는 다양한 제품군이 사용됐는데 서버 측 서비스 구현에는 콜드퓨전 MX, 풍부하고 역동적인 사용자 화면 구성에는 플래시 MX, 서버 측 서비스와 플래시와의 연동에는 플래시 리모팅 기술, 개발 도구로는 드림위버 MX, 비트맵 그래픽 이미지 편집에는 파이어웍스 MX를 이용했다. 펫 마켓의 기본적인 구조는 <그림 4>와 같다.
펫 마켓은 서비스 기반 아키텍처를 사용해 개발됐다. 플래시로 작성된 사용자 인터페이스 단에서 프리젠테이션을 모든 로직이 수행되도록 해 서버에서는 순수한 비즈니스 로직만을 수행함으로써 서버 측에 필요한 코드 라인 수를 현저하게 줄였다. 또한 서버의 비즈니스 로직은 모든 콜드퓨전의 컴포넌트 기반 개발 방법인 CFC로 개발해 자동 문서 생성, 재사용성 등을 충분히 배려했다.

<그림 4> 펫마켓의 아키텍처

펫 마켓 구조를 기술적인 관점에서 구분해 보면 플래시로 구성된 사용자 인터페이스 계층과 콜드퓨전으로 작성된 비즈니스 로직 계층의 두 계층으로 구분할 수 있으며, 플래시 사용자 인터페이스와 콜드퓨전으로 구축된 서버 측 서비스를 연동하기 위한 플래시 리모팅 계층이 중간에 위치하게 된다.
서버측 서비스를 작성하자
그러면 소스 코드와 함께 좀더 자세한 기술 요소를 살펴보자. 먼저 플래시가 호출해 사용할 서버 측 서비스를 작성하는 방법을 설명하겠다. 이미 언급했듯이 서버 측 서비스를 작성하는 방법에는 두 가지 방식이 있는데 하나는 SSAS를 이용하는 것이고 다른 하나는 콜드퓨전의 CFC 방식을 이용하는 방식이다.
둘 중에서 어느 방식을 사용할 것인지는 개발자의 취향에 달려 있다. 즉 액션스크립트가 좀더 익숙하면 SSAS 방식을 이용하고 콜드퓨전을 이용한 서버 프로그래밍에 익숙한 개발자는 콜드퓨전 컴포넌트 방식을 이용하면 되는데, 여기에서는 CFC를 이용한 방식을 중점으로 살펴보겠다. 참고로 SSAS 방식을 사용한 방법은 펫 마켓 설치 디렉토리의 api\creditcardservice.asr 파일을 참조하기 바란다.
CFC 방식으로 플래시 사용자 인터페이스를 연동하는 방법을 살펴보기 위해 소스 코드를 분석해 보자. 예를 들어 나의 쇼핑 카트에 있는 데이터를 삭제하기 위해 콜드퓨전 컴포넌트를 작성한다면 다음과 같다.

<cfcomponent>
   <cffunction name=”empthCart” access=”remote”>
      <cfargument name=”carotid” require=”true”
         type=”numeric”>
      <!— DB에 접속해 나의 카드 항목을 모두 삭제한다는 SQL 코드–’
      <cfquery datasource=”blueprintdatabase”>
         DELETE from itemlist
            WHERE carotid = #arguments.cartoid”
      </cfquery>
   </cffunction>
</cfcomponent>

이 와 같은 CFC 방식의 코드를 작성해 서버에 파일을 위치시키고 플래시의 액션스크립트에서 플래시 리모팅 프로그램을 구현해 서버 측의 콜드퓨전 컴포넌트를 실행한다. 펫 마켓의 모든 방식은 이러한 방식을 통해 서버와 플래시의 연동을 구현했다. 콜드퓨전의 기본적인 문법 사용법만 알면 초보자도 쉽게 구현할 수 있는 코드들이기 때문에 자세한 설명은 하지 않겠다.
다음에는 작성된 서버 측 서비스를 사용하는 플래시 화면을 작성하고 플래시 액션스크립트를 사용해 필요한 코드를 작성하면 된다. 플래시측 코드는 이미 공원 예제를 통해 언급했으므로 생락한다. 플래시에 관심 있는 독자는 펫 마켓에서 제공하는 원본 소스 파일을 참고하기 바란다(펫 마켓의 설치 디렉토리\flash-src 디렉토리에 펫 마켓의 플래시 원본 소스들이 모두 들어 있다). 플래시 리모팅 기술을 사용해 개발하는 개발자라면 필요한 대부분의 기능을 펫 마켓의 코드에서 찾아 재사용할 수 있을 것이다.
콜드퓨전을 이용한 효율적인 개발
펫 마켓에서 플래시 사용자 인터페이스와 상호 연동하기 위해 사용하는 플래시 리모팅 방식은 플래시가 서버 측과 통신하기 위해 사용했던 기존의 XML 데이터 처리 방법과는 상당히 많이 다른, 여러 면에서 개선된 방법이다. 플래시 리모팅을 사용하면 XML 처리시 요구됐던 부가적인 처리 시간을 줄이고 필요한 데이터만을 압축된 형태로 주고받음으로써 많은 양의 데이터를 빠른 시간 내에 전송할 수 있다. 만약 콜드퓨전이 아니라 다른 웹 애플리케이션 서버를 사용하면서 플래시와의 연동 기능을 사용하고 싶다면 애플리케이션 서버에 플래시 리모팅만 별도로 설치해 플래시 리모팅 방식으로 서버 측 서비스와 연동할 수 있다.
펫 스토어, 펫 샵, 펫 마켓
마 이크로소프트는 닷넷을 출시하면서 썬의 자바 펫 스토어를 닷넷 버전으로 수정한 펫 샵을 출시해 자바와 닷넷 간의 수많은 논쟁에 불을 불였다. 자바가 우월한가 닷넷이 우월한가에 대한 논쟁은 아직 끊이지 않고 있지만 필자의 소견으로는 성능에 중점을 두지 않고 J2EE 기술을 어떻게 사용하는가에 대한 가이드라인을 제시하고자 개발됐던 자바 펫 스토어와 자바와의 성능 비교를 염두에 두고 자사의 제품에 맞게 코드를 최적화한 닷넷 버전과의 성능 비교는 무의미한 것이라 생각한다.
매크로미디어가 펫 마켓을 출시한 의도는 결코 자바나 닷넷과 성능상의 비교를 하고자 함이 아니고 썬의 자바 펫 스토어와 닷넷 펫 샵은 각각 다른 기술로 인정하되 매크로미디어의 플래시 리모팅 기술을 사용하면 어떤 점이 달라질 수 있는 것인지에 대해 말하고자 함일 것이다. 그러면 또 다른 논쟁을 일으킬지 모르는 매크로미디어의 펫 마켓과 자바 펫 스토어, 닷넷 펫 샵을 비교 분석해보도록 하자.
네트워크 대역폭 사용율의 비교
앞 서 글에서 살펴본 바와 같이 펫 마켓은 웹에서의 사용자 인터페이스를 플래시로 구현해 웹에서 마치 데스크톱 환경과 같은 정교하고 복잡한 상호작용을 가능하게 하는 새로운 개념인 플래시 리모팅 기술을 중심으로 구축됐다. 별도 클라이언트 프로그램 설치없이 브라우저만 갖고 이러한 정교한 상호작용을 가능하게 한다는 것은 흥미로운 일임에 틀림없으나, 개발 경험이 풍부한 개발자라면 플래시로 사용자 인터페이스를 구축함으로써 속도나 성능이 저하되지 않을지를 가장 먼저 염려할 것이다. 그러면 이러한 대역폭 측면에 중점을 두고 자바와 닷넷, 매크로미디어 솔루션을 한 번 비교해 보자.

<그림 5> 대역폭 사용량 비교 결과

플 래시로 사용자 인터페이스를 구축했을 경우 가장 먼저 의심이 되는 것은 사용자 인터페이스가 풍부해짐에 따라 사용되는 네트워크 대역폭이 늘어나리라는 것이다. 그러나 비교 결과, 플래시를 사용한 펫 마켓이 훨씬 적은 양의 대역폭을 사용하는 것으로 나타났다.
자세한 내용을 보기 전에 결과를 먼저 요약해보면 플래시 리모팅 기술을 사용하는 경우, 첫째 플래시 리모팅 기술을 사용한 사용자 인터페이스는 프리젠테이션 계층을 세분화해 클라이언트측에서 수행 가능한 코드는 클라이언트 단에 미리 전송해 놓고 서버와는 필요한 데이터만을 주고받는 것을 가능하게 한다.
따라서 매 요청마다 더 적은 양의 데이터만이 서버로 전송돼 결과적으로 적은 양의 대역폭을 사용하게 된다. 둘째 플래시가 제공하는 액션스크립트라는 언어를 사용해 클라이언트에서 처리 가능한 프로세스들은 클라이언트 단에서 수행되도록 구현함으로써 서버에 보내지는 총 요청 회수를 줄일 수 있다. 결과적으로 플래시 리모팅 기술을 사용하면 전송되는 총 데이터량은 줄어든다.
대역폭 사용량 비교를 위해 간단한 테스트를 수행해 봤다. 다음과 같은 네 가지 유형의 작업을 콜드퓨전 MX에서 수행하고 닷넷 펫 샵과 자바 펫 스토어, 매크로미디어 펫 마켓이 사용하는 대역폭을 측정했다. 대역폭 측정은 마이크로소프트 자동화 테스팅 도구인 웹 애플리케이션 스트레스(Web Application Stress, WAS나 homer라고도 함)를 사용했으며 테스트 환경은 다음과 같다. 시나리오에 대한 자세한 스크립트는 www.macromedia.com/desdev/mx/blueprint/articles/performance/scripts.txt에 서 참조한다.

윈도우 2000 어드밴스드 서버 SP2
J2RE 1.3.1 IBM 윈도우 32 빌드 cn131w-20020403 ORB130 (JIT enabled: jitc)
콜드퓨전 MX 6,0,0,40897
인텔 OCPRF100 서버
8×500MHz PIII Xeon
4GB 메모리
◆ 시나리오 1 : 상품을 구매하지 않고 단순히 상품 정보만을 검색하기
◆ 시나리오 2 : 상품정보를 검색하지 않고 바로 구매만 수행(여러 개의 상품을 카트에 추가)
◆ 시나리오 3 : 단순 구매(상품 정보를 검색한 후 상품을 카트에 추가하거나 삭제하기)
◆ 시나리오 4 : 확장된 구매(상품 정보를 검색하고 쇼핑 카트에 아이템 추가, 구매 기록 보기, 검색, 비용 처리 등 다양한 작업 수행하기)

이 러한 유형의 작업에 대해 대역폭 사용량을 측정한 결과, 플래시로 사용자 인터페이스를 구축한 펫 마켓이 펫 스토어나 펫 샵보다 적은 양의 대역폭을 사용하는 것으로 나타났다. 특히 시나리오 1, 3, 4와 같이 서버에 요청을 빈번하게 전송하고 응답을 받는 경우에는 그 차이가 현저하다. 이러한 결과가 나오는 이유는 펫 마켓의 경우 초기에 사용자 인터페이스가 이미 로드된 이후에는 클라이언트에서 데이터 포맷이나 프리젠테이션 생성을 위한 코드가 실행되고 서버에서는 단지 필요한 데이터만 클라이언트에 보내주게 되므로 네트워크를 통해 전송되는 데이터량을 현저하게 줄일 수 있기 때문이다.
반면에 펫 스토어나 펫 샵의 경우에는 매 요청마다 필요한 데이터와 프리젠테이션 코드를 모두 클라이언트에 전송해야 하므로 상대적으로 더 많은 양의 대역폭을 소모하게 되는 것이다. 실제 USABancShares.com 등의 사이트에서는 기존의 HTML로 구성된 사용자 인터페이스를 전부 플래시로 재구성하였는데 그 결과 응답 속도가 5배 이상 빨라지고 서버 부하가 40% 감소했다는 통계가 이러한 사실을 뒷받침한다.
오랫동안 실행할수록 대역폭 절약
앞의 테스트 결과를 자세히 관찰하면 펫 마켓의 또 하나의 장점을 발견할 수 있다. 펫 마켓의 경우 애플리케이션을 오랫동안 실행하면 실행할수록 대역폭 절약 측면의 장점이 더 커진다는 것이다. 즉 플래시로 사용자 인터페이스를 구축한 경우 초기에 클라이언트로 로드되는 데이터량은 많아지게 되나 일단 로드된 이후에는 클라이언트 측에 캐시로 저장된 파일을 사용하게 됨으로써 애플리케이션이 반복 수행될수록 속도나 대역폭 측면에서 장점을 가지게 되는 것이다. 그러면 펫 마켓에서 플래시로 작성된 사용자 인터페이스를 초기에 로드하기 위해 소모되는 대역폭을 한번 살펴보자.
<표 1>은 애플리케이션이 최초 수행된 이후에 브라우저 캐시에 저장되는 데이터를 측정한 것으로 최초 실행시 펫 마켓이 펫 샵이나 펫 스토어보다 많은 양의 데이터를 로드하는 것을 보여주고 있다. 그렇다면 이러한 차이가 어떤 의미가 있는지 알아보기 위해 상용 사이트의 경우를 살펴보자.

<표 1> 초기 로드되는 데이터량 비교(윈도우 2000 서버에 설치된 IE 6.0에서 테스트 했음

<표 2> 같이 아마존, 반스앤노블스 등의 일반 전자 상거래 사이트와 비교해볼 때 펫 마켓의 초기 로드량은 결코 평균 범위를 벗어나지 않는 수용 가능한 범위라는 것을 확인할 수 있다.

<표 2> 일반 상거래 사이트와 펫마켓의 초기 로드 데이터량 비교

< 표 3>에서 대역폭 차이를 좀더 자세하게 정리해 봤다. 한 명의 사용자에 대해서는 이러한 차이가 별 의미가 없다고 생각할지 모르지만 24시간 내내 사용되고 많은 사용자가 접속하는 상용 사이트의 경우에는 이러한 효과가 가감되어 현저한 대역폭 절약 효과를 가져오게 된다.

<표 3> 대역폭 비교

사용 편의성 측면에서의 비교
이 번에는 사용 편의성을 비교하기 위해 동일한 시나리오에 대해 사용자가 단위 작업을 수행하는 데 소요되는 시간을 측정했다. 결과를 분석하면, 특히 시나리오 1과 4의 경우(구매는 하지 않고 상품 검색만 하는 경우와 상품 검색과 구매를 모두 수행하는 경우) 펫 스토어와 펫 샵에 비해 펫 마켓이 동일한 작업을 수행하는 데 소요되는 시간을 현저하게 줄일 수 있음을 알 수 있다.

<그림 6> 사용편의성 측면에서의 비교

펫 스토어나 펫 샵의 경우 사용자가 여러 가지 상품에 대한 카탈로그를 보려면 여러 번 페이지를 이동해야 하며, 또한 현재까지 구매한 카트 정보를 보려면 브라우저의 ‘앞으로’, ‘뒤로’ 버튼을 사용해 페이지를 이곳 저곳으로 이동해야만 한다. 바로 이러한 페이지 이동 작업이 불필요한 오버헤드를 생성하므로 네트워크를 통해 불필요한 데이터가 전송되고 동일한 작업을 수행하는 시간이 오래 걸리는 것이다.
반면 펫 마켓의 경우 플래시로 짜임새있게 디자인된 화면을 통해 불필요한 페이지 이동 회수를 줄이고 하나의 화면을 필요에 따라 분할해 사용하도록 구성했기 때문에 단일 작업에 소요되는 시간을 단축시킬 수 있다.
효율적인 지불 단계
플 래시로 웹 응용 프로그램의 사용자 인터페이스를 구축하면 하나의 웹 페이지를 효율적으로 분할하여 사용할 수 있는 원 페이지(One Page) 모델 기법이 가능하다. 이 기법의 효과를 가장 적절하게 사용한 것은 펫 마켓의 지불 단계에서 사용되는 화면이다.

<화면 11> 펫 마켓의 지불 단계

<화면 12> 플래시 MX에서 제공하는 UI컴포넌트

온 라인 쇼핑몰의 지불 처리 단계에서 전형적으로 수행해야 하는 아이디 등록, 고객 상세 정보 입력, 배송 주소 입력, 배송 선택 사항 입력, 지불 방법 선택 등의 5가지 단계를 하나의 페이지 내에서 수행되도록 구성함으로써 모든 정보를 한눈에 볼 수 있도록 사용자 편의성을 제공하고 있다. 또한 5단계를 수행하는 동안 페이지 이동을 전혀 할 필요가 없기 때문에 잘못 입력된 정보가 있으면 이전 단계를 반복하지 않고 잘못된 정보만 수정할 수 있다.
개발 생산성 측면에서의 비교
마 지막으로 개발 생산성 측면에서 펫 마켓 구현에 필요한 소스 코드 라인 수를 자바나 닷넷 버전과 한 번 비교해 보고자 한다. 애완동물 쇼핑몰을 구현하기 위해 필요한 소스 코드는 크게 시스템 구성, 데이터베이스 연결, 프리젠테이션 계층으로 분류될 수 있다.
<그림 7>을 보면 매크로미디어의 펫 마켓은 플래시를 사용자 인터페이스로 사용했기 때문에 프리젠테이션 계층을 구성하기 위해 필요한 소스 코드 라인 수는 상당히 많은 편이다. 그러나 데이터베이스 연결 등의 미들 계층에서 사용되는 코드를 살펴보면 자바나 닷넷에 비해 현저하게 적은 소스 코드로 동일한 기능을 구현할 수 있음을 확인할 수 있다.

<그림 7> 프로그램 소스 코드라인 수 비교

이 는 콜드퓨전에서 사용하는 바로 CFML이라는 스크립트 언어의 생산성 때문으로 이미 다른 언어와 비교해 본 바와 같이 동일한 기능을 구현할 때 코드 라인 수를 많게는 1/2 혹은 1/3까지 줄일 수 있는 장점 때문에 많은 개발자에게 애용되고 있는 언어이기도 하다.
개발 생산성 측면에서 효율성은 사용자 화면 구축시에도 그 진가를 발휘한다. 플래시로 사용자 화면을 구축할 경우 플래시 MX에는 미리 구축된 컴포넌트 라이브러리를 사용해 개발 시간을 훨씬 단축할 수 있다. 컴포넌트 라이브러리에서 사용자 화면에서 빈번하게 사용되는 체크박스, 콤보박스, 리스트박스, 다양한 버튼 등을 사전에 제작된 UI 컴포넌트로 제공하고 있으므로 플래시 개발자 역시 효율적인 시간 내에 펫 마켓과 같이 차별화된 사용자 인터페이스를 구축할 수 있다.
펫 마켓의 확장성 테스트
끝으로 콜드퓨전 MX의 안정성과 확장성에 대한 테스트를 수행했고 그 결과는 다음과 같다. <그림 8>과 같이 테스트 환경에서 펫 마켓은 동시 사용자 700명까지는 평균 응답 시간이 크게 변화하지 않고 일정한 성능을 제공한다.
펫 마켓과 플래시 리모팅, 그리고 콜드퓨전
웹 애플리케이션 개발에 대한 패러다임은 변하고 있다. 단순히 브라우저를 통해 서버 상의 정보를 보는 것으로 만족하지 못함에 따라 1세대, 2세대, 3세대를 거치면서 웹은 다양한 기능을 추가하게 됐다. 이러한 경향과 함께 등장한 플래시는 웹에서도 동적인 화면과 다양한 움직임이 가능하다는 것을 알려줬고 플래시로 작성된 웹 사이트는 화려하고 환상적인 화면으로 사람들의 시선을 끌어당겼다. 그러나 사용자들은 곧 모든 사람에게 혹은 매번 똑같은 화면을 보여주는 플래시에도 식상함을 느끼게 됐고 개발자들은 역동적인 플래시와 서버와의 연동을 통해 또 다른 차별화를 추구하게 됐다.

<그림 8> 펫 마켓의 확장 가능성 테스트 결과

이제 사용자들은 웹에서 다양한 활동을 수행하기를 원하고 있다. 단지 정보를 검색하고 몇 가지 제한된 기능을 수행하는 수동적인 활동이 아닌, 사용자 중심에서 원하는 작업을 적극적으로 실행하고자 하는 욕구를 만족시켜줄 수 있는 것은 바로 플래시 리모팅 기술이 아닐까. @

플래시 MX가 이전의 버전에 비해 상당 기능이 추가돼 애플리케이션 개발 도구로 부상하고 있다. MX 제품군은 콜드퓨전(ColdFusion) MX, 리모팅(Remoting) MX 등 매크로미디어의 다양한 도구와 서버 제품의 연계성을 한층 더 발전시키고, 기업 환경의 애플리케이션 개발에 필요한 다양한 요구를 수용하고 있다(MX가 약자이거나 특별한 뜻이 있는 것은 아니다. 예전에 윈도우 CE에서 CE가 그랬듯이, 많은 사람들이 흔히 뭔가 심오한 뜻이 있을 거라 생각했지만, CE 역시 아무런 뜻 없이 지워진 이름이었다).
플래시와 엔터프라이즈 애플리케이션
90년대 중반 이후 소프트웨어 개발은 그 기반 자체가 웹으로 모두 바뀌었다. 특히, 기업 애플리케이션들이 웹으로 전환됐다. 널리 쓰일수록, 규모가 큰 서비스일수록 웹으로 전환이 급속하게 이뤄졌다. 이처럼 웹 기반으로 급격히 바뀐 가장 큰 이유는 무엇일까? 그것은 바로 ‘배포’의 문제이다. 기업 환경에서 애플리케이션 배포의 문제는 굉장한 골칫거리다. ‘웹 기반’ 즉 씬 클라이언트(thin client)는 추가적인 설치나 부가적인 조작 없이 브라우저 하나만으로 응용프로그램을 수행할 수 있다는 점 때문에 아주 널리 사용되게 됐다. 하지만, 머지않아 HTML의 한계는 사용자들의 다양한 요구를 수용하기 힘들게 됐다. 이런 시점에서 자바 애플릿은 큰 희망이 됐다.
즉, 자바 애플릿은 플랫폼 종속적이지 않고 HTML이 제공하지 못하는 다양한 기능을 보여줬다. 국내에 한정된 이야기일 수 있으나 오늘날에 와서 자바 애플릿보다 플래시의 도약이 훨씬 두드러지게 나타나고 있다. 물론 자바에 대한 마이크로소프트의 소극적인 지원도 이유가 되겠지만, 플래시가 자바 애플릿에 비해 상대적으로 생산성이 높고 훨씬 다양한 표현을 하는 컨텐츠를 쉽게 만들 수 있다는 데서 그 이유를 찾을 수 있다.
애플리케이션은 사용상의 편의뿐만 아니라 미려한 사용자 인터페이스가 요구되고 있다. 리치 클라이언트에 대한 요구는 언제나 있어 왔지만 배포의 문제와 제작상의 생산성 문제 그리고 클라이언트 기계의 속도, 호환성 등이 걸림돌이 되어 왔다. 플래시는 이러한 걸림돌들에 좋은 답을 제공한다.
플 래시는 어떤 면에서 오히려 자바보다 플랫폼에 종속적이지 않다(자바가 특정 JVM의 특성을 타는 것을 널리 알려진 사실이다). 플래시는 4억 1천 4백만 개가 배포된 가장 폭 넓은 표준 클라이언트로 사실상의 표준(de facto standard) 클라이언트 환경이라고까지 할 수 있다(문서를 왜 PDF로 배포하는가와 같은 맥락이라고 할 수 있다). 모바일이나 포켓PC용 플래시 플레이어가 이미 있으며, 앞으로 더욱 다양한 플랫폼이 지원될 것이라는 사실은 자명하다.
플래시는 엔터프라이즈 애플리케이션에서 필요로 하는 보안과 상호운용성(interoperability), 대용량 처리 (scalability) 등에 좋은 솔루션이 될 수 있다. 플래시는 브라우저는 통해 SSL 통신을 지원하며, 자바 애플릿과 수준의 보안 정책을 제공한다. HTTP 통신뿐만 아니라 XML 웹 서비스, 리모팅 등 서버와 다양한 통합 방법을 제공하고 있다. 또 대용량 처리 면에서도 오히려 플래시가 더 좋은 방법이 될 수 있다. 현재 웹 애플리케이션은 몇 가지 일을 처리하기 위해 굉장히 많은 서버 트래픽을 일으킨다.
한 페이지를 보기 위해 최소한 10회 정도의 HTTP 연결이 필요하며, 대부분 2-3페이지를 거쳐서 하나의 작업이 이뤄진다. 플래시와 같은 리치 클라이언트는 오히려 이런 트래픽을 줄일 수 있게 한다. 즉, 사용자 입력 처리, 상호 작용, 입력 데이터 확인(validation)과 같은 웬만한 작업은 클라이언트에서 이뤄지고, 서버와는 필요한 데이터만 주고받으면 되기 때문에 서버에 훨씬 적은 부담을 주도록 만들어 질 수 있다.
이 글은 플래시가 디자인이나 애니메이션 도구로서가 아닌 기업 애플리케이션 제작을 위한 클라이언트 환경으로서 사용될 수 있는 가능성을 살펴보기 위한 목적으로 씌여졌다. 그래서 애니메이션이나 미디어를 다루는 방법 등은 논외로 한다. 우리는 이 글을 통해 플래시의 통신 기능, 서버사이드(ASP.NET)와 연결 방법들, XML과 XML 웹 서비스 이용, 플래시 보안 등을 살펴보려 한다.
난로연통 문제 : 플래시 웹 서비스의 의미
비 즈니스 환경이 급속하게 변화하고 기술도 이에 따라 급격하게 변하고 있다. 클라이언트/서버, 웹 기반, 기업 애플리케이션 통합(EAI), 컴포넌트 기반 개발(CBD) 등 이런 변화 속에서 현재 가장 중요한 키워드 두 가지는 바로 ‘통합’과 ‘속도’이다. 최근에 와서는 XML 웹 서비스가 크게 부각되고 있다. XML 웹 서비스가 부각되게 된 데는 HTTP 기반의 XML 통신이라는 장점이 있기도 하지만 그 보다 중요한 이유는 바로 ‘난로연통(stovepipe)’ 문제를 해결하고, ‘서비스 중심의 아키텍처(SOA, Service Oriented Architecture)’를 가능하게 하기 때문이다.
정보 시스템에 대한 수직적(버티컬) 통합으로 안정성을 확보하는 데 치중하던 과거의 방식으로는 더 이상 IT 산업 환경의 빠른 변화에 대응할 수 없게 됐다. 기업용 애플리케이션을 ‘통합’하고 더 ‘빠르게’ 구현하는 것이 가장 중요한 일이 됐다. 조직의 내부나 외부 변화에 효과적으로 대응하기 위해서는 시스템의 기능(모듈) 간에 신속한 조정이나 협력이 요구되나 현실적으로 이것이 어렵기 때문에 문제점들이 발생하는데, 이러한 문제점들은 종종 ‘난로연통’에 비유하곤 한다.
모듈들이 효과적이고 효율적으로 운영되기 위해서는 난로연통(기능별 부서)을 가로지르는 수직적 기능간의 상호작용(cross-functional activity)이 훨씬 중요하며, 여기에 대한 해결책으로 제시되고 있는 것이 SOA이다. 또, 이것을 가능하게 하는 기술이 바로 XML 웹 서비스다. 플래시의 미디어적인 측면에서 뿐만 아니라, 바로 이 웹 서비스 클라이언트의 기능을 충분히 제공한다는 점에서 큰 가능성은 찾아 볼 수 있다.
이제, 좀더 본격적으로 플래시가 제공하는 다양한 통신 기능들을 살펴보자. 이 글에는 플래시와 SWF를 구분해 쓴다. 플래시는 저작 환경과 기술을 지칭하고, SWF는 플래시 플레이어에서 수행되는 플래시 파일을 가리키는데 사용한다.
플래시와 한글
플 래시는 내부적으로 유니코드를 사용하며 기본적으로 모든 데이터를 유니코드(UTF-8, Universal Character Set Transformation Format, 8 bit)로 다룬다. 경우에 따라 URL을 다루거나 외부와 통신을 할 때 UTF-8가 아닌 운영체제가 사용하는 인코딩을 그대로 써야 할 경우가 있다. 예를 들어, 웹 서버가 기본적으로 UTF-8을 인코딩을 사용하지 않고, KSC5601(EUC-KR)을 사용하는 경우이다. 이런 호환성을 위해 플래시 MX에 System.useCodepage이 추가됐다.
System.useCodepage는 입출력에 유니코드를 쓸 것인지(false) 아니면 플래시 플레이어가 동작하고 있는 운영체제의 기본 인코딩 언어(로케일)을 사용할 것인지(true)를 결정한다. 한글 윈도우에서는 기본적인 인코딩은 KSC5601(EUC-KR)이다. 만일, 일본어 윈도우라면 기본 인코딩은 SJIS가 된다. 즉, SWF가 수행되는 환경의 인코딩을 사용하게 된다. 운영체제의 인코딩을 그대로 사용하려면, 보통 무비 타임 라인의 첫 프레임에 다음과 같은 코드를 넣어 준다.

System.useCodepage = true;

SWF는 내부적으로 UTF-8만 다루며 이것을 바꾸는 방법은 없다. 또한 코드페이지를 지정하는 방법도 없다. 따라서 useCodepage가 true인 경우는 SWF가 수행되는 운영체제의 코드페이지를 따라가며, false인 경우는 유니코드(UTF-8)을 사용하게 된다. 플래시가 내부적으로 사용하는 UTF-8은 유니코드의 각 문자를 1～4개의 바이트로 인코딩한 형태인데 다음과 같은 액션 스크립트를 통해 쉽게 확인할 수 있다.

System.useCodePage= false; // 코드페이지 사용 안함(UTF-8)
trace(escape(”abc가나다”));
System.useCodePage= true; // 코드페이지 사용(EUC-KR)
trace(escape(”abc가나다”));

이 코드는 다음과 같이 출력된다. escape는 URL에 사용하기 위해 %가 붙은 형태로 인코딩하는 함수이다. 이 코드는 다음과 같이 출력된다.

abc%EA%B0%80%EB%82%98%EB%8B%A4
abc%B0%A1%B3%AA%B4%D9

UTF-8인 경우, 한글의 한 글자가 3개의 바이트로 인코딩되었음을 알 수 있다. useCodePage가 true인 경우는 한글 한 글자가 2개의 바이트가 된다.
플래시 MX 통신
플래시 MX는 다양한 통신 방법을 제공한다. 플래시에서의 통신 범위와 통신에 사용되는 함수들을 정리해보면 다음과 같다.

통신 범주	사용되는 함수, 객체
플래시와 자바 스크립트 통신	getURL(), fscommand()
플래시와 웹 서버간 HTTP 통신	loadVariables(), loadVariablesNum(), getURL(), loadVars 객체
플래시와 플래시 간	getURL(), fscommand() (SWFJavaScript SWF), LocalConnection 객체
플래시와 XML 웹 서비스, MX 리모팅	XML 객체 NetServices, NetConnection 객체

<표 1> 플래시용 통신 범주와 함수

getURL ()은 예전부터 사용되던 함수인데 주로 페이지를 이동하는데 사용됐지만 자바 스크립트를 호출하는데도 사용될 수 있다. loadVariables()는 외부로부터 데이터를 읽어내는 함수이다. getURL()과 마찬가지로 URL을 지정하고 여기 “이름=값” 쌍을 읽어내어 플래시 변수(variable)에 할당한다. 만일 URL에 파일명을 지정하면(“a.txt”), SWF이 다운로드 된 URL과 같은 위치에 있는 파일로부터 읽어 들인다. LoadVars.load()는 MX에 새로 추가된 기능이다. loadVariables()를 이용하는 것보다 간편하며 비동기로 동작하기 때문에 데이터를 읽어오는 동안 ‘로딩중입니다’를 표시하는 것 같이 다른 동작을 하는 것을 손쉽게 구현할 수 있다.
XML 객체 역시 LoadVars와 사용하는 방법이 거의 같다. 다른 점은 XML 문서를 가져와서 파싱을 한다는 점이다. 플래시 MX에서는 XML DOM을 다루는 메쏘드들이 제공된다. XML을 이용하면 잘 구조화된 데이터를 처리할 수 있다는 장점이 있으며, 훨씬 유연한 애플리케이션을 제작할 수 있다. 실제로 애니메이션 방법을 XML로 기술해 SWF 파일은 하나인데 상황에 따라 다른 애니메이션을 보여주는 방법도 사용할 수 있다.
플래시와 자바 스크립트간의 통신 : getURL()을 이용한 간단한 예제
자바 스크립트와 액션 스크립트, 두 언어 모두 ECMA-262(ECMAScript) 기반 스크립트 언어로 매우 비슷한 점이 많다(똑같은 것은 아니다). 액션 스크립트에서 브라우저에 있는 자바 스크립트를 호출하거나 혹은 거꾸로 브라우저의 자바 스크립트에서 플래시의 액션 스크립트를 호출하는 것이 가능하다.
getURL() 특정 URL로 이동하는 함수이지만 “javascript”를 이용하여 브라우저가 가지고 있는 자바 스크립트를 호출할 수 있다. 다음의 액션 스크립트는 간단한 예를 보여주고 있다.

var hello = “Hello, World”;
getURL(”javascript:alert(\”"+hello+”\”)”);

간단한 예제를 만들어보자. 플래시 MX를 기동하고 컴포넌트에서 PushButton을 무비에 끌어다 놓는다. 버튼의 레이블을 ‘Hello, World’로 수정하고, 다음과 같이 버튼에 대해 다음과 같이 액션 스크립트를 입력한다(<화면 1>).

on(release) {
getURL(”javascript:alert(’Hello,World’)”);
}

<화면 1> getURL()을 이용하는 ‘Hello, World’ 만들기

혹은 SWF를 클릭하여 수행해 보자. 자바 스크립트의 alert 창이 나타나는 것을 확인해 볼 수 있다(<화면 2>). 원래 getURL()은 SWF가 포함된 페이지를 다른 URL로 이동하는 기능을 수행하는 것이 목적이지만, 프로토콜을 기술하는 부분(보통 “http://”)에 javascript 등을 써서 브라우저와 다양한 통신을 할 수 있다.

<화면 2> 예제 02-HelloWorld 수행

예를 들어, “mailto:” 등도 사용할 수 있다(“mailto:”를 사용하면 기본 메일프로그램이 뜨게 된다).

getURL(url [, window [, "variables"]])

다음 예는 SWF가 포함된 페이지를 닫는 기능을 수행한다. 결국 getURL()을 사용해 페이지에 포함된 자바 스크립트를 수행할 수 있고, 다양한 방법으로 자바 스크립트와 연결할 수 있다.

on (press) {
getURL (”javascript:window.self.close()”);
}

getURL()을 사용하는 다른 예를 보자. 다음과 같이 HTML 페이지에 스크립트를 만든다. 이 페이지의 스크립트를 액션 스크립트에서 호출한다.

◆ HTML 페이지
<SCRIPT LANGUAGE=”JavaScript”>
var newWin;
function OpenNewWindow(url, name, features) {
newWin = window.open( url, name, features );
}
</SCRIPT>
◆ 액션 스크립트 : 버튼 액션
on (release) {
getURL(”javascript:OpenNewWindow(’popup.html’,'팝업창’,'height=150,width=300′)”);
}

이 내용은 액션 스크립트의 getURL()을 이용하여 페이지 내의 자바 스크립트 함수 OpenNewWindow()를 호출하는 예를 보여준다.

<화면 3> 예제 03-openwin 수행 결과

SWF과 플래시 플레이어와 통신을 할 수 있는 함수로 fscommand()가 있다. 이 함수는 원래 SWF가 자신의 환경(플레이어)과 통신하기 위한 기능을 하지만, 스크립트를 호출하거나 외부 명령을 수행하는데도 사용할 수 있다. [File|Publish Settings] 메뉴를 선택하면, <화면 4>와 같은 화면이 나타나는데, HTML 탭에서 템플릿을 지정할 수 있다.

<화면 4> FSCommand 템플릿 생성

플래시가 FSCommand 템플릿과 함께 생성되도록 지정하면 FSCommand를 사용하는 페이지를 만들어 준다. 기본적인 원리는 페이지 내의 자바 스크립트를 호출하는 것과 같은데 표준적으로 제공되는 것이므로 자바 스크립트를 호출할 때는 getURL(), loadVariables()를 쓰기보다 FSCommand를 사용할 것을 추천한다. fscommand()는 다음과 같이 명령과 파라이미터를 지정해준다(파라미터는 옵션).

fscommand(”command”, “parameters”)

“command”는 <표 2>와 같은 기본 명령들이 있다. 외부 프로그램을 수행할 수도 있다. 이들 기본 명령들은 보통 실행파일 형태로 제작된 플래시에서 사용하며, 웹 페이지에서 보여지는 SWF에서는 많이 사용하지 않는다.

“allowscale”, true/false	화면 크기에 따라갈 것인지 지정
“showmenu”, true/false	플래시 메뉴를 보일 것인지 지정
“exec”, “path\\a.exe”	외부 프로그램 수행
“quit”	플레이어 종료

<표 2> “commnad”의 기본 명령

fscommand를 사용하는 예를 살펴보자. 다음과 같은 액션 스크립트가 있다면, “close”를 인자로 넘겨 자바 스크립트를 호출한다.

fscommand (”close”);

브라우저 스크립트에서 인자를 받아 수행된다. 브라우저의 fs_DoFSCommand() 스크립트가 호출된다. 다음에 나오는 소스 코드는 자동으로 생성된 FSCommand 템플릿(HTML 파일)의 스크립트를 수정한 것이다. 전달받은 command, args에 따라 적절한 작업을 하도록 자바 스크립트를 수정하면 된다.

function fs_DoFSCommand(command, args) {
var fsObj = InternetExplorer ? fs : document.fs;
//
// Place your code here…
//
if(command = “close”) {
window.self.close();
}
}

자바 스크립트에서 플래시로 값을 전달
플래시에 특정한 값을 전달하려면 플래시 플레이어 <OBJECT>의 ID를 이용하고 SetVariable() 함수를 이용한다. 이 함수는 SWF의 변수에 지정된 값을 셋팅하는 함수로 플레이어가 제공한다.

<화면 5> JsToFlash 수행 결과

<화면 5>는 이 페이지를 수행한 결과이다. HTML 페이지에 입력된 값을 SWF로 전달해 입력된 문자열이 그대로 SWF에 표시되는 것을 확인할 수 있다.

movie.SetVariable(”inputText”, form1.inputVal.value) ;

SWF에 있는 텍스트박스의 변수명(vars)가 “inputText”이다. form1에 있는 값을 SWF가 가지고 있는 “inputText” 변수에 할당하는 것이다.

<HTML>
<HEAD>
<meta http-equiv=Content-Type content=”text/html; charset=”>
<TITLE>JsToFlash</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
function SetFlashVariable() {
var movie = window.document.JsToFlash;
movie.SetVariable(”inputText”, form1.inputVal.value) ;
}
//–>
</SCRIPT>
</HEAD>
<BODY bgcolor=”#999999″>
<!– URL’s used in the movie–>
<!– text used in the movie–>
<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
WIDTH=”300″ HEIGHT=”100″ id=”JsToFlash” ALIGN=”">
<PARAM NAME=movie VALUE=”JsToFlash.swf”>
<EMBED src=”JsToFlash.swf” WIDTH=”300″ HEIGHT=”200″
NAME=”JsToFlash” ALIGN=”"
</EMBED>
</OBJECT>
<br/>
<form id=”form1″>
<input name=”inputVal” type =”input” value=”여기에
입력하세요”><br/>
<input type =”button” value=”플래시에설정” onClick=”SetFlashVariable
()”>
</form>
</BODY>
</HTML>

플래시와 플래시간 통신
하나의 페이지에 두 개 이상의 플래시가 있고 이들 사이에 통신을 하려면 어떻게 할까? 플래시 MX 이전에는 SWF간에 통신을 하기 위해 앞서 살펴본 자바 스크립트를 중간에 이용해야 했다. 즉, SWF 자바 스크립트 SWF 이런 방법을 사용했다. 이 방법은 브라우저에 의존하는 면이 강해서 익스플로러나 넷스케이프에 따라 다르게 처리를 해줘야 하므로 매우 불편했다.
플래시 MX에서는 SWF간 통신을 지원하기 위해 LocalConnection라는 객체를 제공한다. 같은 브라우저 내에서는 간편하게 SWF간에 통신을 할 수 있다. 여러 개의 윈도우를 가진 플래시 컨텐츠를 비교적 간단하게 만들 수 있다. 예를 들어, 메뉴를 담고 있는 SWF과 내용을 보여주는 SWF를 따로 제작해 훨씬 유연한 컨텐츠를 제작할 수 있을 것이다. 간단히 사용법을 살펴보자. 먼저 명령을 수신하는 쪽은 다음과 같이 작성한다.

// LocalConnection 객체를 생성
lcObj = new LocalConnection();
// 객체에 onContentSelect 메쏘드를 정의
lcObj.onContentSelect = function(num) {
// num 값에 따라 처리
}
// lcObj를 오브젝트를 아이디로 “contents”를 지정
lcObj.connect(”contents”);
상대편, 즉 명령을 보내는 쪽은 다음과 같이 작성한다.
lcObj = new LocalConnection();
// 메뉴 선택시 “contents”로 전송하는 데이터 정의
_root.menu1.onRelease = function() {
lcObj.send(”contents”, “onContentSelect”, 100);
}
_root.menu2.onRelease = function() {
lcObj.send(”contents”, “onContentSelect”, 200);
}

이처럼 LocalConnection을 사용하면 자바 스크립트를 작성하지 않고도 훨씬 간편하게 SWF간에 데이터를 송수신 할 수 있다.
플래시 HTTP 통신
getURL ()은 특정 URL을 호출하는 기능을 가지고 있다. 따라서 URL을 다음과 같이 지정한다면 특정 URL에 값을 전달하도록 할 수 있다. 예를 들어, SWF에서 입력받은 결과를 특정 페이지에 다음과 같이 전달할 수 있다.

getURL( ‘http://localhost/memo.aspx?n=”홍길동”‘)

getURL()보다 훨씬 다양하게 사용될 수 있는 것이 loadVariables() 함수이다. 이 함수는 URL에서 값들을 읽어 올 수 있다. URL은 파일일 수도 있고 http로 시작하는 페이지일 수도 있다. loadVariables()는 다음과 같은 형태로 사용한다.

loadVariables (”url” , level/”target”[, variables])
loadVariablesNum (”url” ,level [, variables])

만약에 loadVariables()가 “이름1=값1&이름2=값2&이름3&값3”과 같은 값을 수신했다면, SWF 내의 변수 중에서 “이름1”에 “값1”을 할당하게 된다. 여러 개의 값을 한꺼번에 지정할 때 각기 다른 이름을 줘야하므로 보통 변수명에 번호를 붙여서 사용한다.

◆ loadVariablesNum 샘플
on(release) {
loadVariablesNum(”phonebook.txt”, 0);
loadVariablesNum(”data.txt”, 0);
}
◆ phonebook.txt의 내용
name=홍길동&phone=013-443-2331
◆ data.txt의 내용
memo=안녕하세요? 길동님.. 메모를 남깁니다.

여기서는 phonebook.txt와 data.txt 파일에서 값들을 읽어서 변수에 할당하는 예이다. SWF에는 name, phone, memo를 변수 이름으로 가지는 객체가 각각 있다.
phonebook.txt, data.txt와 작성된 html, swf 파일을 같은 폴더에 웹 서버에 올려놓고 테스트를 해 보라. 수정해야 할 것은 전혀 없다. 즉, 로컬에서 수행되는 것과 마찬가지로 웹상에서도 똑같이 수행된다. 물론 다음과 같이 특정 URL을 지정할 수 도 있겠지만, 파일명만 지정하면 기본적으로 SWF가 다운로드된 URL과 같은 위치를 요청하게 된다.

loadVariablesNum(”http://localhost/test/phonebook.txt”, 0);

이제 ASP.NET 페이지에 데이터를 보내고 보낸 내용에 따라 다르게 반응하는 예제를 만들어 보자.

<화면 6> 예제 06-loadVariables2 수행 결과

<화면 6>과 같이 화면을 구성하고, 메모로 되어 있는 회색 영역의 변수 이름은(vars)는 “memo”로 되어 있다. GET 버튼에는 다음과 같은 액션 스크립트가 작성되어 있다. 이 내용은 localhost의 test 폴더에 memo.aspx를 호출하는 내용이다.

on(release) {
loadVariablesNum(”http://localhost/test/memo.aspx?name=” + name, 0);
}

서버측의 페이지는 아주 간단한 ASPX 페이지로, “홍길동”이 인자로 전달되면, “memo=홍길동님 12시까지 오세요”란 문자열이 리턴되고 아닌 경우는 “memo= 메모가 없읍니다”가 리턴된다(<리스트 1>).

<리스트 1> memo aspx
<%@Page Language=”C#” Codepage=”949″%>
<%
   if(Request.Params["name"] == “홍길동”)
   Response.Write(”memo=” + “홍길동님 12시까지 오세요”);
   else
   Response.Write(”memo=” + “메모가 없읍니다”);
%>

여 기서 한 가지 주의할 것이 있다. 앞서 이야기한대로 System.useCodepage = true로 하고 <리스트 1>의 memo.aspx 파일이 있는 곳에 web.config를 다음과 같이 수정한다. 요청(request) 인코딩과 응답(response) 인코딩을 다음과 같이 모두 “ecu-kr”로 맞춰준다. 이렇게 하는 것이 테스트하기도 좋고, 실제 대부분의 사이트들이 EUC-KR(KSC5601)을 사용하기 때문에 글자가 깨지는 문제를 일으키지 않는다.

◆ web.config 파일의 일부
<globalization
requestEncoding=”euc-kr”
responseEncoding=”euc-kr”
/>

loadVariables는 배경색과 같은 SWF의 설정 등을 읽어오는데도 사용할 수 있다. 가능한 데이터를 SWF 안에 두지 말고 파일이나 혹은 특정 URL(apsx 페이지)에서 생성된 데이터를 읽어 들여 처리하는 것이 훨씬 좋다. 내용이 변경되어도 SWF를 다시 제작하는 수고를 덜어 줄 것이기 때문이다. 훨씬 더 유연하고 동적인 SWF를 구성할 수 있다.
LoadVars 객체
LoadVars 객체는 앞서 이야기한 loadVariables()를 대신해 사용할 수 있으며, 훨씬 다양한 기능을 제공한다. 특히 다양한 데이터를 읽어 들어 처리할 때 매우 유용하다. loadVars()는 다음과 같이 객체를 생성하여 사용한다.

lv = new loadVars();

loadVars 객체는 다음과 같이 다양한 메쏘드와 속성을 제공한다(<표 3>).

메쏘드	load()	지정된 URL에서 변수를 가져온다
메쏘드	getBytesTotal()	load()/sendAndLoad()에서 로드한 바이트 수를 리턴
메쏘드	send()	변수를 지정된 URL로 전송
메쏘드	sendAndLoad()	변수를 지정된 URL로 전송하고 응답을 수신
메쏘드	toString()	열거 가능한 변수를 포함하는 URL 문자열을 반환
속성	contentType	데이터의 MIME 타입
속성	loaded	sendAndLoad()가 완료되었는지 여부
이벤트	onLoad	load(), sendAndLoad()가 완료되었을 때 발생
이벤트	onData	onLoad와 비슷(raw 데이터 처리)

<표 3> loadVars 메쏘드와 속성

<리스트 2>는 액션 스크립트 예제이다. 액션 스크립트의 Array를 이용했고 onLoad를 이용해 load가 다 끝난 뒤에 데이터를 처리하도록 했다. 데이터가 로드되면 loaded가 함수가 수행된다.

<리스트 2> 주소록 액션 스크립트

System.useCodePage = true;
index = 0;
maxIndex = 0;
addressbook = new Array();
function loaded() {
   maxIndex = Number(this.loop);
   rec = “” + (index + 1) + “/” + maxIndex;
   for (i = 0; i < maxIndex; i++) {
      card = new Object()
      card.name = this["name"+i];
      card.phone = this["phone"+i];
      card.memo = this["memo"+i];
      addressbook.push(card);
   }
}
var lv = new loadVars();
lv.onLoad = loaded;
lv.load(”https://plusjune/test/addressbook.aspx”);

	Digital Angel Master on 케이블타이를 이용하…
	antidisestablishment… on ActiveX Control Tutorial - Par…
	하타 on 케이블타이를 이용하…
	Angela Baxter on 생활의 지혜 - 대형 할…
	MARA on 파이어폭스 팁 메가 콜…

Digital Angel Master

Categories

Notice

Top Posts

Top Clicks

Recent Posts

Recent Comments

플래시 속에 감춰진 수학, CurveTo의 비밀

웹SW 개발, 무엇을 이용할까?「콜드퓨전·자바·닷넷」