- Adobe AIR 개요

Adobe AIR는 2008년 처음 발표된 데스크톱 런타임으로, 윈도우 플랫폼 뿐만 아니라 Mac 0S, 리눅스까지 지원하는 크로스플랫폼 런타임으로 자리매김 하고 있다. 특히 출시 1년여 만에, 2억대의 클라이언트에 설치되는 기염을 토하며, 이베이, 뉴욕타임즈와 같은 대형 서드파티사에서도 속속 도입하기 시작하였다.

Adobe AIR는 플래시 빌더(이전명 플렉스 빌더)에서 개발하거나, 플래시 CS4에서 AIR SDK를 다운받아 개발 할 수 있다. 특히, AIR 런타임 내에 Webkit 엔진이 탑재되면서, 액션스크립트나 기타 프로그래밍 언어를 전혀 모르는 AJAX 개발자나 디자이너, 웹 퍼블리셔도 HTML과 자바스크립트를 사용하여 AIR 애플리케이션을 보다 손쉽게 개발이 가능한 장점이 있다.

아울러, 작년 출시된 어도비CS4의 웹 프리미엄 제품군인 드림위버 CS4에선 AIR 애플리케이션 개발을 공식적으로 지원하기 시작하였다. 다만, AIR 애플리케이션을 배포하기 위한 패키징 작업을 할 때에는 반드시 아래의 요구사항이 필요하다.

요구환경(Windows 기준)

l  JRE1.4 이상

l  Adobe AIR extension for Dreamweaver CS4

그럼 지금부터 드림위버 CS4로, AIR 애플리케이션을 저작하기 위한 준비사항과, 간단히 나만의 AIR 위젯 애플리케이션을 개발하고, 배포하는 방법에 대해 알아보자.

- AIR Extension for Dreamweaver CS4 설치하기

AIR 애플리케이션 개발 및 배포과정에 앞서 반드시 Adobe AIR extension for Dreamweaver CS4를 설치하여야 한다. Extension을 설치하는 과정에 대해 알아보자.

1.     드림위버 CS4에서 AIR 애플리케이션을 개발 할 경우 반드시 Adobe AIR Extension이 필요하다. 드림위버 CS4에 AIR Extension가 포함되지 않은 이유는, AIR SDK는 개발킷으로써 새로운 런타임이 출시될 경우 변동사항이 많기 때문에, 가급적 최신 SDK를 사용하여 개발하기 위한 배려의 일환이다..

AIR Extension은 메뉴바의 Commands > Get AIR Extension 을 눌러 다운받을 수 있다.

2.     Get AIR Extension을 누르면 어도비 사이트로 이동하게 되는데, 내가 사용하고 있는 드림위버 CS버전에 적합한 AIR Extension을 다운받으면 된다.

3.     Adobe에서 제공하는 AIR Extension을 다운받아 실행하면, 자동적으로 AIR extension 설치절차를 진행한다. AIR Extension의 이용약관을 읽고 동의여부를 선택한다.

4.     AIR Extension이 모두 설치가 완료되었다면 확인을 누르고, 드림위버 CS4를 닫고 다시 시작한다. 만약, AIR 애플리케이션을 패키징 할 컴퓨터에 JRE가 설치되어 있지 않다면, Java홈페이지(www.java.com)에서 JRE를 내려받아 설치하여야 한다.

5.     AIR extension을 모두 설치하였다면, 메뉴바에서 Site탭의 AIR Application Settings과, Create AIR File이 활성화 되어 있다. AIR Application Settings탭은 AIR 애플리케이션 전반에 대한 설정정보와, 패키징에 대한 정보를 설정 할 수 있다. 아울러, Preview in Browser 탭에는 AIR 애플리케이션을 테스트할 수 있는 Preview in Adobe AIR. 탭도 추가된 것을 확인할 수 있다

- 드림위버 CS4에서 AIR 애플리케이션 저작하고 테스트하기

AIR Extension을 모두 설치하였으면 본격적으로 드림위버 CS4에서 AIR 애플리케이션을 개발할 수 있다. 이어서 나만의 AIR 위젯 애플리케이션을 만들고 배포하는 방법에 대해 알아보자.

1.     AIR 애플리케이션은 드림위버 CS4에서 단일 HTML 파일 저작과는 달리, HTML과 여러 에셋파일들이 묶인 형태인 Site 단위로 존재하여야 한다. Site는 Intro화면에서 Create New 탭에 Dreamweaver Site를 선택하거나, 메뉴 탭에서 Site > New Site 에서 만들 수 있다.

