본문 바로가기

UX & UI

앱 스토어 등록용 이미지 가이드

Photo by Parampreet Chanana on Pixabay

 

 

애플의 제품에서 사용되는 응용 프로그램(애플리케이션, 이하 앱)을 사거나 팔 수 있는 플랫폼을 앱 스토어 App store라고 한다. 앱 스토어에는 개인 개발자 기준으로 연 99달러(한화 약 12만 원 이내)를 지불하면 자신이 개발한 앱을 무제한으로 업로드할 수 있는데 사전에 앱을 등록하고 심사하는 과정을 거쳐야 한다. 앱스토어의 가장 큰 의의는 소프트웨어 개발자들 자신들이 만든 소프트웨어에 대해서 당당하게 심사받고 제대로 된 보상을 받을 수 있는 일종의 시장을 열었다는 데 있다. 

 

 

 

 

 

 

이는 애플 사용자에게도 큰 이점이다. 일단 앱 스토어에 올라온 앱은 애플의 검수를 통과했다는 것을 잘 알고 있기 때문에 소프트웨어에 대한 대중들의 신뢰도가 매우 높은 편이다. 여기에서 알 수 있듯, 애플의 앱 심사는 매우 까다로운 편이고 따라서 제품을 만드는 팀의 일원이라면 가이드를 미리 숙지해놓는 것이 좋다. 특히, 제품 디자이너는 기본적으로 앱을 설계할 때부터 OS 별 제약사항을 잘 알고 있어야 한다. 자칫 잘 못 하다가는 시간을 들여 앱을 만들었지만 심사에 탈락하고 규정에 맞게 다시 화면을 수정해야 하는 일이 생길 수 있다.

 

앱 등록은 앱 스토어 커넥트 App Store Connect를 이용하게 된다. 여기서 앱 스토어에 판매 중인 앱을 관리하고 제출하며, 테스트 플라이트 TestFlight로 앱의 베타 버전을 배포할 수 있다. 또한, 등록 시 필요한 내용들을 앱 스토어 커넥트 도움말에 자세하게 설명해놓았다.

 

이 과정에서 필수로 등록해야 하는 항목들이 있는데 제품 디자이너는 주로 앱 아이콘이나 스크린 샷 같은 이미지를 준비하게 된다. 앱의 상세페이지를 제품 페이지라고 하며, 제품 페이지에는 최대 3개의 앱 미리보기와 10개의 스크린샷을 업로드할 수 있다. 앱이 현지화되지 않았거나 여러 기기의 크기에서도 내용이 동일한 경우, 가장 높은 해상도의 스크린샷을 제공하면 된다.

 

