앱 출시를 위해 준비해야 할 이미지들

요약

최소한 세 가지 정도의 이미지를 준비해야 함.

1. 높은 해상도의 정사각형 아이콘 이미지(1024x1024 권장) -> 다양한 아이콘 크기로 resize.
2. 높은 해상도의 세로형 스플래시 이미지(2536x2560 권장) -> 다양한 크기로 종횡비 유지 resize & center crop.(가로 전용이라면 필요없음)
3. 높은 해상도의 가로형 스플래시 이미지(2560x1536 권장) -> 다양한 크기로 종횡비 유지 resize & center crop.(세로 전용이라면 필요없음)

특이한 크기 또는 자주 쓰이지만 자동 resize 품질이 나쁜 이미지들은 별도로 준비(예: 16x16 아이콘). 그 외에 멋진 스크린샷과 홍보 동영상도 필요.

안드로이드

아이콘

• 참고: http://developer.android.com/design/style/iconography.html
• ldpi: 36x36 drawable-ldpi/icon.png
• mdpi: 48x48 drawable-mdpi/icon.png
• hdpi: 72x72 drawable-hdpi/icon.png
• xhdpi: 96x96 drawable-xhdpi/icon.png
• default: ?x? drawable/icon.png

스플래시

• 참고: http://developer.android.com/guide/practices/screens_support.html
• ldpi: 200x320 drawable-ldpi/splash.png
• mdpi: 320x480 drawable-mdpi/splash.png
• hdp: 480x800 drawable-hdpi/splash.png
• xhdpi: 720x1280 drawable-xhdpi/splash.png
• ldpi landscape: 200x320 drawable-land-ldpi/splash.png
• mdpi landscape: 320x480 drawable-land-mdpi/splash.png
• hdp landscape: 480x800 drawable-land-hdpi/splash.png
• xhdpi landscape: 720x1280 drawable-land-xhdpi/splash.png
• default: ?x? drawable/splash.png

플레이스토어

• 참고: https://support.google.com/googleplay/android-developer/answer/1078870
• icon: 512x512 png32(with alpha)
• screenshot: 최소 2개, 320~3840px jpg/png24(without alpha)
• featured banner: 1024x500 jpg/png24(without alpha)
• promo banner: 180x120 jpg/png24(without alpha)
• promo video: 30초~2분

T스토어

• 참고: http://dev.tstore.co.kr/devpoc/reference/view/Apps
• 참고: http://westwoodforever.blogspot.kr/search/label/T%20store (확인필요)
• 대표 아이콘: 212x212 jpg/png/gif
• 스크린샷: 4~8개 720x1280(권장) jpg
• TBD

올레마켓

• TBD

U+스토어

• TBD

iOS

아이콘

• 참고: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/AppIcons.html
• iphone: 57x57 Icon.png
• iphone retina: 114x114 Icon@2x.png
• ipad: 72x72 Icon-72.png
• ipad retina: 144x144 Icon-72@2xpng
• iphone spotlight: 29x29 Icon-small.png
• iphone retina spotlight: 58x58 Icon-small@2x.png
• ipad spotlight: 50x50 Icon-small-50.png
• ipad retina spotlight: 100x100 Icon-small-50@2x.png
• iphone ios7: 60x60 Icon-60.png
• iphone retina ios7: 120x120 Icon-60@2x.png
• ipad ios7: 76x76 Icon-60.png
• ipad retina ios7: 152x152 Icon-60@2x.png
• ios7 spotlight: 40x40 Icon-40.png
• ios7 retina spotlight: 80x80 Icon-40@2x.png

스플래시

• 참고: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LaunchImages.html
• iphone portrait: 320x480 Default~iphone.png
• iphone retina 3.5inch portrait: 640x960 Default@2x~iphone.png
• iphone retina 4inch portrait 640x1136 Default-568h@2x~iphone.png
• ipad: 768x1024 Default-Portrait~ipad.png
• ipad retina: 1536x2048 Default-Portrait@2x~ipad.png
• ipad landscape: 1024x768 Default-Landscape~ipad.png
• ipad retina landscape: 2048x1536 Default-Landscape@2x~ipad.png

앱스토어

• icon 512x512 iTunesArtwork.png
• icon retina: 1024x1024 iTunesArtwork@2x.png
• screenshots
• TBD

웹

• favicon: 윈도 ico 포맷(16x16…)
• TBD

페이스북

• 참고: https://developers.facebook.com/docs/guides/appcenter/
• 프로필 아이콘: 16x16, 64x64, 96x96, 128x128 jpg/png
• 프로필 커버(배경): 800x150 jpg/png
• 앱 로고: 1024x1024
• 앱 아이콘: 16x16
• 웹 배너: 155x100, 180x115(Small Editor’s Pick), 394x150(Web Editor’s Pick) jpg/png
• 모바일 배너: 136x88, 204x132, 272x176 jpg/png
• 스크린샷 for 웹사이트 페이스북 로그인: 최대5개
• 스크린샷 for 모바일웹: 최대5개
• 동영상
• TBD

트위터

