내 모니터 해상도가 몇인지 궁금하면 여기서 바로 확인해보자

모니터 새로 샀는데 해상도가 맞는 건지 모르겠다

얼마 전에 27인치 모니터를 새로 샀다. 상품 설명에는 QHD(2560x1440)라고 적혀 있었는데, 막상 설치하고 나니 진짜 그 해상도로 나오고 있는 건지 확인하고 싶어졌다. Windows 설정에서 디스플레이 정보를 찾아보려니 메뉴를 몇 번이나 들어가야 하고, 배율 설정이랑 헷갈려서 정확한 수치를 보기가 좀 복잡했다.

그래서 간단하게 확인할 수 있는 방법을 찾다가 화면 크기 확인 사이트를 발견했다. 그냥 접속만 하면 현재 모니터 해상도, 브라우저 창 크기, DPR(디바이스 픽셀 비율)까지 한 화면에 쫙 나온다. 설정 메뉴 뒤적거릴 필요가 없어서 너무 편했다.

화면 해상도와 브라우저 뷰포트, 뭐가 다를까

여기서 잠깐 헷갈릴 수 있는 개념을 정리하고 가자. 화면 해상도는 모니터 전체의 픽셀 수다. 1920x1080이면 가로 1920개, 세로 1080개의 픽셀로 이루어진 거다. 반면 브라우저 뷰포트는 웹 페이지가 실제로 보이는 영역의 크기다. 브라우저 주소창, 탭 바, 즐겨찾기 바 같은 UI를 빼고 순수하게 웹 콘텐츠가 표시되는 공간이라고 보면 된다.

그래서 모니터 해상도가 1920x1080이어도 브라우저 뷰포트는 그보다 작다. 특히 웹 디자이너나 프론트엔드 개발자는 뷰포트 크기를 기준으로 반응형 디자인의 브레이크포인트를 설정하기 때문에, 해상도보다 뷰포트가 더 실질적으로 중요한 수치다.

접속만 하면 되는 초간단 사용법

사용법이라고 할 것도 없다. 그냥 사이트에 들어가면 끝이다. 별도로 뭘 클릭하거나 입력할 필요 없이, 접속하는 순간 현재 기기의 화면 정보가 자동으로 표시된다. 화면 해상도, 브라우저 뷰포트 크기, DPR, 색상 깊이 같은 정보가 깔끔하게 정리되어 나온다.

재미있는 건 브라우저 창 크기를 마우스로 드래그해서 바꾸면 뷰포트 수치가 실시간으로 따라 변한다는 거다. 반응형 디자인 작업할 때 "지금 내 브라우저 폭이 정확히 몇 픽셀이지?" 싶을 때 이 사이트를 옆에 띄워놓으면 바로바로 확인할 수 있다.

DPR이 뭔지 알면 이미지가 왜 흐릿한지 이해된다

DPR(Device Pixel Ratio)은 CSS 1픽셀이 실제 물리적 픽셀 몇 개에 해당하는지를 나타내는 수치다. 일반 모니터는 보통 DPR이 1이고, 맥북 레티나 디스플레이는 2, 최신 스마트폰은 3이 넘는 경우도 있다.

이게 왜 중요하냐면, DPR이 2인 화면에서 100x100 픽셀 이미지를 보여주면 실제로는 200x200 물리적 픽셀 공간에 표시되기 때문에 이미지가 흐릿하게 보일 수 있다. 그래서 고해상도 화면에서는 2배, 3배 크기의 이미지를 준비해야 선명하게 보인다. 화면 크기 확인 도구에서 DPR을 확인하면 이미지를 몇 배로 준비해야 하는지 바로 판단할 수 있다.

웹 디자이너라면 이렇게 활용해보자

반응형 디자인을 할 때 보통 768px, 1024px, 1280px, 1440px 같은 브레이크포인트를 설정한다. 근데 이 수치가 실제 사용자의 뷰포트와 어떻게 대응되는지 감이 안 올 때가 있다. 이럴 때 이 도구를 열어놓고 브라우저 창을 줄여가면서 "768px이 여기쯤이구나" 하고 체감할 수 있다.

또 클라이언트에게 "고객님 모니터 해상도가 어떻게 되세요?"라고 물어야 할 때가 있는데, IT에 익숙하지 않은 분들은 확인 방법을 모르는 경우가 많다. 이럴 때 이 사이트 링크를 보내드리면 접속만으로 바로 확인할 수 있으니까 소통이 훨씬 수월해진다.

모바일에서도 확인할 수 있다

PC 모니터뿐 아니라 스마트폰이나 태블릿에서도 접속하면 해당 기기의 화면 정보가 표시된다. 내 스마트폰의 뷰포트가 몇인지, DPR이 얼마인지 궁금할 때 유용하다. 요즘 모바일 퍼스트 디자인이 대세인 만큼, 모바일 뷰포트 크기를 정확히 아는 건 꽤 중요하다.

특히 모바일 웹앱을 개발할 때 iOS Safari와 Android Chrome의 뷰포트가 미묘하게 다른 경우가 있는데, 직접 각 기기에서 접속해서 확인하면 "왜 이 기기에서만 레이아웃이 깨지는 거지?"의 원인을 찾는 실마리가 되기도 한다.

Windows 배율 설정과 해상도의 관계

Windows에서 디스플레이 배율을 125%나 150%로 설정하는 분들이 많다. 특히 4K 모니터를 쓰면서 100%로 쓰면 글자가 너무 작으니까 배율을 올리는 건데, 이 배율이 브라우저가 인식하는 뷰포트 크기에 영향을 준다.

예를 들어 3840x2160(4K) 모니터에서 배율 150%를 설정하면, 브라우저가 인식하는 뷰포트는 대략 2560x1440쯤 된다. 즉 물리적 해상도와 CSS 해상도가 달라지는 거다. 이런 차이가 디자인이나 개발에서 혼란을 일으킬 수 있는데, 이 도구로 확인하면 현재 실제로 어떤 수치로 인식되는지 명확하게 알 수 있다.

결론: 브라우저 하나로 화면 정보 완전 파악

모니터 해상도, 뷰포트 크기, DPR 확인은 별도의 프로그램이나 복잡한 설정 메뉴 없이도 가능하다. koreaeu.kr 화면 크기 확인 사이트에 접속만 하면 현재 기기의 모든 화면 정보가 한눈에 보인다. 웹 디자이너, 개발자는 물론이고 새 모니터를 사서 해상도가 맞는지 확인하고 싶은 일반 사용자에게도 추천한다. 링크 하나 저장해두면 언젠가 반드시 쓸 일이 온다.