웹 개발, 디자인 작업 시 화면 크기와 해상도를 정확히 알아야 합니다. 화면 관련 용어와 확인 방법을 알아봅니다.
해상도란?
화면에 표시되는 픽셀의 개수입니다. 1920×1080은 가로 1920개, 세로 1080개의 픽셀을 의미합니다.
주요 해상도
데스크톱
- HD: 1280×720 (720p)
- Full HD: 1920×1080 (1080p)
- QHD: 2560×1440 (1440p)
- 4K UHD: 3840×2160
모바일
- 아이폰 15: 1179×2556
- 갤럭시 S24: 1080×2340
- 아이패드 프로: 2048×2732
화면 크기 vs 해상도
- 화면 크기: 물리적 대각선 길이 (인치)
- 해상도: 픽셀 개수
- PPI: 인치당 픽셀 수 (선명도)
같은 해상도라도 화면이 작으면 PPI가 높아 더 선명합니다.
뷰포트(Viewport)
웹 브라우저에서 콘텐츠가 표시되는 영역입니다. 전체 화면에서 주소창, 툴바 등을 제외한 부분.
반응형 디자인 기준점
- 모바일: ~767px
- 태블릿: 768px~1023px
- 데스크톱: 1024px~
- 대형 화면: 1440px~
DPI 스케일링
고해상도 화면에서 요소가 너무 작아지는 것을 방지하기 위해 100%, 125%, 150% 등으로 확대 표시합니다.
마무리
화면 크기 확인 도구로 현재 모니터 해상도, 뷰포트, DPI를 즉시 확인할 수 있습니다.