• 참고: http://thefinancialbrand.com/30777/facebook-twitter-youtube-linkedin-profile-image-sizes/ (확인 필요)
• 앱 아이콘
• 프로필 아이콘: 73x73(48x48, 24x24) jpg/png
• 프로필 헤더(배경): 1252x626(520x260) jpg/png
• TBD

구글+

• TBD
• 고해상도의 정사각형 이미지를 graphicsmagick을 사용하여 다양한 크기로 변환:

#!/bin/bash

# 원본 이미지는 1024x1024 권장
# 제일 큰 iTunesArtwork 레티나 기준.
ICON_SRC=icon.png

IOS_SPLASH_OUT=Xcode프로젝트경로/모듈이름/Resources/splash

gm convert -scale 57 ${ICON_SRC} ${IOS_ICON_OUT}/Icon.png
gm convert -scale 114 ${ICON_SRC} ${IOS_ICON_OUT}/Icon@2x.png
gm convert -scale 72 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-72.png
gm convert -scale 144 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-72@2x.png
gm convert -scale 60 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-60.png
gm convert -scale 120 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-60@2x.png
gm convert -scale 76 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-76.png
gm convert -scale 152 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-76@2x.png
gm convert -scale 29 ${ICON_SRC}  ${IOS_ICON_OUT}/Icon-small.png
gm convert -scale 58 ${ICON_SRC}  ${IOS_ICON_OUT}/Icon-small@2x.png
gm convert -scale 40 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-40.png
gm convert -scale 80 ${ICON_SRC} ${IOS_ICON_OUT}/Icon-40@2x.png
gm convert -scale 50 ${ICON_SRC}  ${IOS_ICON_OUT}/Icon-50.png
gm convert -scale 100 ${ICON_SRC}  ${IOS_ICON_OUT}/Icon-50@2x.png
gm convert -scale 512 ${ICON_SRC} ${IOS_ICON_OUT}/iTunesArtwork.png
gm convert -scale 1024 ${ICON_SRC} ${IOS_ICON_OUT}/iTunesArtwork@2x.png

ANDROID_ICON_OUT=PathToAndroidProject/res

gm convert -scale 96 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable/icon.png
gm convert -scale 96 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable-xhdpi/icon.png
gm convert -scale 72 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable-hdpi/icon.png
gm convert -scale 48 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable-mdpi/icon.png
gm convert -scale 36 ${ICON_SRC} ${ANDROID_ICON_OUT}/drawable-ldpi/icon.png

• 다음으로 고해상도의 가로 스플래시 이미지를 다양한 크기로 변환(종횡비를 유지하면서 중앙을 기준으로 잘라냄):

#!/bin/bash

# 원본 이미지는 상하 좌우에 여백의 미가 살아있는(?) 1536x2560 권장
# 제일 큰 ipad retina 1536x2048와 제일 큰 안드로이드 720x1280 모두 윈윈~
SPLASH_SRC=splash.png

IOS_SPLASH_OUT=Xcode프로젝트경로/모듈이름/Resources/splash

gm convert -resize "320x480^" -gravity center -crop '320x480+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default~iphone.png
gm convert -resize "640x960^" -gravity center -crop '640x960+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default@2x~iphone.png
gm convert -resize "640x1136^" -gravity center -crop '640x1136+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-568h@2x~iphone.png
gm convert -resize "768x1024^" -gravity center -crop '768x1024+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-Portrait~ipad.png
gm convert -resize "1536x2048^" -gravity center -crop '1536x2048+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-Portrait@2x~ipad.png
# 원본 이미지도 가로용... 일단 생략...
#gm convert -resize "1024x768^" -gravity center -crop '1024x768+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-Landscape~ipad.png
#gm convert -resize "2048x1536^" -gravity center -crop '2048x1536+0+0' ${SPLASH_SRC} ${IOS_SPLASH_OUT}/Default-Landscape@2x~ipad.png

ANDROID_SPLASH_OUT=안드로이드프로젝트/res

gm convert -resize "720x1280^" -gravity center -crop '720x1280+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable/splash.png
gm convert -resize "720x1280^" -gravity center -crop '720x1280+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-xhdpi/splash.png
gm convert -resize "480x800^" -gravity center -crop '480x800+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-hdpi/splash.png
gm convert -resize "320x480^" -gravity center -crop '320x480+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-mdpi/splash.png
gm convert -resize "200x320^" -gravity center -crop '200x320+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-ldpi/splash.png
# 원본 이미지도 가로용... 일단 생략...
#gm convert -resize "1280x720^" -gravity center -crop '1280x720+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land/splash.png
#gm convert -resize "1280x720^" -gravity center -crop '1280x720+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land-xhdpi/splash.png
#gm convert -resize "800x480^" -gravity center -crop '800x480+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land-hdpi/splash.png
#gm convert -resize "480x320^" -gravity center -crop '480x320+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land-mdpi/splash.png
#gm convert -resize "320x200^" -gravity center -crop '320x200+0+0' ${SPLASH_SRC} ${ANDROID_SPLASH_OUT}/drawable-land-ldpi/splash.png