brunch

라이킷 22 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Bell Sep 30. 2022

[UX/UI] iOS와 안드로이드 픽셀밀도

PPI와 DPI 그리고 PT와 DP

오늘은 대략적으로 알고 있었던 PPI, DPI, PT, DP에 대한 개념을 정리하려한다.

본격적인 내용에 들어가기 앞서, 현재 디스플레이에서 화면을 나타내는 단위는 px(Pixel) 이다.

픽셀은 Picture element의 축약형 Pic + el 의 합성어이고, 다른 말로는 '화소'라고 한다.

화소는 화면을 구성하는 최소 단위로 화면에 모든 이미지는 화소들의 구성으로 이뤄진다.

각각의 화소(픽셀)들이 그림을 표현하고 있다.

여기서 화소들이 물리적인 공간에 얼마나 모여있는가를 표현하는것이 PPI(Pixel Per Inch), 점들이 같은 공간안에 얼마나 모여있는가를 나타는것이 DPI(Dot Per Inch)이다.

PPI는 디지털 이미지, 즉 화면상에 나타나는 이미지의 선명도를 결정하는 단위이고 DPI는 인쇄물, 즉 현실세계의 사진이나 포스터의 선명도를 나타내는 단위이며 이를 통틀어 해상도(Resolution) 라고 한다.

해상도의 단위가 PPI, DPI 이다.

이제 우리는 이 단위들이 iOS와 안드로이드에서 어떻게 사용되는지에 대해 알아야한다.

애플(iOS) 과 PT(point)

iOS의 해상도의 단위는 PPI, 크기의 단위는 PT(Point)를 사용한다.

1984년 출시된 최초의 매킨토시의 픽셀밀도는 72ppi

최초의 맥은 72ppi의 픽셀밀도를 가지고 있었다. 지금 우리가 포토샵등으로 디지털 이미지를 사용할때 통상적으로 사용하는 해상도였던 것이다. 하지만 레티나 디스플레이(Retina Display)가 등장하면서 디자인작업에 큰 변화가 생기게 된다.

기존 작업은 72ppi 해상도에 맞춰 PX단위로 작업해서 전달하면 되던 디자인 에셋들을 레티나 디스플레이에 대응하기 위해 2배의 크기로 한번 더 작업하게 된것이다. 그리고 현재는 2배를 넘어 3배의 픽셀밀도를 지닌 디스플레이까지 등장하였으니 디자이너들은 하나의 작업을 3번 해야했던것이다.

큰 문제를 맞닥들이게 된 디자이너들은 PT라는 단위로 이 난관을 해결하고자 한다.

왜 PT가 해결책이 되었냐면, PT는 컴퓨터가 생기기 이전부터 있던 글자의 크기를 측정하기 위한 단위였고, 절대값이기 때문이다.

1pt는 실제 1inch(25.4mm)를 72로 나눈 값, 즉 0.3528mm 이다. 그리고 이 값은 고정값이기 때문에 절대 변하지 않는다. 그래서 1px을 1pt로 정하게 되면 [ 72ppi의 1px ], [144ppi 의 2px], [216ppi의 3px]은 모두 실제 크기가 1pt와 같아 지는것이다.

만약 5pt 길이의 선을 그려달라고 기기에 요청이 들어가면, 기기는 실제크기인 5pt를 그리기 위해 72ppi에서는 5px만큼, 2배인 144ppi에서는 10px만큼, 3배인 216ppi에서는 15px만큼 색을 채워넣게 되는것이다. 그리하여, 전체 픽셀의 수는 다르지만, 사람 눈에 보이는 선의 길이는 모두 같게 된다. 그리고 이런 대응을 기기가 알아서 할 수 있도록 @2x, @3x 의 배수 기호를 붙여 에셋을 내보내게 되는것이다.

이후 스케치와 같은 프로그램등에서 에셋을 각각 배수로 내보내주는 기능을 탑재하면서 배수의 저주로 부터 완전히 해방 될 수 있었다.