배경화면을 다운받으려는데 해상도 옵션이 여러 개다. 1920x1080을 골라야 하는지, 2560x1440을 골라야 하는지 내 모니터가 몇 픽셀인지 모르면 판단이 안 된다. 게임 그래픽 설정에서도 해상도를 잘못 잡으면 화면이 늘어나거나 잘려 보인다.
방법 1. 윈도우에서 확인하기
- 바탕화면에서 마우스 우클릭 → 디스플레이 설정 선택
- 아래로 스크롤하면 디스플레이 해상도 항목이 보인다
- "1920 x 1080" 같은 숫자가 현재 설정된 해상도다
듀얼 모니터를 쓰고 있다면 상단에서 모니터 번호를 클릭해서 각각 확인할 수 있다. "권장"이라고 표시된 해상도가 모니터의 기본(네이티브) 해상도다.
방법 2. 맥에서 확인하기
좌측 상단 Apple 메뉴 → 이 Mac에 관하여 → 디스플레이 탭을 누르면 해상도와 함께 Retina 여부까지 표시된다. 맥은 논리 해상도와 물리 해상도가 다른 경우가 많으니, 실제 렌더링 해상도를 알고 싶으면 시스템 정보에서 "하드웨어 > 그래픽/디스플레이" 항목을 열어봐야 한다.
방법 3. 브라우저에서 바로 확인하기
운영체제 설정을 열기 번거롭거나, 모바일에서 확인하고 싶을 때는 웹 기반 도구가 편하다. 화면 크기 측정 도구를 열면 브라우저 창 크기, 모니터 해상도, DPR(디바이스 픽셀 비율)이 한 화면에 실시간으로 표시된다. 창 크기를 드래그해서 줄이면 숫자가 바로 바뀌니까 반응형 테스트용으로도 쓸 만하다.
| 측정 항목 | 의미 | 확인 가능 여부 |
|---|---|---|
| 화면 해상도 | 모니터의 총 픽셀 수 | PC/모바일 모두 |
| 브라우저 창 크기 | 실제 콘텐츠가 보이는 영역 | PC/모바일 모두 |
| DPR | 물리 픽셀 ÷ CSS 픽셀 비율 | PC/모바일 모두 |
| 색상 깊이 | 표현 가능한 색상 범위 | PC/모바일 모두 |
해상도와 뷰포트, 뭐가 다른가
해상도는 모니터 전체의 픽셀 수이고, 뷰포트는 브라우저에서 웹 페이지가 실제로 그려지는 영역이다. 같은 1920x1080 모니터라도 브라우저 탭, 북마크바, 작업표시줄을 빼면 뷰포트는 그보다 작다. 웹 개발할 때 미디어 쿼리 기준을 잡으려면 해상도가 아니라 뷰포트 크기를 알아야 한다.
TIP 스마트폰은 물리 해상도와 논리 해상도가 크게 다르다. 예를 들어 아이폰 15 Pro의 물리 해상도는 2556x1179지만, CSS 기준 뷰포트는 393x852다. DPR이 3이기 때문이다. 모바일 반응형 작업할 때 이 차이를 무시하면 레이아웃이 깨질 수 있다.
자주 쓰는 해상도 기준
- 1920 x 1080 (FHD)
- 가장 보편적인 해상도. 24~27인치 모니터에서 표준처럼 쓰인다.
- 2560 x 1440 (QHD)
- 27인치 이상 모니터에서 선명도가 올라간다. 게이밍, 영상 편집에 인기.
- 3840 x 2160 (4K UHD)
- 32인치 이상에서 진가를 발휘한다. 텍스트와 사진이 또렷하지만 GPU 부담이 크다.
해상도를 정확히 파악해두면 배경화면 선택부터 외부 모니터 연결 설정까지 불필요한 시행착오를 줄일 수 있다.