IT 기술 따라잡기

아이폰 앱은 제가 개발해 본 적이 없어서 무지 복잡하게 느껴지네요.
많이 개발 해 봤던 안드로이드 쪽도 실수가 있었으니 아이폰쪽은 미리 충분히 빌드와 앱스토어 업로드 방법을 숙지하고 일을 하려고 합니다.

우선 아이폰 앱 빌드를 위해서는 이 웹사이트에 등록하는 거부터 시작 합니다.
http://developer.apple.com/programs/ios/

간략하게 오늘 할 토픽들을 정리하면
- 개발자 등록
- Keychain certificate
- Device 등록
- App IDs 획득
- Provisioning Profile
- 앱 빌드
- 디비이스에 인스톨 해서 테스트하기
- 앱 스토어에 앱 올리기

이 내용들을 공부해야 합니다.

우선  99불 내고 아이폰 개발자로 등록하지 않으신 분은 아래 웹 사이트로 가셔서 등록 하셔야 합니다.
http://developer.apple.com/devcenter/ios/index.action
(여기서 자세한 방법은 따로 설명 드리지 않겠습니다. 네이버나 구글 검색하시면 자세한 설명 있는 글들 찾을 수 있을거예요.
http://developer.apple.com/devcenter/ios/index.action
http://cafe.naver.com/mcbugi.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=74353&social=1
등등)

등록하고 난 후 developer.apple.com에 로그인을 하세요.

우측 상단에 있는 iOS Provisioning Portal 을 클릭해 보세요.

왼쪽에 있는 Certificates, Devices, App IDs, Provisioning, Distribution 이 앱 빌드하고 앱스토어에 등록하는데 중요한 메뉴들 입니다.

그리고 Macintosh HD-Applications-Utilities-Keychain Access.pp 도 중요합니다.

이제 웹사이트에서 인증서 받아서 키체인에 설치를 해야 합니다.
WWDR, 개발자용 인증서, 배포용 인증서를 키체인에 설치 하겠습니다.

제가 사용하는 맥에는 아래와 같이 모두 설치 돼 있습니다.

이걸 다 지우고 새로 깔기도 그렇고.. 회사 컴퓨터라서 맘대로 할 수도 없고 해서..
맥부기의 문성욱님이 설명하신 이미지와 내용을 좀 빌리겠습니다.
직접 보시려면 아래 싸이트에서 보실 수 있습니다.
http://cafe.naver.com/mcbugi.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=8953&

---- 아래 문성욱님 글 ------

 

개발 준비, 인증서 등록 추가분 (다른 맥에서 같이 개발) http://cafe.naver.com/mcbugi/10487

----------- 문성욱님 글 끝 -----

자 이제 필요한 키들을 받고 여러분 맥의 키체인에 이것을 등록하는 과정까지 했습니다.

오늘은 여기까지 하구요.

이제 여러분들이 개발한 앱을 디바이스에 테스트하기 위해  Xcode 에 디바이스를 등록하고 App IDs 받고 Provisioning files 처리하고 코로나에서 앱 빌드하고 이걸 앱 스토어에 올리는 과정을 다음 시간에 살펴 보겠습니다.

처음이라서 그런지 앱스토어까지 가는 길이 무지 험난해 보이네요.

그럼....

제가 코로나로 만든 첫 앱인 Multi Ping Pong 이 안드로이드 마켓 업로드 과정에서 문제가 생겼습니다.
안드로이드 마켓에 올릴 때 바로 아래와 같은 메세지가 뜬건데요.

Androidmanifest.xml 파일에 버전코드가 안 돼 있다는 겁니다.
이건 빌드과정에서 코로나에서 자동으로해 주는 거거든요.

저는 코로나 매뉴얼에 나와 있는 대로 아래처럼 따라 했구요.

빌드과정에서 버전도 1로 해 줬고 config.lua 에도 시키는 대로 버전코드 제대로 넣어 줬구요.

Corona에 문의 메일을 보냈더니 바로 그날로 답변이 왔습니다.

Hello,

