[Xamarin] Xamarin.Forms에서 이미지 크기

원문출처: http://www.wintellect.com/devcenter/krome/understanding-native-image-sizing-in-xamarin-forms-apps

Android와 iOS의 단말기들은 서로 다른 해상도와 픽셀밀도를 가지고 있습니다. 따라서 개발자는 앱이 실행되는 환경에 맞는 크기의 이미지를 준비하여 앱에 포함해야 합니다. 이미지 해상도가 필요 이상으로 높으면 이미지가 뭉개지거나 앱의 덩치가 커지거나, 성능이 느려지거나 메모리 부족으로 앱이 종료될 수 있습니다. 반대로 이미지 해상도가 필요한 해상도보다 낮으면 이미지가 흐릿하게 뭉게지며 이는 사용자 경험을 크게 떨어뜨리고 경우에 따라 앱스토어 심사에서 탈락할 수 있습니다.

플렛폼 별로 서로 다른 이미지 크기를 별도로 준비하는 것은 단순하지만 지루하고 시간이 소요되는 업무입니다. 또한 앱 내에서 사용되는 이미지가 많아질 수록 관리가 되지 않아 골치 아파지는 업무이기도 합니다. 보통은 스프레드시트에 플렛폼 별로 사용되는 이미지 종류와 이름, 해상도를 정리해두고 디자인팀과 개발팀이 필요한 이미지를 주고받게 됩니다.

여기에서는 Xamarin.Forms에서 제공하는 플렛폼 별 이미지 크기와 규칙에 대해 다룹니다. 또한 앱 자체에서 필요한 이미지 뿐만 아니라 앱스토어에 게시할 이미지 크기에 대해서도 다룹니다.

공통 규칙

공통적으로 이미지는 PNG 포멧을 사용합니다. 각 플렛폼에서 사용하는 해상도와 픽셀밀가 다르기 때문에 서로 다른 크기의 이미지를 준비해야 합니다. 장치는 준비된 이미지 중에서 가장 적합안 이미지를 선택하여 약간의 리사이징을 통해 사용자에게 출력하게 됩니다. 준비된 이미지와 장치에서 필요한 이미지의 크기 차이가 클 수록 리사이징 과정은 좀더 많은 CPU자원과 메모리를 사용할 수 있습니다.

필요하다면 표준 알파 채널을 통해 투명도를 표현할 수 있습니다.

네이티브 플렛폼에서 해상도에 따라 사용되는 작명규칙이 있습니다. 플렛폼 별로 발생할 수 있는 네이밍 이슈를 최대한 피하려면 파일명에 띄어쓰기, 대시(-)는 피하고 소문자로 작성할 것을 권합니다.

픽셀밀도란?

픽셀밀도란 장치의 스크린에서 표현되는 개별 픽셀(화소) 크기와 관련된 속성입니다. 밀도의 값이 높을 수록 개별 픽셀의 크기는 작아 집니다. 최근에 나온 단말기 일수록 더 높은 픽셀밀도를 제공하며 픽셀밀도가 높을 수록 사용자에게 생생하고 선명한 시각적 경험을 제공할 수 있습니다. iOS와 Android는 장치별로 서로 다른 픽셀밀도를 제공하며 필요에 따라 이미지의 크기를 확대하거나 축소하여 출력하며, 이러한 과정에는 좀더 많은 메모리와 CPU자원을 필요하기 때문에 모바일에서 이미지 처리를 어렵게 만드는 요인이기도 합니다.

초기 아이폰은 320x480 해상도를 가지고 있으며 대각선으로 3.5인치 크기의 스크린을 제공하였습니다. 따라서 픽셀밀도는 약 164DPI(DPI=dots per inch)를 가지게 됩니다.

참고: DPI를 계산하기 위해서는 피타고라스의 정리를 활용한 약간의 계산이 필요합니다. 너무 오래되서 기억이 가물한 분들을 위해 정리하면 피타고라스 정리는 x2+y2=z2입니다.(x는 가로, y는 세로, z는 대각선의 길이) 따라서 해당 해상도의 z를 계산하고 화면의 인치크기로 나누어주면 DPI크기가 됩니다. 예를들어 아이폰은 320x480 해상도를 가지므로 (제곱근(320제곱 + 480제곱)) / 3.5 = 약 164가 됩니다.

아이폰4부터 6까지는 326 DPI의 픽셀밀도를 가지며 아이폰6+는 401DPI를 가집니다. 아이폰 초기의 164DPI는 Standard, 아이폰 4~6의 326 DPI는 Retina, 아이폰6+의 401DPI는 Retina HD라고 불립니다. 대략 Retina는 Standard의 2배의 DPI를 가지며 Retina HD는 약 3배의 DPI를 가집니다. 따라서 Standard 픽셀밀도의 스크린에서 100x100의 이미지는 Retina 스크린에서 200x200의 이미지와 동일한 크기로 보입니다. Retina HD는 300x300의 이미지와 거의 동일한 크기로 보입니다. 물론 Retina HD의 이미지가 가장 선명하게 보이게 됩니다.

