논리 픽셀, 물리 픽셀이 뭔지 아시나요? DPR 제대로 이해하기

 

프론트엔드 개발자로서 저는 CSS를 많이 씁니다.
그중에서도 가장 자주 쓰는 단위 중 하나가 px(픽셀)입니다.

px을 사용하지 않고 em, rem, % 등의 다른 사이즈 유닛을 사용하더라도

브라우저가 실제 화면에 렌더링할 때는 결국 전부 픽셀 단위로 환산해서 계산합니다.

 

그런데 이 픽셀이라는 단위, 사실 두 가지 종류가 있다는 것 아시나요?
바로 ‘논리 픽셀’과 ‘물리 픽셀’입니다.

이 둘을 제대로 알아야 DPR(Device Pixel Ratio) 개념도 이해할 수 있고,
왜 이미지가 어떤 기기에서는 뭉개져 보이는지를 알 수 있습니다.

---

1. 픽셀의 기본 개념부터

픽셀이란 화면을 구성하는 최소 단위입니다.

100 × 100의 화면, 또는 사진은

픽셀 10,000개로 이루어진 화면 또는 사진이라고 할 수 있죠.

---

2. 물리 픽셀은 현실 세계의 픽셀

물리 픽셀은 실제 디스플레이를 만들 때 실제로 하드웨어에 새겨지는 빛의 셀입니다.

한 개의 픽셀은 보통 서브픽셀(R, G, B → 3개)로 구성됩니다.

예를 들어 1920 × 1080 해상도 모니터라면,

• 가로로 1920개의 물리 픽셀이,
• 세로로 1080개의 물리 픽셀이,
• 총 약 207만 개의 빛 점이 박혀 있는 것

즉, 물리픽셀은 실제 하드웨어에 존재하는 작은 전자 부품입니다.

 

해상도에 대한 오해

여기서 중요한것은,

❌ 해상도 === 화면의 사이즈

해상도가 화면의 사이즈를 의미하는 것이 아니라는 점입니다.

해상도는 화면에 표현할 수 있는 픽셀의 개수이지,

화면의 물리적인 가로,세로 크기(cm, inch)는 아닙니다.

그렇기 때문에 같은 해상도라도 화면 크기에 따라 픽셀 크기가 달라집니다.

24인치 모니터 (1920×1080)
27인치 모니터 (1920×1080) → 위의 24인치보다 픽셀의 크기가 커져서 글자가 더 크게/뭉툭하게 보임
27인치 모니터 (3840×2160) → 픽셀이 촘촘해져서 글자가 선명함

 

위 사진 예시를 보면 같은 픽셀 갯수를 갖고 있지만

화면의 크기에 따라 픽셀의 크기가 다르고,

거기에 그려진 아이콘의 크기도 다른 것을 볼 수 있습니다.

 

그러니 픽셀의 크기가 기기마다 다르다면,  1 × 1사이즈의 네모 박스가

기기마다 다르게 보이겠죠. 

하지만 1 × 1사이즈의 네모 박스는 모든 기기에서 동일한 사이즈로 보여야 합니다.

바로 이것이 논리픽셀이 필요해지는 지점입니다.

---

3. 논리 픽셀은 세계 평화를 위한 것

위의 물리 픽셀을 이해하셨다면 

논리 픽셀은 이해하기 쉽습니다.

 

우리가 글자의 사이즈를 16px로 설정했다면

이 글자 크기는 어느 기기에서 봐도 동일한 사이즈로 보여야 하겠죠.

만약 기기마다 사이즈가 다르게 보인다면

즉, 물리 픽셀대로 화면을 렌더링한다면

기기마다 픽셀의 크기/밀도가 다르기 때문에

같은 16px의 글자가 어떤 기기에서는 너무 크게 보이고,

어떤 기기에서는 너무 작게 보일 것입니다.

그럼 개발자인 우리는 기기별 UI대응을 별도로 해줘야 하는 전쟁을 치뤄야 했겠죠.

 

논리 픽셀은 브라우저/OS가 기기별 물리 픽셀 수를 감추고,

"1px은 항상 이만큼"이라고 동일하게 보이도록 맞춘 단위입니다.

이것이 가능한 것은 DPR(Device Pixel Ratio)덕분입니다.

 

실제 종이에 출력된 사진에는 어떤 단위를 쓸까? (더보기 눌러서 보기)

 

실제 종이에 출력된 사진에는 픽셀이라는 단위를 쓰지 않습니다.

대신 dpi(dots per inch)라는 단위를 씁니다.

픽셀은 빛으로 이미지를 표현하는 방식이기 때문에 화면 디스플레이에 사용됩니다.

프린터/종이는 잉크 점으로 이미지를 표현하기 때문에 도트(dot)라는 단위를 사용하죠.

dpi = 1인치(2.54cm)안에 도트가 몇 개 찍히는가

• 300dpi → 1인치 안에 300개의 잉크 점
• 600dpi → 1인치 안에 600개의 잉크 점 (더 정밀)

 

픽셀과 DPI의 관계

그래서 픽셀 값은 출력할 때 "픽셀을 얼마나 촘촘히 찍을까?"로 변환됩니다.

• 3000px이미지를 300dpi로 출력하면 → 10인치 (약 25.4cm)
• 같은 이미지를 600dpi로 출력하면 → 5인치 (약 12.7cm)

 

---

4. DPR(Device Pixel Ratio)

DPR은 한 논리 픽셀을 표현하기 위해 쓰이는 실제 물리 픽셀의 비율입니다.

DPR = 물리 픽셀 ÷ 논리 픽셀

실제 물리  픽셀 수가 많으면 DPR을 높여서, 

여러 물리 픽셀이 하나의 논리 픽셀처럼 동작하게 매핑해줍니다.

고해상도 기기일수록 DPR이 커집니다.

DPR=2라면 CSS의 1px은

실제 화면에서 2×2 물리 픽셀로 그려져서 더 선명하죠.

 

브라우저는 DPR정보를 갖고있습니다.

아래와 같이 확인할 수 있습니다 :

window.devicePixelRatio

 

브라우저는 이 정보를 갖고 렌더링 과정에서 아래와 같은 과정을 거칩니다.

1. CSS 레이아웃을 "논리 픽셀 좌표계"에서 계산
2. 결과를 DPR에 맞게 스케일링
3. 물리 픽셀 그리드에 뿌려줌

---

요약

 

• 해상도 = 픽셀 개수, 화면 크기와 다르다
• 물리 픽셀 = 실제 하드웨어에 존재하는 작은 전자 부품
• 논리 픽셀 = 기기별 UI 크기를 통일하기 위한 단위
• DPR = 물리픽셀 ÷ 논리픽셀

 

---

결론

이제 여러분은

같은 100 × 100사이즈의 래스터 이미지가

왜 어떤 기기에서는 선명하고

어떤 기기에서는 흐릿하게 보이는지를 이해하셨습니다.

이제 우리는 고해상도 디스플레이에 대응해야 하는 이유를 알았고,

어떻게 하는지를 배우면 됩니다!

이것에 대해서는 다음 글에 계속하겠습니다.

---

다음 글

https://kasts91.tistory.com/232

최대한 효율적인 이미지 로딩을 목표로 브라우저 일시키기