DP PX 변환

현재 진행하고 있는 토이 프로젝트에 새로운 UIUX 디자이너가 합류했다. 

 

새 디자이너는 Zeplin 툴을 이용하고 있었는데 디자인을 살펴보다가 처음보는 크기 단위를 발견했다. 

 

DP

 

dp가 과연 무엇인지...

그래서 이것저것 조사를 해보니 dp는 안드로이드 개발에서 사용하는 크기단위라고 한다. 

 

토이 프로젝트에서는 웹 개발과 안드로이드 개발을 동시에 진행하는데 안드로이드 디자인을 우선 개발하다 보니 dp 단위를 사용하게 된 것이다. 

 

안드로이드를 담당하고 있는 동료 개발자에게 물어보니 안드로이드 앱에서는 dp를 이용하면 알아서 크기가 조절되면서 다양한 모바일 디스플레이에서도 위화감 없이 화면을 구성할 수 있다고 한다. 

 

문제는 웹 어플리케이션을 담당하고 있는 나였다. 

 

따라서 디자이너가 dp 단위로 어플을 제작하면 나는 이것을 px 단위로 적절하게 변환해야 했다. 

 

일단은 dp의 정의부터 살펴보자

 

dp or dip ( Density-independent Pixels) — an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both “dip” and “dp”, though “dp” is more consistent with “sp”.

 

dp는 화면의 물리적 밀집도에 근거한 추상적인 단위이다. 해당 단위는 160 dpi 화며에 비례하며 160 dpi 화면에서 1픽셀은 1 dp가 된다. dp에서 px 변환율은 화면의 밀집도에 따라 잘라지지만 꼭 일정한 비율인 것은 아니다. 컴파일러는 dip와 dp를 모두 받아들이지만 dp는 sp와 더 일치한다. 

 

뭔가 어렵게 설명되어 있지만 대략적으로 설명하자면 물리적인 화면 크기가 아닌 밀집도에 따른 상대적 크기를 나타낸다고 보면 된다. 따라서 1020px 모니터 크기더라도 해상도를 낮추면 dp는 밀집도가 낮아짐에 따라 크기가 변화한다.

 

그렇다면 내 프로젝트에서는 dp를 어떻게 px로 바꿀 수 있을까?

 

아래 웹사이트에 보면 적절한 변환을 계산해준다. 

 

http://labs.rampinteractive.co.uk/android_dp_px_calculator/

http://labs.rampinteractive.co.uk/android_dp_px_calculator/

그리고 아래 출처에 나오는 블로그에서 친절하게도 디바이스별 적절한 변환 비율을 공개해 주셨다. 

주요 해상도별 대표 디바이스
ldpi(120dpi /기타 소형단말기) : 240 x 320
mdpi(160dpi/G1, 옵티머스원) : 320 x 480
mdpi(160dpi/G1, 갤럭시 탭7.0) :600 x 1024
mdpi(160dpi/G1, 모토롤라 Xoom 10,갤럭시탭 7.7 & 10.1) :1280 x 800
hdpi(240dpi / 갤럭시 S/S2) : 480 x 800
hdpi(240dpi / 모토로라 드로이드, XPERIA X10) : 480 x 854
xhdpi(320dpi / 갤럭 시S3/노트II ) : 720 x 1280
xhdpi(320dpi / 삼성 갤럭시 넥서스 ) : 720 x 1194 or 1280 
xhdpi(320dpi / 삼성 갤럭시 노트I : 800 x 1280
xhdpi(320dpi / LG 옵티머스G, 넥서스4) : 768 x 1280
xxhdpi(480dpi / 갤럭시 S4 & 옵티머스G프로) : 1080 x 1920
xxhdpi(640dpi / LG G3) : 1440 x 2560

 

 

출처: https://tadomstudio.tistory.com/4

[안드로이드 / android]  해상도에 대한 이해

 

https://medium.com/analytics-vidhya/what-is-the-difference-between-px-dip-dp-and-sp-e4351fefa685

What is the difference between “px”, “dip”, “dp” and “sp”?