UX/UI 책 스터디 <사용자를 사로잡는 UX/UI 실전가이드> -4 픽셀 밀도와 선명도의 상관관계

웹/앱 디자인 시 반드시 알아야 할 것들 - 픽셀 밀도와 선명도의 상관관계

픽셀 - 화면을 구성하는 기본 단위, 화면의 선명도에 영향을 줌. 픽셀의 많고 적음을 '픽셀 밀도'라고 하는데, 같은 면적 안에 픽셀이 얼마나 있느냐에 따라 달라짐. 밀도가 높을 수록 선명..

ppi - pixel per inch. (2.54cm), 1인치 당 픽셀 수를 이 단위로 표현하는 것.

실무하면서 알게 된 것 : 파견 나간 회사에서 무려 '포토샵'으로 웹디자인을 했는데, (그 때 까지 피그마로만 작업해서 몰랐지만) 웹 작업물은 72ppi로 설정해야한다고 한다.

→(책에 따르면)..72ppi는 육안으로 모니터를 봤을 때 선명함을 식별할 수 있는 경계선. 따라서 기준 ppi에서 픽셀을 더해도 '더 선명해졌다'는 걸 인식하지 못하기 때문에 웹에서는 굳이 픽셀 밀도를 높일 필요가 없다.

+ 프린트 해상도의 절반인 72ppi 모니터에서 디자인하고 인쇄하면 모니터에서 본 이미지와 인쇄물에서의 이미지 크기가 거의 일치. 

 

픽셀의 다양한 표현 방식

기술이 발전함에 따라 픽셀 밀도는 점차 늘어난다. iOS는 1곱하기, 2곱하기, 3곱하기 까지, 안드로이는 0.5, 1, 1.5, 2, 3, 4곱하기 까지 픽셀밀도를 지원한다.

실제 우리가 디바이스에서 보는 픽셀 밀도는 논리적 해상도(logical pixel), 물리적 해상도(rendered pixel), 그리고 다운 샘플링(down sampling)이라는 단계를 거쳐 기기에 적용되는데 이를 픽셀 밀도 변화 과정이라고 함.

복잡해 보이지만 걱정마시길. 디자인 기준은 1pt =1px, 1dp = 1px

1단계 - 논리적 해상도 logical pixel (순수 픽셀 밀도)

보통 피그마 같은 툴에서 모바일 화면 디자인할 때 기준 단위. 기준 단위는 iOS는 PT(point), 안드로이드는 DP(device point)라고 한다. 즉, 논리적 해상도로 디자인을 하면 해상도가 다른 기기라도 디자이너가 생각한 비율과 동일하게 출력할 수 있음.

+ 안드로이드에 DP 말고 SP도 있다. Scale independent pixel의 약자로, 글자 크기와 폰트만 독립적으로 변환이 가능하다는 뜻. (사용자의 시각적 편의를 위해 적용된 단위, 반대로 사용자가 임의로 글자 크기와 폰트를 사용자가 임의로 바꾸지 못하게 해서 레이아웃의 일관성을 유지하고 싶으면, 단위를 SP가 아닌 DP로 설정함.

2단계 - 물리적 해상도 Rendered Pixel

물리적 해상도는 레티나 디스플레이 (x2, x3)기술이 적용되는 단계. PT, DP 같은 논리적 해상도가 아닌, 기기에 정해진 배율을 곱해 픽셀을 얻는 것. (Resterization '래스터화'라고도 함).

쉽게 말해, 논리적 해상도의 벡터 속성이 '픽셀화'되는 것

물리적 해상도의 배율을 기기마다 정해져 있기 때문에 디자이너가 임의로 지정하지 않아도 됨. 즉, 디자이너는 논리적 해상도 (x1)로만 디자인해 두면 기기마다 다른 배율을 일일이 신경 쓸 필요가 없다.

 

3단계 - 다운 샘플링 

물리적 해상도를 만드는 단계에서 두 세배 높은 픽셀을 얻었지만 어떤 기기는 이 픽셀을 다 담지 못함. 이 때 늘어난 픽셀을 기기에 맞게 해상도를 조절해야하는데 이를 다운 샘플링이라고 한다.

 

4단계 - 기기 표현

실제로 기기에 표현되는 시점. 기기별 ppi가 다르다. 픽셀은 밀도에 따라 크기가 달라지는 특성이 있다. 같은 화면이라도 ppi에 따라 밀도가 달라지며 이는 선명도에 영향을 준다. 디스플레이의 발전에 따라 같은 크기에 더 많은 픽셀을 담아 선명해진 것이다. 미세한 선이나 얇은 폰트도 연출할 수 있게 되었다.