RSS

스토어 이미지 규격 정리: 스크린샷·아이콘·그래픽에 실제로 필요한 것

앱 하나를 App Store와 Google Play에 동시에 올리면서 이미지를 몇 개나 만들었는지 세어봤습니다. 스크린샷 12장, 스토어 전용 그래픽 2개, 앱 번들에 들어가는 아이콘 자산 7개. 합쳐서 21개입니다. 코드를 다 짜놓고 시작한 마무리 작업인데 결국 여기에 시간을 더 썼습니다.

규격은 문서를 찾으면 나옵니다. 하지만 실제로 올려보기 전에는 몰랐던 것들이 있었고, 그것 때문에 두 번 일했습니다.

iOS 스크린샷은 이름과 실제 크기가 다릅니다

App Store Connect에서 스크린샷은 디스플레이 타입별 세트에 담깁니다. 제가 올린 건 둘입니다.

ko  APP_IPHONE_67           4장  1320x2868  COMPLETE
ko  APP_IPAD_PRO_3GEN_129   4장  2064x2752  COMPLETE

여기서 처음 걸렸습니다. APP_IPHONE_67은 6.7인치라는 뜻인데 실제로 받는 크기는 1320×2868입니다. 이건 6.9인치인 iPhone 16 Pro Max 해상도입니다. Apple이 6.7과 6.9를 한 세트로 합치면서 이름만 옛것으로 남겨둔 탓입니다. APP_IPAD_PRO_3GEN_129도 12.9인치 이름을 달고 13인치 iPad Pro의 2064×2752를 받습니다.

이름을 믿고 6.7인치 실기기 해상도인 1290×2796으로 만들면 통과는 하지만 큰 쪽으로 한 번 더 맞춰야 할 수 있습니다. 지금은 큰 쪽 하나만 준비하면 나머지 기기는 Apple이 축소해서 보여줍니다.

iPad를 빼먹으면 심사 제출 버튼이 막힙니다. app.json에서 supportsTablet: true로 둔 순간 iPad 스크린샷이 필수가 됩니다. 저는 태블릿을 특별히 대응할 생각이 없었는데 Expo 기본값이 그랬고, 뒤늦게 iPad 시뮬레이터를 따로 띄워 4장을 더 찍었습니다. 태블릿을 지원할 계획이 없다면 이 값을 먼저 false로 바꿔두는 편이 일을 줄입니다.

업로드가 한 번에 끝나지 않습니다

두 스토어 모두 이미지를 그냥 POST 한 번으로 올릴 수 없습니다. 방식도 서로 다릅니다.

App Store Connect는 세 단계입니다. 파일 크기와 이름으로 자리를 예약하면 업로드 주소를 돌려주고, 그 주소로 바이트를 보내고, 마지막에 파일의 md5 체크섬을 붙여 확정합니다. 확정을 빠뜨리면 콘솔에 "처리 중"으로 남고 심사에 잡히지 않습니다. 조회했을 때 assetDeliveryStateCOMPLETE인지 확인하는 게 확실합니다.

Google Play는 편집 세션입니다. 편집을 열고 그 안에서 이미지를 올린 다음 커밋해야 반영됩니다. 커밋 전까지는 아무것도 실제로 바뀌지 않고, 중간에 실패하면 편집을 통째로 버리면 됩니다. 트랜잭션과 같은 구조라 재실행하기는 이쪽이 편했습니다.

순서를 잘못 잡아 8장을 다시 올렸습니다

스크린샷은 업로드한 순서대로 스토어에 노출됩니다.

첫 장 헤드라인을 "바울의 여정부터 출애굽까지"로 뽑아놨는데, 다시 읽어보니 시간 순서가 거꾸로였습니다. 성경 순서로는 출애굽이 한참 먼저입니다. 문구만 고쳐 1번 이미지를 교체하면 될 줄 알았는데, 교체한 장이 목록 맨 뒤로 갑니다. 결국 8장을 전부 지우고 처음부터 다시 올렸습니다.

이미지 한 장 바꾸는 비용이 생각보다 큽니다. 캡션 문구는 이미지를 만들기 전에 확정하는 게 낫습니다.

Android는 요구 항목이 다릅니다

자산 규격 개수 필수
휴대전화 스크린샷 세로 1080×2400을 씀 2~8장 필수
앱 아이콘 512×512 PNG 1개 필수
그래픽 이미지 1024×500 1개 필수
태블릿 스크린샷 7인치·10인치 각 최대 8장 태블릿 지원 시

