첫 번째 iOS용 AIR 응용 프로그램 만들기

AIR 2.6 이상, iOS 4.2 이상

Adobe 도구만 사용하여 iOS 응용 프로그램의 기본 기능을 코딩하고 구성하고 테스트할 수 있습니다. 하지만 장치에서 iOS 응용 프로그램을 설치하고 해당 응용 프로그램을 배포하려면 Apple iOS Developer 프로그램(유료 서비스)에 가입해야 합니다. iOS Developer 프로그램에 가입하면 iOS Provisioning Portal에 액세스하여 테스트 및 후속 배포를 위해 응용 프로그램을 장치에 설치하는 데 필요한 항목 및 파일을 얻을 수 있습니다. Apple에서 제공하는 이들 항목 및 파일은 다음과 같습니다.

  • 개발 및 배포 인증서

  • 응용 프로그램 ID

  • 개발 및 배포 프로비저닝 파일

응용 프로그램 내용 만들기

“Hello world!”라는 텍스트를 표시하는 SWF 파일을 만들어 보십시오. Flash Professional, Flash Builder 또는 다른 IDE를 사용하여 이 작업을 수행할 수 있습니다. 이 예제에서는 간단히 텍스트 편집기 그리고 Flex SDK에 포함된 명령줄 SWF 컴파일러를 사용합니다.

  1. 편리한 위치에 응용 프로그램 파일을 저장하기 위한 디렉토리를 만듭니다. HelloWorld.as 라는 파일을 만들고 선호하는 코드 편집기에서 이 파일을 편집합니다.

  2. 다음 코드를 추가합니다.

    package{ 
         
        import flash.display.Sprite; 
        import flash.text.TextField; 
        import flash.text.TextFormat; 
        import flash.text.TextFieldAutoSize; 
         
        public class HelloWorld extends Sprite 
        { 
            public function HelloWorld():void 
            { 
                var textField:TextField = new TextField(); 
                textField.text = "Hello World!"; 
                textField.autoSize = TextFieldAutoSize.LEFT; 
                     
                var format:TextFormat = new TextFormat(); 
                format.size = 48; 
                 
                textField.setTextFormat ( format ); 
                this.addChild( textField ); 
            } 
        } 
    }
  3. amxmlc 컴파일러를 사용하여 클래스를 컴파일합니다.

    amxmlc HelloWorld.as

    같은 폴더에 HelloWorld.swf 라는 SWF 파일이 생성됩니다.

    참고: 이 예제에서는 amxmlc가 들어 있는 디렉토리를 포함하도록 환경 경로 변수를 설정했다고 가정합니다. 경로 설정에 대한 자세한 내용은 path 환경 변수 를 참조하십시오. 또는 amxmlc 그리고 이 예제에서 사용된 다른 명령줄 도구에 대한 전체 경로를 입력할 수 있습니다.

응용 프로그램의 아이콘 아트 및 초기 화면 아트 제작

모든 iOS 응용 프로그램에는 iTunes 응용 프로그램 사용자 인터페이스와 장치 화면에 표시되는 아이콘이 있습니다.

  1. 프로젝트 디렉토리에 새 디렉토리를 만들고 이름을 icons로 지정합니다.

  2. icons 디렉토리에 PNG 파일을 3개 만들고 각각 Icon_29.png, Icon_57.png, Icon_512.png로 이름을 지정합니다.

  3. PNG 파일을 편집하여 응용 프로그램에 적합한 아트를 만듭니다. 이 파일은 29 x 29 픽셀, 57 x 57 픽셀, 512 x 512 픽셀 크기여야 합니다. 이 테스트에는 단색 사각형을 아트로 사용하면 됩니다.

    참고: Apple App Store로 응용 프로그램을 전송할 때는 PNG 버전이 아니라 JPG 버전의 512픽셀 파일을 사용합니다. PNG 버전은 응용 프로그램의 개발 버전을 테스트하는 동안에만 사용합니다.

