앱 화면이나 모바일 웹 레이아웃을 잡다 보면 "이 폰은 세로가 몇 픽셀이었지", "비율이 16:9였나 18.5:9였나" 하고 다시 찾게 됩니다. 테스트할 기기를 고르거나 에뮬레이터 해상도를 지정할 때 바로 보려고 기종별 해상도를 표로 모아 두었습니다. 단위는 픽셀(px)이고, 화소수(가로 × 세로)가 작은 것부터 정렬했습니다.
| 화소수 | 해상도 | 화면비율 | 삼성 | LG | 애플 | 구글 |
|---|---|---|---|---|---|---|
| 153,600 | 320 × 480 | 2:3 | 옵티머스1 | 아이폰3 | ||
| 384,000 | 480 × 800 | 3:5 | 갤럭시S1, 갤럭시S2 | 넥서스S, 넥서스One | ||
| 614,400 | 640 × 960 | 2:3 | 아이폰4 | |||
| 727,040 | 640 × 1136 | 9:16 | 아이폰5 | |||
| 786,432 | 768 × 1024 | 3:4 | 옵티머스뷰 | 아이패드1, 아이패드2, 아이패드미니 | ||
| 921,600 | 720 × 1280 | 9:16 | 갤럭시S2 HD, 갤럭시S3, 갤노트2 | 옵티머스G | 갤럭시넥서스 | |
| 983,040 | 768 × 1280 | 3:5 | 넥서스4 | |||
| 1,000,500 | 750 × 1334 | 9:16 | 아이폰6, 아이폰6S, 아이폰7, 아이폰8 | |||
| 1,024,000 | 800 × 1280 | 10:16 | 갤럭시탭10.1, 갤노트1 | G패드10.1 | 넥서스7 | |
| 1,646,400 | 840 × 1960 | 9:21 | 갤럭시폴드(커버) | |||
| 2,073,600 | 1080 × 1920 | 9:16 | 갤럭시S4, 갤럭시S5, 갤노트3 | 옵티머스G프로, G2 | 아이폰6+, 아이폰6S+, 아이폰7+, 아이폰8+ | 넥서스5, Pixel |
| 2,304,000 | 1200 × 1920 | 10:16 | G패드8.3 | 넥서스7(2013) | ||
| 2,740,500 | 1125 × 2436 | 9:19.5 | 아이폰X | |||
| 3,145,728 | 1536 × 2048 | 3:4 | 아이패드미니레티나, 아이패드에어2 | |||
| 3,305,472 | 1536 × 2152 | 3:4.2 | 갤럭시폴드(메인) | |||
| 3,686,400 | 1440 × 2560 | 9:16 | 갤럭시S5광대역LTE-A, 갤럭시S6, 갤럭시S7, 갤노트4, 갤노트5, 갤노트7 | G3, G4, G5, V10, V20 | Pixel XL | |
| 4,096,000 | 1600 × 2560 | 10:16 | 갤럭시탭S, 갤럭시노트10.1(2014), 갤럭시노트프로12.2 | 넥서스10 | ||
| 4,147,200 | 1440 × 2880 | 9:18 | G6, V30 | |||
| 4,262,400 | 1440 × 2960 | 9:18.5 | 갤럭시S8, 갤럭시S8+, 갤노트8 | |||
| 4,377,600 | 1440 × 3040 | 9:19 | 갤럭시S10, 갤럭시S10+ | |||
| 4,492,800 | 1440 × 3120 | 9:19.5 | G7, V40, G8, V50 | |||
| 4,608,000 | 1440 × 3200 | 9:20 | 갤럭시S20 | |||
| 5,595,136 | 2048 × 2732 | 3:4 | 아이패드프로 |
표를 볼 때 알아 둘 점
여기 적힌 숫자는 패널의 물리 픽셀입니다. 실제로 화면을 설계할 때 쓰는 단위와는 다릅니다. 안드로이드는 레이아웃을 dp(밀도 독립 픽셀)로 잡고, 160dpi를 기준으로 화면 밀도에 따라 실제 픽셀로 늘려서 그립니다. 그래서 1080 × 1920 폰과 1440 × 2560 폰이 화면 크기가 비슷하면 dp 기준으로는 거의 같은 공간이 나옵니다. 모바일 웹도 마찬가지로 CSS 픽셀은 기기 픽셀 비율(devicePixelRatio)로 나눈 값이라, 표의 가로 1440을 그대로 width로 생각하면 안 됩니다.
해상도보다 실무에서 더 신경 쓰이는 건 화면 비율입니다. 2017년 무렵부터 9:18, 9:18.5, 9:19.5처럼 세로가 긴 화면이 나오면서, 9:16 기준으로 만든 화면은 위아래가 비거나 배경 이미지가 잘리는 일이 생겼습니다. 고정 높이로 배치한 버튼이 노치나 하단 내비게이션 바에 가려지는 것도 이 시기 기종에서 많이 보입니다. 배경 이미지는 가장 긴 비율에 맞춰 여유 있게 만들고, 주요 버튼은 화면 아래에서부터 붙이는 식으로 잡아 두면 기종을 덜 탑니다.
갤럭시폴드처럼 접었을 때(커버 9:21)와 폈을 때(메인 3:4.2) 비율이 완전히 다른 기기도 있습니다. 이런 기기는 실행 중에 화면 구성이 바뀌므로, 화면 회전과 같은 방식으로 레이아웃이 다시 그려져도 상태가 유지되는지 확인해 봐야 합니다.
에뮬레이터를 만들 때는 이 표에서 비율이 서로 다른 기종을 몇 개 골라 두면 편합니다. 저는 9:16 하나, 세로로 긴 9:19.5 하나, 태블릿 10:16이나 3:4 하나 정도를 기본으로 두고 확인합니다. 표는 2020년 무렵까지의 기종이라 이후 모델은 제조사 사양표에서 따로 확인하세요.