Rev. 2.73

iOS 기기용 웹앱이나 네이티브앱 개발시 유용하게 사용될 수 있는 치수들입니다. 특히, 모든 iOS 기기를 지원하는(유니버셜) 앱을 개발할 때 자주 찾게 되는 자료중 하나입니다. 스테이터스 바, 네비게이션 바, 탭 바, 키보드 등의 사이즈를 세웠을 때와 눕혔을 때로 구분하여 측정했습니다.

아이폰의 화면 치수

아이폰에서 해상도를 계산할 때 굳이 레티나 디스플레이의 해상도(640 x 960)를 의식하여 계산할 필요는 없습니다. 단순히 이미지가 사용되는 곳에 더블픽셀(@x2)의 고해상도 이미지를 한 셋트 더 준비하면 된다는 사실만 기억하세요.

Portrait - 세웠을 때

앱 시작시 나타나는 오프닝 이미지는 기본으로 320 x 367 픽셀의 "filename.png"로 설정하고 레티나용으로 표시될 이미지는 640 x 734 픽셀의 "filename@2x.png"로 설정하면 됩니다.

iphone_portrait_dimensions.jpg
iPhone Portrait Width: 320px
iPhone Portrait Height: 480px

Status Bar Height: 20px
Nav Bar Height: 44px
Main Content Area Height: 367px
Tab Bar Height: 49px

Keyboard Height: 216px

iphone_portrait_keyboard_sizes.jpg
키보드가 나타난 상황에서는 메인 스크린의 일부와 탭바를 가립니다. 키보드 크기를 제외한 나머지 영역의 크기를 계산할 때 참고하세요.

Landscape - 눕혔을 때

아이폰을 눕혔을 때 나타나는 변화는 메인 컨텐츠 영역의 높이가 480에서 219픽셀로 줄어드는 것이고 네비게이션 바의 높이가 44에서 32픽셀로 줄어든다는 것입니다. 오프닝 이미지는 기본으로 480 x 219 픽셀 그리고 레티나용(@2x)은 960 x 438 픽셀입니다. 참고로 아이폰의 앱 시작 이미지는 세로와 가로 모두 준비할 필요가 없습니다. 자신의 앱이 가로와 세로 중 어디에 최적화 되어있는지를 판단하여 한가지만 준비하면 됩니다.

iphone_landscape_dimensions.jpg
iPhone Landscape Width: 480px
iPhone Landscape Height: 320px

Status Bar Height: 20px
Nav Bar Height: 32px
Main Content Area Height: 219px
Tab Bar Height: 49px

Keyboard Height: 162px

iphone_landscape_keyboard_sizes.jpg

아이패드의 화면 치수

아이패드는 아직 레티나 디스플레이를 지원하지 않기 때문에 더블픽셀(@2x) 이미지를 준비할 필요가 없습니다.

Portrait - 세웠을 때

ipad_portrait_dimensions.jpg
iPad Portrait Width: 768px
iPad Portrait Height: 1024px

Status Bar Height: 20px
Nav Bar Height: 44px
Main Content Area Height: 911px
Tab Bar Height: 49px

Keyboard Height: 264px

ipad_portrait_keyboard_sizes.jpg

Landscape - 눕혔을 때

아이폰과 달리 아이패드는 화면을 눕혔을 때 네비게이션 바의 높이에는 변화가 없습니다.

ipad_landscape_dimensions.jpg
iPad Landscape Width: 1024px
iPad Landscape Height: 768px

Status Bar Height: 20px
Nav Bar Height: 44px
Main Content Area Height: 655px
Tab Bar Height: 49px

Keyboard Height: 352px

ipad_landscape_keyboard_sizes.jpg

Comments

tab_bar_icons_closeup.png