모든 iPhone 응용 프로그램은 iPhone에서 로드되는 동안 초기 이미지를 표시합니다. 이 초기 이미지는 PNG 파일로 정의합니다.

  1. 기본 개발 디렉토리에 Default.png라는 PNG 파일을 만듭니다. 이 파일을 icons 하위 디렉토리에 넣지 마십시오 . 파일 이름은 반드시 대문자 D로 시작하는 Default.png이어야 합니다.

  2. 폭 320픽셀, 높이 480 픽셀로 파일을 편집합니다. 지금은 내용을 흰색 사각형으로 두면 됩니다. 내용은 나중에 변경합니다.

이 그래픽에 대한 자세한 내용은 응용 프로그램 아이콘 을 참조하십시오.

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

응용 프로그램의 기본 속성을 지정하는 응용 프로그램 설명자 파일을 만드십시오. Flash Builder 등의 IDE 또는 텍스트 편집기를 사용하여 이 작업을 완료할 수 있습니다.

  1. HelloWorld.as가 들어 있는 프로젝트 폴더에서 HelloWorld-app.xml 이라는 XML 파일을 만듭니다. 선호하는 XML 편집기에서 이 파일을 편집합니다.

  2. 다음 XML을 추가합니다.

    <?xml version="1.0" encoding="utf-8" ?> 
    <application xmlns="http://ns.adobe.com/air/application/2.7" minimumPatchLevel="0"> 
        <id>change_to_your_id</id> 
        <name>Hello World iOS</name> 
        <versionNumber>0.0.1</versionNumber> 
        <filename>HelloWorld</filename> 
        <supportedProfiles>mobileDevice</supportedProfiles> 
        <initialWindow> 
            <content>HelloWorld.swf</content> 
            <title>Hello World!</title> 
        </initialWindow> 
        <icon> 
            <image29x29>icons/AIRApp_29.png</image29x29> 
            <image57x57>icons/AIRApp_57.png</image57x57> 
            <image512x512>icons/AIRApp_512.png</image512x512> 
        </icon> 
    </application>

    단순하게 만들기 위해 이 예제에서는 사용 가능한 속성 중 몇 개만 설정합니다.

    참고: AIR 2 이하를 사용하는 경우 <versionNumber> 요소 대신 <version> 요소를 사용해야 합니다.
  3. iOS Provisioning Portal에서 지정한 응용 프로그램 ID와 일치하도록 응용 프로그램 ID를 변경합니다. ID 앞에 임의의 번들 시드 부분을 포함시키지 마십시오.

  4. ADL을 사용하여 응용 프로그램을 테스트합니다.

    adl HelloWorld-app.xml -screensize iPhone

    ADL은 Hello World! 라는 텍스트가 표시되는 윈도우를 데스크톱에서 열어야 합니다. 그렇지 못하면 소스 코드 및 응용 프로그램 설명자에 오류가 있는지 확인해 보십시오.

IPA 파일 컴파일

이제 ADT를 사용하여 IPA 설치 프로그램 파일을 컴파일할 수 있습니다. P12 파일 포맷의 Apple 개발자 인증서 및 개인 키 그리고 Apple 개발 프로비저닝 프로파일이 있어야 합니다.

다음 옵션을 사용하여 ADT 유틸리티를 실행하십시오. 이때 keystore, storepass 및 provisioning-profile 값은 상황에 맞게 바꾸십시오.

adt -package -target ipa-debug 
    -keystore iosPrivateKey.p12 -storetype pkcs12 -storepass qwerty12 
    -provisioning-profile ios.mobileprovision 
    HelloWorld.ipa 
    HelloWorld-app.xml 
    HelloWorld.swf icons Default.png

명령줄을 하나만 사용하십시오. 이 예제의 행 분리는 읽기 쉽게 만들기 위해 추가된 것일 뿐입니다.

ADT가 프로젝트 디렉토리에 HelloWorld.ipa 라는 iOS 응용 프로그램 설치 프로그램 파일을 생성합니다. IPA 파일을 컴파일하는 데는 몇 분 정도 걸릴 수 있습니다.

장치에 응용 프로그램 설치

