[머리리얼 디자인] DP 이해하기
DP? PPI? 이게 도대체 무엇인가요?
포스트 이미지 출처 : 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개의 점으로 호랑이를 묘사한 것과 1000개의 점으로 호랑이를 묘사한 것, 10000개의 점으로 호랑이를 묘사한 것을 비교해보면 어떨까요?
조르주 쇠라의 점묘법 출처 : 위키피디아당연히 10000개의 점으로 묘사한 호랑이가 가장 또렷한 호랑이의 형상일 것입니다. 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에 해당하는 색밖에 사용할 수 없습니다. 만약 bbp가 2라면 어떻게 될까요? 00, 01, 10, 11 총 4가지의 색을 표현할 수 있습니다. bbp가 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라는 것을 기억하면서요.
