내 모니터 해상도 확인법과 화면 크기가 중요한 이유

외부 모니터를 연결했는데 글씨가 흐릿하다. 설정에서 해상도를 바꿔보려는데 현재 해상도가 얼마인지, 모니터가 지원하는 최대 해상도가 뭔지도 모르겠다. 화면 크기를 정확히 아는 것부터 시작해야 한다.

해상도, 뷰포트, DPR의 차이

해상도 (Screen Resolution)

모니터가 물리적으로 표현할 수 있는 총 픽셀 수다. 1920×1080이면 가로 1,920개, 세로 1,080개의 점으로 화면을 구성한다.

뷰포트 (Viewport)

브라우저에서 웹 페이지가 표시되는 영역의 크기다. 주소창, 탭바, 작업표시줄을 제외한 실제 콘텐츠 영역이라서 해상도보다 항상 작다.

DPR (Device Pixel Ratio)

CSS 1픽셀을 표현하는 데 실제 몇 개의 물리 픽셀을 쓰는지 나타내는 비율이다. 레티나 디스플레이는 DPR이 2 또는 3이어서 같은 크기에 더 선명한 화면을 보여준다.

기기별 해상도 정리

DPR이 2인 기기에서 1920×1080 이미지를 올리면 실제로는 960×540 CSS 픽셀 크기로 표시된다. 선명하게 보이려면 표시 크기의 2배 해상도 이미지를 준비해야 한다.

내 화면 크기를 바로 확인하는 법

화면 크기 확인 도구에 접속하면 모니터 해상도, 브라우저 창 크기, DPR, 색상 깊이, 터치 지원 여부가 한 화면에 나온다. 브라우저 창 크기를 바꾸면 값이 실시간으로 변하기 때문에 반응형 웹을 테스트할 때도 쓸 수 있다.

화면 크기가 중요한 상황

• 모니터 구매: 기존 모니터 해상도를 확인하고 업그레이드 대상을 정할 때. FHD(1080p)에서 QHD(1440p)로 바꾸면 작업 공간이 1.8배 넓어진다.
• 반응형 웹 개발: 브레이크포인트를 정할 때 실제 기기의 뷰포트 크기를 알아야 한다. 768px 이하를 모바일로 잡는 이유는 iPad의 뷰포트 너비가 768px이기 때문이다.
• 디자인 시안 작업: 디자이너에게 "1440px 기준으로 시안 부탁합니다"라고 할 때, 그 1440px이 어떤 기기를 대상으로 하는지 근거가 있어야 한다.
• 화면 캡처/녹화: 특정 해상도로 캡처해야 할 때 현재 창 크기를 정확히 맞춰야 한다.

TIP Windows에서 디스플레이 배율을 150%로 설정하면 4K 모니터(3840×2160)의 CSS 뷰포트가 2560×1440이 된다. 화면이 선명해지는 대신 작업 공간은 줄어드는 트레이드오프가 있다. 배율을 조절해서 본인에게 맞는 균형을 찾는 게 좋다.

모니터 설정을 바꿀 때, 반응형 웹을 만들 때, 외부 모니터를 연결할 때. 화면 크기를 정확히 아는 건 그 다음 단계를 결정하는 출발점이다.