AIR SDK를 사용하여 첫 번째 HTML 기반 AIR 응용 프로그램 만들기

Adobe® AIR® 작동 방식을 빠르게 살펴보려면 다음 지침에 따라 간단한 HTML 기반 AIR "Hello World" 응용 프로그램을 만들고 패키지 해보십시오.

시작하려면 런타임을 설치하고 AIR SDK를 설정해야 합니다. 이 자습서에서는 ADL(AIR Debug Launcher)과 ADT(AIR Developer Tool)를 사용합니다. ADL 및 ADT는 명령줄 유틸리티 프로그램이며 AIR SDK의 bin 디렉토리에서 찾을 수 있습니다(AIR SDK 설치 참조). 이 자습서에서는 학습자가 명령줄에서 프로그램을 실행하는 데 익숙하며 운영 체제에 필요한 Path 환경 변수를 설정하는 방법을 알고 있다고 가정합니다.

참고: Adobe® Dreamweaver® 사용자는 Dreamweaver를 사용하여 첫 번째 HTML 기반 AIR 응용 프로그램 만들기를 읽어보십시오.
참고: HTML 기반 AIR 응용 프로그램은 데스크톱 및 extendedDesktop 프로파일에 대해서만 개발할 수 있습니다. 모바일 및 TV 프로파일은 지원되지 않습니다.

    프로젝트 파일 만들기

    모든 HTML 기반 AIR 프로젝트에는 응용 프로그램 메타데이터를 지정하는 응용 프로그램 설명자 파일과 최상위 HTML 페이지의 두 가지 파일이 포함되어야 합니다. 이러한 필수 파일과 함께 이 프로젝트에는 AIR API 클래스에서 편리하게 사용할 수 있는 별칭 변수를 정의하는 JavaScript 코드 파일인 AIRAliases.js가 포함되어 있습니다.

    1. 프로젝트 파일을 저장할 HelloWorld 디렉토리를 만듭니다.

    2. HelloWorld-app.xml이라는 XML 파일을 만듭니다.

    3. HelloWorld.html이라는 HTML 파일을 만듭니다.

    4. AIR SDK의 frameworks 폴더에 있는 AIRAliases.js를 프로젝트 디렉토리에 복사합니다.

    AIR 응용 프로그램 설명자 파일 만들기

    AIR 응용 프로그램을 작성하려면 다음과 같은 구조로 XML 응용 프로그램 설명자 파일을 만들어야 합니다.

    <application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>

    1. HelloWorld-app.xml을 편집할 수 있도록 엽니다.

    2. AIR 네임스페이스 특성을 포함하는 루트 <application> 요소를 추가합니다.

      <application xmlns="http://ns.adobe.com/air/application/2.6"> 네임스페이스의 마지막 세그먼트인 "2.6"은 응용 프로그램에 필요한 런타임 버전을 지정합니다.

    3. <id> 요소를 추가합니다.

      <id>examples.html.HelloWorld</id> 응용 프로그램 ID는 제작자 ID(응용 프로그램 패키지에 서명하는 데 사용된 인증서에서 파생됨)와 함께 응용 프로그램을 고유하게 식별합니다. 응용 프로그램 ID는 설치, 개인 응용 프로그램 파일 시스템 저장소 디렉토리 액세스, 개인 암호화 저장소 액세스 및 응용 프로그램 간 통신에 사용됩니다.

    4. <versionNumber> 요소를 추가합니다.

      <versionNumber>0.1</versionNumber> 사용자에게 설치하는 응용 프로그램의 버전을 알려 줍니다.

    5. <filename> 요소를 추가합니다.

      <filename>HelloWorld</filename> 응용 프로그램 실행 파일, 설치 디렉토리 및 운영 체제에서 응용 프로그램에 대한 기타 참조로 사용되는 이름입니다.

    6. 초기 응용 프로그램 윈도우의 속성을 지정하는 다음과 같은 자식 요소를 포함하는 <initialWindow> 요소를 추가합니다.

      <content>HelloWorld.html</content> AIR에서 로드할 루트 HTML 파일을 식별합니다.

      <visible>true</visible> 윈도우를 즉시 보이게 만듭니다.

      <width>400</width> 윈도우 폭을 픽셀 단위로 설정합니다.

      <height>200</height> 윈도우 높이를 설정합니다.

    7. 파일을 저장합니다. 완성된 응용 프로그램 설명자 파일은 다음과 같아야 합니다. 

      <?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/2.6"> 
    <id>examples.html.HelloWorld</id> 
    <versionNumber>0.1</versionNumber> 
    <filename>HelloWorld</filename> 
    <initialWindow> 
        <content>HelloWorld.html</content> 
        <visible>true</visible> 
        <width>400</width> 
        <height>200</height> 
    </initialWindow> 
