밀도 설명자 사용

Katie Hempenius
Katie Hempenius
X

데모 살펴보기

  • 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 전체 화면을 누릅니다.
  • 다른 기기를 사용하여 페이지를 새로고침하면 브라우저가 다른 이미지를 로드하는 것을 볼 수 있습니다.

이를 위해 기기 에뮬레이터를 사용할 수 있습니다. 특정 디스플레이 밀도를 찾고 있다면 다음 기기를 사용해 보세요.

1x 밀도 Blackberry Playbook, 여러 외부 모니터
밀도 2배 iPad 또는 iPhone 5/6
밀도 3배 갤럭시 S5 또는 iPhone X
  • 이 작업을 수행하는 코드는 index.html에서 확인하세요.

기본 원리

밀도 설명자라는 개념은 대부분의 사람들에게 생소할 수 있습니다. 이를 더 잘 이해하려면 브라우저가 픽셀을 처리하는 방식에 관한 배경 지식이 필요합니다.

픽셀이란 무엇인가요?

먼저 픽셀의 정의부터 살펴보겠습니다. 간단해 보이지만 '픽셀'은 실제로 여러 의미를 가질 수 있습니다.

기기 픽셀('물리적 픽셀'이라고도 함)
기기에 표시할 수 있는 가장 작은 색상 점입니다.
논리 픽셀
그리드의 특정 위치에 있는 색상을 지정하는 정보입니다. 이 유형의 픽셀에는 고유한 실제 크기가 없습니다.
CSS 픽셀
CSS 사양은 픽셀을 물리적 측정 단위로 정의합니다. 1픽셀 = 1/96인치입니다.

픽셀 밀도

픽셀 밀도('화면 밀도' 또는 '디스플레이 밀도'라고도 함)는 지정된 물리적 영역의 기기 픽셀 밀도를 측정합니다. 이는 일반적으로 인치당 픽셀 수 (ppi)를 사용하여 측정됩니다.

수년 동안 96ppi는 매우 일반적인 디스플레이 밀도였습니다 (따라서 CSS는 픽셀을 1인치의 1/96로 정의함). 1980년대부터 Windows의 기본 해상도였습니다. 또한 CRT 모니터의 해상도였습니다.

이러한 상황은 2000년대에 LED 모니터가 보편화되면서 바뀌기 시작했습니다. 특히 Apple은 2010년에 Retina 디스플레이를 도입하면서 큰 반향을 일으켰습니다. 이러한 디스플레이의 최소 해상도는 192ppi로, '일반' 디스플레이 해상도의 두 배였습니다 (192ppi/96ppi = 2).

window.devicePixelRatio

새로운 디스플레이 기술이 도입되면서 '기기 픽셀'은 실제 크기와 모양이 다양해지기 시작했으며 더 이상 'CSS 픽셀'과 크기가 같지 않습니다. '기기 픽셀' 크기와 'CSS 픽셀' 크기 간의 관계를 정의해야 할 필요성으로 인해 devicePixelRatio('CSS 픽셀 비율'이라고도 함)가 도입되었습니다.

devicePixelRatio는 특정 기기의 기기 픽셀과 CSS 픽셀 간의 관계를 정의합니다. 192ppi 기기의 devicePixelRatio는 2 (192ppi/96ppi = 2)입니다. '디스플레이 픽셀 2개가 CSS 픽셀 1개의 크기'이기 때문입니다.

요즘 대부분의 기기는 기기 픽셀 비율이 1.0에서 4.0 사이입니다.

  • 콘솔에 window.devicePixelRatio를 입력하여 기기의 픽셀 밀도를 확인합니다.

  • 일반적인 기기의 픽셀 비율은 이 표를 참고하세요. 대부분 1.0에서 4.0 사이입니다.

그렇다면 이 정보를 실제로 어떻게 적용할 수 있을까요?

기기 픽셀 비율에 따라 이미지 크기 조정

고해상도 화면에서 이미지를 최상의 상태로 표시하려면 다양한 devicePixelRatios에 다양한 이미지 버전을 제공해야 합니다.

기기 픽셀 비율 다음과 같은 의미입니다. 이 기기에서 CSS 너비가 250픽셀인 <img> 태그는 소스 이미지가 다음과 같을 때 가장 잘 보입니다.
1 기기 픽셀 1개 = CSS 픽셀 1개 너비 250픽셀
2 기기 픽셀 2개 = CSS 픽셀 1개 너비 500픽셀
3 기기 픽셀 3개 = CSS 픽셀 1개 너비 750픽셀

다음 사항을 참고하세요.

  • 이미지 편집기, 파일 디렉터리, 기타 위치에 나열된 픽셀 크기는 논리 픽셀의 측정값입니다.
  • 해상도가 더 높은 화면과 더 큰 디스플레이의 경우 크기가 더 큰 이미지가 필요합니다. 작은 이미지를 확대하기만 하면 여러 이미지 버전을 제공하는 목적에 부합하지 않습니다. 고해상도 이미지가 제공되지 않으면 브라우저가 어차피 이 작업을 수행합니다.

밀도 설명자를 사용하여 여러
이미지 게재

밀도 설명자는 'srcset' 속성과 함께 사용하여 다양한 devicePixelRatio에 다양한 이미지를 제공할 수 있습니다.

  • index.html 파일을 살펴보고 <img> 요소를 확인합니다.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

이 예시를 말로 표현하면 다음과 같습니다.

  • 1x, 2x, 3x는 모두 이미지의 픽셀 밀도를 브라우저에 알려주는 밀도 설명자입니다. 이렇게 하면 브라우저가 이 정보를 확인하기 위해 이미지를 다운로드할 필요가 없습니다.
  • 브라우저는 flower-1x.jpg (픽셀 밀도가 1.0인 브라우저용), flower-2x.jpg (픽셀 밀도가 2.0인 브라우저용), flower-3x.jpg (픽셀 밀도가 3.0인 브라우저용)의 세 가지 이미지 중에서 선택할 수 있습니다.
  • flower.jpg은 srcset를 지원하지 않는 브라우저의 대체 이미지입니다.

사용 방법:

  • devicePixelRatio와 x 단위를 사용하여 밀도 설명자를 작성합니다. 예를 들어 많은 Retina 화면(window.devicePixelRatio = 2)의 밀도 설명어는 2x로 작성됩니다.
  • 밀도 설명자가 제공되지 않으면 1x로 간주됩니다.
  • 파일 이름에 밀도 설명자를 포함하는 것은 일반적인 규칙이며 파일을 추적하는 데 도움이 되지만 필수는 아닙니다. 이미지에는 어떤 파일 이름이든 사용할 수 있습니다.
  • sizes 속성을 포함할 필요는 없습니다. sizes 속성은 너비 설명자와 함께만 사용됩니다.