2.     Site를 만드는 과정 중에선 특별히 주의해야 할 점은 없지만, Server Side와 파일공유를 선택하는 과정에선 None를 눌러 다음과정으로 넘어가야 한다.

3.     Site 생성과정을 모두 마쳤다면, 오른쪽 하단에 Site가 만들어진 것을 볼 수 있다. 아직 Site에는 HTML 파일을 비롯한 에셋파일이 존재하지 않으므로, 해당 사이트 폴더에 파일을 끌어넣거나, HTML 파일을 생성하여야 한다. HTML 파일은 Site에서 오른쪽 마우스를 눌러 New File를 눌러 생성할 수 있다.

4.     New File를 눌러 html파일을 생성하였다면, Site 탭 하단엔 생성된 html 파일이 표시된다. 생성된 Html 파일을 더블클릭 하면, 본격적인 AIR 애플리케이션 개발을 시작할 수 있다.

5.     이번 시간에는 코딩없이 간단히 플래시 위젯을 퍼와서, 나만의 AIR 위젯 애플리케이션을 만드는 방법에 대해 알아보자. 플래시 위젯을 배포하는 사이트가 여러 개 있으므로, 배포가 편리한 사이트를 선택하기 바란다.

6.     AIR 위젯으로 만들고 싶은 위젯을 선택하여 소스코드를 복사해서, Source 탭에 그대로 복사한다. 이때 주의할 점은, 가급적 Script 태그로 만들어진 위젯보다 Embed로 된 위젯을 붙여 넣는 것이 결과가 더 좋다.

7.     지금까지 나만의 AIR위젯을 간단히 만드는 방법에 대해 알아보았다. 그럼, AIR위젯을 테스트 해보자. 드림위버 CS4에서는 File 탭에 Preview in Browser > Preview in Adobe AIR 탭을 눌러 AIR 애플리케이션이 실제로 작동되는 환경을 테스트 하면서 디버깅을 할 수 있다.

8.     Preview in Adobe AIR 탭을 클릭하면 나만의 AIR 위젯이 웹 브라우저가 아닌 하나의 애플리케이션으로 실행되는 것을 볼 수 있다. 하지만, Preview 모드는 드림위버 CS4에서 AIR 애플리케이션을 테스트 할 수 있는 방법으로, 데스크톱에서 프로그램으로 사용하려면 반드시 AIR 애플리케이션으로 패키징하여야 한다.

지금까지 나만의 AIR 위젯을 만들고 테스트하는 과정까지 다루어보았다.

그럼 드림위버 CS4에서 나만의 AIR 애플리케이션을 배포하기 위한 과정인 패키징을 하는 방법에 대해 알아보자.

- 드림위버 CS4에서 AIR 애플리케이션 패키징 하기

6.     AIR Application Settings 로 들어가면, AIR 애플리케이션에 대한 전반적인 설정을 할 수 있는 Application Settings탭과, 인증정보, 패키징 파일 등을 설정할 수 있는 installer settings 탭으로 나뉘어진다.

7.     Installer Settings탭에는 패키징 될 AIR 파일이름, 애플리케이션 이름, ID, 버전 등을 지정할 수 있는 항목이 있다. 이 항목은 AIR 애플리케이션이 패지킹될 때 디스크립터 파일의 Application 하위 노드와 같은 역할을 한다. File name, ID, Version은 사이트 이름을 기준으로 해서 자동적으로 입력되며 필수항목이기 때문에 반드시 입력해야 한다.

8.     Initial content항목은 AIR 애플리케이션이 최초로 실행되었을 때 로드 될 HTML 파일을 지정하는 항목이다. 디스크립터 파일에서는 initialwindow의 하위 노드인 content와 같은 역할을 한다. 패키징시 필수항목이기 때문에, 반드시 지정하여야 한다.

9.     Description과 Copyright는 애플리케이션에 대한 설명이나 저작권 정보를 나타내는 항목으로 디스크립터 파일의 노드들과 이름이 같다. 반드시 필요한 정보는 아니기 때문에 생략해도 패키징 과정에는 문제가 없다.