안드로이드 계열에는 좀더 세분화된 DPI 구분이 존재합니다. Low DPI(약 210 DPI), Medium DPI (약 160 DPI), High DPI (약 240 DPI), Extra-High DPI (약 240 DPI), Etra-High DPI (약 240 DPI), Extra-Extra High DPI (약 480 DPI) 등등이 있습니다. 각각 줄ㅇ서 LDPI, MDPI, HDPI, XHDPI, XXHDPI로 부르기도 합니다. 안드로이드에선  MDPI를 기준으로 작업합니다.

DPI Chart

iPhone		Standard		Retina	*RetinaHD
Android	LDPI	MDPI	HDPI	XHDPI	XXHDPI	XXXHDPI
~120 dpi	X
~160 dpi		X
~240 dpi			X
~320 dpi				X
~480 dpi					X
~640 dpi						X

위 차트에 나타나듯이 iOS Standard=Android MDPI, iOS Retina=Android XHDPI, iOS Retina HD=Android XXHDPI는 DPI가 유사하기 때문에 동일한 이미지를 사용할 수 있습니다. 보통 앱을 개발할 때 XHDPI/Retina(320 DPI)까지 이미지는 제공해야합니다. 또한 좀더 구형 장치 지원을 고려한다면 Standard/MDPI(160 DPI)까지는 지원하는 것이 좋습니다.

Xamarin.Forms 앱을 개발할 때 실제 스크린에 나타나는 픽셀(px)에 대해서는 고려할 필요가 거의 없습니다. Xamarin.Forms에서 UI 구성 혹은 크기계산 시 DIP(Device Independent Unit)단위를 사용하며 실행시간에 거의 일관된 물리적 픽셀크기로 변환되어 나타나기 때문입니다. 따라서 개발할 때 안드로이드 장치는 320x470dip, 아이폰4까지는 320x480dpi, 아이폰5~6은 320x568dpi를 가진다고 고려하며 작업을 진행하게 됩니다.

DPI 별 이미지 크기 계산하기

위에서 배운 픽셀밀도를 바탕으로 필요한 이미지 크기를 계산할 수 있습니다. 위에서 언급한 것처럼 모든 장치는 기본적으로 320dpi 만큼의 너비를 가지는 것으로 가정하고 개발 수 있습니다. 따라서 일단 320dpi를 기준으로 레이아웃 작업을 진행합니다.

320dpi를 기준으로 레이아웃 작업이 완료되면 스크린별로 필요한 비주얼 이미지의 픽셀 크기를 계산해야 합니다. 이미지는 픽셀크기로 작업하기 때문에 아래를 참고하여 각 이미지를 생성하시면 됩니다. 예를들어 레이아웃에서 50x50 dpi 크기의 아이콘은 MDPI에서는 50x50 픽셀 아이콘으로 작업하시면 됩니다.

DPI 픽셀 변환

안드로이드	아이폰	배율
LDPI		0.75 배
MDPI	Standard	1.0 배
HDPI		1.5 배
XHDPI	Retina	2.0 배
XXHDPI	Retina HD	3.0 배
XXXHDPI		4.0 배

이제 각 크기별로 생성된 이미지를 어디에 어떤 이름으로 넣어야 하는지 알아보도록 합시다.

iOS Resources

iOS 프로젝트에서는 모든 이미지들을 Resources 폴더에 위치시킵니다. 파일명에 공백을 포함해서는 안되며 @2x, @3x 등의 접미사로 DPI별 이미지 크기를 구분합니다. 예를들어 image.png가 Standard 이미지로 사용되며 image@2x.png는 Retina, image@3x.png Retina HD로 사용됩니다.

또다른 특별한 제한사항은 NavigationBar, TabBar, TollBar에 포함되는 버튼에 사용될 아이콘 이미지를 제작할 때 한가지 색상만 사용해야 한다는 점입니다. 색상은 무엇이든지 1가지를 선택하여 작업하되 알파채널을 통한 투명도 조절은 가능합니다. (애플은 흰색으로 작업할 것을 권장합니다.) 어떤 색상을 선택하든지 iOS는 운영체제의 테마나 버튼 클릭 여부에 따라서 해당 색상을 임의로 변경하여 출력합니다.

예를들어 아래 그림은 iOS의 TabBar입니다. 아래 TabBar에서 사용된 아이콘 파일은 5개 뿐입니다. 아이콘의 색상은 iOS에서 입혀주기 때문에 디자이너는 색상별로 아이콘 작업을 할 필요가 없습니다.

좀더 많은 iOS 이미지에 대한 가이드라인은 iOS Human Interface Guidelines를 참고해주세요.