타이타니움을 이용하여 아이폰 또는 아이패드 애플리케이션을 구축하다 보면 탭바(탭 표시줄)에 표시될 아이콘 사용법에 대하여 의문이 생길 것입니다. 애플은 이러한 목적으로 사용할 수 있는 내장 시스템 아이콘 12개를 제공합니다. 이 시간에는 기본으로 제공되는 내장 시스템 아이콘의 사용법과 사용자가 지정한 이미지 아이콘을 탭바에 적용하는 방법에 대하여 알아봅니다.

아래 코드는 두개의 윈도를 탭으로 전환하는 유저 인터페이스를 간단하게 구성한 것입니다. 이 코드를 기반으로 탭바 아이콘 지정방법에 대하여 설명하도록 하겠습다.

var tabGroup = Ti.UI.createTabGroup();

var win1 = Ti.UI.createWindow({
  title: "Home Page"
});

var tab1 = Ti.UI.createTab({
  icon: "tabbaricons/light_home.png",
  title: "Home",
  window: win1
});

tabGroup.addTab(tab1);

var win2 = Ti.UI.createWindow({
  title: "Bookmarks Page"
});

var tab2 = Ti.UI.createTab({
  icon: Titanium.UI.iPhone.SystemIcon.BOOKMARKS,
  window: win2
});

tabGroup.addTab(tab2);

tabGroup.open();

사용자 지정 탭바 아이콘

위 코드에서 tab1에 정의된 탭은 사용자 지정 아이콘으로 만들어지는 탭바 버튼입니다. “Resources” 폴더에 "tabbaricons"라는 폴더를 만들고 "light_home.png"라는 이름의 이미지 경로를 지정하는 것으로 사용자 지정 아이콘을 사용할 수 있습니다. 여기에 사용할 수 있는 양질의 탭바 아이콘을 무료로 제공하는 사이트들을 몇몇 소개합니다.

아이폰 4이상에서 지원하는 레티나 디스플레이(Retina Display)를 위해서는 약간의 달러를 지불하고 @2x 버전을 구입할 수도 있습니다. 이 경우 동일한 위치에 "light_home@2x.png"파일이 위치하는 것 만으로 별도의 추가 작업 없이 서로다른 해상도에 대응할 수 있습니다. 멋지죠?

내장 시스템 탭바 아이콘

그리고 tab2에 정의된 탭은 애플에서 기본으로 제공하는 내장 시스템 아이콘을 이용하여 만들어진 탭바 버튼입니다. 모든 해상도에 대응하는 아이콘을 무료로 사용할 수 있지만 애플이 의도하는 목적으로만 사용할 수 있습니다. 예를 들면 '즐겨찾기' 아이콘을 사용하는 경우 레이블이 시스템에 설정된 언어에 따라 자동으로 기입되기 때문에 개발자기 이를 다른 것으로 대치할 수 없습니다. 때문에 이 경우라면 title속성을 작성하는 것은 무의미 합니다.

애플에서 기본으로 제공하는 12가지 내장 시스템 아이콘은 다음과 같습니다.

Icon Name Code
bookmarks tab bar icon Bookmarks Ti.UI.iPhone.SystemIcon.BOOKMARKS
contacts tab bar icon Contacts Ti.UI.iPhone.SystemIcon.CONTACTS
downloads tab bar icon Downloads Ti.UI.iPhone.SystemIcon.DOWNLOADS
favorites tab bar icon Favorites Ti.UI.iPhone.SystemIcon.FAVORITES
featured tab bar icon Featured Ti.UI.iPhone.SystemIcon.FEATURED
history tab bar icon History Ti.UI.iPhone.SystemIcon.HISTORY
more tab bar icon More Ti.UI.iPhone.SystemIcon.MORE
most recent tab bar icon Most Recent Ti.UI.iPhone.SystemIcon.MOST_RECENT
most viewed tab bar icon Most Viewed Ti.UI.iPhone.SystemIcon.MOST_VIEWED
recents tab bar icon Recents Ti.UI.iPhone.SystemIcon.RECENTS
search tab bar icon Search Ti.UI.iPhone.SystemIcon.SEARCH
tor rated tab bar icon Top Rated Ti.UI.iPhone.SystemIcon.TOP_RATED

Comments