디자인 시 알아야 할 단위(px, dp, sp, pt)

PX, DP, SP, PT ?

웹/앱 디자인을 할 때 기본적으로 알아야 항목이 있습니다.

그 중 디자인 시 알아야 할 단위에 대해서 생각해 보려고 합니다.

 

 

Sketch

 

디자이너가 UI 작업을 진행할 때 Photoshop, Sketch, Figma 등의 프로그램을 이용합니다.

(당연히 그외 다양한 프로그램이 존재합니다.)

이때 사용하게되는 단위는 픽셀(Pixel) 입니다. 흔히 줄여서 px 로 사용합니다.

 

1. 픽셀이란?

간단하게 우리가 보는 화면이나 이미지를 이루는 최소 단위입니다.

만약 우리가 가로, 세로 100px의 사각형을 그린다고 하면 어느 디바이스나 화면에서 동일한 크기로 보여집니다.

이는 픽셀은 절대값이기 때문입니다. 하지만 dp, pt 등의 단위는 물리적 크기는 다르게 됩니다.

 

※ 픽셀과 함께 자주 보이는 PPI란 개념이 있습니다.

PPI는 Pixels Per Inch로 1인치 몇 개의 픽셀이 존재하는지를 나타내는 개념입니다.

1인치에 많은 픽셀이 존재하면 할 수록 더 표현할 수 있는 범위가 커져, 우리가 얘기하는 더 선명한 화면을 얻을 수 있게 됩니다.

(DPI는 PPI와 비슷한 개념으로 Dots Per Inch로 1인치에 점의 개수를 나타냅니다.)

 

 

그렇다면 PX, DP, SP, PT는 왜 구분되어 지는 걸까요?

 

여기에 대한 해답은 바로 우리가 사용하는 스마트폰에서 확인할 수 있습니다.

dp, sp는 aos(안드로이드) 앱을 디자인할 때 알아야 할 단위이고,

pt는 ios(애플) 앱을 디자인할 때 알아야 할 단위입니다.

 

그렇다면 웹, ios앱, aos앱을 디자인 할 때 다 다른 단위를 사용해야 하나요?

개념은 맞지만 디자이너는 px 단위로 작업을 하면 됩니다.

 

우선 왜 어렵고, 복잡하게 dp,sp, pt 등 다양한 단위가 나왔는지 알 필요가 있을 것 같습니다.

우리가 사용하는 스마트폰은 현재 매우 다양합니다.

디자인 뿐만 아니라 화면 크기, 해상도가 천차만별입니다.

문제는 여기서 시작됩니다. 다양한 해상도와 화면 크기를 대응하기 위해서는

픽셀이라는 절대값 단위로는 대응하기가 용이하지 않기 때문입니다.

 

그래서 DP, SP, PT라는 단위가 나오게 된 것입니다. 

 

 

2. DP란?

DP(Device Independent Pixel)는 디바이스 크기에 의존하지 않는 픽셀이란 뜻 입니다.

1dp는 다양한 디바이스 크기에서도 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

 

DP를 이해하기 위해서는 위 표를 확인할 필요가 있습니다.

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

mdpi에서 dp는 10dp는 xhdpi에서도 10dp이지만, px은 mdpi에서 10px이고 xhdpi에서는 20px이 됩니다.

이를 계산해보면 10px * 320dpi/160dpi = 20px 가 됩니다.

 

• mdpi 기준으로 1dp=1px 입니다.
• xxhdpi 에서는 1dp=4px입니다.

 

 

이러한 이유로 aos 앱 디자인을 하면 mdpi 기준값으로 작업영역을 설정하면

1dp=1px이기에 별도의 계산없이 작업을 할 수 있습니다.

디자인이 끝나고 xhdpi, xxhdpi, xxxhdpi 해상도에 맞게 관련 이미지나 아이콘을 전달하게 됩니다.

(현재는 Zeplin, Sketch 등의 사용으로 이마저도 따로 전달하지는 않습니다.)

 

 

 

3. SP란?

SP(Scale Independent Pixel)는 스케일에 의존하지 않는 픽셀이란 뜻 입니다.

sp는 dp와 비슷한 개념으로 사용자가 선택한 텍스트 크기에 의해 크기가 결정됩니다.

주로 메시지 앱에서 폰트 크기를 변경하는 것을 생각하면 됩니다.

 

4. PT란?

PT(Point)는 ios(애플) 디바이스에 사용하는 dp와 같은 개념입니다. 

ios 디바이스도 다양한 화면 크기를 가지고 있습니다.

이에 대응하기 위해서는 aos(안드로이드)와 마찬가지로 해상도 및 pt에 대한 이해가 필요합니다.

 

 

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

 

ios는 위 이미지처럼 기준 해상도에서 2배, 3배수가 필요합니다.

그렇다면 기준 해상도란 무엇일까요?

 

아이폰에 레티나가 출시하기 전까지 해도 아이폰은 320*480px 을 기준으로 작업하면 됐습니다.

하지만 레티나가 출시되고 현재는 디바이스가 다양해지면서 좀 더 복잡해졌습니다.

최근에는 375*667, 414*736px 의 해상도를 기준 해상도로 2배, 3배수 작업을 진행합니다.

(현재는 Zeplin, Sketch 등의 사용으로 이마저도 따로 전달하지는 않습니다.)

 

 

 

 

 

 

이렇듯 앱(APP) 디자이너는 디자인 프로그램 상에서 px로 작업을 진행하지만,

dp, pt에 대한 개념을 잘 알고 있어야 디자인을 제대로 할 수가 있습니다.