[Responsive] 디바이스 해상도

디바이스 해상도

• 정의 : 디바이스 화면을 구성하는 실제 픽셀(pixel)의 수
• 웹 퍼블리싱 작업에서는 CSS 해상도(뷰포트)를 기준으로 작업

---

디바이스 해상도 기본 개념

물리적 해상도 (Physical Resolution, 실제 해상도)

• 바이스 화면에 실제로 존재하는 픽셀의 수
• 예: 아이폰 13 Pro → 1170 x 2532 (물리 픽셀)

CSS 해상도 / 논리 해상도 (CSS Resolution, Logical Resolution)

• 웹 브라우저에서 인식하는 해상도
• 디바이스 픽셀을 CSS 픽셀로 변환한 값
• window.innerWidth, width: 100vw 등에서 이 값을 기준으로 레이아웃이 잡힘
• 예: 위 아이폰의 CSS 해상도는 390 x 844

[ 아이폰 화면 전체 (물리 해상도 1170px) ]
 └─── 웹 브라우저가 CSS 기준으로 보는 영역: 390px

[ CSS 뷰포트 ]
 ┌──────────────────────────────┐
 │   웹 콘텐츠가 실제로 그려지는 공간  │ ← 390px (CSS 기준)
 └──────────────────────────────┘

디바이스 픽셀 비율 (Device Pixel Ratio, DPR)

• DPR = 물리 픽셀 / CSS 픽셀
• 고해상도 디스플레이일수록 이 비율이 높아짐
• 예: DPR 3 → 하나의 CSS 픽셀이 3x3 = 9개의 실제 픽셀로 표시됨

---

해상도 대응 전략

전략	설명	예시
미디어 쿼리	특정 너비 이상/이하에서 스타일 분기	@media (max-width: 768px)
적절한 breakpoint 정의	최소/최대, 적용할 breakpoints 정의	$breakpoint-xs: 360px;   // 작은 모바일 $breakpoint-sm: 480px;   // 일반 모바일 $breakpoint-md: 768px;   // 태블릿 $breakpoint-lg: 1024px;  // 작은 노트북 $breakpoint-xl: 1280px;  // 데스크탑 $breakpoint-xxl: 1440px; // 와이드 데스크탑
이미지 소스 변경	<picture> 태그나 srcset 사용	모바일 전용 이미지
DPR 대응	고해상도 이미지 제공 (2x, 3x)	background-image: url(image@2x.png)
유동 그리드	flex, grid, auto-fit, minmax() 활용	CSS Grid로 1~4열 구성
vw/rem 기반 유동 레이아웃 구성	%, vw, vh, rem, em 등 사용 권장