Retina 및 HiDPI 디스플레이용 이미지 크기 조절 가이드

기기 픽셀 비율(DPR)은 화면의 물리적 픽셀과 CSS 픽셀의 비율입니다. 표준 1x 디스플레이는 CSS 픽셀당 물리적 픽셀이 하나입니다. 2x Apple Retina 디스플레이는 CSS 픽셀당 물리적 픽셀이 네 개(2×2)입니다. 같은 논리 공간을 채우는 픽셀이 네 배입니다. 3x 휴대폰 화면은 CSS 픽셀당 물리적 픽셀이 아홉 개입니다. 2x 디스플레이에서 100×100 CSS 픽셀 이미지를 표시하려면 그 공간을 선명하게 채울 200×200 물리 픽셀 소스가 필요합니다. 100×100 소스만 있다면 브라우저가 확대하고 각 픽셀이 흐릿하게 보입니다.

즉, 단일 이미지 파일로 모든 디스플레이 밀도를 잘 제공할 수 없습니다. 100×100 이미지는 1x에서 선명하지만 2x에서 흐립니다. 300×300 이미지는 3x에서 선명하지만 1x에서 대역폭을 낭비합니다. 브라우저가 필요한 것보다 9배 많은 픽셀을 다운로드하고 축소합니다. 올바른 해결책은 여러 해상도의 이미지 파일을 만들고 브라우저가 현재 DPR에 맞는 것을 선택하게 하는 것입니다.

실제 DPR 값: 대부분의 노트북과 데스크톱 디스플레이는 1x 또는 1.5x입니다. MacBook Pro와 iMac Retina 디스플레이는 2x입니다. iPhone 12 이상과 최근 Galaxy 플래그십 시리즈는 3x입니다. 중급 Android는 주로 2x 또는 2.5x입니다. 디자이너가 '@2x 에셋'을 요청할 때 보통 표시 크기의 정확히 두 배 파일을 의미합니다.

`<img>`의 `srcset` 속성은 브라우저에 어떤 이미지 파일이 있고 각각 어떤 너비인지 알려줍니다. 두 가지 디스크립터 형식이 있습니다. 너비 디스크립터(`400w`, `800w`, `1200w`)는 각 파일의 실제 픽셀 너비를 지정합니다. 브라우저는 `sizes` 속성을 함께 사용해 뷰포트에 맞는 파일을 계산합니다. 픽셀 밀도 디스크립터(`1x`, `2x`, `3x`)는 레이아웃 계산 없이 각 파일이 어떤 DPR용인지 알려줍니다.

뷰포트에 따라 크기가 변하는 반응형 레이아웃 이미지—히어로 이미지, 상품 그리드, 기사 사진—에는 `sizes` 속성과 함께 너비 디스크립터를 사용하세요. `sizes` 속성은 각 뷰포트 브레이크포인트에서 이미지가 실제로 얼마나 넓게 렌더링되는지 브라우저에 알려주는 미디어 조건 목록입니다. 예: `sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"`. 브라우저는 렌더링 너비에 현재 DPR을 곱해 최적 소스를 선택합니다.

아이콘, 아바타, 로고처럼 레이아웃 너비가 변하지 않는 고정 크기 이미지에는 픽셀 밀도 디스크립터를 직접 사용하세요. `<img src="logo.png" srcset="logo.png 1x, logo-2x.png 2x, logo-3x.png 3x">`는 명확하고 간결합니다. `sizes` 계산이 필요 없습니다. 브라우저가 DPR에 맞는 디스크립터를 선택합니다. 고정 크기 이미지에서 너비 디스크립터보다 구현과 디버깅이 쉽습니다.

가장 큰 표시 케이스에서 시작해 아래로 내려오세요. 이미지가 데스크톱에서 800px 너비로 표시된다면 1x 소스는 800px, 2x 소스는 1600px, 3x 소스는 2400px입니다. 깔끔한 숫자를 위해 100px 단위로 올림하세요. 소스 이미지가 1200만 화소 사진(4000×3000)이라면 세 가지 크기를 모두 생성할 충분한 해상도가 있습니다. 소스가 500×400 웹 그래픽이라면 업스케일 없이 품질 있는 2x 버전을 만들 수 없고, 업스케일은 흐림을 만들어냅니다.