Android Resources

Android 프로젝트에서는 각 DPI별 이미지들을 하위 폴더로 구분합니다. 예를들어 /drawables은 모든 장치에서 사용되는 기본이미지 폴더입니다. /drawables-hdpi는 HDPI 장치에서 우선적으로 사용되는 이미지가 포함됩니다. 안드로이드는 자신의 픽셀밀도에 해당하는 폴더를 검색하고 만약 해당 이미지를 찾지 못하면 /drawables 폴더의 이미지를 사용합니다. 좀더 상세한 규칙은 Android API Guide – Supporting Multiple Screens를 참고해주세요.

앱 아이콘

Android에서는 동일하게 /Resources/drawables 혹은 /Resources/drawables-hdpi 등의 폴더에 런처아이콘 이미지를 포함하면 됩니다.

Android 프로젝트 설정에서 Android Manifest 섹션의 Application Icon을 설정해주면 됩니다.

필요한 이미지의 크기는 다음과 같습니다.

• ldpi: 36×36
• mdpi: 48×48
• hdpi: 72×72
• xhdpi: 96×96
• xxhdpi: 144×144
• xxxhdpi: 192×192
  

iOS에서 앱아이콘은 홈화면, 설정, Spotlight(검색)으로 나뉩니다. 각각 서로 다른 이미지 크기를 사용하기 때문에 DPI별로 필요한 이미지 종류가 다양합니다. 각 이미지는 VisualStudio의 iOS 프로젝트에서 크기를 확인하고 지정할 수 있습니다.

1. iOS 프로젝트에서 info.plist를 열고 Visual Assets 탭으로 이동합니다.
   
2. App Icons의 Sources를 AppIcons로 설정해주세요.
   
3. Asset Catalogs의 Media를 더블클릭해주세요.
   
4. 각 디바이스 별로 필요한 이미지 크기를 확인하고 추가할 수 있습니다.
   

참고: iOS 아이콘 작업 시 외곽을 둥글게 처리하지 않아도 됩니다.

iOS에서 기타 아이콘

런처아이콘 외에 NavigationBar, TabBar 혹은 ToolBar 등에서 필요한 아이콘의 크기는 아래를 참고하시기 바랍니다.

• ToolBar / NavigationBar: 80x80 (iPhone+는 120x120)
• TabBar: 50x50 (iPhone+는 75x75)

다시한번 말하지만 이러한 아이콘은 단색과 투명도만으로 작업을 해야 합니다.

앱스토어 Atrwork

앱스토어에 앱을 등록하기 전에 필요한 Artwork는 다음과 같습니다.

iOS App Store

iOS 앱스토어에서는 1024x1024 크기의 앱아이콘을 요구합니다. 추가적으로 최소 5장 이상의 미리보기 스크린샷을 제공하는 것이 좋습니다.(가능하다면 비디오 미리보기도 제공하면 좋습니다.) 가능하다면 아래와 같이 플렛폼별로 서로 다른 이미지를 제공하는 것이 권장됩니다.

• iPhone 2, 3, 4: 3.5″
• iPhone 5: 4″
• iPhone 6: 4.7″
• iPhone 6+: 5.5″
• iPad

Google Play Store

Google Play Store는 앱아이콘, 스크린샷, Feature Graphic, Promo Graphic 등의 이미지가 필요합니다. 이 중 아이콘과 스크린샷은 필수로 필요한 이미지입니다. Feature Graphic, Promo Grahpic은 앱스토어의 초기화면 등에서 프로모션 성격으로 나타나는 이미지를 말합니다.

• App Icon: 512x512 (32bit PNG)
• 장치별 스크린샷: 장치별로 최소 2장~최대 8장. 휴대폰, 7인치 태블릿, 10인치 태블릿 등의 장치로 구분되며 320x480, 480x800, 480x854, 1280x720, 1280x800 해상도 지원 (JPG 혹은 24bit PNG (투명도 사용불가))
• Feature Graphic: 1024x500 (JPG 혹은 24bit PNG (투명도 사용불가))
• Promo Graphic: 180x120 (JPG 혹은 24bit PNG (투명도 사용불가))

이미지 제작 가이드라인은 변경될 수 있기 때문에 앱스토어 앱등록화면에서 직접 확인하시는 것이 좋습니다.

기타 참고자료

앱과 관련된 이미지 작업 시 도움이 되는 사이트를 소개드립니다.

• App Icon Template : 앱 아이콘 제작에 도움이되는 다양한 포토샵 템플릿을 제공합니다.
• Android Asset Studio : 앱에서 사용할 수 있는 다양한 아이콘을 손쉽게 생성할 수 있습니다.
• Mobile Assets Generator: 고해상도 이미지를 아이폰, 안드로이드 장치별 필요한 크기를 조정해줍니다.