화면크기 방법을 검색하는 분들은 대체로 두 가지 상황에 놓여 있습니다. 지금 쓰는 모니터나 스마트폰의 실제 해상도가 궁금하거나, 웹사이트가 기기마다 다르게 보이는 원인을 확인하려는 경우입니다. 두 상황은 비슷해 보이지만 실제로 확인해야 할 값이 서로 다릅니다.
화면크기, 해상도, 뷰포트는 서로 다른 값입니다
용어부터 정리해야 헛수고를 줄일 수 있습니다. 세 가지는 자주 혼용되지만 측정 대상이 완전히 다릅니다.
- 화면 크기(인치): 패널 대각선의 물리적 길이입니다. 27인치, 6.1인치처럼 표기하며 선명도와는 직접적인 관련이 없습니다.
- 해상도(픽셀): 1920x1080처럼 가로세로 픽셀 수를 뜻합니다. 같은 27인치라도 FHD와 4K는 표현할 수 있는 정보량이 네 배 차이납니다.
- 뷰포트(CSS 픽셀): 브라우저가 웹페이지를 실제로 그리는 영역입니다. 주소창, 스크롤바, 배율 설정 때문에 해상도보다 항상 작게 잡힙니다.
참고: 아이폰 15의 해상도는 1179x2556이지만 CSS 뷰포트 너비는 393px입니다. 기기 픽셀 비율(DPR)이 3이기 때문이며, 웹 화면을 설계할 때 기준이 되는 숫자는 뒤쪽인 393px입니다.
운영체제별 화면크기 확인 방법
기기 자체의 해상도는 설정 화면에서 몇 초 만에 확인할 수 있습니다.
- 윈도우 11/10: 바탕화면에서 마우스 오른쪽 버튼을 누르고 디스플레이 설정으로 들어가면 해상도와 배율(100%, 125% 등)이 함께 표시됩니다. 실행창(Win+R)에 dxdiag를 입력하면 모니터 이름과 현재 표시 모드까지 볼 수 있습니다.
- 맥OS: 왼쪽 위 사과 메뉴에서 이 Mac에 관하여, 자세한 정보, 디스플레이 순으로 이동합니다. 시스템 설정의 디스플레이 항목에서 옵션 키를 누른 채 클릭하면 숨겨진 해상도 목록도 나타납니다.
- 안드로이드: 설정, 디스플레이, 화면 해상도 순서로 들어가면 FHD+나 WQHD+ 같은 선택 가능한 모드가 보입니다. 제조사에 따라 항목 위치가 조금씩 다릅니다.
- 아이폰과 아이패드: 기기 설정에는 해상도 항목 자체가 없습니다. 모델명을 확인해 제조사 사양표를 찾거나, 아래 브라우저 측정 방법을 쓰는 편이 훨씬 빠릅니다.
주의: 윈도우에서 배율을 125%로 설정하면 1920px 모니터의 웹 뷰포트는 1536px로 계산됩니다. 반응형 레이아웃이 예상과 다른 구간에서 바뀐다면 해상도보다 배율 설정을 먼저 의심해야 합니다.
브라우저에서 뷰포트를 재는 세 가지 방법
웹 작업이 목적이라면 결국 필요한 값은 브라우저 뷰포트입니다. 상황에 맞는 방법을 골라 쓰면 됩니다.
- 개발자 도구: F12를 누른 뒤 창 크기를 조절하면 오른쪽 위에 현재 크기가 잠깐 표시됩니다. 기기 툴바(Ctrl+Shift+M)를 켜면 주요 기기 프리셋으로 전환해 비교할 수 있습니다.
- 콘솔 명령: 콘솔에 window.innerWidth와 window.innerHeight를 입력하면 뷰포트 값이, screen.width를 입력하면 기기 화면 값이 나옵니다. window.devicePixelRatio까지 확인하면 고해상도 이미지를 따로 준비할지 판단할 수 있습니다.
- 온라인 측정 페이지: 개발자 도구를 열기 번거로운 모바일이나 다른 사람의 PC에서는 접속만 하면 값을 보여주는 도구가 편합니다. 원격으로 상황을 파악해야 할 때 화면 크기 확인 페이지 주소를 알려 주고 화면을 캡처해 달라고 요청하면 소통 시간이 크게 줄어듭니다.
팁: CSS만으로도 확인할 수 있습니다. 미디어 쿼리 구간마다 body의 배경색이나 가상 요소 문구를 다르게 지정해 두면, 지금 어떤 구간이 적용 중인지 눈으로 바로 구분됩니다. 작업이 끝나면 해당 코드만 지우면 됩니다.
측정값을 반영하는 브레이크포인트 기준
확인한 숫자를 어디에 맞춰야 할지 막막하다면 아래 구간을 출발점으로 삼으면 됩니다. 국내 트래픽은 모바일 비중이 높아 작은 화면부터 설계하는 방식이 안전합니다.
| 구간 | 기준 폭 | 대표 기기 | 설계 포인트 |
|---|---|---|---|
| 모바일 | 360~430px | 갤럭시, 아이폰 | 1단 배치, 터치 영역 44px 이상 |
| 태블릿 | 768~834px | 아이패드, 갤럭시탭 | 2단 배치, 가로 모드 별도 점검 |
| 노트북 | 1280~1440px | 13~14인치 노트북 | 배율 125% 환경 필수 확인 |
| 데스크톱 | 1920px 이상 | 모니터, 4K 디스플레이 | 본문 최대 폭 제한으로 가독성 확보 |
브레이크포인트는 특정 기기를 흉내 내는 숫자가 아니라, 레이아웃이 실제로 불편해지는 지점에 찍는 표시입니다.
확인은 했는데 화면이 이상할 때
값을 정확히 쟀는데도 결과가 어긋난다면 아래 항목을 순서대로 점검해 보면 원인이 대부분 드러납니다.
- meta viewport 태그가 빠져 있지 않은지 확인합니다. 이 태그가 없으면 모바일 브라우저가 폭을 980px로 가정해 축소해 버립니다.
- 브라우저 확대 배율이 100%인지 봅니다. Ctrl+0으로 초기화하면 됩니다.
- 모바일 주소창이 숨겨질 때 세로 길이가 달라지므로, 전체 화면 높이는 vh 대신 dvh 단위를 쓰는 편이 안정적입니다.
- 가로 스크롤이 생긴다면 특정 요소의 고정 폭이나 padding이 화면을 넘긴 경우가 많습니다.
정리하면 화면크기 확인은 인치, 해상도, 뷰포트 중 무엇이 필요한지 먼저 정하는 데서 시작합니다. 기기 사양이 궁금하면 운영체제 설정을, 웹 레이아웃이 목적이면 브라우저 뷰포트 값을 기준으로 삼으면 됩니다.