해상도 이해하기_02

챕터 04 픽셀 밀도와 선명도의 상관관계

---

픽셀은 화면의 선명도에 영향을 준다. 이처럼 픽셀의 많고 적음을 가리켜 ‘픽셀의 밀도’라고 한다. 픽셀 밀도는 같은 면적안에 픽셀이 얼마나 있느냐에 따라 달라진다.
픽셀이 들어가는 최소면적의 기준은 1인치 (2.54cm)로 정해져있다. 이 단위를 가리켜 픽셀밀도 혹은 ppi(pixel per inch)

- 화면 크기에 따른 픽셀 밀도 차이
화면의 크기가 커지면 픽셀의 밀도도 높아져야하는것은 아니다. 웹에서 1인치당 최소 픽셀수를 72ppi로 설정한것처럼 육안으로 감지할 수 있는 픽셀 밀도와 한계때문이다.
위 부분은 제조사가 정해둔 디바이스별 시청거리와 관련이 있다.(어떤 기기를 사용하는지에 따른 시청거리의 인식기준이 있어 해당부분을 호고려해야한다.)

- 픽셀의 다양한 표현방식
실제 우리가 디바이스에서 보는 픽셀 밀도는 논리적 해생도,물리적 해상도, 다운샘플링 이라는 단계를 거치며 기기에 적용이된다.
1단계. 논리적 해상도: 순수한 필셀의 밀도를 말한다. 이것은 모바일 화면을 디자인할 때 기준이 된다.
운영체제에 따라 논리적 해상도의 기준단위를 다르게 칭한다. IOS : PT 안드로이드:DP

2단계. 물리적 해상도: 레티나 디스플레이 (x2 x3) 기술이 적용된 단계이다. PT나 DP 같은 논리적 해상도로 디자인을 했다면 이단계에서 기기에 정해진 배배율을 곱해 픽셀을 얻는것이다. (= 레스터화 Resterization) 논리적 해상도의 백터 속성이 픽셀화 되는것이다.

3단계. 다운샘플링: 물리적 해상도를 만드는 단계에서 (x2 x3) 높은 픽셀을 얻었지만, 어떤기기는 이 픽셀을 다 담지 못한다. 대상 기기의 해상도가 레스터화가 되면서 전체의 홤면을 다 담을 수 없게면서 늘어난 픽셀을 기기에 맞는 해상도로 조절을 하는게 이를 다운샘플링(Down Sampling) 이라고 한다. 4단계. 기기표현: 실제로 기기에 표현되는 시점이다. 이 단계에서는 기기별 ppi가 다르다는것을 알아야한다. 같은 화면이라도 ppi에 따라 밀도가 달라지며 이는 선명도의 영향을 미친다.
디스플레이의 발전에 따라 같은 크기에 더 많은 픽셀을 담아 선명해지는 것이다.

ios의 PT와 안드로이드 DP/SP
OS는 대표적으로 ios와 안드로이드가 있다.
ios의 논리적 해상도를 PT(point)
PT 1인치를 72(애플기준 ppi)로 나눈값이다. 즉 1, 1PT는 0.3527mm 정도가 된다. 아이폰은 1x 2x 3x라는 3가지의 필셀밀도를 가지고 있으며 디자인 기준은 1pt = 1px에 맞추면 된다.
배율을 디자인할 때 간과하기 쉬운부분이 픽셀의 총 개수 변화다.
(ex. 아이폰4를 320 x 480pt로 디자인을 했을때 총 픽셀 수는 153,600이다. 가호 x 세로 = 총픽셀 수 아이폰의 물리적 해상도는 2배 들어난 640 x 960아며 총 픽셀 수는 614,400개다.) 즉 논리적 해상도에서 물리적 해상도로 변화할깨 해상도는 2배 늘어났지만, 총 픽셀 수는 4배가 된것이다. 사이폰 8+이라면 물리적 해상도(x3)에서는 총 픽셀 수가 9배 늘어난 셈이다.

안드로이드의 기준단위에는 DP와 SP가 있다.

DP (Device independent pixel) = 픽셀 밀도로부터 독립된 단위이다.
안드로이드의 픽셀 밀도는 6가지가 존재
1dpi = (0.75x)
mdpi = (1x)
hdpi = (1.5x)
xhdpi = (2x)
xx hdpi = (3x)
xxxhdpi = (4x)
디자인은 1배율인 mdpi = (1x)에 맞추면 된다.
mdpi를 이용하면 1 dp = 1px 로 맞출 수 있기 때문이다.

SP (Scale independent pixel) = 글자 크기와 폰트만 독립적으로 변화가 가능함
사용자가 시각적 편의를 위해 화면의 글자 크기나 글꼴을 변경하기도 하는데 이때 글자에 적용된 단위이다.
SP는 글자에만 적용할 수 있기 때문에 아이콘이나 레이아웃 등을 변경 할 수 없다.
(종종 레이아웃의 일관성을 위해 글자 크기와 폰트를 사용자가 임의로 바꾸지 못하게 막아야하는 경우가 있는데, 이때 단위를 SP가 아닌 DP로 설정하면된다.)

출처: 사용자를 사로잡는 UI.UX 실전가이드 | 저자_김성연 (우디) | 발행일자_2021.12.15