12-12-12 에 진짜 세계를 뒤 흔든 건 아이폰에 새 Google Maps app이 릴리즈 된 겁니다. 별로 신통치 않은 애플 맵을 대신 할 수 있게 됐죠. 구글은 turn-by-turn direction, vector based map tiles, 개선된 인터페이스 등을 새로 선보였습니다.

The URL Scheme

먼저 URL scheme의 origin 에 대해 알아보죠. WWW(World wide Web)이 처음 선보인  1990년대로 돌아가보죠. 개발자들은 뭔가 인터넷에서 어떤 것을 참조할 필요가 있었습니다. 그래서 그 참조할 정보의 위치를 간단하게 URL( Uniform Resource Locator)을 이용해서 찾아갔죠.

인터넷 상에서 access 할 수 있는 방법은 여러가지가 있습니다. 그리고 그것들은 단지 web page나 이미지들만이 아닙니다. terminal session을 열어서 Gopher 서비스에 연결할 수도 있고 FTP 서버로부터 파일을 다운로드 받을 수도있고 이메일 메세지를 보내고 하는 것들을 인터넷으로 할 수 있습니다.

colon 전의 URL 부분을 URL scheme이라고 합니다. 그 종류는 아래와 같습니다.

• http: — a file from a web server
• https: — a file from an encrypted web server
• mailto: — send an email message
• ftp: — access a file via FTP
• telnet: — open terminal sessions to a server

iOS 에서는 이메일 안에 있는 전화번호를 touch 해서 dialer 를 열고 전화를 걸 수가 있습니다. 이런 기능들은 아래와 같은 URL schemes 를 사용해서 구현 합니다.

• tel: — make a phone call
• sms: — send a text message
• itms-apps: — opens the app store
• music: — go to the current playing song in the music app

애플은 애플리케이션이 자기 자신만의 scheme 을 define 하도록 합니다. 그래서 다른 앱에서 그 앱을 열수 있도록 허용합니다. Corona Labs 는 1년전에 이 기능을 제공했습니다. 이와 관련 된 글을 보시려면 여기를 클릭하세요.

Google Maps URL Scheme

Maps app 에 빠르게 접근하도록 하기 위해 Google 은 여러분 앱이 접근 가능하도록 URL scheme 을 사용합니다.

comgooglemaps:

물론 URL scheme 은 URL 의 일 부분입니다. 여기에 추가로 host 이름과 호스트상의 리소스들을 가집니다. 앱이 실제로 host name 이 없고 개별 파일로 접근할 필요가 없으면 full URL 은 아래와 같습니다.

comgooglemaps://

코로나에서는 이 API 를 아래와 같이 사용하시면 됩니다.

system.openURL("comgooglemaps://")

여러분의 앱은 suspend 상태가 되고 구글 맵이 시작될 겁니다. 간단하죠? 구글 맵에서 근처 피자가게를 찾고 싶으세요? 혹은 구글 맵에서 할 수 있는 다른 것을 여러분 앱에서 directly 하고 싶으세요?

URL scheme 에 다른 추가적인 정보를 덧붙이면 여러분 앱 안에서 그런 특정 기능을 사용하도록 하실 수 있습니다.

1. Map Coordinates and Traffic View

