Material Design3 탐구하기 : dp
- dp란 무엇인가?
- dp를 왜 알아야 하는가?
Material design3를 공부하다 보니
측정 부분에서 계속 dp라는 단위가 나왔다.
이전에 유튜브로 공부했던 디자인베이스 님 유튜브에서도 한 번 다뤘었던 부분인데
디자이너가 왜 이런거까지 알아야지 하고 머리가 아파와 후루룩 넘겼던걸
기어이 마주치고야 말았다.
결국 매도 먼저 맞으면 좋을걸...
Material design3를 공부하면 계속 맞닥뜨려야 할 것 같아
한 번은 짚고 넘어가면 좋을 것 같아 소개하고자 한다.
DP란?
DP(definity independent pixel)는 밀도 독립적 픽셀이라는 의미로서
다양한 픽셀밀도를 대안하기 위한 안드로이드만의 고유 단위이다.
기존 우리가 사용하는 Pixel 단위는 현실에서 쓰이는 화면 구성 값이기 때문에
각각 다른 밀도 값을 가진 화면에서는 각각의 요소는 화면에 따라
작아지거나 늘어나는 오류가 발생한다.
위의 A와 B는 같은 화면 크기를 가졌지만 A는 한 화면의 4픽셀을 넣을 수 있고
B는 16픽셀을 넣을 수 있다. 따라서 같은 크기의 1px의 요소를 넣는다면
당연히 B화면에서는 작게 보이는 오류가 생기는 것이다.
이러한 밀도 값들을 안드로이드는 DPI(*dots per inch)란 개념으로 세분화 하였으며
이에 따라 작업한 픽셀값이 각 DPI마다 적절하게 배수할 수 있는 기준값들을 정해둔 것이다.
*dots per inch : 1인치 안에 들어가는 점의 갯수
따라서 디지털 환경에서 적절하게 만들어 놓은 콘텐츠의 크기는
각기 다른 dpi 화면마다 일정하게 보일 수 있게 만드는 상대적인 값을 dp라는 단위로 정해진다.
안드로이드에선 mdpi(160dpi) 환경에서 1px을 1dp로 삼고 있기 때문에
아래와 같은 식으로 각 콘텐츠가 같은 dp값을 가지면서 이에 따라 pixel값이 변한다.
dp = pixel x 160 / dpi
만약 *피그마에서 100pixel로 콘텐츠를 작업 했다면,
개발자가 이를 320dpi(xhdpi)환경으로 변경한다면
콘텐츠 요소는 200pixel이 되는 것이다.
* 피그마는 1px=1dp로 되어있다.
100dp = ?pixel x 160 / 320
? = 200
다만, 이러한 값 들이 밀도 내에서만 동일하게 보이게 하는 것이지
디바이스 크기별로 적절하게 보이게 하는 건 결코 아니다.
따라서, 디바이스의 실제 크기에 따라 적절하게
레이아웃을 생각하고 배치하는 것이 디자이너의 역할일 것이다.