포스트 이미지 출처 : www.androidcentral.com

안드로이드 앱을 디자인할 때 필수적으로 고려해야 할 요소가 있다. 바로 DP다. 대부분 픽셀이나 포인트 개념만 사용해온 디자이너 입장에서 DP는 생소할 수밖에 없다.

DP를 이해하려면 픽셀 밀도 개념부터 차근차근 이해해야 한다.

픽셀 밀도

Google Material Design 가이드에는 픽셀 밀도(pixel density)를 다음과 같이 정의하고 있다.

The number of pixels that fit into an inch is referred to as “pixel density.” High-density screens have more pixels per inch than low-density ones. As a result, UI elements (such as a button) appear physically larger on low-density screens and smaller on high-density screens.

1인치에 들어가는 픽셀의 수를 픽셀 밀도(Pixel Density)라고 정의한다. 높은 밀도를 가진 스크린은 1인치당 더 많은 픽셀을 가지고 있다.

해상도(resolution)라는 말은 익숙할 것이다. 해상도는 다르게 말하면 PPI * inch다. PPI란 Pixel per Inch다. 일반적으로 해상도가 높은 기기에서 더 깔끔한 화질을 볼 수 있다는 것은 너무나 당연하다.

점묘법

왜 그럴까? 점을 찍어 그림을 그리는 점묘법을 떠올려보면 된다. 100개의 점으로 호랑이를 묘사한 것과 1,000개의 점으로 묘사한 것, 10,000개의 점으로 묘사한 것을 비교하면 차이가 선명하게 드러난다.

조르주 쇠라의 점묘법 출처 : 위키피디아

당연히 10,000개의 점으로 묘사한 호랑이가 가장 또렷한 형상일 것이다. PPI의 개념 역시 비슷하다. 1인치당 100픽셀을 보여주는 기기와 1인치당 300픽셀을 보여주는 기기를 비교해보면, 1인치당 300픽셀을 보여주는 기기가 더 높은 해상도를 지원하는 것은 당연하다. 점묘법으로 다시 생각해보면 1인치당 100개의 점으로 그리는 호랑이보다 300개로 그리는 호랑이가 훨씬 더 또렷할 수밖에 없다.

이제 색을 표현하기 위한 BPP를 보자

(이 단락은 읽지 않아도 무방하다.) BPP란 Bit per Pixel로 색 값을 표현할 때 사용되는 개념이다. bpp가 1이라고 가정해보자. 그렇다면 1픽셀에 들어갈 수 있는 비트는 1개가 되고, 이 점으로 표시할 수 있는 색의 종류는 2개가 된다. 이유는 간단하다. 비트는 0과 1을 저장하는 기본 단위이기 때문이다. 따라서 1픽셀당 1개의 점을 찍을 수 있다면 0, 1에 해당하는 색밖에 사용할 수 없다. 만약 bpp가 2라면 00, 01, 10, 11 총 4가지 색을 표현할 수 있다. bpp가 3이라면 000부터 111까지 총 8개의 색을 표현할 수 있다. 이로 인해 찍히는 색의 개수는 2^bpp라고 추론할 수 있다.

bpp당 색의 수

32비트 해상도와 64비트 해상도의 기기에서 색 값 차이가 나는 것은 바로 이런 이유 때문이다. 요즘에는 32비트 대신 많은 기기가 64비트 해상도를 지원한다.

*BPP는 이번 포스팅과 큰 관련이 없어 보이지만 해상도의 개념을 이해하기 위해 필요한 개념이라 덧붙였다.

간단히 풀어보자

여기까지 읽었다면 이런 생각이 들 수 있다. 그래서 도대체 말하고자 하는 게 무엇이냐는 질문이다. 바로 이것이다. 이 간단한 문제를 풀기 위해 이렇게 먼 길을 돌아왔다. 571 dpi를 지원하는 5.81inch 디스플레이를 가진 Galaxy8은 몇 개의 픽셀을 디스플레이에 보여줄 수 있을까?

답은 가로세로 비율을 고려했을 때 1440 x 2960 = 4262400개의 픽셀을 가질 수 있다는 것이다. 가로에서 표현할 수 있는 픽셀은 총 1440개이고 세로에서 표현할 수 있는 픽셀은 총 2960개다.

출처: https://napa.i.lithium.com/t5/image/serverpage/image-id/44004iDBC4D373559CF4F9?v=1.0

드디어 DP?

픽셀 밀도 개념을 이해하느라 수고가 많았다. 간단히 말하면 1인치당 찍히는 픽셀의 개수다. 이제 왜 dpi 개념이 필요한지 조금은 감을 잡았을 것이다.

1970년대로 돌아가 24 ppi와 48 ppi를 가진 기기가 각각 있다고 가정해보자. 이제 가로세로 모두 48px인 버튼 UI를 두 기기에서 보여주려 한다.

그러면 어떤 현상이 벌어질까?

버튼의 크기는 48px로 동일하지만 두 기기는 다른 크기로 버튼을 보여준다. 24 ppi 기기에서 가로세로 48px 버튼을 출력하려면 2인치가 필요하다. 하지만 48 ppi 기기에서는 1인치면 충분하다.

아래 머티리얼 디자인 가이드를 보자.

저밀도 화면 출처 : 구글 머티리얼 디자인 가이드

고밀도 화면 출처 : 구글 머티리얼 디자인 가이드

저밀도 기기일수록 UI는 크게 나오고, 고밀도 기기일수록 UI는 작게 나온다. 같은 픽셀을 표시하기 위해 필요한 인치가 다르기 때문에 당연히 일어나는 현상이다.

이러한 현상을 해결하기 위해 나온 개념이 DP다.

드디어 DP!

이러한 현상을 해결하기 위해 나온 개념이 DP다. DP란 Density-Independent Pixel의 줄임말로, 1인치당 픽셀 밀도에 따라 크기가 변하지 않는 UI를 만들기 위해 제작되었다.

아래의 dp 계산 변환 수식을 보자.

dp = (픽셀 단위 너비 * 160) / 화면 밀도

그렇다면 왜 이런 수식이 나온 걸까?

1 dp는 1인치당 160개의 점(dot)을 가진 화면을 기준으로 한다. 1 dp는 160 dpi를 가진 화면에서 1px 크기와 동일하다. 왜 160으로 정했을까? dp 개념이 정립되던 시기에 가장 많이 사용하던 디바이스의 dpi가 160이었기 때문이다. 이를 mdpi(medium screen density)라고 한다.

dpi는 위에서 말한 ppi 개념과 유사하게 생각하면 된다.

그렇다면 dpi가 571이나 되는 Galaxy S8와 160 dpi의 옵티머스 원에서 모두 같은 사용자 경험을 제공하는 UI를 만들려면 어떻게 해야 할까?

다음 포스팅을 위해 먼저 Galaxy S8(이하 S8)를 디자인하기 위한 dp를 계산해보자. 160 dpi에서 1px이 1dp라는 점을 기억하면 된다.