무료 화면크기 확인이 필요한 순간은 생각보다 자주 찾아옵니다. 새 모니터를 연결했을 때, 만든 페이지가 특정 기기에서만 깨질 때, 발표 자료나 이미지의 비율을 맞춰야 할 때 모두 화면의 실제 크기와 해상도를 알아야 다음 단계로 넘어갈 수 있습니다. 그런데 화면 크기라는 말은 상황에 따라 전혀 다른 값을 가리키기 때문에, 숫자를 확인하기 전에 무엇을 확인해야 하는지부터 정리하는 편이 훨씬 빠릅니다.
화면크기, 해상도, 뷰포트는 서로 다른 값입니다
같은 노트북을 두고도 어떤 사람은 15.6인치라고 하고, 어떤 사람은 1920x1080이라고 하며, 개발자는 뷰포트가 1536px이라고 말합니다. 셋 다 맞는 말이지만 측정 대상이 서로 다릅니다.
- 물리적 화면 크기: 패널의 대각선 길이를 인치로 표시한 값입니다. 27인치, 15.6인치처럼 표기하며 실제 가로세로 길이는 화면 비율에 따라 달라집니다.
- 해상도: 화면이 표현하는 가로와 세로의 픽셀 수입니다. 1920x1080, 2560x1440처럼 표기합니다. 같은 27인치라도 해상도는 다를 수 있습니다.
- 뷰포트: 브라우저가 실제로 콘텐츠를 그리는 영역의 크기입니다. 주소창, 스크롤바, 확대 배율의 영향을 받기 때문에 해상도보다 작게 나옵니다.
- 픽셀 비율(DPR): 물리 픽셀과 CSS 픽셀의 비율입니다. DPR이 2인 화면에서는 CSS 기준 400px 요소가 물리적으로는 800픽셀로 그려집니다.
무료로 화면크기를 확인하는 5가지 방법
별도 프로그램을 설치하지 않아도 확인할 수 있는 방법이 여러 가지 있습니다. 확인하려는 값이 무엇인지에 따라 골라 쓰면 됩니다.
- 운영체제 설정에서 확인: 윈도우는 설정에서 시스템, 디스플레이, 디스플레이 고급 설정 순서로 들어가면 해상도와 주사율을 볼 수 있고, 맥은 시스템 설정의 디스플레이 항목에서 확인합니다. 모니터가 지원하는 최대 해상도와 현재 적용된 배율을 함께 보여주는 것이 장점입니다.
- 브라우저 개발자 도구: F12를 누른 뒤 반응형 모드로 전환하면 창 크기를 조절할 때마다 현재 뷰포트 크기가 실시간으로 표시됩니다. 브레이크포인트가 정확히 어디에서 바뀌는지 확인할 때 가장 정확한 방법입니다.
- 자바스크립트 한 줄 입력: 콘솔에
window.innerWidth,window.innerHeight,screen.width,window.devicePixelRatio를 입력하면 뷰포트와 화면 해상도, 픽셀 비율을 한 번에 알 수 있습니다. - 웹 기반 확인 도구 이용: 접속만 하면 현재 기기의 해상도와 뷰포트, 픽셀 비율을 즉시 보여줍니다. 스마트폰이나 태블릿처럼 개발자 도구를 열기 어려운 기기에서 특히 쓸모가 있습니다. 여러 기기의 값을 빠르게 비교하고 싶다면 화면 크기 확인처럼 브라우저에서 바로 결과를 보여주는 방식이 편리합니다.
- 모델명으로 사양 검색: 물리적 인치, 화면 비율, 패널 종류처럼 소프트웨어로는 알 수 없는 정보는 제조사 사양서가 정확합니다. 모니터 뒷면 라벨이나 설정 화면에 표시된 모델명을 확인해 검색하면 됩니다.
기기별 대표 화면크기와 해상도 비교
자주 마주치는 기기들의 값을 정리하면 아래와 같습니다. CSS 기준 폭은 반응형 레이아웃을 설계할 때 실제로 쓰이는 숫자입니다.
| 기기 구분 | 대표 해상도 | CSS 기준 폭 | 픽셀 비율 |
|---|---|---|---|
| 소형 스마트폰 | 1125x2436 | 375px | 3배 |
| 대형 스마트폰 | 1290x2796 | 430px | 3배 |
| 태블릿 10인치대 | 1536x2048 | 768px | 2배 |
| 노트북 13~14인치 | 2560x1600 | 1280~1512px | 2배 |
| 데스크톱 FHD | 1920x1080 | 1920px | 1배 |
| 데스크톱 QHD | 2560x1440 | 2560px | 1배 |
확인한 값을 실제 작업에 적용하는 법
숫자를 확인했다면 목적에 맞게 쓰는 단계가 남았습니다. 웹페이지를 만든다면 CSS 기준 폭을 중심으로 브레이크포인트를 잡습니다. 보통 480px 이하를 소형 모바일, 768px 안팎을 태블릿, 1024px 이상을 데스크톱으로 구분하며, 기기 이름이 아니라 콘텐츠가 어색해지는 지점에서 나누는 편이 오래 유지됩니다.
이미지를 준비할 때는 픽셀 비율을 반드시 고려해야 합니다. CSS 기준 400px 자리에 400픽셀 이미지를 넣으면 DPR이 2인 화면에서 흐리게 보입니다. 표시 크기의 두 배 해상도로 준비하고 용량은 압축으로 줄이는 방식이 일반적입니다.
모니터를 새로 고를 때는 인치와 해상도를 함께 봐야 합니다. 27인치에 1920x1080을 쓰면 픽셀이 도드라져 보이고, 24인치에 2560x1440을 쓰면 글자가 작아 배율 조정이 필요합니다. 일반적으로 24인치는 FHD, 27인치는 QHD, 32인치 이상은 4K가 무난한 조합으로 꼽힙니다.
자주 묻는 질문
해상도를 최대로 올리면 항상 좋은가요? 그렇지 않습니다. 해상도를 올리면 작업 공간은 넓어지지만 글자와 아이콘이 작아집니다. 권장 해상도를 유지한 채 배율로 가독성을 조절하는 편이 화면이 선명합니다.
스마트폰 화면 크기는 어떻게 확인하나요? 설정 화면에는 해상도가 표시되지 않는 기기가 많습니다. 브라우저에서 확인 도구에 접속하거나 모델명으로 사양을 검색하는 방법이 확실합니다.
뷰포트 값이 계속 바뀌는데 정상인가요? 정상입니다. 모바일 브라우저는 스크롤 방향에 따라 주소창이 숨겨지거나 나타나면서 높이가 달라집니다. 전체 화면 높이가 필요하다면 CSS의 dvh 단위를 쓰는 편이 안정적입니다.