It looks like you are setting the versionCode correctly in the build.settings file so I'm not sure why you are getting the error. If you don't include the parameter in the file, Corona defaults to version "1".

아무 문제 없다고 하죠? 그런데 저기 build.settings 라는 단어가 눈에 팍 띄는거예요.
코로나에선 제가 저 위에 세팅을 cinfig.lua에만 한 줄 모르고 build.settings에 저렇게 코딩을 했으면 제대로 한 거라고 답변을 준거예요.

그래서 저 코드를 그대로 build.settings 파일을 만들어서 옮겨 놓고 빌드를 했습니다.
그리고 다시 안드로이드마켓에 업로드 시도...
결과는 성공적으로 업로드 됐습니다.

제가 config.lua파일과 build.settings 파일을 제대로 공부하지 않고 일은 진행하는 바람에 일정이 하루 차질을 빚었습니다.

이 기회에 이 두 파일에 대해서 확실하게 알고 넘어가야 겠네요.
(제가 이메일에 빌드하는 과정에 이 build.settings 파일은 자동으로 생성해 줬으면 좋겠다고 보냈어요. 어차피 빌드과정에서 Version을 넣도록 해 놨으면 자동으로 생성해 줘도 될 것 같아서...... 이게 반영이 될지는 모르겠지만요...)

이 부분에 대한 코로나 웹페이지에서의 설명은 아래 주소에 있습니다.
http://developer.anscamobile.com/content/configuring-projects

build.setting 은 빌드 프로세스에 대한 파일이고
config.lua는 컴파일 될 때 포함되서 런타임 때 엑세스 되는 파일입니다.

config.lua는 주로 해상도가 다른 디바이스에서 화면이 제대로 보이도록 해상도에 맞게 디스플레이 하도록 옵션을 주는 기능이 있습니다.
(자세한 내용은 http://blog.anscamobile.com/2010/11/content-scaling-made-easy/)
이 파일의 주요 키워드는 width,height,scale 이렇게 세가지가 있습니다.
앞에 두가지는 해상도의 가로 세로 픽셀 값들입니다.
scale은 4가지가 있는데 아래와 같습니다.

    * "none" - turns off dynamic content scaling
    * "letterbox" - uniformly scales up content as much as possible, while still showing all content on the screen. This is similar to watching a widescreen DVD on a non-widescreen TV set, except that you can use offstage content to fill the "bleed" areas rather than displaying black bars.
    * "zoomEven" - uniformly scales up content to fill the screen, while preserving aspect ratio. Some content may appear offscreen, if the new screen has a different aspect ratio
    * "zoomStretch" - non-uniformly scales up content to fill the screen. All content will remain onscreen, but it may be stretched vertically or horizontally.

참고로 아이폰, 안드로이드폰 공히 가장 낮은 해상도인 320X480 에 width,height를 맞춰놓고 letterbox,zoomEven,zoomStretch 등 해상도에 맞게 화면을 조절하는 옵션을 쓰면 모든 해상도에 적당한 화면이 적용 됩니다.

여기에 지정된 해상도는 코드 내에서 display.contentWidth 와 display.contentHeight 로 값을 얻을 수 있습니다.

여기에 각기 다른 해상도에서 화면의 이미지들에 대한 x,y 좌표에 대한 콘트롤을 하려면 config.lua 에서 xAlign,yAlign 키워드에 left,right,center 등의 값을 적용 시키면 됩니다.

예)
application =
{
        content =
        {
                width = 320,
                height = 480,
                scale = "letterbox",
                xAlign = "left",
                yAlign = "top"
        },
}

display.contentWidth, display.contentHeight 이외에 코딩상에서 접근할 수 있는 키워드는
display.viewableContentWidth,display.viewableContentHeight 이렇게 두가지가 더 있습니다.

첫번째는 이미 말씀드린대로 config.lua 에 설정한 width,height 값들을 가져올 것이고 두번째 것들은 upscaleing된 화면에서 실제 보이는 값을 가져올 것입니다.