테스트를 위해 iOS 응용 프로그램을 설치하려면

  1. iTunes 응용 프로그램을 엽니다.

  2. 이 응용 프로그램의 프로비저닝 프로파일을 iTunes에 추가합니다. iTunes에서 [파일] > [보관함에 추가]를 선택합니다. 그런 다음 프로비저닝 프로파일 파일(파일 유형이 mobileprovision인 파일)을 선택합니다.

    지금은 개발자 장치에서 응용 프로그램을 테스트하는 것이므로 개발용 프로비저닝 프로파일을 사용합니다.

    나중에 iTunes Store에 응용 프로그램을 배포할 때는 배포용 프로파일을 사용해야 합니다. 애드혹 방식으로 응용 프로그램을 배포(iTunes Store를 통하지 않고 여러 장치에 배포)하려면 애드혹용 프로비저닝 프로파일을 사용합니다.

    프로비저닝 프로파일에 대한 자세한 내용은 iOS 설정 을 참조하십시오.

  3. 일부 iTunes 버전은 같은 버전의 응용 프로그램이 이미 설치되어 있으면 응용 프로그램을 바꾸지 않습니다. 이 경우 장치와 iTunes의 응용 프로그램 목록에서 응용 프로그램을 삭제하십시오.

  4. 응용 프로그램의 IPA 파일을 두 번 클릭합니다. 해당 파일이 iTunes에서 응용 프로그램 목록에 나타납니다.

  5. 장치를 컴퓨터의 USB 포트에 연결합니다.

  6. iTunes에서 장치의 [응용 프로그램] 탭에 있는 설치할 응용 프로그램 목록에 응용 프로그램이 선택되어 있는지 확인합니다.

  7. iTunes 응용 프로그램의 왼쪽 목록에서 장치를 선택합니다. 그런 다음 [동기화] 버튼을 클릭합니다. 동기화가 완료되면 iPhone에 Hello World 응용 프로그램이 나타납니다.

새 버전이 설치되지 않은 경우 장치와 iTunes의 응용 프로그램 목록에서 응용 프로그램을 삭제하고 이 절차를 다시 실행합니다. 현재 설치된 버전의 응용 프로그램 ID와 버전이 동일하기 때문일 수 있습니다.

초기 화면 그래픽 편집

앞서 응용 프로그램을 컴파일하기 전에 Default.png 파일( 응용 프로그램의 아이콘 아트 및 초기 화면 아트 제작 참조)을 만들었습니다. 이 PNG 파일은 응용 프로그램이 로드되는 동안 시작 이미지로 사용됩니다. iPhone에서 응용 프로그램을 테스트하는 경우 시작 시에 이 빈 화면이 표시되는 것을 볼 수 있습니다.

이 이미지를 응용 프로그램의 시작 화면("Hello World!")과 일치하도록 변경해야 합니다.:

  1. 장치에서 응용 프로그램을 엽니다. 첫 번째 "Hello World" 텍스트가 나타나면 화면 아래쪽에 있는 [홈] 버튼을 누르고 있습니다. [홈] 버튼을 누른 상태에서 iPhone 맨 위에 있는 [잠자기/깨우기] 버튼을 누릅니다. 이렇게 하면 스크린 샷이 생성되어 카메라 롤로 보내집니다.

  2. iPhoto 또는 기타 사진 전송 응용 프로그램에서 개발 컴퓨터로 이미지를 전송합니다. Mac OS에서는 이미지 캡처 응용 프로그램을 사용할 수도 있습니다.

    전자 메일을 통해 사진을 개발 컴퓨터로 보낼 수도 있습니다.

    • Photos 응용 프로그램을 엽니다.

    • 카메라 롤을 엽니다.

    • 캡처한 스크린 샷 이미지를 엽니다.

    • 이미지를 누르고 왼쪽 아래에 있는 "전달"(화살표) 버튼을 누릅니다. 그런 다음 [이메일 메시지에 사진 보내기] 버튼을 눌러 이미지를 자신의 전자 메일 주소로 보냅니다.

  3. 개발 디렉토리에 있는 Default.png 파일을 화면 캡처 이미지의 PNG 버전으로 바꿉니다.

  4. 응용 프로그램을 다시 컴파일( IPA 파일 컴파일 참조)하고 장치에 다시 설치합니다.

이제 응용 프로그램을 로드할 때 새 시작 화면이 사용됩니다.

참고: 크기(320 x 480 픽셀)만 맞으면 어떤 아트든 Default.png 파일로 만들 수 있습니다. 그러나 일반적으로 Default.png 이미지는 응용 프로그램의 초기 상태와 일치하는 것이 좋습니다.