iOS에 없는 게 그래픽 이미지입니다. 1024×500 가로 배너인데 스토어 상단과 추천 영역에 쓰입니다. 이게 없으면 등록정보가 완성되지 않습니다.

스크린샷 크기는 iOS만큼 빡빡하지 않습니다. 한 변이 320px 이상 3840px 이하면 되고 정해진 해상도 목록이 없습니다. 저는 에뮬레이터 해상도인 1080×2400을 그대로 썼습니다.

파일 크기 차이가 재밌었습니다. 512 아이콘은 10KB인데 1024×500 그래픽 이미지는 70KB입니다. 아이콘은 단색 도형 몇 개라 PNG 압축이 잘 먹고, 배너에는 지도 이미지가 깔려 있어서 그렇습니다. 제한이 각 8MB라 신경 쓸 일은 없었습니다.

앱 안에 들어가는 아이콘은 또 별개입니다

스토어에 올리는 이미지와 앱 번들에 박히는 아이콘은 다른 물건입니다. Expo 프로젝트에 최종적으로 남은 자산은 일곱 개입니다.

파일 크기 용도
icon.png 1024×1024 iOS 앱 아이콘 원본
android-icon-background.png 1024×1024 적응형 아이콘 배경 레이어
android-icon-foreground.png 1024×1024 적응형 아이콘 전경 레이어
android-icon-monochrome.png 1024×1024 테마 아이콘 (Android 13 이상)
splash-icon.png 1024×1024 다크 스플래시
splash-icon-light.png 1024×1024 라이트 스플래시
favicon.png 48×48 웹 빌드

iOS는 1024 한 장만 주면 빌드가 알아서 나머지 크기를 뽑습니다. Android는 배경과 전경을 따로 줘야 합니다. 런처가 두 레이어를 각각 움직여 시차 효과를 내고, 기기 설정에 따라 원형이나 둥근 사각형으로 잘라내기 때문입니다. 그래서 중요한 도형은 가장자리에서 충분히 안쪽으로 넣어야 합니다.

모노크롬 레이어는 Android 13의 테마 아이콘용입니다. 시스템이 이 이미지의 알파 채널만 읽어서 배경색을 칠하므로 색은 의미가 없고 실루엣만 남습니다. 십자가와 접힌 지도를 그렸는데 단색으로 뭉개지지 않게 하려고, 지도의 접힌 선을 획이 아니라 빈틈으로 그렸습니다. 선을 그으면 단색화될 때 사라지지만 구멍은 남습니다.

스플래시는 1024 이미지를 주더라도 화면에는 imageWidth: 220으로 축소돼 나옵니다. 원본을 크게 두는 이유는 기기 배율 때문입니다.

데코레이션은 캔버스를 원본과 같게

단순 캡처 대신 TMAP 스토어 페이지 같은 형태로 꾸몄습니다. 밝은 배경 위에 뱃지 칩, 두 줄 굵은 헤드라인, 회색 부제, 그 아래로 둥근 모서리 스크린샷이 화면 밖으로 잘려 나가는 구성입니다.

핵심은 결과물 캔버스를 원본 스크린샷과 똑같은 크기로 유지하는 것입니다. 1320×2868로 찍었으면 데코레이션 결과도 1320×2868이어야 스토어가 받습니다. 안쪽 스크린샷은 캔버스 폭의 78%로 줄이고 위에서 29% 지점에 놓았습니다. 요소 위치를 모두 캔버스 크기에 대한 비율로 계산해두니 아이폰과 아이패드, 안드로이드 세 비율에 같은 스크립트를 그대로 돌릴 수 있었습니다.

한글 폰트는 macOS에 기본으로 있는 /System/Library/Fonts/AppleSDGothicNeo.ttc를 썼습니다. 별도로 설치할 게 없습니다.

최소한으로 줄이면

다음에 또 할 때를 위해 정리해둡니다. 한국어 하나만 지원하고 태블릿을 대응하지 않는 앱이라면 이게 전부입니다.

  • iPhone 6.9인치 1320×2868 스크린샷 1장 이상 (실제로는 3~5장)
  • Android 휴대전화 스크린샷 2장 이상
  • Play 아이콘 512×512
  • Play 그래픽 이미지 1024×500
  • 앱 아이콘 원본 1024×1024, Android 적응형 배경·전경

태블릿을 켜는 순간 iOS 13인치와 Android 7인치·10인치가 추가로 붙습니다. 이걸 감당할 생각이 없으면 supportsTablet을 먼저 확인하시는 게 좋습니다.