display.screenOriginX,display.screenOriginY 이것도 있습니다. 이것은 현재 디바이스에서 좌우로 얼마나 거리가 떨어져 있는지에 대해 알 수 있게 해 줍니다.

아래 샘플을 보시면
application =
{
    content =
    {
        width = 320,
        height = 480,
        scale = "letterbox",
 
        imageSuffix =
        {
            ["@2"] = 2,
            ["@3"] = 3,
            ["-bar"] = 3.3,
            ["-foo"] = 4.5,
        },
    },
}

imageSuffix가 있는데요. 이건 다이나믹하게 이미지 크기를 설정할 때 사용 할 수 있습니다. 이 설정에 의하면 아래와 같이 이미지가 보일 겁니다.
myImage@2.png (200 X 200 픽셀)
myImage@3.png (300 X 300 픽셀)
myImage - bar.png (330 X 330 픽셀)
myImage - foo.png (450 X 450 픽셀)

이 밖에 frame Rate (fps), 안티 알리아싱 등이 더 있습니다.

이번엔 build.settings에 대해 알아 보겠습니다.
이 파일은 빌드 과정에서 적용되는 사항들에 대해 세팅하는 파일입니다.

settings =
{
        orientation =
        {
                default = "portrait",
        },
 
        iphone =
        {
                plist =
                {
                        UIRequiredDeviceCapabilities = "magnetometer",
                        UIPrerenderedIcon = true,
                },
        },
 
        build =
        {
                custom = "a1234",
        }
}

이와 같이 portrait나 landscape 같은 orientation 도 여기서 지정해 줍니다.
settings =
{
    orientation =
    {
        default = "portrait",
        supported =
        {
            "portrait", "portraitUpsideDown", "landscapeRight", "landscapeLeft"
        }
    },
   
   
    iphone =
    {
        plist =
        {
            UIInterfaceOrientation = "UIInterfaceOrientationLandscapeRight",
 
            UISupportedInterfaceOrientations =
            {
                "UIInterfaceOrientationLandscapeLeft",
                "UIInterfaceOrientationLandscapeRight"
            },
           
            UIApplicationExitsOnSuspend = true,
            UIStatusBarHidden = true,
            UIPrerenderedIcon = true
           
        }
    }
}
 
 
settings.iphone.plist["UIInterfaceOrientation~ipad"] = "UIInterfaceOrientationPortrait"
settings.iphone.plist["UISupportedInterfaceOrientations~ipad"] =
{
    "UIInterfaceOrientationPortrait",
    "UIInterfaceOrientationPortraitUpsideDown"
}

또한 위와 같이 스테이스바나 세세한 orientation 같은것도 설정 가능하네요. 또 디바이스 별로도 설정할 수 있구요.

또 orientation에 따라 사용되는 이미지들도 설정하게 됩니다.
안드로이드에서는 주로 Manifest.xml 파일에 설정되는 값들입니다.
아이폰쪽은 한번도 안 해 봐서 제가 비교를 할 수가 없네요.

안드로이드에서는 또한 중요한게 아래처럼 버전코드와 퍼미션 설정 하는 겁니다.
settings =
{
        android =
        {
                versionCode = "3"
        },
   
        androidPermissions =
        {
                "android.permission.ACCESS_FINE_LOCATION",
                "android.permission.INTERNET"
        },
   
        orientation =
        {
                default = "landscapeRight"
        },
}

이러하 것들을 build.settings에 설정 하셔야 합니다.

이걸 공부 안해서 첫 코로나 앱 안드로이드 마켓 업로드에서는 약간 헤맸네요.
아마 오늘 안드로이드 마켓 업로드는 끝날 것 같구요.
이제 아이폰 앱스토어에 업로드 할 겁니다.
아마 또 헤매는 부분이 있을 텐데요.

저도 다음에 두번 헤매지 않고 또 이 글을 읽으시는 분들도 그런 시간 낭비를 줄일 수 있도록 그런 내용 들을 잘 정리 하겠습니다.

그럼 다음에 뵈요...