system.openURL("comgooglemaps://?center=40.765819,-73.975866&zoom=14&
views=traffic")

이렇게 하면 맵을 열고 traffic 상태를 보여 줍니다. 그리고 zoom level 은 14 이고 위도 경도는 40.7N and 73.9W 인 지점이 화면 가운데에 위치할 겁니다. 이 에제는 뉴욕의 센트럴 파크의 위치를 보여 줄 겁니다.

잘 보시면 첫번째 파라미터 전에 물음표가 있는것을 알아 채셨을 겁니다. 그리고 각 파라미터 사이는 &로 구분하구요. 그러니까 이 파라미터들을 분해하면 아래와 같이 되겠죠.

?center=40.765819,-73.975866   --center map at these coordinates
&zoom=14                       --zoom to level 14
&views=traffic                 --show traffic view

2. Map “Street View”

여기에 mapmode=streetview parameter를 추가하면 street view를 보실 수 있습니다.

system.openURL("comgooglemaps://?center=40.765819,-73.975866&
zoom=14&views=traffic&mapmode=streetview")

3. Map Query

맛있는 피자를 원하세요? 그러면은 q=pizza를 다른 파라미터 전에 추가히세요.

system.openURL("comgooglemaps://?q=pizza&center=40.765819,-73.975866")

4. Driving Directions

A 지점에서 B 지점까지의 경로는 어떻게 알 수 있을 까요?

system.openURL("comgooglemaps://?saddr=Google+Inc,+8th+Avenue,+New+York,+NY&
daddr=John+F.+Kennedy+International+Airport,+Van+Wyck+Expressway,
+Jamaica,+New+York&directionsmode=transit")

딱 보면 무지 복잡해 보이죠? 근데 자세히 보면 그냥 위와 같이 파라미터를 사용했을 뿐이예요.

?saddr=...         --"s" for "starting address"
&daddr=...         --"d" for "destination address"
&directionsmode=

+ 부호는 전부 다 뭘까요? 여기서 space 를 사용하면 문제가 발생할 수 있습니다. 그 space 를 + 부호로 대신 사용하는 겁니다. 아니면 hex code %20를 사용하셔도 됩니다.

근데 진짜 + 부호를 넣어야 되면 어떻게 할까요? 그럴 때는 hex code %2B 을 사용하셔야 됩니다.

Convenience Function

이렇게 파라미터를 추가하는게 짜증나시면 URL 을 encode 하는 함수를 사용하실 수도 있습니다.

function urlencode(str)
   if (str) then
      str = string.gsub (str, "\n", "\r\n")
      str = string.gsub (str, "([^%w ])",
         function (c) return string.format ("%%%02X", string.byte(c)) end)
      str = string.gsub (str, " ", "+")
   end
   return str    
end

system.openURL("comgooglemaps://?saddr=" .. 
urlencode("Google Inc., 8th Avenue, New York, NY") .. 
"?daddr=" .. urlencode("John F. Kennedy International Airport, 
Van Wyck Expressway, Jamaica, NY") .. "?directionsmode=transit")

보시듯이 openURL 안에 들어가는 것들을 함수로 간단하게 encoding 할 수 있습니다.

Maps App Installed or Not Installed?

URL scheme 에서 발생할 수 있는 문제는 디바이스에 구글앱이 깔려있지 않을 경우가 되겠죠? 깔려 있지 않으면 그 앱을 열 수가 없을 테니까요. 현재의 Corona Public Release(#971) 에서는 이럴 경우 화면과 같은 에러 메세지가 뜹니다. 아니면 그냥 silent fail 되던가요. 이건 바람직한 해결 방법이 아니죠.

Corona Daily Build #986부터 system.openURL() API를 call 했을 때 true/false를 리턴하기 때문에 이에 대해 대처할 수 있습니다.

local didOpenGoogleMaps =
      system.openURL("comgooglemaps://?daddr=San+Francisco,+CA&saddr=cupertino")
if ( didOpenGoogleMaps == false ) then  --defer to Apple Maps

      system.openURL("http://maps.apple.com/?daddr=San+Francisco,+CA&saddr=cupertino")
 
end

디바이스에 구글 맵이 깔려 있으면  didOpenGoogleMaps 변수(변수명은 여러분이 정하실 수 있습니다)가  true 가 될 것이고 깔려있지 않으면 false 가 될 겁니다. 이렇게 되면 target 앱이 깔려 있지 않을 경우 개발자는 특정 메세지나 특정 action 을 구현할 수 있게 되죠. 이 기능은 Daily Build #986 부터 사용 가능합니다. 유료 사용자일 경우 여기에서 다운 받으세요.

Ready to Begin?

여러분이 보셨듯이 코로나에서 구글 맵을 implementation 하는 것은 URL scheme 을 사용해서 아주 간단하게 처리하실 수 있습니다.  구글 맵이 제공하는 모든 기능을 살펴 보시려면 구글 맵 URL Scheme 웹사이트로 가셔서 보실 수 있습니다. 만약 애플 맵을 사용하시거나 구글 맵의 백업기능 지원으로 애플 맵 기능을 지원하시려면 이 문서를 참조하세요.

이쪽 분야의 전망이 아주 밝아 지면서 back-end service 와 통합 하는 것은 극히 중요한 일이 되고 있습니다. 즉 앱을 만드는데 있어서 필수적인 요소가 되가고 있죠. 앱 개발자가 흔히 직면하는 벽중의 하나가 이런 back-end 개발이 모바일 앱 개발에서는 특히 어렵다는 겁니다.

앱 개발을 하는 모든 분들에게 그것은 넘어야 할 큰 산입니다. leaderboard, social sharing, multiplayer 게임 같은 building basic 같은 것들을 앱에 적용하려면 아주 큰 난관에 부딪힐 수 있습니다. 특히 이것을 cross-platform basis 로 개발을 한다면요.

오늘 저는 Corona Labs 와 Game Minion 이 같이 힘을 합쳤다는 것을 발표하게 되서 너무 기쁩니다. 저희들은 Corona Cloud라는 서비스를 시작할 겁니다. 이 서비스는 Game Minion의 아주 훌륭한 서비스 조합들을 기반으로해서 만들어 질 겁니다. Corona Cloud 는 여러분의 모바일 앱에서 cloud service 들을 사용하는 것에 있어서 정말 큰 변화를 보여 줄 겁니다. 저희의 목표는 cloud 로 여러분 모바일 앱의 integrate 하는 기능을 괄목할 만하게 진전시키는데 있습니다. 다른 말로 표현하자면 native app 개발과 관련해서 우리가 했던 것과 같이 이 cloud 개발도 코로나 스럽게 서비스를 할 겁니다.

우리가 Game Minion 친구들과 처음 접촉했을 때 저희들이 처음 얘기한 것 중 하나가 우리 둘이 똑 같이 개발에 대한 정열이 많다는 공통점이었습니다. 저희들은 정말 개발자들의 생활을 좀 더 효율적이고 생산적으로 어떻게 만들 수 있을까에 대해 깊이 고민을 하고 있었습니다.

또 얘기를 한 것중에 Corona SDK 의 중단없는 발전과 integration 이었고 Corona Cloud 가 아주 간단하게 앱을 개발할 수 있는 환경을 줄거라는 것이었습니다.

올해 초 how ridiculously hard it is to build something 에 대해 얘기한 적이 있습니다. 그 글에서 얘기한 대로 저는 개발자는 예술가라고 생각합니다. 여러분은 어떤 아이디어를 실재화하기 위해 엄청난 열망을 가지고 있어야 합니다. 그것을 현실화 해 내기 위해 진지하게 접근을 하고 구현을 해 내야 합니다. 그리고 마침내 여러분의 창조물을 세계와 share 할 수 있을 때 비로서 여러분은 강한 만족감을 느끼실 수 있을 겁니다.

이것은 여기 계신 모든 분들의 심장 깊은 곳에서 본능적인 feeling 으로 이미 가지고 계실 겁니다. 우리들은 incredibly 열정적이고 hard-working 이고 driven bunch 입니다. 우리의 ambitions 가 점점 커가면서 우리의 팀도 커가고 있습니다. 지난 6개월 동안 우리 팀은 거의 두배가 됐습니다. 그리고 이젠 Game Minion 의 친구들까지 팀 멤버가 됐습니다.

우리를 이 길로 이끄는 것은 우리 안에 있는 예술적인 열정입니다. Corona SDK 는 계속 혁신해 나갈 겁니다. Corona Cloud 로 변화된 모습을 보여 드릴 것입니다. 그리고 여러분 안에 있는 아티스트적인 열정을 감히 저희가 불러 일으키고 싶다고 말씀 드립니다.

P.S. Corona Cloud 는 조만간 베타버전을 내 놓을 갑니다. Sign up here, 그러면 Corona Cloud 가 준비 되면 여러분께 연락 드리겠습니다.

지난주의 튜토리얼을 보셨나요? 보셨다면 Corona 가 다양한 디바이스의 스크린에 어떻게 각각 맞게 object들을 display 하는지 이해하셨을 겁니다. 저희는 이런 다양한 종류의 디바이스에 맞게 작업할 수 있도록 도와주기 위한 technology 를 사용하구 있구요. 또 각 디바이스에 맞는 폰트와 Kindle Fire soft button bar 같이 디바이스 별 특징 적인 부분들도 지원합니다.

Corona는 사용하는 device에 대한 정보를 얻을 수 있도록 하는 API 를 제공합니다. 이 API 를 call 함으로서 꽤많은 정보들을 얻고 그에 따라 어떤 작업을 할 수 있게 되죠. 개발자에게 가장 중요한 가이드 중 하나가 DRY (Don’t Repeat Yourself)죠. 코딩을 중복해서 하지 말라는 얘기 입니다. 아래 예제를 볼까요?

if ( system.getInfo("model") == "iPad" or

system.getInfo("model") == "iPhone" or

system.getInfo("model") == "iPod" ) then

 
store.init( "apple", transactionCallback )

store.restore()

else

-- IAP isn't yet supported on Amazon or Barnes and Noble so don't start it up.

if ( system.getInfo("model") ~= "Kindle Fire" or system.getInfo("model") ~= "Nook" ) then

store.init( "google", transactionCallback )

store.restore()

end
end

---------- OR ----------

local kindlePadding = 0

if ( system.getInfo("model") == "Kindle Fire" or system.getInfo("model") == "KFJWI" ) then

kindlePadding = 20

end

healthBar.y = healthBar.y - kindlePadding

만약 이 system.getInfo(“model”)을 온 동네에서 다 쓰고 다닌다면 엄청 양이 많은 코딩을 하게 될 겁니다. Amazon 하고 Barnes & Noble 이 새로운 device를 릴리즈 했는데. 그러면 model name들이 증가하겠죠. 현재까지 5개의 다른 Kindle Fire name 들이 있구요 Nook 은 4개가 있습니다.

이런 문제를 해결하기 위해 여러분은 if 문을 써서 간단한 external module 을 만드시면 됩니다.
그러면 위의 코드는 아래처럼 줄어들 수 있겠죠.

이렇게 함으로서 여러분은 키보드를 덜 누르고도 코딩을 하실 수 있습니다. 안드로이드 기반의 3가지 다른 플랫폼에 대해 일을 시작하기 전에, 일반 안드로이드 device인지 아니면 Nook이나 Kindle 같은 modified Android platform 인지 먼저 구별하는게 좋을 겁니다.

Assembling the Module

모듈을 하나 만들구요 이 모듈 이름을 device.lua 로 하겠습니다. 구버전에서 사용하던 “module(…, package.seeall)” method를 사용하지 않구요  new module method 를 사용할 겁니다. 아래 처럼 시작하시면 됩니다.

이 변수들을 가지고 작업을 하실건데요. 일단 디폴트로 모든 변수들에 false를 대입했습니다. 이제 model name 을 얻고 그것이 device 인지 Corona Simulator 인지를 먼저 구분한다음에 임시로 저장해 두죠.

iPhone 5 가 나왔을 때 주요 이슈는 “tall” device 가 나왔다는 것이었습니다.  일단 이전의 아이폰은  16:9 HDTV shaped screen 이 아니었죠.  그러면 일단 이와 관련해서 16:9 Android devices 에 대한 정보도 같이 retrieve 해야 합니다.  여기서 먼저 전반적인 이해를 하고 넘어가야 할 부분은요. 7인치 tablet 들은 iPhone 4S와 iPhone 5 사이에 있는 디바이스 들입니다. 여기서 일단 우리는 iPhone 3 이나 4 보다 큰 것들을 먼저 추려 낼 겁니다.

320×480 devices 들은 1.5:1 (480/320=1.5) 의 비율을 가지고 있습니다. 그러니까 그것보다 크면 일단 "tall" device" 리스트에 넣겠습니다.

그 다음으로는 애플 디바이스를 보겠는데요. 모든 Apple model 들은 iP로 시작합니다. ( iPod, iPad, or iPhone). 그러니까 모델 이름의 첫 두 글자를 보면 됩니다. 만약 iP로 시작하면 이것이 iOS 에서 구동 되는 것이라는 것을 알 수 있죠. 그러면 isApple flag 를 true로 할당합니다.

그리고 그 다음에는 그것이 iPad 인지 아닌지를 알아내야 합니다. 왜냐하면 iPad 와 다른 iOS device 들은 화면 모양에 대한 layout 이 다르게 작업해야 될 수 있거든요.

안드로이드는 저희의 삶을 도전적으로 만들었습니다. 왜냐하면 안드로이드 진영엔 3개의 marketplace 가 있거든요. (Google Play, Amazon, Barnes & Noble). 각각 저마다의 룰이 있어서 그것을 따라야 합니다. Barnes & Noble 같은 경우엔 “no ads” Amazon 같은 경우엔 “no links to Google Play”같은 것들이죠. Google Play 에 맞게만 작업할 수 없는 상황입니다. 그러니까 일단 Google Play 말고 다른 것들을 구별하죠.

위에 언급했듯이 Kindle 과 Nook device 들에는 다양한 모델들이 있습니다. 아래 코드를 계속 보죠.

코드를 한번 볼까요? 첫번째 if part 에서는 애플 (Apple) device 일 경우 로직을 만들었습니다. 그러니까 else문 에서는 안드로이드 기기와 관련된 로직을 만들어야 겠죠. 그래서 일단 isGoogle flag를 true로 만들어 놓고 시작했습니다.

그 다음으로는 두 파트에 걸쳐서 나머지 두 marketplace 에 대해 걸러 내겠습니다. 첫번쨰로 Kindle Fire일 경우를 보죠. 이 경우 모델 이름은  KF 나 WFJWI로 시작합니다. 아마존이 4개의 새 Kindle Fire 모델을 릴리즈 했을 때 그 모델 이름들은 KFJWI라고 지었습니다. 처음 Kindle Fire의 모델명은 Kindle Fire였구요. 제 2세대에서는 KFOT로 지었구요. 7인치 HD 모델은 KFTT입니다. 그리고 9인치 모델은 KFJWI 나 KFJWA이구요. (WiFi를 지원하느냐 3G -WAn- 을 지원하느냐에 따라 다릅니다.) 다행스럽게도 모든 모델들에 공통적인 것은 KF or Kindle Fire 입니다.

K로 하면 어떨까 생각 드시나요? 그래도 됩니다. 하지만 안드로이드 디바이스의 수는 질리도록 많습니다. K로만 하면 예외 상황이 발생할 확률이 아주 높습니다.

이제 디바이스가 Kindle Fire 로 확인 되면 isGoogle은 false 로 하고  isKindleFire 는  true로 세팅합니다.

이제 Nook 를 체크할 차례죠. 마지막 입니다. 대부분 Barnes & Noble 은 모델 이름이 BRNV 로 시작 됩니다. Nook Color 는 Nook Color를 사용합니다.

여기까지 했으면 다음에 할 일은 앱에 이 정보를 return 하는 것입니다.

Putting it to Work

이것을 앱에서 사용하시려면 프로젝트 시작부분에서 간단하게 그 모듈을 require 하시면 됩니다.

local device = require("device")

그러면 이제 여러분이 필요할 때마다 그것을 불러 와서 사용하시면 됩니다.

이렇게 하면 디바이스 체크하는 부분의 코딩이 훨씬 잘 정리가 될 겁니다. 그러면 여러 OS와 여러 Device 에서 구별되서 돌아가도록 앱을 개발할 때 아주 용이하게 사용하실 수 있겠죠. 더군다나 이 device detection 을 external module 로 만들어 놔서 새로운 디바이스가 나왔을 떄 거기에 맞게 수정 작업하는 것도 훨씬 쉬워질 겁니다.

완성된 소스는 아래에 있습니다.

이 모듈을 이전 시간에 다뤘던 Ultimate config.lua 와 함께 사용하세요.

현재 market 에 나와있는 모든 디바이스에 맞게 여러분의 앱을 개발하고 빌드할 수 있을겁니다.

그리고 앞으로 새로운 디바이스가 나와도 쉽게 작업을 하실 수가 있을 겁니다.

Basic Screen Shapes

너비와 높이가 360×570인 이미지가 있다고 가정해 봅시다. 우리는 실제 화면보다 더 큰 배경이미지를 만들겁니다. 왜냐구요?  그 이미지를 여러 디바이스에서 다 사용할 거거든요. 안쪽 사각셩( inner rectangle)은 320×480 block 입니다. 아마 이미지의 맨 가장자리 부분은 화면 밖으로 나갈 겁니다. 이것을 iPhone 5 나 대부분의 안드로이드 폰 같은 tall device 에서는 이 이미지의 full height를  이용할 겁니다. 그 경우에도 왼쪽과 오른쪽 가장자리는 화면 밖으로 나가게 될 겁니다. 여러분이 좀 더 정사각형에 가까운 iPad 를 가지고 있다면 그 이미지는 위와 아래쪽 가장자리가 잘리고 왼쪽과 오른쪽은 모두 다(full width) 보일 겁니다. 이렇게 밖으로 나가는 부분은 “bleed area” 라고 합니다. 일반 인쇄를 할 때 종이 여백에 잉크가 번질 수도 있는 그런 여분의 공간을 말할 때 그 말을 사용합니다.

이제 어떻게 background 가 사용되는지 이해하고 직접 볼 수 있습니다. 바로 config.lua file 에 셋업하시면 됩니다. 이 파일은 standard Corona Lua file 이기 때문에 아래 사항을 구현하기 위해 몇가지 API 를 사용할 수 있습니다.

• read the pixel width/height of the device. 디바이스 너비 높이 얻기
  
• use math for various calculations. 다양한 계산을 위해 math 사용하기
  
• read the device model number. 디바이스 모델 번호 얻기
  
• perform string manipulations. string manipulation 사용하기
  
• use conditional “if-then-else” logic. if 문 사용하기
  

iPad Configuration

우리가 할 첫번째 작업은 앱이 실행되는 기기가 아이패드일 경우에 대한 코딩입니다. 아래 Corona API 로 모델 number 를 얻을 수 있습니다.

system.getInfo("model")

실제 지금 아이패드에서 실행하면 string iPad를 결과 값으로 얻으실 겁니다. 그런데 아마 애플은 조만간 이것을 바꿀 수도 있습니다.  iPad Retina 뭐 이런걸로요. 그러니까 if 문을 사용해서 이런 경우에도 대비를 해 두는게 낫겠죠.

if ( string.sub( system.getInfo("model"), 1, 4 ) == "iPad" ) then
   application =
   {
      content =
      {
         width = 360,
         height = 480,
         scale = "letterBox",
         xAlign = "center",
         yAlign = "center",
         imageSuffix =
         {
            ["@2x"] = 1.5,
            ["@4x"] = 3.0,
         },
      },
   }

코로나는 루아의 string.sub() 함수를 사용합니다. 디바이스 모델을 읽은 뒤 앞의 4글자만 취하게 되죠. 그러니까 애플이 iPad 뒤에 무엇을 넣던지 이 로직에서는 상관이 없겠죠. 이 경우 얻은 글자가 iPad이면 content table을 작성할 건데요. width and height parameters 들은 각각 360 and 480 으로 합니다. 여기서 너비를 360으로 하는 이유는 우리가 사용하는 샘플 이미지의 너비가 360 픽셀이기 때문입니다. 우리는 이 이미지를 아이패드 스크린에 맞게 이미지를 늘릴겁니다. 코로나는 기본으로 portrait 을 사용합니다. 만약 여러분 앱이 landscape 모드를 사용한다면 그 이미지를 portrait orientation 을 가정해서 거기에 맞게 너비와 높이를 정해야 합니다. 그러면 코로나가 자동으로 알아서 기기를 세웠을 때와 뉘었을 때에 맞게 알아서 이미지를 돌려 줍니다.

너비가 360 이니까 이제 높이를 계산해야죠. 이 높이도 iPad 의 화면에 딱 맞게 해야 합니다. iPad 스크린은 768X1024 입니다. 그리고 Retina iPad 인 경우는 1536X2048 이죠. (정확히 두배입니다. 그러니까 그 비율은 정확히 같은 겁니다.) 우선 첫번쨰로 1024를 768로 나눕니다. 그 결과는 1.33 이 됩니다. 그리고 높이를 얻기 위해 360X1.33을 합니다. 그러면 480이 되겠죠.

1024 / 768 = 1.33  --screen ratio (height:width)
1.33 x 360 = 480

iPhone5 Configuration

elseif ( string.sub( system.getInfo("model"), 1, 2 ) == 
"iP" and display.pixelHeight > 960 ) then
   application =
   {
      content =
      {
         width = 320,
         height = 568,
         scale = "letterBox",
         xAlign = "center",
         yAlign = "center",
         imageSuffix =
         {
            ["@2x"] = 1.5,
            ["@4x"] = 3.0,
         },
      },
   }

아이폰의 경우는 모델 string 에서 첫 두글자만 취하겠습니다. iPad 하고 iPod Touch 둘 다 iP 로 시작하는데 왜 그렇게 하냐구요? 그래서 이것 말고 디바이스의 pixelHeight 를 구할 거거든요. (이 pixelHeight 프로퍼티는 Corona build #971 에서부터 지원했습니다. 그러니까 그 아래 버전을 사용하시는 분은 그 상위 버전을 download 하세요.)  만약 그 pixel heignt 가 960 보다 크다면 그 디바이스는 iPhone 5 가 되는 겁니다. (아니면 iPod Touch 최신버전이던가요.)  그 디바이스의 해상도는 640 X 1136 이니까 이것을 320 pixel로 그 비율을 맞춘다면 320×568 이 됩니다.

그래서 너비와 높이늘 320×568 로 해 주시면 됩니다.

위 계산대로 하면 배경 이미지의 높이가 iPhone 5 의 높이에 딱 맞게 표시 될 겁니다. iPhone 5의 실제 해성도는 640X1136 이구요 우리 이미지의 안쪽 사각형 (inner rectangle" 이 너비가 320 이니까 이걸 가지고 아래처럼 간단히 계산하면 그 비율에 맞는 높이를 구할 수 있습니다.

320 / 640 = 0.5  --inner rectangle width / device pixel width = factor
1136 × 0.5 = 568  --device pixel height × factor = config.lua 'height' setting

우리가 가지고 있는 샘플 배경 이미지의 높이는 570 입니다. 그러니까 iPhone 5 화면에서는 위와 아래쪽에 각각 1pixel 씩 화면 밖으로 나갈 겁니다.

iPhone 3,4 and Older iPod Touch

elseif ( string.sub( system.getInfo("model"), 1, 2 ) == "iP" ) then
   application =
   {
      content =
      {
         width = 320,
         height = 480,
         scale = "letterBox",
         xAlign = "center",
         yAlign = "center",
         imageSuffix =
         {
            ["@2x"] = 1.5,
            ["@4x"] = 3.0,
         },
      },
   }

위쪽에서 이미 iPhone 5 를 사용했으니까 다음 else if 문에서 모델이 iP 로 시작하는 스트링을 얻는다면 그것은 이전 버전의 iPhone 이나 iPod Touch 가 될 겁니다. 해상도는 320X480 과 640X960 이렇게 두 종류가 있죠. 이 경우에는 우리가 가지고 있는 이미지의 inner rectangle 인 320X480 을 사용할 수 있습니다.

Android, Kindle Fire, and Nook

마지막으로 우리는 16:9 인 안드로이드 디바이스와 5:3 인 NOOK 과 Kindle Fire 디바이스를 따로 작성해야 합니다. 16:9 device 들은 그 비율이 1.777:1 이 됩니다. Nook 과 Kindle Fire 는 1024X600 에 가깝구요 그 비율은 1.7:1 이 됩니다. 그러니까 이 경우 화면 크기 비율을 계산하기 위해 pixelHeight and pixelWidth를 사용할 수 있겠죠. 만약 그것이 1.72 보다 크면 iPhone 5 와 비슷한 16:9 로 계산하면 될 겁니다.  만약 그렇지 않으면 그 기기에 맞도록 너비와 높이를 세팅해야 겠죠.

elseif ( display.pixelHeight / display.pixelWidth > 1.72 ) then
   application =
   {
      content =
      {
         width = 320,
         height = 570,
         scale = "letterBox",
         xAlign = "center",
         yAlign = "center",
         imageSuffix =
         {
            ["@2x"] = 1.5,
            ["@4x"] = 3.0,
         },
      },
   }

else
   application =
   {
      content =
      {
         width = 320,
         height = 512,
         scale = "letterBox",
         xAlign = "center",
         yAlign = "center",
         imageSuffix =
         {
            ["@2x"] = 1.5,
            ["@4x"] = 3.0,
         },
      },
   }

end



   

Important Notes

여기에 완성된 파일이 있습니다. 이 파일만 사용하시면 현재까지 나온 대부분의 디바이스들이 cover 될 겁니다. 아래 사항들을 기억해 두세요.

• On some devices parts of the background will be off screen, so don’t put anything “critical” in the bleed areas.
• Objects positioned using fixed numbers like player.x = 64 and player.y = 64 will always be 64 points away from the top and left edges, but based on the device will be closer or further away from center.  Likewise, objects placed using the right and bottom edges will stay the prescribed distance away from those edges (player.x = display.contentWidth-64 will stay 64 points away from the right edge) but they will move closer or further from the center too. Objects positioned based on a center coordinate (player.x = display.contentCenterX+100) will stay in the same relative position regardless of the screen shape.

Dynamic Image Selection

각 configuration block 에는 아래와 같이 imageSuffix table 이 있습니다.

imageSuffix =
{
   ["@2x"] = 1.5,
   ["@4x"] = 3.0,
},

만약 코로나를 처음 접해 보신다면 이 방법이 바로 코로나 SDK 가 Dynamic Image Selection을 지원하는 부분이라는 점을 알고 계시면 됩니다. 예를 들어 여러분이 Retina iPad 와 iPhone 3GS 에 같은 이미지를 사용하지 않고 해상도를 충분히 지원해 주는 그런 이미지를 별도로 사용하고 싶으실 수 있을 겁니다. 그러면 이 image sets 를 일반 디바이스와 Retina/HD 디바이스에 맺게 각각 다르게 세팅하시면 그 디바이스 해상도에 맞게 작업하신 이미지를 자동으로 바꿔서 display 할 수 있습니다.

imageSuffix table 은 두개의 부분으로 구성돼 있습니다.

["@2x"] =        --append this suffix to all images designed for those device(s)
(decimal value)  --scale factor that Corona uses to pick the proper assets

첫번째 값은 여러분이 이름을 정해 주시면 됩니다. 두번째 값은 아래 공식에 의해 계산된 값입니다.

device width / config.lua 'width' = scale factor

아래와 같이 세팅하시면 될 겁니다.

["@2x"] = 2.0
["@4x"] = 4.0

저희들이 계산한 아래 예제들을 참조하세요.

600 / 320 = 1.875   --Kindle Fire & Nook
640 / 320 = 2.0     --iPhone 5
768 / 360 = 2.13    --iPad
800 / 320 = 2.5     --Kindle Fire HD / Nexus7
1200 / 320 = 3.75   --Kindle Fire HD 8.9
1536 / 360 = 4.26   --Retina iPad

만약 여러분이 4.0 으로 세팅했다면 이것은 Retina iPad 에만 적용 되고 Kindle Fire HD 8.9 이하에는 적용되지 않을 겁니다. 즉 Retina iPad 전용 이미지가 되는 것이죠.

그런데 대개 Kindle Fire HD 8.9 와 Retina iPad 에는 같은 이미지를 사용해도 문제가 없습니다.

그래서 다운 받은 configuration file 에는 아래와 같이 세팅 돼 있을 겁니다.

["@2x"] = 1.5,
["@4x"] = 3.0,

이렇게 하면 해당 “@4x” image 는 Retina iPad, Kindle Fire HD 8.9, and the Nexus 10 같은 고 해상도 디바이스용 이미지를 별도로 사용할 때 유용할 수 있습니다. 그 이외의 디바이스들은 “@2x” images 를 사용할 겁니다.

끝으로 중요한 것 한가지 더 언급해 드린다면 배경을 display 하기 위해 display.newImageRect() 를 사용하시라는 겁니다.

local background = display.newImageRect( "background.png", 360, 570 )

끝의 두 숫자 360과 570 은 1X 에 근거한 이미지의 너비와 높이 입니다. 샘플 파일에서는 lowest resolution target device 가 original Kindle Fire 와 NOOK Color 로 돼 있습니다. 이 디바이스들과 “@2x” bracket 에 속하는 다른 디바이스들은 코로나에서 720X1140 을 사용할 거고 “@4x” version 에서는 1440X2280 을 사용할 겁니다. 이런 작업들은 코로나가 알아서 할 거니까 별로 크게 신경 안 쓰셔도 됩니다.

In Summary…

이 튜토리얼은 약간 detail 한 부분까지 설명 했습니다. 코로나를 처음 접해 보시는 분들에게는 좀 더 간단히 설명해 드릴 필요가 있을 텐데요. 위에 저희가 샘플 파일을 다운로두 받을 수 있도록 했으니 그 config.lua file 을 받으셔서 잘 분석해 보시고 또 실제로 적용해 보시면 이해하시는데 도움이 되실 겁니다.  아직 다운 받지 않으신 분들을 위해서 여기 다운 받으실 링크를 다시 알려 드릴께요.