화면 크기 확인 - 내 모니터 해상도, DPI, 뷰포트 확인 완벽 가이드
현재 사용 중인 디스플레이의 해상도, 뷰포트, DPI, 화면 비율 등 모든 정보를 확인하는 방법과 활용법을 총정리합니다.
화면 크기 확인이 필요한 이유
방송 화면 설정, 웹 디자인, 게임 해상도 최적화, 영상 편집 등 다양한 작업에서 현재 모니터의 정확한 스펙을 알아야 최적의 결과물을 만들 수 있습니다. 화면 크기 확인 도구에 접속하면 현재 디스플레이의 해상도, 뷰포트 크기, DPI, 화면 비율, 색상 깊이 등 모든 정보를 한눈에 확인할 수 있습니다.
특히 인터넷 방송을 하는 BJ라면 OBS Studio의 캔버스 해상도, 출력 해상도, 비트레이트 등을 모니터 스펙에 맞게 설정해야 시청자에게 최적의 화질을 제공할 수 있습니다. 웹 개발자라면 다양한 해상도에서의 반응형 디자인 테스트에 필수적입니다.
해상도의 이해
주요 해상도 표준
| 명칭 | 해상도 | 화면 비율 | 총 픽셀 수 |
|---|---|---|---|
| HD (720p) | 1280 × 720 | 16:9 | 약 92만 |
| Full HD (1080p) | 1920 × 1080 | 16:9 | 약 207만 |
| QHD (1440p) | 2560 × 1440 | 16:9 | 약 368만 |
| 4K UHD (2160p) | 3840 × 2160 | 16:9 | 약 829만 |
| UWQHD | 3440 × 1440 | 21:9 | 약 495만 |
| 5K | 5120 × 2880 | 16:9 | 약 1475만 |
네이티브 해상도와 스케일링
네이티브 해상도는 모니터가 물리적으로 가진 실제 픽셀 수입니다. LCD/OLED 모니터에서는 네이티브 해상도로 사용해야 가장 선명한 화면을 볼 수 있습니다. 다른 해상도로 설정하면 스케일링이 발생하여 텍스트나 이미지가 흐릿해질 수 있습니다.
HiDPI와 Retina 디스플레이
애플의 Retina 디스플레이나 Windows의 HiDPI 모니터는 물리적 해상도가 높지만, 운영체제에서 스케일링을 적용합니다. 예를 들어 MacBook Pro 14인치의 실제 해상도는 3024×1964이지만, 기본 스케일링으로 인해 논리적 해상도는 약 1512×982로 표시됩니다.
뷰포트와 CSS 픽셀
뷰포트 크기란?
뷰포트(viewport)는 브라우저에서 웹 페이지가 표시되는 실제 영역의 크기입니다. 화면 해상도에서 브라우저 UI(주소창, 탭, 북마크바, 스크롤바 등)를 제외한 크기이므로 화면 해상도보다 항상 작습니다.
물리적 픽셀 vs CSS 픽셀
| 구분 | 물리적 픽셀 | CSS 픽셀 (논리적) |
|---|---|---|
| 정의 | 모니터의 실제 화소 수 | 브라우저가 사용하는 논리적 단위 |
| 일반 모니터 (100%) | 1920×1080 | 1920×1080 |
| Windows 150% 스케일링 | 2560×1440 | 약 1707×960 |
| Retina 2x (MacBook) | 2880×1800 | 1440×900 |
웹 개발에서 CSS의 px 단위는 CSS 픽셀을 의미합니다. 화면 해상도 확인 도구에서 물리적 해상도와 CSS 뷰포트 크기를 동시에 확인할 수 있습니다.
Device Pixel Ratio (DPR)
DPR은 물리적 픽셀과 CSS 픽셀의 비율입니다. 일반 모니터는 DPR 1, Retina 디스플레이는 DPR 2, 일부 플래그십 스마트폰은 DPR 3~4입니다. 이미지를 선명하게 표시하려면 DPR의 2배 이상 크기의 이미지를 사용해야 합니다.
DPI와 PPI 이해하기
PPI (Pixels Per Inch)
PPI는 인치당 픽셀 수로, 디스플레이의 선명도를 나타냅니다. 같은 해상도라도 화면이 작을수록 PPI가 높아져 더 선명합니다. 27인치 FHD는 약 82PPI, 27인치 4K는 약 163PPI입니다.
PPI 계산 공식
PPI = √(가로 해상도² + 세로 해상도²) ÷ 대각선 인치. 예를 들어 24인치 FHD 모니터: √(1920² + 1080²) ÷ 24 = 2203.36 ÷ 24 ≈ 91.79 PPI입니다.
DPI vs PPI
DPI(Dots Per Inch)는 원래 프린터 출력의 점 밀도를 나타내는 용어이고, PPI(Pixels Per Inch)가 디스플레이에 더 정확한 용어입니다. 하지만 실무에서는 혼용되는 경우가 많습니다.
화면 정보 확인 방법
온라인 도구 사용 (권장)
브라우저에서 화면 크기 확인 사이트에 접속하면 별도 설치 없이 즉시 모든 정보를 확인할 수 있습니다. 해상도, 뷰포트, DPR, 색상 깊이, 화면 방향 등을 한 화면에서 볼 수 있어 가장 편리합니다.
운영체제별 확인 방법
Windows: 바탕화면 우클릭 → 디스플레이 설정 → 디스플레이 해상도. macOS: 시스템 설정 → 디스플레이. Linux: 설정 → 디스플레이 또는 터미널에서 xrandr 명령.
브라우저 개발자 도구
Chrome 개발자 도구(F12)에서 디바이스 모드를 활성화하면 다양한 해상도를 시뮬레이션할 수 있습니다. 콘솔에서 window.screen.width, window.innerWidth, window.devicePixelRatio를 입력하면 각각의 값을 확인할 수 있습니다.
실무 활용 사례
OBS Studio 방송 설정
인터넷 방송에서 캔버스 해상도는 모니터 해상도와 일치시키고, 출력 해상도는 플랫폼 권장 해상도(주로 1920×1080)로 설정합니다. 내 모니터 해상도 확인 후 OBS 설정에서 정확한 값을 입력하세요.
반응형 웹 디자인 테스트
웹사이트가 다양한 해상도에서 올바르게 표시되는지 테스트합니다. 현재 모니터의 뷰포트 크기를 확인하고, 브라우저 크기를 조절하면서 미디어 쿼리 브레이크포인트가 올바르게 작동하는지 확인합니다.
게임 해상도 최적화
네이티브 해상도로 게임을 실행하면 가장 선명하지만 성능 부담이 큽니다. 모니터 해상도를 확인한 후 그래픽 카드 성능에 맞는 최적 해상도와 프레임레이트 조합을 찾으세요.
듀얼 모니터 배치
서로 다른 해상도의 모니터를 사용할 때, 각 모니터의 해상도와 DPI를 확인하여 스케일링을 맞추면 모니터 간 창 이동 시 크기가 급격히 변하는 것을 방지할 수 있습니다.
이미지 제작 해상도
썸네일, 배너, 오버레이 등을 만들 때 모니터 해상도에 맞는 이미지 크기를 결정합니다. FHD 모니터용 전체 화면 배경 이미지는 최소 1920×1080 픽셀이어야 합니다.
자주 묻는 질문
Q. 화면 해상도와 뷰포트 크기가 다른 이유는?
뷰포트는 브라우저 UI(주소창, 탭, 도구모음, 스크롤바)를 제외한 순수 콘텐츠 영역입니다. 전체화면(F11) 모드에서는 해상도와 뷰포트가 거의 같아집니다.
Q. Windows 스케일링을 150%로 설정했는데 해상도가 낮게 나와요.
물리적 해상도는 변하지 않지만, CSS 뷰포트 크기(논리적 해상도)는 스케일링에 의해 줄어듭니다. 2560×1440 모니터에 150% 스케일링을 적용하면 논리적 해상도는 약 1707×960이 됩니다.
Q. 모바일 화면 크기는 어떻게 확인하나요?
모바일 브라우저에서도 화면 크기 확인 도구에 접속하면 기기의 해상도, CSS 뷰포트, DPR 등을 확인할 수 있습니다. 최신 스마트폰은 물리적 해상도가 FHD 이상이지만 DPR이 2~4이므로 CSS 뷰포트는 360~428px 수준입니다.
Q. 방송에 적합한 해상도는 무엇인가요?
대부분의 방송 플랫폼은 1920×1080(FHD)을 권장합니다. 4K 방송은 대역폭과 인코딩 성능이 크게 요구되므로, 대부분의 BJ에게는 FHD가 최적입니다. 모니터가 QHD나 4K라도 방송 출력은 FHD로 설정하는 것이 일반적입니다.
