디자이너도 알아야 할 DP ( Device Independence Pixel )의 개념

스크린샷-2013-12-20-오후-4_26_39

안드로이드는 웹이나 iOS와 비해 볼 때 고민해야 할 것도 많고 상당히 까다롭습니다.

안드로이드는 웹처럼 디자인의 범위가 꽤 명확하거나, iOS처럼 구조가 폐쇄적이지도 않지요. 그래서 상당히 많은 상황들을 고려해야만 합니다. 참여하는 개발/기획/디자이너 모두 (어느 정도는) 개발에 관한 기초지식을 갖추어야 한다고 생각합니다.

그런 의미에서, 다소 개발에 대한 지식이긴 하지만 반드시 디자이너들도 알아야 하는, 오늘의 주제인 DP ( Device Independence Pixel ) 에 대한 개념에 대해 이야기 해보도록 하겠습니다.

결론부터 말하자면,
DP의 목적은 ‘다양한 화면 크기에서 동일한 비율로 출력되도록 하는 픽셀 단위’입니다.
적당한 말인지는 모르겠지만, inch와 cm간의 관계와 비슷하지요. ^^

안드로이드는 iOS와 다르게 다양한 크기, 다양한 dpi의 디바이스를 지원합니다.

* dpi는 아시지요? dot per inch – 1인치의 정사각형에 들어가는 픽셀의 수입니다. PC 모니터는 기본적으로 72dpi이고 갤럭시S3는 320dpi입니다. 넥서스7의 경우는 213dpi라는 독특한 밀도를 갖고 있구요. 갤럭시S4는 441dpi입니다. 복잡하지만 디자인할 때는 크게 신경쓰지 않으셔도 됩니다.^^

0000b

http://developer.android.com/guide/practices/screens_support.html

위이미지의 fig.2는 px로 작업한 것이고 fig.3는 dp로 작업된 것입니다.
fig.3와 같이 – 크기와 밀도가 다른 각각의 화면을 모두 만족시키기 위해 개발된 것이 DP라는 개념입니다.

0000c

만일 우리가 옵티머스G1(320*480, 160dp = mdpi)을 기준으로 앱을 하나 만들었다고 가정해 봅시다. 그 안에 위와 같은 연필버튼(30*30pixel)을 넣었다고 해 보죠.

이 앱을 갤럭시 S4(1920*1080, 441dpi = xxhdpi)에서 열게되면, 강제로 3배 크게 확대시켜(90*90pixel) 보여줍니다. 반대로 S4를 기준으로 만든 앱 속의 이미지들은 옵티머스G1에서 1/3로 축소되어 보여지게 됩니다.

이는 Resource identifier라는 클래스(?)를 통해 자동으로 조정됩니다. 이 때 dp가 필요합니다. 즉, ‘디바이스에 따라 크기가 조정되는 부분은 px이 아니라 dp로 부르도록 한다’는 약속인 셈이죠.

만일 이걸 pixel로 작업하게 된다면, 개발자의 코드는 복잡해질 것입니다. mdpi일 경우의 pixel값, hdpi일 경우, xhdpi… 상당히 다양한 경우의 수를 계산해야 하겠지요.

하지만, dp 값은 하나면 됩니다. dp로 제작된 값은 안드로이드가 위와 같이 “자동으로” 기기에 맞는 픽셀값으로 변환하여 적용해 주기 때문이지요.

이와 같이, DP라는 개념이 생기면서 개발자와 디자이너는 조금 편해졌습니다. 최소한 여러 벌의 이미지, 코드 등을 만들지 않아도 되게 되었지요.

자, 이제 디자이너의 입장에서 생각해 보도록 하겠습니다.

우리는 보통 구축의 초기 단계에서 타겟이 되는 주 디바이스를 설정합니다. 그리고, 그 단말의 크기에 맞추어 디자인합니다.
그리고, 디자인이 끝나면, 완성된 PSD를 가이드로 번역(?)하지요.

갤럭시 S3를 기준하여,즉 720*1080px의 psd 안에 빨간 240px짜리 버튼을 만들었다 칩시다.

갤럭시 S3는 320dpi 이기 때문에, 이를 dp로 변환하기 위해서는 다음과 같은 수식이 필요합니다.
dp = px * (160/dpi), 즉 dp = px * (160/320) = px * 0.5
다시 말하면, PSD에서의 240px짜리 버튼은 가이드에는 120 dp로 기록됩니다.

* 여기서 160이라는 값은, 안드로이드가 mdpi 폰의 기준(baseline)을 160dpi로 잡아 두었기 때문입니다. 즉, 160dpi의 폰에서는 dp=px인 것이지요.

그리고, 이렇게 만든 앱을 Nexus S (480*800, 240dpi)에서 보면, 위의 수식의 역이 적용되겠지요.
pixel = dp * (dpi/160), 즉 pixel = dp * (240/160) = dp * 1.5
따라서, 120dp가 Nexus S에서는 180px로 표현되는 것입니다.

0000e우리가 만일 dp 전환을 하지 않고 pixel로 작업했다면, Nexus S에서는 맨 오른쪽 이미지처럼 크게 보일 것입니다. 하지만, dp로 작업하게 되면 Nexus S에서는 가운데 이미지와 같이 2/3으로 축소시켜 보여주게 되지요.

하지만, 잘 보면 아시겠지만, 갤럭시 S3에서는 빨간 버튼이 정확하게 화면의 1/3을 차지하는 반면, Nexus S에서는 1/3보다 더 크게 표현됩니다. 왜일까요?

가로사이즈가 다르기 때문이지요. 만일 Nexus S의 가로넓이가 360dp였다면 정확하게 똑같이 표현되었겠지만, 제조사가 다르니 이런 문제들은 dp만으로는 완전히 해결되지 않습니다.
해상도는 (갤럭시S3:Nexus S = 9:6)인 반면, DPI는 (갤럭시S3:Nexus S = 8:6)이기 때문이지요.

오늘 포스팅은 좀 두서가 없기는 합니다. 단순한 개념이지만, 초심자들에게는 좀 헷갈릴만한 부분이지요. 차분하게 따라 읽어보시면 – 그리고 한두번 가이드를 진행해 보시면, 금세 적응하시리라 믿습니다.

간단히 정리합니다.

1. 웹에서의 px -> 안드로이드에서는 dp로 전환해야 함.
2. dp는 디바이스의 크기에 따라 element들을 확대/축소해 주기 위해 만들어진 단위이다.
3. 하지만, dp개념이 모든 해상도문제에 대한 완전한 해답은 아니다.

좀 더 쉽게 설명할 수 있었으면 좋았을텐데요.

죄송합니다. 차근차근 읽어보시면 좀 나을거에요. ^^

감사합니다

– 가치디자인그룹 BS Kim

Share this:

2 comments, add your’s.

꼼순이

DP의 약자는 density independent pixel 아닌가요?

blogadmin

https://en.wikipedia.org/wiki/Device_independent_pixel
둘다 모두 사용되고 있는 개념입니다. ^^

Leave a comment