해상도
이 가이드는 앱인토스 미니앱을 개발할 때 어떤 해상도를 기준으로 화면을 설계하고 최적화하면 좋은지를 안내해요.
권장 기준과 함께, 다양한 디바이스 환경에서도 안정적으로 동작하는 설계 방향을 설명해요.
앱인토스 미니앱은 여러 해상도와 화면 비율의 기기에서 실행돼요.
이 가이드는 이러한 환경 차이로 인한 혼란을 줄이기 위해,
기기별 대응이 아닌 ‘기준 해상도 중심 설계’ 방식을 제안해요.
꼭 확인해 주세요
하나의 논리 해상도를 기준으로 설계하고 에셋을 1x·2x로 준비하면,
앱인토스 실제 트래픽의 대부분을 안정적으로 커버할 수 있어요.
앱인토스 미니앱 풀스크린 설계 기준
앱인토스의 게임 미니앱은 풀스크린 구현이 필수예요.
풀스크린 환경에서는 다음을 반드시 고려해야 해요.
- 콘텐츠가 화면을 완전히 채워야 해요.
- 웹뷰 여백이나 반투명 영역이 남지 않아야 해요.
- 기기 회전에 따라 비율이 깨지거나 레터박스(검은 여백)가 생기면 안 돼요.
- 노치, 카메라 홀, Dynamic Island는 Safe Area로 처리해야 해요.
- 스케일링으로 인해 에셋 품질이 눈에 띄게 저하되지 않아야 해요.
그래서 해상도는 기기마다 다르게 맞추기보다,
하나의 기준 해상도를 정하고 스케일링으로 대응하는 방식이 중요해요.
해상도를 바라보는 두 가지 기준
앱인토스 미니앱에서는 해상도를 아래 두 가지로 나누어 생각하는 것을 권장해요.
① 논리 해상도 (Logical Resolution)
UI 배치와 좌표 계산, 게임 로직의 기준이 되는 해상도예요.
- 실제 디바이스 픽셀 해상도와는 다른 개념이에요.
- 논리 해상도는 하나만 선택하는 것을 권장해요.
- 모든 디바이스에서 동일한 플레이 감각과 화면 구성을 유지해야 해요.
② 에셋 해상도 (Asset Resolution)
이미지, 배경, 캐릭터, UI 리소스의 픽셀 밀도를 의미해요.
- 디바이스별로 에셋을 따로 준비할 필요는 없어요.
- 소수의 해상도 그룹으로 묶어 관리하는 방식이 효율적이에요.
앱인토스 권장 해상도 기준
① 논리 해상도 권장 범위
아래 범위 중 하나를 기준 해상도로 선택해 주세요.
- 세로형 미니앱: 약 360 × 640 ~ 420 × 740
- 가로형 미니앱: 약 640 × 360 ~ 740 × 420
이 범위 안에서 하나의 기준 해상도를 정하고, 기기 간 차이는 스케일링으로 대응하는 방식을 권장해요.
② 에셋 해상도 권장 기준
에셋은 그룹 단위로 준비하는 것이 좋아요.
- 1x 에셋: 기본 해상도 대응
- 2x 에셋: 고해상도 디바이스 대응
그래픽 품질이 특히 중요한 경우에만 3x 에셋을 선택적으로 추가해 주세요.
꼭 확인해 주세요
대부분의 미니앱은 1x + 2x 구성만으로 충분해요.
에셋 해상도를 과도하게 나누면 메모리 사용량 증가, 로딩 지연, 유지보수 비용 증가로 이어질 수 있어요.
데이터 기반 참고 사항
이 가이드는 앱인토스 실제 서비스 환경에서 수집된 디바이스 해상도 데이터를 기반으로 정리했어요.
- 전체 미니앱 트래픽의 약 70~80% 가 가로 약 800~900, 세로 약 360~420 범위의 viewport 해상도에 집중돼 있어요.
- 나머지 트래픽은 다양한 해상도로 분산된 롱테일 형태예요.
그래서 모든 해상도를 개별 대응하기보다,
대표적인 해상도 범위를 기준으로 설계하는 방식이 가장 효율적이에요.
테스트 기기 가이드
모든 디바이스에서 테스트할 필요는 없어요.
아래 조건을 만족하는 대표 기기 3~5종이면 충분해요.
- 화면 비율이 서로 다른 기기 2~3종
- Safe Area가 크게 적용되는 기기 1종
- 비교적 작은 화면 크기의 기기 1종
권장하지 않는 방식
다음과 같은 방식은 피해주세요.
- 디바이스 모델별로 다른 논리 해상도를 사용하는 방식
- 실제 픽셀 해상도를 기준으로 UI나 좌표를 계산하는 방식
- 필요 이상으로 많은 에셋 해상도 그룹을 운영하는 방식
- 해상도마다 다른 UI 레이아웃을 유지하는 방식
이런 접근은 UI 깨짐, 레터박스 발생, 유지보수 비용 증가로 이어질 수 있어요.