스토어 이미지 규격 정리: 스크린샷·아이콘·그래픽에 실제로 필요한 것
앱 하나를 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 체크섬을 붙여 확정합니다. 확정을 빠뜨리면 콘솔에 "처리 중"으로 남고 심사에 잡히지 않습니다. 조회했을 때 assetDeliveryState가 COMPLETE인지 확인하는 게 확실합니다.
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을 먼저 확인하시는 게 좋습니다.
함께 읽기
- Google Play 출시 트랙 정리: 내부·비공개·공개·프로덕션과 App Store 비교오늘 성경 지도라는 앱을 App Store와 Google Play 양쪽에 올렸습니다. iOS를 먼저 끝내고 Play Console로 넘어왔는데, 출시 개요 페이지에서 카드 네 장을 보고 잠깐 멈췄습니다.
- RN 앱 두 번째 배포: 재사용되는 인증서, 새로 해야 하는 등록몇 주 전에 만든 고객 포털 앱을 반쯤 복사해서 새 RN 앱을 하나 더 만들었습니다. 성경 속 여정을 지도에 그리는 화면 하나를 웹에서 옮겨온 것뿐인데, 옮기고 나니 "인증서까지 그대로 가져다 쓸 수 있나"가 궁금해졌습니다. 결론부터 적으면 절반만 맞았습니다.
- ImageMagick으로 앱 아이콘 만들기: SVG가 안 그려지고 마스크가 투명해진 이유앱 하나를 두 스토어에 올리면서 이미지 21개를 만들어야 했습니다. 아이콘, 적응형 아이콘 레이어들, 스플래시, 파비콘, 그리고 꾸민 스토어 스크린샷 12장. 디자인 도구를 열지 않고 전부 명령줄에서 만들었습니다.
- 스토어 메타데이터 API 정리: 항목별로 되는 것과 안 되는 것앱 설명과 키워드를 채우면서 두 스토어의 API 를 항목별로 다 두드려 봤습니다. 콘솔에 들어가지 않고 어디까지 갈 수 있는지 궁금했거든요.
- 바이너리 등록 후 남은 것들: 자동화되는 일과 사람이 해야 하는 일빌드가 끝나고 양쪽 스토어 콘솔에 바이너리가 올라갔습니다. 저는 그때 "이제 다 됐다"고 생각했습니다. 실제로는 거기서부터가 절반이었습니다.