10.   AIR 애플리케이션의 Window Style와 Size를 지정하는 탭이 있는데, 이 항목은 디스크립터 파일에서는 systemChrome와, transparent, initialWindow의 하위노드인 width, height 엘리멘트를 설정하게 된다. Windows Style는 System Chrome와, Custom Chrome, 투명 Custom Chrome를 설정 할 수 있다.

11.   Icon 항목은 AIR 애플리케이션의 아이콘을 지정할 수 있다. 디스크립터 파일에서는 icon 엘리멘트와 같은 역할을 한다. 아이콘 파일은 반드시 PNG 파일만 사용이 가능하며, 아이콘 파일을 지정하지 않을 경우 운영체제의 기본 아이콘으로 지정된다.

12.   Associated File Types 항목은 AIR 애플리케이션이 연결할 수 있는 확장 파일들을 지정할 수 있다. 디스크립터 파일에서는 file 엘리멘트와 같은 역할을 한다.

13.   Application Updates 항목은 AIR 애플리케이션의 업데이트 UI를 설정 할 수 있는 탭으로, 기본적으로 AIR 애플리케이션 설치 프로그램을 사용하는 것으로 설정되어 있다. 이 체크박스를 해제하면, 디스크립터 파일에서 CustomUpdaterUI의 true를 지정한 것과 같이 업데이트 UI를 커스텀마이징 할 수 있다.

14.   지금까지 Application Settings에 대해 알아보았다. 이어서 AIR 파일 패키징과 설치 설정을 할 수 있는 Installer Settings에 대해 알아보자.

15.   Included files 항목은 AIR 파일이 패키징될 때 포함될 파일을 관리하는 탭이다. 기본적으로 디스크립터 파일이 자동적으로 추가되어 있으며, 만약 추가적으로 AIR 애플리케이션에서 사용하는 리소스가 있으면 추가나 삭제를 할 수 있다.

16.   Digital Signature 항목은 AIR 애플리케이션의 인증정보를 설정하는 탭으로, 애플리케이션에 인증서를 사용 여부를 설정할 수 있다. 미리 만들어둔 인증 파일이나, CA기관으로부터 발급받은 인증 파일이 있다면, Browse를 눌러 선택할 수 있고, Create를 눌러 자체적으로 인증서를 만들 수 있다.

17.   Program Menu Folder 항목은 AIR 애플리케이션이 설치될 폴더를 설정할 수 있다. 디스크립터 파일에서 programMenuFolder 엘리멘트와 같은 역할을 한다.

18.   Destination은 AIR 파일이 패키징될 위치를 선택하는 항목이다. 기본적으로 사이트가 위치한 폴더에 생성이 되며, 이외의 위치를 Browse를 눌러 선택할 수 있다.

19.   모든 설정을 마쳤다면, 이제 AIR 애플리케이션을 패키징 할 수 있다. Save 버튼을 누르면 지금까지 설정한 정보들을 모두 저장하고 계속해서 작업을 진행 할 수 있다. Create AIR File는 앞서 설명한 메뉴바의 Site탭 아래에 있는 Create AIR File과 같고 이 버튼을 누르거나, 단축키 Ctrl+Shift+B를 눌러 패키징을 진행할 수 있다.

20.   Create AIR File 버튼을 누르면, AIR 파일로 패키징이 진행된다. 프로젝트 규모에 따라서 수초-수분의 시간이 걸리며, 패키징이 완료된 이후에는 AIR 파일이 생성된 위치를 알려준다.

21.   AIR 애플리케이션의 패키징이 완료되면 이렇게 AIR 파일과 함께 디스크립터 파일이 생성된다. 만약 추가적으로 디스크립터 파일에 변경사항이 있으면 application.xml을 수정한 후 패키징을 다시 진행하면 된다. _notes폴더는 앞서 설정한 기타 정보들을 xml 파일 형식으로 담고 있다.

지금까지 드림위버 CS4에서 AIR 애플리케이션을 개발하기 위해 AIR Extension을 설치하고, 나만의 AIR 위젯 애플리케이션을 만들고, 배포하기 위해 패키징 하는 방법에 대해 알아보았다.

드림위버 CS4와 Adobe AIR를 이용하여, 복잡한 프로그래밍 없이 HTML과 AJAX기반의 나만의 AIR애플리케이션도 손쉽게 만들어 보길 바란다.

Adobe RIA공식사이트(http://adoberia.co.kr/iwt/board/board.php?tn=pds_tech&id=272&mode=view)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.