디스플레이 단위(PX, DP, SP, PT) 알아보기
UI 디자인 시작하기
PX(Pixel)
웹에서 주로 쓰이는 단위. 화면을 구성하는 가장 기본이 되는 단위이다. 해상도를 나타낼 때 쓰인다. (Picture Element에서 유래됐다고 한다)
DP(Density Independent Pixel)
안드로이드에서 주로 쓰이는 단위. DP는 디스플레이의 좌표라고 생각하면 된다. "픽셀과 상관없이 독립적인 크기를 가진다"라는 뜻으로 해석할 수 있다. 이해를 위해 단위를 dp로 진행한 경우와 px로 진행한 경우를 비교해 보자.
위의 예시 이미지를 보면 가로길이(360dp)의 절반(180dp) 크기의 사각형을 볼 수 있다. 여기서 180이라는 수치보다는 360의 절반(180)인 50%라는 수치에 집중해보자. dp는 좌표이므로 가로 영역의 50%인 중간값을 좌표로 설정한다는 의미가 된다. 즉 1 배수에서의 사각형은 180x180px 크기지만 3 배수에서는 540x540px 크기의 사각형이 된다. 그리고 늘어난 px은 다시 축소되어 기기에 담기게 된다. 이 것을 고해상도라고 한다.
.
위의 이미지를 보면 px은 dp처럼 밀도 독립적인 픽셀이 아니므로 해상도가 늘어나면 그에 맞춰서 작아지게 된다. (해상도를 변경했을 때 바탕화면의 아이콘이 작아진 경험을 생각해보자)
* 예시 이미지에서 1.5x와 4x는 생략되었다
그래서 안드로이드 디자인할 때 어떤 크기로 해야 하나요?라는 질문에 360x640(1 배수)로 하면 됩니다.라는 답변이 달리는 것이다. 밀도와 상관없이 dp라는 단위를 활용하여 1x인 360dp x 640dp로 디자인을 전달하고 개발하면 안드로이드 운영체제에서 1x, 1.5x, 2x, 3x, 4x로 변환되어 각 기기에서 보이게 된다.
SP(Scale Independent Pixel)
주로 안드로이드에서 쓰이는 텍스트 단위이다. 의미를 해석하면 텍스트의 크기만 독립적으로 변환이 가능하다는 뜻이다. 이는 유저가 폰트 크기나 스타일을 자유롭게 변경하는 것을 허용한다는 것이다. (안드로이드에서 원하는 폰트로 변경 가능한 것을 떠올려보자) 유저가 아무것도 변경하지 않으면 DP처럼 알아서 크기가 변하게 된다. (유저가 내 앱에서 폰트를 바꾸는 게 싫다면 폰트 단위를 DP로 전달하자)
PT(Point)
iOS에서 사용하는 단위이며 본질적으론 좌표 개념이지만 dp단위와 다르게 안드로이드처럼 비율로 늘어나지 않는다. 이를 이해하기 위해선 가변, 고정 영역에 대한 이해가 필요하다.
'이토록 쉬운 스케치' 저자 서한교입니다.
치앙마이에서 Freelance Designer 그리고 백수로 살아가고 있습니다.
E-Book
종이책