아래의 내용은 2020년 1월 기준이며, 최신의 내용은 언제나 공식 홈페이지(https://help.apple.com/app-store-connect)를 참고하는 것을 권장한다.

 

1. App Store 아이콘

앱 스토어의 여러 섹션에서 앱을 나타내는 데 필요한 아이콘을 제공해야 한다. 앱 아이콘을 만들 때에는 때, Human Interface Guidelines를 참고 하자.

 

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/

 

App Icon - Icons and Images - iOS - Human Interface Guidelines - Apple Developer

App Icon Every app needs a beautiful and memorable icon that attracts attention in the App Store and stands out on the Home screen. Your icon is the first opportunity to communicate, at a glance, your app’s purpose. It also appears throughout the system, s

developer.apple.com

모바일 제품을 다루는 디자이너에게 애플의 HIG나 구글의 머터리얼 디자인 Material Design은 바이블 같은 존재로 자주 읽어두면 정말 도움이 많이 된다.

 

앱 아이콘 속성

속성
포맷 PNG
색상값 sRGB or P3 (Color Management 참고)
레이어 투명도가 없는 단일 레이어
해상도 Image Size and Resolution 참고
모양 둥근 모서리가없는 정사각형

 

앱 아이콘 크기

기기 또는 플랫폼 아이콘 크기
iPhone
120px × 120px (60pt × 60pt @2x)
180px × 180px (60pt × 60pt @3x)
120px × 120px (60pt × 60pt @2x)
iPad Pro 167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini 152px × 152px (76pt × 76pt @2x)
App Store 1024px × 1024px (1024pt × 1024pt @1x)

 

 

2. 앱 미리 보기

앱 미리 보기는 사용자가 App Store 제품 페이지에서 시청할 수 있는 짧은 동영상으로 주로 앱의 기능 및 UI를 담고 있다. 사용자가 제품 페이지를 볼 때 앱이 음소거된 오디오로 자동 재생되므로 비디오의 처음 몇 초가 시각적으로 매력적이어야 한다. 비디오가 자동 재생되지 않을 때에는 앱 미리 보기 포스터 프레임이 보인다.

 

마케팅 가이드라인 https://developer.apple.com/app-store/app-previews/

 

App Previews - App Store - Apple Developer

App Previews demonstrate the features and functionality of your app in a short video that users can watch right on the App Store.

developer.apple.com

앱 미리보기 요구사항

- Mac은 macOS 10.10이상 버전이거나, Safari 8 이상의 버전에서 실행된다.

- iPhone용 5.5형 디스플레이는 iOS 8 이상 버전에서 실행되고, iPad 또는 Apple TV의 경우 12.9형 디스플레이에서 실행된다.

 

 

3. 스크린샷

각 스크린샷은 앱의 주요 이점이나 기능에 집중하여 가치를 충분히 전달할 수 있도록 해야 한다. 그리고 앱이 다크 모드를 지원하는 경우, 사용자가 미리 경험할 수 있도록 적어도 하나 이상의 스크린을 포함하는 것이 좋다.

 

iPhone의 경우 6.5형 iPhone Xs Max와 5.5형 기기(iPhone 6s Plus, iPhone 7 Plus, iPhone 8 Plus)의 스크린샷이 요구된다. 그리고 iPad의 경우 12.9형 iPad Pro (2세대)와 12.9형 iPad Pro (3세대)의 스크린샷이 필요하다. 해당 스크린샷들은 작은 크기의 기기에서 축소되어 노출된다.

 

스크린샷 사양

기기 크기 또는 플랫폼

스크린샷 크기

요구 사항

스크린샷 소스

6.5형(iPhone 11 Pro Max, iPhone 11, iPhone X S Max, iPhone XR)

1242 x 2688 픽셀 (세로)

2688 x 1242 픽셀 (가로)

앱이 iPhone에서 실행되는 경우 필요

6.5형 스크린샷 업로드

5.8형(iPhone 11 Pro, iPhone X, iPhone XS)

1125 x 2436 픽셀 (세로)

2436 x 1125 픽셀 (가로)

앱이 iPhone에서 실행되며 6.5인치 스크린샷이 제공되지 않은 경우 필요합니다

기본값: 크기가 조정된 6.5형 스크린샷

대안: 5.8형 스크린샷 업로드

5.5형 (iPhone 6s Plus, iPhone 7 Plus, iPhone 8 Plus)

1242 x 2208 픽셀 (세로)

2208 x 1242 픽셀 (가로)

앱이 iPhone에서 실행되는 경우 필요

5.5형 스크린샷 업로드

4.7형 (iPhone 6, iPhone 6s, iPhone 7, iPhone 8)

750 x 1334 픽셀 (세로)

1334 x 750 픽셀 (가로)

iPhone 및 5.5형 스크린샷에서 앱이 실행되는 경우 필요합니다.

기본값: 크기가 조정된 5.5형 스크린샷

대안: 4.7형 스크린샷 업로드

4형 (iPhone SE)

640 x 1096 픽셀 (상태 표시줄을 포함하지 않는 세로 비율)

640 x 1136 픽셀 (상태 표시 줄을 포함하는 있는 세로 비율)

1136 x 600 픽셀 (상태 표시줄을 포함하지 않는 가로 비율)

1136 x 640 픽셀 (상태 표시줄을 포함하는 가로 비율)

앱이 iPhone에서 실행되고, 5.5형 또는 4.7형 스크린샷이 제공되지 않은 경우 필요합니다.

기본값: 크기가 조정된 5.5 또는 4.7형 스크린샷

대안: 4형 스크린샷 업로드

3.5형 (iPhone 4s)

640 x 920 픽셀 (상태 표시줄을 포함하지 않는 세로 비율)

640 x 960 픽셀 (상태 표시줄을 포함하는 세로 비율)

960 x 600 픽셀 (상태 표시줄을 포함하지 않는 가로 비율)

960 x 640 픽셀 (상태 표시줄을 포함하는 가로 비율)

앱이 iPhone에서 실행되며 5.5인치 스크린샷이 제공되지 않은 경우 필요합니다

기본값: 크기가 조정된 5.5, 4.7 또는 4형 스크린샷

대안: 3.5형 스크린샷 업로드

12.9형(3세대 iPad Pro)

2048 x 2732 픽셀 (세로)

2732 x 2048 픽셀 (가로)

앱이 iPad에서 실행되는 경우 필요

12.9형 iPad Pro (3 세대) 스크린샷 업로드

12.9형(2세대 iPad Pro)

2048 x 2732 픽셀 (세로)

2732 x 2048 픽셀 (가로)

앱이 iPad에서 실행되는 경우 필요

업로드 12.9형 iPad Pro (2 세대) 스크린샷

11형 (iPad Pro)

1668 x 2388 픽셀 (세로)

2388 x 1668 픽셀 (가로)

앱이 iPad에서 실행되며, 12.9형 iPad Pro (2 세대) 스크린샷이 제공되지 않는 경우 필요

기본값: 크기가 조정된 12.9형 iPad Pro (3 세대) 스크린샷

대안: 11형 스크린샷 업로드

10.5형(7세대 iPad, iPad Pro, iPad Air)

1668 x 2224 픽셀 (세로)

2224 x 1668 픽셀 (가로)

앱이 iPad에서 실행되며, 12.9형 iPad Pro (2 세대) 스크린샷이 제공되지 않는 경우 필요

기본값: 크기가 조정된 12.9형 iPad Pro (2 세대) 스크린샷

대안: 10.5형 스크린샷 업로드

9.7형 (iPad, iPad mini)

고해상도:

1536 x 2008 픽셀 (상태 표시 줄 미포함)

1536 x 2048 픽셀 (상태 표시줄을 포함하는 세로 비율)

2048 x 1496 픽셀 (상태 표시줄을 포함하지 않는 가로 비율)

2048 x 1536 픽셀 (상태 표시줄을 포함하는 가로 비율)

표준 해상도:

768 x 1004 픽셀 (상태 표시줄을 포함하지 않는 세로 비율)

768 x 1024 픽셀 (상태 표시줄을 포함하는 세로 비율)

1024 x 748 픽셀 (상태 표시 줄 미포함)

1024 x 768 픽셀 (상태 표시줄을 포함하는 가로 비율)

앱이 iPad에서 실행되고 12.9형 iPad Pro (2 세대) 또는 10.5형 스크린샷이 제공되지 않는 경우 필요

기본값: 크기가 조정된 12.9형 iPad Pro (2 세대) 또는 10.5형 스크린샷

대안: 9.7형 스크린샷 업로드

Mac

다음 중 하나를 16:10 종횡비로 제공

1280 x 800

1440 x 900

2560 x 1600 픽셀

2880 x 1800

Mac 앱에 필요

목록에 나열된 크기 중 하나로 Mac 스크린샷 업로드

Apple TV

1920 x 1080 픽셀

3840 x 2160 픽셀

Apple TV 앱에 필요

목록에 나열된 크기 중 하나로 Apple TV 스크린샷을 업로드

Apple Watch

다음 중 하나를 수행합니다.

312 x 390 픽셀 (Series 3)

368 x 448 픽셀 (Series 5 및 Series 4)

Apple Watch 앱에 필요

목록에 나열된 크기 중 하나로 Apple Watch 스크린샷을 업로드합니다.

 

 

*참고:

https://namu.wiki/w/App%20Store?from=%EC%95%B1%EC%8A%A4%ED%86%A0%EC%96%B4%EF%BB%BF

https://help.apple.com/app-store-connect/#/dev910472ff2

https://help.apple.com/app-store-connect/#/devd274dd925

https://developer.apple.com/app-store/product-page/