</application>

    이 예제에서는 사용 가능한 응용 프로그램 속성 중 일부만 설정합니다. 윈도우 크롬, 윈도우 크기, 투명도, 기본 설치 디렉토리, 연결된 파일 유형, 응용 프로그램 아이콘 등을 지정할 수 있는 전체 응용 프로그램 속성을 보려면 AIR 응용 프로그램 설명자 파일을 참조하십시오.

    응용 프로그램 HTML 페이지 만들기

    AIR 응용 프로그램의 기본 파일로 사용할 간단한 HTML 페이지를 만들어야 합니다.

    1. HelloWorld.html 파일을 편집할 수 있도록 엽니다. 다음 HTML 코드를 추가합니다. 

      <html> 
<head> 
    <title>Hello World</title> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

    2. HTML의 <head> 섹션에서 AIRAliases.js 파일을 가져옵니다.

      <script src="AIRAliases.js" type="text/javascript"></script>

      AIR가 HTML 윈도우 객체에 runtime이라는 속성을 정의합니다. 이 runtime 속성은 클래스의 정규화된 패키지 이름을 사용하여 기본 제공 AIR 클래스에 액세스하는 방법을 제공합니다. 예를 들어, AIR File 객체를 만들려면 JavaScript에 다음과 같은 문을 추가합니다. 

      var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");

      AIRAliases.js 파일은 자주 사용하는 AIR API를 편리하게 사용할 수 있도록 별칭을 정의합니다. AIRAliases.js를 사용하면 File 클래스에 대한 참조를 다음과 같이 줄일 수 있습니다.

      var textFile = new air.File("app:/textfile.txt");

    3. AIRAliases 스크립트 태그 아래에 onLoad 이벤트를 처리하는 JavaScript 함수가 포함된 다른 스크립트 태그를 추가합니다. 

      <script type="text/javascript"> 
