픽셀 밀도와 DP, SP 개념
쉽게 설명하는 디스플레이 단위(2편)
애플의 픽셀 밀도 단위인 PT(Point)가 있다면, 안드로이드에는 DP(Device-independent pixels)와 SP(Scale-independent pixels)라는 픽셀 밀도 단위가 있다. iOS 플랫폼에서 여러 디바이스의 UI를 일관된 크기와 해상도로 표현하기 위해 pt단위를 도입했다. 그 이후 구글에서는 aOS 운영체제로 구현된 디바이스의 UI를 일관되게 표현하기 위해 dp 단위를 만들었다. 구글은 왜 먼저 만들어진 pt 단위를 사용하지 않고, 새로운 밀도 단위를 만들었을까?
aOS에서 새로운 밀도 단위를 만든 이유
pt 단위는 픽셀 밀도와 상관없이 1pt=1/72인치 값을 적용한다. 다시 말해 모든 기기에서 1pt는 항상 1/72인치의 크기로 표시되어 디바이스 해상도에 따라 px 값만 증가하거나 축소한다. pt 값은 해상도와 상관없이 모두 동일한 것이다.
디바이스가 변경되어도 해상도(px 개수)만 바뀌고, pt 크기는 동일하다이처럼 iOS는 픽셀 밀도를 고정된 범주로 나누지 않고 크기의 단위를 통일해 버린다. 반면 aOS는 iOS에 비해 더 다양한 디바이스 해상도가 있다 보니 픽셀 밀도 범위를 6개로 나누었다. 그래서 pt 단위를 aOS에서 사용할 수 없다. 왜냐하면 범위에 따라 배율이 계산되어야 하기 때문이다.
ldpi(저밀도) - 0.75x, ~120 dpi
mdpi(중간 밀도) - 1x, ~160 dpi
hdpi(고밀도) - 1.5x, ~240 dpi
xhdpi(초고밀도) - 2x, ~320 dpi
xxhdpi(초초고밀도) - 3x, ~480 dpi
xxxhdpi(초초초고밀도) - 4x, ~640 dpi
ps. dpi에 대한 개념을 알고 싶다면 이전 편(픽셀 밀도와 PT개념)을 참고
DP 개념
그래서 dp 단위는 밀도 독립적 픽셀(Device-independent pixels)의 줄임말로, dip라고도 부른다(여기서는 dp로 통일). 밀도와 독립적이라는 것은 밀도에 따라 1dp의 값이 다르다는 뜻이다. 앞서 언급했듯, 안드로이드는 픽셀 밀도를 6개 범위로 구분했고, 이 범위에 따라 dp가 대응하도록 만들었다. 그렇기 때문에 dp는 픽셀 밀도에 따라 디자인 크기를 자동으로 조정하기 위해 1dp의 값이 1pt처럼 정해져 있지 않다. 하지만 보편적으로 aOS에서는 160 dpi를 1dp로 설정하고 있다. (위의 6개 밀도 단위 중 160 dpi가 1x(1 배율)로 정의되는 이유다)
dp = (픽셀 x 160)/화면 밀도
px = (dp x 화면 밀도)/160
(일반 기준) 1dp = 160 dpi
SP 개념
iOS에서는 pt가 텍스트의 크기도 함께 정의한다. pt 단위가 픽셀 밀도와 상관없이 모두 1pt=1/72인치 단위로 값을 통일해서 디자인 크기를 계산하기 때문이다. 반면 dp는 레이아웃이나 아이콘과 같은 비 텍스트 요소의 크기만 계산하는 단위이다. 그래서 텍스트 크기를 디바이스마다 일관되게 표현하기 위해 sp 단위를 별도로 만들었다.
dp = 비 텍스트 요소에 해당하는 단위
sp = 텍스트 요소에 해당하는 단위
텍스트를 DP로 설정한 경우 vs. SP로 설정한 경우만약 디자이너가 시각적 표현을 위해 다른 디바이스에서도 텍스트 크기를 변환하지 않고, 모두 똑같은 크기로 보여주고 싶다면 텍스트 스타일에서 sp가 아닌 dp 단위로 설정하면 된다. 텍스트를 dp 단위로 설정하는 것은 텍스트를 비 텍스트 요소(레이아웃, 아이콘 등)로 설정하는 것과 같은 의미다.
이제 픽셀 밀도와 그 단위인 pt, dp, sp를 알았으니, 디자인 작업물이 디바이스에 표현되는 과정을 알아보자. 해당 과정을 알면 개발자와 소통하기 쉽고, 실제 구현되는 결과물의 완성도를 높이도록 설계할 수 있다.
정리
1. aOS의 밀도 단위가 생겨난 배경
❶ iOS의 pt 단위를 사용 못하는 이유 : aOS는 픽셀 밀도를 6개 범주로 구분하기 때문
❷ pt와 차이점 : 픽셀 밀도에 따라 디자인 크기를 자동으로 조정
❸ 다양한 픽셀 밀도에 대응하는 2가지 단위가 존재 : dp, sp
2. aOS의 픽셀 밀도범위 6개
❶ ldpi(저밀도) - 0.75px, ~120 dpi
❷ mdpi(중간 밀도) - 1px, ~160 dpi
❸ hdpi(고밀도) - 1.5px, ~240 dpi
❹ xhdpi(초고밀도) - 2x, ~320 dpi
❺ xxhdpi(초초고밀도) - 3x, ~480 dpi
❻ xxxhdpi(초초초고밀도) - 4x, ~640 dpi
3. DP 개념 정리
❶ dp = 비 텍스트 요소에 해당하는 단위
❷ dp = (픽셀 x 160)/화면 밀도
❸ (일반 기준) 1dp = 160 dpi
4. SP 개념 정리
❶ sp = 텍스트 요소에 해당하는 범위