실용적으로 1x, 2x, 3x를 제공하면 대다수 기기를 커버합니다. 일부 도구는 매우 고밀도 디스플레이를 위해 4x 변형을 생성하지만, 4x DPR 화면은 드물고 파일 크기 비용이 대부분의 사용 사례에서 정당화되지 않습니다. 대부분의 이미지는 1x와 2x로 충분하고, 200px 이하로 표시되는 작은 이미지에서만 3x를 추가하세요.

밀도별 압축 전략도 다릅니다. 1x 이미지는 WebP 품질 80을 쓸 수 있습니다. 2x 이미지는 품질 70으로도 됩니다. 2x에서는 디스플레이가 CSS 픽셀당 더 많은 물리 픽셀을 렌더링해 압축 아티팩트를 부분적으로 가려주기 때문입니다. 3x 이미지는 품질 60~65도 가능합니다. 이 기법(DPR 인식 압축)을 쓰면 무손실에 가까운 1600px 이미지를 보내지 않고도 2x, 3x 파일 크기를 관리 가능한 수준으로 유지할 수 있습니다.

3x 이미지는 1x보다 세 배가 아니라 픽셀 수로 아홉 배 큽니다(3×3 = 9 물리 픽셀/CSS 픽셀). 100×100 CSS 픽셀 이미지를 3x로 제공하려면 300×300 소스가 필요합니다. 9만 픽셀 대 1만 픽셀입니다. 효율적인 압축을 해도 3x 이미지 파일은 보통 1x 이미지의 4~6배 크기입니다. 대역폭이 제한된 모바일 데이터에서 이는 심각한 비용입니다.

`sizes` 속성이 모바일 사용자가 데스크톱 크기 이미지를 다운로드하는 것을 막아줍니다. `sizes` 없이는 브라우저가 렌더링 크기 정보가 없어 `srcset`의 가장 큰 소스를 기본값으로 씁니다. 올바른 `sizes` 선언이 있으면 375px 너비에 3x DPR 폰은 2400px 데스크톱 소스가 아닌 1125px 소스를 다운로드합니다. 이미지당 300KB 대 800KB의 차이로, 이미지가 여러 장인 페이지에서 빠르게 누적됩니다.

느린 연결의 사용자를 위해 브라우저의 네트워크 힌팅이 DPR 선택을 재정의할 수 있습니다. Network Information API가 `saveData` 설정이나 '2g' `effectiveType`을 보고하면 브라우저가 DPR보다 낮은 해상도 이미지를 선택할 수 있습니다. `navigator.connection.saveData === true`일 때 명시적으로 DPR에 관계없이 1x 이미지를 제공하는 프레임워크도 있습니다. 2G/3G가 여전히 흔한 지역의 사용자가 있는 글로벌 서비스에서 중요한 고려사항입니다.

먼저 사이트에서 2x 변형이 실질적으로 도움이 되는 이미지를 파악하세요. CSS 너비 100px 미만의 이미지는 3x 디스플레이에서도 눈에 띄는 흐림이 거의 없습니다. 눈이 개별 픽셀을 구별하기엔 너무 작기 때문입니다. 800px 이상의 이미지가 최우선입니다. 히어로 이미지, 상품 사진, 기사 대표 이미지가 1x만 제공할 때 Retina 디스플레이에서 가장 눈에 띄는 품질 저하를 보입니다.

크기 조정 단계를 자동화하세요. 1x, 2x, 3x 파일을 수동으로 유지하면 오류가 발생하기 쉽습니다. 원본이 업데이트될 때 파일이 동기화되지 않습니다. 빌드 도구(Sharp, ImageMagick, Next.js Image 컴포넌트)를 사용해 빌드 시 단일 고해상도 소스에서 모든 밀도 변형을 생성하세요. 이를 프로덕션 파이프라인에 통합하는 더 넓은 워크플로우는 web-image-optimization-checklist 가이드를 참고하세요.

브라우저 에뮬레이션이 아닌 실제 고DPI 기기에서 테스트하세요. Chrome DevTools로 DPR 값을 시뮬레이션할 수 있지만, 렌더링 동작, 압축 아티팩트 가시성, 색재현은 실제 기기에서 다를 수 있습니다. 배포 전에 MacBook Retina에서 2x 이미지를, 최근 iPhone이나 Galaxy 기기에서 3x 이미지를 테스트하세요. 브라우저 시뮬레이터에서 괜찮아 보이는 것이 실제 기기에서 다르게 보이는 경우가 많습니다.