function appLoad(){ 
    air.trace("Hello World"); 
} 
</script>

      appLoad() 함수는 단순히 air.trace() 함수를 호출합니다. 이제 ADL을 사용하여 응용 프로그램을 실행하면 명령 콘솔에 추적 메시지가 출력됩니다. Trace 문은 디버깅 시 매우 유용하게 사용할 수 있습니다.

    4. 파일을 저장합니다.

    이제 HelloWorld.html 파일이 다음과 같아야 합니다. 

    <html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

    응용 프로그램 테스트

    명령줄에서 응용 프로그램을 실행하고 테스트하려면 ADL(AIR Debug Launcher) 유틸리티를 사용합니다. ADL 실행 파일은 AIR SDK의 bin 디렉토리에서 찾을 수 있습니다. AIR SDK를 아직 설치하지 않은 경우 AIR SDK 설치를 참조하십시오.

    1. 명령 콘솔이나 셸을 엽니다. 이 프로젝트용으로 만든 디렉토리로 변경합니다.

    2. 다음 명령을 실행합니다. 

      adl HelloWorld-app.xml

      응용 프로그램을 표시하는 AIR 윈도우가 열립니다. 또한 콘솔 윈도우에 air.trace() 호출의 결과 메시지가 표시됩니다.

      자세한 내용은 AIR 응용 프로그램 설명자 파일을 참조하십시오.

    AIR 설치 파일 만들기

    응용 프로그램이 성공적으로 실행되면 ADT 유틸리티를 사용하여 응용 프로그램을 AIR 설치 파일로 패키지화할 수 있습니다. AIR 설치 파일은 사용자에게 응용 프로그램을 배포할 수 있도록 응용 프로그램의 모든 파일을 포함하는 보관 파일입니다. 패키지된 AIR 파일을 설치하려면 먼저 Adobe AIR를 설치해야 합니다.

    응용 프로그램 보안을 유지하기 위해 모든 AIR 설치 파일은 디지털 서명이 되어야 합니다. ADT나 다른 인증서 생성 도구에서는 개발 용도로 사용할 기본적인 자체 서명 인증서를 생성할 수 있습니다. 또한 VeriSign이나 Thawte 같은 기업 인증 기관에서 상업적인 코드로 서명하는 인증서를 구매할 수도 있습니다. 사용자가 자체 서명된 AIR 파일을 설치할 경우 설치 과정에서 제작자가 "알 수 없음"으로 표시됩니다. 이것은 자체 서명된 인증서가 AIR 파일이 만들어진 이후로 변경되지 않았다는 것만 보장하기 때문입니다. 악의적인 AIR 파일을 자체 서명하여 응용 프로그램으로 제공하는 것 자체를 막을 방법은 없습니다. 따라서, 공개적으로 배포되는 AIR 파일에는 검증 가능한 상용 인증서를 사용하는 것이 좋습니다. AIR 보안 문제에 대한 개요는 AIR 보안(ActionScript 개발자용) 또는 AIR security(HTML 개발자용)을 참조하십시오.

    자체 서명 인증서 및 키 쌍 생성

     명령 프롬프트에서 다음 명령을 입력합니다. ADT 실행 파일은 AIR SDK의 bin 디렉토리에 있습니다. 
    adt –certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

    ADT가 인증서와 관련 개인 키가 들어 있는 sampleCert.pfx라는 키 저장소 파일을 생성합니다.

    이 예제에서는 인증서에 설정할 수 있는 최소한의 특성만 사용합니다. 기울임체로 표시된 매개 변수에는 원하는 값을 사용할 수 있습니다. 키 유형은 1024-RSA 또는 2048-RSA여야 합니다(AIR 응용 프로그램 서명 참조).

    AIR 설치 파일 만들기

     명령 프롬프트에서 다음 명령을 한 줄에 입력합니다. 
    adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

    키 저장소 파일의 암호를 입력하라는 메시지가 나타납니다.

    HelloWorld.air 인수는 ADT가 생성한 AIR 파일입니다. HelloWorld-app.xml은 응용 프로그램 설명자 파일입니다. 그 이후의 인수는 응용 프로그램에 사용되는 파일입니다. 이 예제에서는 파일 두 개만 사용하지만 원하는 모든 파일과 디렉토리를 포함할 수 있습니다. ADT에서 기본 내용 파일인 HelloWorld.html이 패키지에 포함되어 있는지 확인합니다. 하지만 AIRAliases.js를 포함하는 것을 잊어버리면 응용 프로그램이 작동하지 않습니다.

    AIR 패키지가 만들어지면 해당 패키지 파일을 두 번 클릭하여 응용 프로그램을 설치하고 실행할 수 있습니다. 셸이나 명령 윈도우에서 명령으로 AIR 파일 이름을 입력할 수도 있습니다.

    다음 단계

    AIR에서 HTML 및 JavaScript 코드는 대개 일반적인 웹 브라우저에서와 동일하게 동작합니다. 실제로 AIR는 Safari 웹 브라우저에 사용되는 것과 동일한 WebKit 렌더링 엔진을 사용합니다. 하지만 AIR에서 HTML 응용 프로그램을 개발할 때 반드시 알아야 할 중요한 차이점이 있습니다. 이러한 차이점 및 기타 중요한 주제에 대한 자세한 내용은 Programming HTML and JavaScript를 참조하십시오.