모바일 화면 크기 목록 총정리 - 아이폰 갤럭시 해상도와 반응형 미디어쿼리 가이드
아이폰과 갤럭시 등 주요 스마트폰의 실제 해상도와 CSS 뷰포트 크기를 한 번에 정리했습니다. 반응형 웹 개발과 디자인에서 꼭 필요한 미디어 쿼리 기준점까지 함께 확인하세요.
스마트폰 앱이나 모바일 웹사이트를 만들다 보면 "이 디자인이 갤럭시에서는 어떻게 보일까", "아이폰 미니에서 글자가 잘리지는 않을까" 하는 고민을 자주 만나게 됩니다. 시중에 유통되는 모바일 기기는 수백 종이고 화면 크기와 비율도 제각각이라 정확한 기준점을 잡기가 쉽지 않습니다.
아래에서는 자주 사용되는 주요 스마트폰의 실제 해상도와 CSS 뷰포트 크기를 한 번에 정리했습니다. 반응형 웹 개발자나 UI 디자이너가 작업 전에 빠르게 참고할 수 있도록 표 형식으로 만들었습니다.
모바일 화면 크기를 알아야 하는 이유
모바일 화면 크기는 단순한 스펙 이상의 의미를 갖습니다. 디자인 시안은 보통 360px이나 375px 기준으로 만들어지지만, 실제 사용자는 320px의 작은 폰부터 430px이 넘는 프로 맥스 모델까지 다양한 기기를 사용합니다.
특히 다음과 같은 작업에서는 정확한 화면 크기 정보가 반드시 필요합니다.
- 반응형 웹 개발: 미디어 쿼리 기준점(breakpoint)을 정확히 잡아야 모든 기기에서 깨지지 않는 레이아웃을 만들 수 있습니다.
- 모바일 앱 디자인: 디자인 시스템에서 안전 영역(safe area)과 노치 영역을 함께 고려해야 합니다.
- 광고 배너 제작: 모바일 광고 소재는 기기별로 보이는 영역이 달라 잘림 현상이 발생할 수 있습니다.
실제 해상도(physical pixel)와 CSS 픽셀(logical pixel)은 다릅니다. 갤럭시 S24의 실제 해상도는 1080x2340이지만, 웹 개발에서 다루는 CSS 뷰포트는 360x780입니다. 이 둘을 혼동하면 디자인이 정밀도를 잃습니다.
아이폰 시리즈 화면 크기 목록
아이폰은 모델별로 화면 크기가 비교적 정형화되어 있어 디자인 작업에서 가장 자주 참고됩니다. 2026년 기준 활발히 사용되는 모델 위주로 정리했습니다.
| 모델 | 실제 해상도(px) | CSS 뷰포트(px) | 화면 크기 |
|---|---|---|---|
| iPhone SE (2/3세대) | 750 x 1334 | 375 x 667 | 4.7인치 |
| iPhone 13 mini | 1080 x 2340 | 375 x 812 | 5.4인치 |
| iPhone 14 / 15 | 1170 x 2532 | 390 x 844 | 6.1인치 |
| iPhone 14 Pro / 15 Pro | 1179 x 2556 | 393 x 852 | 6.1인치 |
| iPhone 14/15 Pro Max | 1290 x 2796 | 430 x 932 | 6.7인치 |
| iPhone 16 | 1179 x 2556 | 393 x 852 | 6.1인치 |
| iPhone 16 Pro Max | 1320 x 2868 | 440 x 956 | 6.9인치 |
window.innerWidth를 호출했을 때 반환되는 값과 같습니다. 디자인 작업은 이 값을 기준으로 진행해야 합니다.갤럭시 및 안드로이드 주요 모델
안드로이드 기기는 제조사와 모델이 다양하지만, 국내 사용자 비중이 높은 갤럭시 시리즈와 폴더블 모델 위주로 정리했습니다.
| 모델 | 실제 해상도(px) | CSS 뷰포트(px) | 특징 |
|---|---|---|---|
| Galaxy S23 / S24 | 1080 x 2340 | 360 x 780 | 일반형 |
| Galaxy S24 Ultra | 1440 x 3120 | 384 x 832 | 대화면 |
| Galaxy Z Flip5 (커버) | 720 x 748 | 360 x 374 | 접힘 상태 |
| Galaxy Z Flip5 (메인) | 1080 x 2640 | 360 x 880 | 펼침 상태 |
| Galaxy Z Fold5 (커버) | 904 x 2316 | 320 x 808 | 좁고 길쭉한 화면 |
| Galaxy Z Fold5 (메인) | 1812 x 2176 | 586 x 689 | 태블릿형 |
| Galaxy A 시리즈 (보급형) | 1080 x 2400 | 360 x 800 | 가성비 모델 |
폴더블 기기는 접고 펼치는 상태에 따라 화면 크기가 완전히 달라집니다. 특히 갤럭시 폴드의 메인 화면은 태블릿에 가까운 비율이라 일반 모바일 레이아웃이 그대로 적용되면 어색하게 보입니다.
반응형 웹 미디어 쿼리 기준점
실무에서 가장 많이 쓰이는 미디어 쿼리 기준점은 다음과 같습니다.
- 320px: 가장 작은 모바일 화면 (iPhone SE 1세대 등)
- 360px ~ 393px: 일반 스마트폰 (갤럭시 S 시리즈, 아이폰 일반)
- 414px ~ 430px: 대형 스마트폰 (Pro Max, Plus 모델)
- 768px: 세로 태블릿 (아이패드 미니/일반)
- 1024px: 가로 태블릿, 작은 노트북
- 1280px 이상: 데스크톱 환경
min-width를 사용하고, 데스크톱 우선이라면 max-width를 사용합니다. 두 방식을 섞으면 디버깅이 어려워지므로 한 가지 방식으로 통일하는 편이 좋습니다.실전 활용 팁
화면 크기 목록만 안다고 해서 좋은 모바일 화면이 만들어지지는 않습니다. 실제 작업에서는 다음 사항을 함께 고려해야 합니다.
안전 영역(Safe Area) 처리
아이폰 X 이후 모델은 상단 노치와 하단 홈 인디케이터가 있어 콘텐츠가 가려질 수 있습니다. CSS에서 env(safe-area-inset-top)과 env(safe-area-inset-bottom)을 사용하면 자동으로 여백을 확보할 수 있습니다.
실제 기기 vs 시뮬레이터
크롬 개발자 도구의 디바이스 모드는 어디까지나 시뮬레이션입니다. 터치 정확도, 스크롤 관성, 가상 키보드 동작 등은 실제 기기에서 직접 확인해야 정확한 사용자 경험을 검증할 수 있습니다.
실제 기기 테스트를 빠르게 하는 방법
PC에서 만든 페이지를 휴대폰으로 빠르게 열고 싶다면 작업 중인 URL을 QR코드 생성기로 변환해 스캔하는 방법이 편리합니다. 시뮬레이터에서는 보이지 않던 실제 렌더링 차이를 즉시 확인할 수 있어 모바일 검수 시간이 크게 줄어듭니다.
모바일 화면 크기는 매년 새 모델이 출시될 때마다 조금씩 늘어나는 추세입니다. 디자인 시안은 360px 또는 375px 기준으로 잡되, 320px에서도 깨지지 않도록 최소 너비 테스트를 함께 진행하는 것을 권장합니다. 작업 전에 위 표를 한 번 훑어보고 시작하면 기기별 깨짐 사고를 미리 막을 수 있습니다.
