UI 디자이너라면 알아야할 기본상식!

초보 디자이너를 위한 안드로이드 DP, PX, DPI에 대한 개념

한윤석 (DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

입사한지 1달이 채 안된 UI/UX 디자이너 한윤석의 여정을 기록합니다. 회사 디자인 업무를 하던중 dpi dp에 대한 이야기가 나왔을때, 들어는 봤는데 정확히 어떤 개념이지? 어떻게 업무에 반영해야하지? 하고 혼자 긴장했던 기억이 납니다. 급하게 dp, px, dpi에 대한 개념과 적용하는 방법을 스터디하고 업무에 적용했습니다.

신입 UI 디자이너를 위한 안드로이드 DP, PX, DPI에 대한 개념

배경지식

안드로이드

UI디자인을 할떄, IOS와 다르게 안드로이드에서는 'dp 단위'라는 개념이 나타나게 되는데요, 안드로이드는 IOS와 다르게 다양한 스마트폰 화면 크기와 해상도를 지원하기 때문에 이러한 개념이 필요합니다.

px 단위

PX 단위는 화면을 구성하는 최소단위로 화면의 크기와 상관없이 지정한 수치로 표시되는 절대적 표시단위 입니다. 그러므로 화면크기가 다양한 안드로이드에서는 px보다는 dp가 사용하기 좋습니다.

dpi

dpi는  Dot Per Inch로 1인치에 들어가는 픽셀을 나타내는 단위입니다.

예를 들면 100DPI는 1인치당 픽셀이 100개 포함된다는 것을 말하며 개수가 많을 수록 고밀도이며 안드로이드에서 주요 DPI는 아래와 같습니다.

ldpi : 120dpi

mdpi : 160dpi (기본)

hdpi : 240dpi

xhdpi : 320dpi

xxhdpi : 480dpi

xxxhdpi : 640dpi

안드로이드의 기준 DPI는 160 DPI 입니다. 160 DPI에서 1dp는 1px이 됩니다.

디자인 적용

위 개념을 실무에서 어떻게 응용하는가?

실제로 디자이너는 디자인 후 이미지를 보내줄때 px로 작업한 이미지를 dp로 변환하여 해상도별로 Png파일을 보내줘야 하고 개발자도 리소스 파일을 해상도별로 관리해야 합니다.

px을 dp로 변환하는 방법

px로 디자인 작업 후, 아래 링크를 통해 px로 작업한 이미지를 dp로 변경할때 사이즈를 몇 배로 키워야하는지 확인 할 수 있습니다.

-  Android DP/PX converter (http://labs.rampinteractive.co.uk/android_dp_px_calculator/)

예를들어, 10px은 xhdpi에서 2배기 때문에 20px로 사이즈를 키워서 이미지를 저장해야 합니다.

결론

디자인 작업을 할때, 안드로이드를 위해 px을 dp로 변환하는 작업 후 해당 dpi별로 이미지 크기를 나누어 해상도별로 관리해야 합니다. dp 변환은 위의 웹사이트를 통해 쉽게 변환할 수 있습니다.