가이드 · 디자인
종횡비와 안전 영역.
TL;DR. 최신 iPhone 스크린샷의 종횡비는 대략 9:19.5예요. App Store는 업로드 해상도 기준으로 약 18 px 반경으로 모서리를 둥글게 처리해요. 중요한 텍스트는 상단에서 최소 80 px, 가장자리에서 60 px 이상 띄워야 해요. 캡션은 패널 상단 1/3에 있을 때 가장 잘 읽혀요.
iPhone 종횡비
최신 iPhone 클래스별 실제 종횡비:
- 6.9" (16 Pro Max):
1320 × 2868= 2.173 (≈ 19.5:9) - 6.7" (15 Pro Max, 15 Plus, 14 Plus, 13 Pro Max, 12 Pro Max):
1290 × 2796= 2.167 - 6.1" (16, 15, 14, 13, 12, 11):
1170 × 2532= 2.164 - 5.5" (8 Plus, 7 Plus, 6s Plus):
1242 × 2208= 1.778 (16:9)
5.5" 클래스가 특이한 경우예요. 구형 기기는 16:9를 사용했어요. 두 가지 모두 디자인해야 한다면 중요한 콘텐츠를 세로 중앙 영역에 고정해서 두 종횡비 모두에서 보이도록 하세요.
안전 영역
App Store는 기기 프레임에 맞는 둥근 모서리로 스크린샷을 렌더링하며, 일부 캐러셀 위치에서 앱 메타데이터를 오버레이할 수 있어요. 경험상:
- 상단 80 px은 상태 표시줄 오버레이나 모서리 반경에 의해 잘릴 수 있어요.
- 각 가장자리 60 px이 현실적인 안전 여백이에요.
- 하단 100 px은 소형 폰에서 "더 보기" 안내 요소에 가려질 수 있어요.
캡션과 CTA는 디자인 상단에서 80~600 px 사이에 위치해야 해요. 썸네일 크기에서 보이고, 전체 크기에서 잘리지 않는 위치예요.
시선이 먼저 가는 곳
App Store 캐러셀의 시선 추적 연구(여러 ASO 회사의 분석, 2024-2026 기준 일관된 결과)에 따르면 각 패널의 왼쪽 상단 사분면에 가장 강한 주의가 집중돼요. 중요한 캡션 텍스트는 패널 상단 1/4에 걸쳐 있고 배경과 높은 대비를 이룰 때 가장 잘 읽혀요. 기기 렌더링은 정면보다 약간 기울어진 각도(Y축 기준 8-15°)가 더 효과적이에요.
실용적인 안전 영역 가이드라인
Figma 또는 Photoshop에서 디자인한다면, 캔버스에 이 가이드를 적용해보세요(6.9" 기준, 다른 클래스는 비례 조정).
- 상단 여백: 80 px
- 하단 여백: 100 px
- 측면 여백: 각 60 px
- 캡션 영역: 상단에서 80~600 px
- 기기 영역: 상단에서 600~2400 px