디자이너가 알아야 할 단위들 : #1 iOS 디자인

컴퓨터 모니터나 인쇄물에서 볼 수 있는 모든 디지털 이미지 화면을 구성하고 있는 최소 단위의 명암의 점을 우리는 픽셀 Pixel이라고 부른다. 픽셀은 언제나 절대적인 값을 가지는데 예를 들어 10px은 언제나 10개의 점의 개수만큼의 크기를 차지한다.

 

 

Pixel 픽셀
화소와 같은 뜻으로 이미지를 구성하는 최소 단위인 점.

 

 

 

과거 디지털 화면을 디자인할 때에는 픽셀 단위만 고려하면 그만이었다. 디자인과 출력의 비율이 1:1이었으니까. 하지만 2010년, Apple이 레티나 디스플레이의 iPhone을 선보이면서 픽셀의 새 시대가 시작되었다. 레티나 디스플레이는 인치당 픽셀을 두 배로 늘려서 출력하는 매우 선명한 화면으로, 우리가 이제까지 본 어느 그래픽보다 훨씬 더 선명한 그래픽을 구현해냈다.

 

(고난의 시작....)

 

그러므로 디자이너는 레이아웃을 디자인할 때 간격이나 크기를 픽셀로 정의하는 것을 주의해야 한다. 픽셀로 레이아웃 치수를 정의하면 상황에 따라 픽셀 밀도가 달라져서 같은 개수의 픽셀이라도 서로 다른 기기에서 실제 크기가 달라질 수 있으므로 문제가 된다.

 

 

PPI(Pixel per Inch) / DPI (Dots per Inch)
1인치 면적 안에 표시할 수 있는 점의 수. 다른 말로 픽셀 밀도(Pixel Density)라고도 하며 물리적 공간 안에 얼마나 많은 픽셀이 들어가는지를 나타낸다. 예를 들어 300 dpi의 해상도란 1인치당 300개의 점을 표시할 수 있다는 뜻이며, 숫자가 높을수록 화면이 선명하게 보인다.

 

 

 

따라서 픽셀 밀도가 달라지더라도 기존과 동일한 물리적 크기를 유지하게 하기 위해 디자이너들은 dpi 혹은 ppi에 맞게 픽셀 크기를 키워서 전달해야 한다. 더 이상은 "이 버튼의 높이는 44px이야"라고 전달할 수 없는 것이다. 여기에는 픽셀 밀도 단위가 표현되어 있지 않으니까. 이 해결책으로 iOS에서는 PT라는 단위를, 안드로이드에서는 DP와 SP의 단위를 사용하고 있다.

 

 

PT (Point) 
iOS의 사이즈 단위 안드로이드 디자인에서 DP와 같은 역할을 한다.

 

"이 버튼의 높이는 44pt야"라고 지정하면 디바이스는 이를 자체적인 픽셀 밀도 비율로 곱하여 계산한다. Points에 기반한 이미지들을 Pixels로 렌더링 하는 것, 이 과정을 래스터라이제션이라고 한다. 위의 이미지에서 알 수 있듯이 iOS는 1x, 2x, 3x의 비율을 사용한다. 그러므로 44pt는 1x에서 44px, 2x에서 88px, 3x에서 132px로 보이는 셈이다. 

 

 

조금 더 들어가 보면, 사실 애플 디바이스에서 PT와 픽셀의 변환 비율이 완벽하게 동일하지는 않다. 아이폰+기종의 경우 실제 변환 값은 x2.61 정도이지만 편의상 x3으로 사용한다.

 

또한 포인트 단위를 픽셀로 렌더링하고 난 물리적 픽셀이 실제 아이폰의 디바이스와 맞지 않기 때문에 다운 샘플링downsampling이나 업 샘플링 upsampling을 하는 과정이 필요하다. 하지만 일단 디자이너가 알아야 할 것은 픽셀 밀도를 염두에 두고 x1, x2, x3의 형태로 디자인을 전달하는 것이다. 

 

 

*참고:

네이버 백과사전

https://developer.android.com/guide/practices/screens_support?hl=ko

https://namu.wiki/w/dpi

https://medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922

https://www.sebastien-gabriel.com/designers-guide-to-dpi/