반응형 웹사이트를 만드는데 내 모니터 해상도가 정확히 몇인지 알아야 한다. 화면 크기에 따라 레이아웃이 어떻게 바뀌는지 테스트하고 싶다. 화면 크기 확인 도구에 접속하면 현재 화면 정보가 바로 표시된다.
왜 화면 해상도를 알아야 할까
웹 개발자라면 다양한 화면 크기에서 웹사이트가 제대로 보이는지 확인해야 한다. 디자이너와 협업할 때 정확한 픽셀 단위로 소통해야 한다. 모니터를 구매할 때 현재 모니터와 비교하려면 해상도를 알아야 한다. 화면 캡처 시 이미지 크기를 미리 파악하는 데도 필요하다.
표시되는 정보
koreaeu.kr/screen-size에 접속하면 다음 정보가 표시된다.
- 화면 해상도: 모니터 전체 픽셀 수 (예: 1920x1080)
- 브라우저 뷰포트: 실제 콘텐츠가 표시되는 영역 크기
- 기기 픽셀 비율(DPR): 레티나 디스플레이 등 고밀도 화면 여부
- 색상 심도: 표현 가능한 색상 수
화면 해상도와 뷰포트의 차이
화면 해상도는 모니터 전체 픽셀 수다. 뷰포트는 브라우저 창에서 콘텐츠가 보이는 영역이다. 브라우저 창을 최대화해도 주소창, 탭, 북마크바 등이 공간을 차지하므로 뷰포트는 화면 해상도보다 작다. 반응형 웹 개발에서는 뷰포트 크기가 더 중요하다.
반응형 테스트
브라우저 창 크기를 조절하면 뷰포트 값이 실시간으로 변한다. CSS 미디어 쿼리의 브레이크포인트가 제대로 작동하는지 확인할 수 있다. 예를 들어 768px 이하에서 모바일 레이아웃으로 바뀌어야 하는데, 창 너비를 768px 근처로 조절하면서 정확한 전환 지점을 테스트할 수 있다.
기기 픽셀 비율
레티나 디스플레이나 고해상도 스마트폰은 기기 픽셀 비율이 2 이상이다. CSS에서 width: 100px로 지정해도 실제로는 200개 이상의 물리 픽셀을 사용한다. 이미지가 흐릿하게 보이지 않으려면 2배 크기의 이미지를 준비해야 한다. 현재 기기의 픽셀 비율을 알면 이미지 최적화 전략을 세울 수 있다.
접속 환경 정보
운영체제와 브라우저 정보도 함께 표시된다. 사용자 환경을 파악하거나 버그 리포트할 때 유용하다. 고객이 문제를 겪고 있을 때 어떤 환경인지 이 페이지로 확인해달라고 요청할 수도 있다.
일반적인 해상도
FHD(1920x1080)가 가장 많이 쓰인다. QHD(2560x1440)는 고급 모니터, 4K UHD(3840x2160)는 대형 모니터나 TV에서 쓴다. 노트북은 1366x768이나 1920x1080이 흔하다. 스마트폰은 기기마다 다양하지만 대부분 세로가 더 긴 비율이다.