UIX

Adobe AIR는 그냥 쉽게 웹의 컨텐츠를 데스크탑에서 애플리케이션형태로 보여주기 위한 플랫폼입니다. 어려운 개념이 아니라 그냥 swf를  OS실행파일 형태인 exe형태(윈도우기준)로 컨버팅 해준다고 이해하면 쉬울것 같습니다.

하지만 꼭 swf일 필요는 없습니다. html과 자바스크립트만으로도 AIR애플리케이션으로 쉽게 만들수가 있습니다. html이 브라우저에서 실행되는게 아니라 단독 실행파일로 실행된다는 상상을 해본다면~ 재밌겠죠 ^^

웹 통합개발환경툴(IDE)인  Aptana를 사용하면 아주 쉽게 html로 AIR를 개발할수 있는 환경을 만들어볼수 있습니다. (아래는 윈도우xp환경에서 캡쳐되고 가장 기본적인 부분만 설명하고 있습니다)

Aptana 설치

자기 로컬환경에 맞는 Aptana를 다운로드 한후 설치 합니다. 윈도우일경우 계정명이 한글일경우  영문으로 된 새로운 계정에서 설치하는게 정신건강에 이롭습니다;

Aptana AIR플러그인 설치

Aptana를 실행하고 메뉴에서 help->Sotfware Updates->Find and Install 를 선택합니다.

Search for new features to install 선택후 Next

Atana:Support for Adobe AIR를 체크하고 Finish 선택

한번더 같은 항목 체크한후에  Next 선택

사용동의에 체크한후에 Next

플러그인 설치정보를 확인하고 Finish를 클릭하면 다운로드후에 설치가 진행됩니다

Aptana에 AIR 프로젝트 만들기

Aptana에서 AIR 프로젝트를 생성합니다. 메뉴에서 file->new->project 선택
 

Adobe AIR프로젝트 선택하고 Next

프로젝트 이름에 Test라고 입력하고 Next

만들어질 애플리케이션의 정보를 담는 Application XML을 설정하는 부분인데 일단은 디폴트로 두고 Next~ , 아이콘은 애플리케이션에서 사용하는 아이콘입니다. 총4가지의 아이콘을 요구하는군요 
 

애플리케이션 기본정보를 설정하는 부분입니다. 최소화,최대화,리사이즈 가능여부와 애플리케이션 윈도우 가로세로,처음실행시 x,y위치 등의 정보를 입력할수 있습니다  Next

AIR에 관련된 js,swf프레임웍을 import할지를 선택하는 창입니다. Next 

자바스크립트 라이브러리를 import할지 여부를 선택합니다. 여기서 하지 않더래도 html 에 그냥 <scrpt src 형태로 넣어주면 되겠지요. Finish를 누르면 AIR프로젝트가 생성됩니다

프로젝트 탭에 Text프로젝트가 생성되고  Text.html 파일이 기본적으로 열린상태 
프로젝트의 디렉토리 위치는 아래와 같습니다
C:\Documents and Settings\{계정명}i\My Documents\Aptana Studio\Test

html로 AIR애플리케이션 만들기

Test.html 파일을 모두 지우고 아래처럼 코딩합니다~ Hello World찍어보기 ^^

‘실행테스트’ 단추를 클릭하면 ~

AIR애플리케이션이 잘 되는군요 ^^  이제 돌아가는 개념은 잡았으니 간단하게 코딩을 더해볼까요?
 

미디어다음 스포츠의 ‘오늘의 주요경기’부분을 애플리케이션 형태로 만들어 볼까 합니다. 아래처럼 Test.html를 코딩 합니다 (http://sports.media.daum.net/ 소스참고) 

지금 실행시켜보면 윈도우의 크기가 너무 크기때문에 설정에서 기본사이즈를 변경해줍니다
application.xml파일을 열고 widht,height 260,305으로, minimizable,maximizable,resizable를 false로  설정합니다.

이제 다시 ‘실행테스트’를 해보면 오늘의 주요경기가 깔끔하게 윈도우에서 애플리케이션 형태로 실행됩니다^^

AIR애플리케이션 패키징

이제 AIR애플리케이션 배포형태인 Test.air형태로 패키징하여 air파일을 공유하면 누구든 데스크탑에서 실행을 해볼수 있습니다.

Export Adobe AIR Package 를 선택합니다

기본적인 패키징 정보를 보여줍니다. 디폴트로 두고 Next

디지털서명을 선택해주는 부분인데 테스트개발시에는 테스트용 하나 만들어서 추가해주면 쉽게 패스가 됩니다 (디지털서명부분에 대한 개념은 검색해보세요;)
Configure Certificates 클릭~

Add를 클릭해서 AIR용 인증서를 하나 만들게 됩니다

대충;; 아래와 같은 정보를 넣고 OK를 하면됩니다. test라는 인증서를 만들게 되고 인증서 password부분은 패키징할때 필요하므로 기억해둡니다

 
위에서 생성한 인증서를 선택하고 비밀번호를 넣으면 Next버튼이 활성화 됩니다. Next~

실제 패키징 되는 파일들의 목록을 보여줍니다. Finish~ 완료가 됩니다

AIR 배포

프로젝트의 물리적인 디렉토리에 가보면 위에서 패키징한 Test.air파일이 생성 되었습니다
C:\Documents and Settings\{계정명}\My Documents\Aptana Studio\Test
 

Test.air파일을 실행해보면 AIR애플리케이션 설치마법사가 나오면서 설치를 진행하게 됩니다.
배포할경우 air파일을 그대로 공유해도 상관없으나 AIR런타임(실행환경)이 설치되지 않는 사용자 환경에서는 air파일을 실행시킬수 없으므로 AIR Badge형태로 배포를 하게됩니다. 웹에서 바로 설치가 가능하고 런타임이 없을경우 자동설치가 됩니다 (AIR Badge로 배포하는 방법도 검색을 통해 쉽게 찾아볼수 있습니다;)

아래가 위에서 만든 Test.air를 Badge형태로 배포하는 모습입니다. 설치해 보세요^^

정리하며

Aptana와 AIR플러그인 설치하고 html로 간단한 AIR애플리케이션을 만들어봤습니다. 만들어본건 단순한 iframe형태였지만 기존에 웹서비스를 활용하여 기획해볼수 있는 AIR애플리케이션은 무궁무진 하겠죠?

참고사이트

• 자바스크립트로 만드는 AIR 애플리케이션
• html기반의 매쉬업 AIR 애플리케이션 이야기
• Aptana로 AIR개발하기
• AIR Badge를 쉽게 생성해주는 AIR 애플리케이션 - AVM
• Ext JS를 이용한 AIR MP3 플레이어