이제 제가 개발하고 있는 앱도 거의 완성이 되서 마켓에 올릴 때가 됐습니다.
오늘은 빌드하는 방법을 간단히 정리하겠습니다.
저도 다시 한번 상기하는 의미에서.

우선 빌드를 하시려면 코로나에 유료등록을 해야 합니다.
웹 주소는 http://www.anscamobile.com/pricing/ 입니다.

아이폰, 안드로이드 별도로 구매하면 각각 199불 이고 통합 패키지로 구입하면 349불입니다.
그리고 나서 confirm됐다는 이메일을 받으면 컴퓨터 2개에서 사용 가능합니다.
따로 유료버전을 다운받아서 설치할 필요는 없구요.
그냥 기존에 받았던 거에서 등록만 하시면 되요.
그러면 빌드할 때 코로나 서버에 접속해서 승인 받으면서 진행하더라구요.
그러니까 인터넷이 되지 않으면 빌드를 할 수 없어요.

안드로이드 앱 빌드 방법

우선 빌드할 앱을 시뮬레이터에서 불러온 후 file-build-Android를 선택합니다.

그 다음 Application name , Version, Package를 입력합니다.
제 앱은 Multi_PingPong 이란 이름으로 마켓에 올려질 건데요.
위에 있는 이름은 코로나가 그냥 폴더 이름을 집어 넣은 거예요.
그리고 버전은 1,2,3,4.... 이렇게 나갈거예요.
안드로이드 마켓에 올릴때 기존 버전보다 높아야지만 업그레이드가 됩니다.
그 때 사용할 버전입니다.
그 다음은 Target OS Compatibility 인데 제건 Android 2.2 에 맞춰져 있네요.
그 아래버전으로 설정하는건 아직 모르겠습니다.
그리고 KeyStore는 디버를 위한 KeyStore는 코로나에서 그냥 제공하고 있습니다.
Key Alias 누르시면 Android Debug Key라고 있을 겁니다.
그거 선택하셔도 됩니다. 단지 테스트 하실 거면 ...
하지만 마켓에 올리시려면 직접 안드로이드에서 받은 본인만의 KeyStore를 사용 해야 합니다.

다 입력하신 후 Build버튼을 누르시면 위와 같은 화면이 나옵니다.
보시다시피 서버에 연결해서 뭔가 퍼미션을 받은 후 애플리케이션네임.apk라는 파일이 생깁니다.

이 apk 파일을 마켓에 올리시면 됩니다.

간단하죠?

참고사항
- 빌드하기 전 아이콘 이미지 파일이 있어야 하는데요. 그 규칙은 아래와 같습니다.
  Icon-hdpi.png, Icon-mdpi.png, and Icon-ldpi.png 이렇게 3개의 아이콘 파일을 준비합니다. 크기는 각각 (72x72, 48x48, 36x36) 입니다.
안드로이드 1.6 이하에서 사용할 수 있게 하려면 icon.png (72X72) 를 준비합니다.
파일들은 main.lua가 있는 폴더에 넣으시면 됩니다.
- 안드로이드 폰에 인스톨 시키려면 adb install name.apk 로 하시면 됩니다.

config.lua 에서 보다 세세한 설정을 할 수가 있습니다.
지난번에 다룬적이 있는데 폰 해상도에 딱 맞게 하려면 아래와 같이 하면 됩니다.
application

{

        content =

        {

                width = 320, (폰 해상도에 맞는 width)

                height = 480,(폰 해상도에 맞는 height)

                scale = "letterbox"

       },

} 

안드로이드에서는 버전이나 오리엔테이션 그리고 퍼미션 등을 아래와 같이 설정 합니다.

settings =

{

        android =

        {

                versionCode = "3"

        },

        androidPermissions =

        {

                "android.permission.ACCESS_FINE_LOCATION",

                "android.permission.INTERNET"

        },

        orientation =

        {

                default = "landscape"

        },

}

일단 안드로이드는 이 정도만 하면 될 것 같네요.

더 이상은 저도 잘 모르겠구요. 새로 알게 되는게 있으면 그때그때 팁으로 정리할께요.

그럼 다음 시간에 뵙겠습니다.