PC에서 모바일 홈페이지 프리뷰 미리보기
반응형 웹을 만들 때 필요한 건 기기 해상도가 아니라 CSS 픽셀 뷰포트, 그리고 주소창을 뺀 실제로 보이는 높이입니다. 세 숫자가 어떻게 다르고 무엇을 기준으로 삼아야 하는지 정리했습니다.
최종 정리 2026년 7월
해상도 · CSS 픽셀 · 실제 뷰포트는 전부 다른 숫자입니다
iPhone 15의 화면 해상도는 1179 × 2556입니다. 하지만 CSS에서 @media (max-width: 400px)가
반응하는 값은 393입니다. 이 둘의 비율이 기기 픽셀 비율(DPR)이고, iPhone 15는 3배입니다.
- 물리 해상도 — 1179 × 2556. 이미지 준비할 때만 씁니다.
- CSS 픽셀 뷰포트 — 393 × 852. 미디어 쿼리가 보는 값입니다.
- 실제 콘텐츠 영역 — 393 × 710. Safari 상태바·주소창을 뺀, 사용자가 스크롤 없이 보는 영역입니다.
레이아웃 분기는 두 번째 값으로 잡고, "첫 화면에 무엇이 보이는가"는 세 번째 값으로 검증해야 합니다. 히어로 영역과 CTA 버튼이 잘리는 사고는 대부분 이 세 번째를 안 봐서 생깁니다.
아이폰 뷰포트 크기 (Safari 기준)
| 기기 | CSS 픽셀 뷰포트 | DPR | Safari 콘텐츠 영역 |
|---|---|---|---|
| iPhone 15 / 15 Pro | 393 × 852 | 3x | 393 × 710 |
| iPhone 15 Plus / 15 Pro Max | 430 × 932 | 3x | 430 × 790 |
| iPhone 14 | 390 × 844 | 3x | 390 × 714 |
| iPhone SE (3세대) | 375 × 667 | 2x | 375 × 598 |
| iPad mini | 744 × 1133 | 2x | 744 × 1061 |
| iPad Pro 11" | 834 × 1194 | 2x | 834 × 1122 |
세로 방향 기준. iOS 15부터 Safari 주소창이 화면 하단에 놓입니다.
Safari가 가져가는 높이
아이폰에서 웹페이지가 실제로 쓰는 높이는 화면 전체가 아닙니다. 위아래로 다음이 빠집니다.
- 상단 상태바 — 다이나믹 아일랜드 기기 59px, 노치 기기 47px, 홈버튼 기기 20px
- 하단 주소창 — 49px
- 홈 인디케이터 — 34px (홈버튼 기기는 없음)
그래서 iPhone 15는 852에서 59 + 83을 뺀 710px이 첫 화면입니다.
스크롤을 내리면 주소창이 접히면서 높이가 늘어나므로, 100vh를 쓰면 화면이 튀는 현상이 생깁니다.
100dvh를 쓰거나 첫 화면 기준으로 설계하세요.
갤럭시 뷰포트 크기 (구글 앱 인앱 브라우저 기준)
안드로이드에서는 링크를 어디서 여느냐에 따라 화면이 달라집니다. 검색 유입의 상당수는 크롬 앱이 아니라 구글 앱 안의 인앱 브라우저에서 열립니다. 상단에 툴바가 하나 더 붙기 때문에 세로 공간이 더 줄어듭니다.
| 기기 | CSS 픽셀 뷰포트 | DPR | 구글 앱 콘텐츠 영역 |
|---|---|---|---|
| Galaxy S24 / S23 | 360 × 780 | 3x | 360 × 676 |
| Galaxy S24+ | 384 × 832 | 3x | 384 × 728 |
| Galaxy S24 Ultra | 384 × 824 | 3.5x | 384 × 720 |
| Galaxy Z Flip5 (펼침) | 360 × 880 | 3x | 360 × 776 |
| Galaxy Z Fold5 (펼침) | 673 × 841 | 2.6x | 673 × 737 |
| Galaxy Z Fold5 (커버) | 344 × 882 | 2.6x | 344 × 778 |
| Pixel 8 | 412 × 915 | 2.6x | 412 × 811 |
상단 상태바 24px + 인앱 브라우저 툴바 56px, 하단 제스처 바 24px 기준.
기기를 여러 개 켜면 이렇게 나란히 붙습니다. 브라우저 UI를 켜면 주소창을 뺀 실제 첫 화면이 보입니다.
내 사이트를 이 크기로 확인하는 법
- 확인할 주소를 입력합니다.
- 비교할 기기를 여러 개 고르면 나란히 배치됩니다.
- 브라우저 UI 옵션을 켜면 주소창을 뺀 실제 첫 화면이 보입니다.
- 기기별 전체화면 버튼으로 하나만 크게 볼 수 있습니다.
반응형 점검 체크리스트
- 360px에서 가로 스크롤이 없는가 — 표·코드블록·긴 URL이 주범입니다.
- 첫 화면에 핵심 메시지와 CTA가 들어오는가 — 710px(아이폰), 676px(갤럭시)로 확인합니다.
- 터치 영역이 44px 이상인가 — 애플 HIG 권장값입니다.
- 본문이 16px 이상인가 — 그 미만이면 iOS에서 입력 시 자동 확대가 일어납니다.
100dvh를 쓰는가 —100vh는 주소창이 접힐 때 어긋납니다.- 폴더블에서 깨지지 않는가 — 673px은 태블릿 분기에 걸리기 쉬운 애매한 폭입니다.
자주 묻는 질문
왜 개발자 도구의 기기 목록과 숫자가 다른가요?
브라우저 개발자 도구는 대개 CSS 픽셀 뷰포트(예: 393 × 852)만 보여주고, 실제 기기의 주소창·상태바가 차지하는 높이는 빼지 않습니다. 그래서 "첫 화면에 뭐가 보이는지"를 판단할 때 실제보다 낙관적인 결과가 나옵니다.
표의 콘텐츠 영역 값은 어떻게 나온 건가요?
실기기 측정값이 아니라 플랫폼 UI 규격에서 도출한 값입니다. iOS는 상태바(59/47/20) + 주소창 49 + 홈 인디케이터 34, 안드로이드는 상태바 24 + 인앱 브라우저 툴바 56 + 제스처 바 24를 기준으로 계산했습니다. 기기와 OS 버전에 따라 몇 px 차이가 날 수 있어, 도구에서 실기기 측정값으로 덮어쓸 수 있게 해두었습니다.
왜 어떤 사이트는 미리보기에 안 뜨나요?
서버가 X-Frame-Options 또는 CSP frame-ancestors로 다른 페이지에 삽입되는 것을 막고 있기 때문입니다. 네이버·구글·유튜브 등 대형 서비스가 여기에 해당합니다. Device Preview는 차단이 감지되면 서버 프록시로 자동 전환해 대부분의 경우 정상적으로 보여줍니다.
User-Agent로 모바일을 판별하는 사이트도 테스트되나요?
브라우저는 iframe 안의 User-Agent를 바꿀 수 없습니다. 다만 프록시로 열면 서버가 기기에 맞는 User-Agent(아이폰은 Safari, 갤럭시는 구글 앱)를 대신 보내므로 UA 기반 분기도 확인할 수 있습니다.
갤럭시는 왜 크롬이 아니라 구글 앱 기준인가요?
검색 결과에서 링크를 누르면 크롬 앱이 아니라 구글 앱 내부 브라우저가 열리는 경우가 많습니다. 툴바가 하나 더 붙어 세로 공간이 더 좁으므로, 검색 유입을 기준으로 보면 더 빡빡한 이쪽이 안전한 기준입니다.