Pixel, PPI, DPI, SP, PT, DP [ 디자인 단위 파헤치기 ]

Pixel (화소)

디스플레이를 구성하고 있는 최소단위이다. 우리가 보는 모든 문자와 이미지는 픽셀이라고하는 가장 작은 단위로 구성되어있다. 실제로 디지털이미지를 계속 확대하면 정사각형 모양의 수많은 픽셀들이 모여있는것을 볼 수 있다. 

아래 사진을 보면 컬러를 가진 픽셀들이 모여 하나의 카메라 이미지를 완성시키는것을 볼 수 있다. 

Pixel 예시

PPI (Pixel Per Inch)

 1인치안에 픽셀이 몇개로 이루어져있는지를 나타낸다.

 1인치에 존재하는 픽셀이 많을 수록 표현할수있는 색상과 표현 많아져 더 선명한 화면을 이루게 된다.

 (첫번째 사진) 10PPI이면 1inch(2.54cm)에 10개픽셀 즉, 총 10x10=100개의 픽셀로 이루어져있다는 의미이다.

10PPI/20PPI

DPI (Dots per inch)

DPI는 1인치에 점(Dot)이 몇개가 있는가를 의미하며 점을 찍는 인쇄물에서 사용된다. 

(앞서 언급한 PPI는 TV, 모니터, 스마트폰과 같은 디스플레이 기기에서 사용된다. )

 

---

다음은 DP, SP, PT 를 구분한다. 

ios 앱을 디자인 할때 pt를 사용하고 안드로이드 앱을 디자인할땐 sp, dp 를 사용한다.

왜 복잡하게 다양한 단위를 사용하느냐 하면 스마트폰의 화면크기, 해상도가 스마트폰별로 다 다르기 때문이다. 

이런 다양한 해상도와 화면 크기를 대응하기에 픽셀이라는 절대적인 단위는 부족하다.  

 

DP(Device Independent Pixel)

 예를들어 화면을 픽셀로만 디자인한다고 생각해보자. 100*40 픽셀을 가진 사각형이있다. 픽셀수가 많은 고해상도 디바이스에서 앱을 실행하면 비교적은 적은 픽셀수를 가진 디바이스보다 사각형이 더 작게 보일것이다. 이렇게 되면 앱이 디자이너가 의도한 UI와 다르게 구성되어 버린다. 

 DPI란 디바이스 크기에 의존하지 않는 픽셀이다. A라는 디바이스에서 1dp는 B라는 다른 크기를 가진 디바이스에서도 1dp로 동일하다.

ldpi	mdpi (기준)	hdpi	xhdpi	xxhdpi	xxxhdpi
320*480	360*640	480*800	720*1280	1080*1920	1440*2560
120dpi	160dpi	240dpi	320dpi	480dpi	640dpi
0.75x	1x	1.5x	2x	3x	4x

위 표를 살펴보자.

각 디바이스 별로 1dp의 밀도는 같지만 1dp가 의미하는 px은 디바이스에 따라 달라진다. 

 

160dpi 해상도를 갖는 화면에서는 1dp=1pixel이다. 

240dpi 해상도를 갖는 화면에서는 1dp=1.5pixel이다. 

320dpi 해상도를 갖는 화면에서는 1dp=2pixel이다. 

 

SP (Scale Independent Pixels)

텍스트의 크기를 지정하기 위해 사용하는 단위이다. 

안드로이드 설정화면에서 사용자는 시스템 텍스트의 크기를 지정할 수 있다. 예를들어 사용자가 시스템 설정에서 텍스트의 크기를 최대 크기로 설정했다고 가정하자. 이때 SP로 크기를 지정해놓은 글씨는 영향을 받아 사이즈가 커진다.

시스템 글꼴 설정에 따라 1SP당 픽셀 수가 달라지는것이다. 

반면에 DP로 설정했을 경우엔 시스템 글꼴에 영향을 받지 않는다. 

 

PT(Point)

IOS 디바이스에서 사용하는 단위로 DP와 같은 개념이다.

안드로이드와 마찬가지로 IOS도 다양한 화면 크기를 가지고 있다. 이에 대응하기위해 IOS에서는 PT를 사용한다. 

@1x	@2x	@3x
1pt	2pt	3pt

 

참고로 PT는 픽셀의 변환 비율이 완벽하게 동일하지 않다. 포인트를 픽셀로 렌더링하고 난 물리적 픽셀이 실제 아이폰 디바이스와 맞지 않기때문에 다운 샘플링이나 업샘플링 과정이 필요하다.