안드로이드에서 DPI는 이렇게 적용된다. 4의배수? 8의 배수?*기기별 해상도

지난 시간에 이어 DPI를 이해했다면, 안드로이드의 해상도에 대해서 알아볼 겁니다. 조금 복잡합니다. 저와 함께 차근차근 하나하나 개념을 정의해보도록 해요.

이 표는 두고두고 사용 될 표입니다. 어디에 메모를 해두던 캡쳐를 해두던 꼭 가지고 계세요. 

조금 아득해보이지만 알고 보면 아무것도 아닌 녀석들입니다. 각 기기별로 해상도가 다르기 때문에 DPI가 다르고 DPI에 맞는 비율이 다릅니다. 때문에 어플 속 한 개의 아이콘을 만들 때 총 6가지 해상도에 맞춘 아이콘을 제작해야 한다는 의미입니다.

1개의 아이콘을 만들었는데, 6개의 아이콘을 만들어야 한다고..?

그러나 굳이 6가지 DPI에 맞는 아이콘을 만들 필요는 없습니다. 아래의 두가지 방법을 소개합니다.

1. 벡터 파일로 만드는 방법

일러스트의 svg와 같은 파일로 작업을 하면 Ratio1 비율로 제작을 하면 됩니다. 비율이 달라지더라도 그 형태가 유지가 되기 때문이죠.

2. 일단 4의 크기로 만든다. 그리고 비율을 줄여서 모든 화면 대응한다.

하지만 벡터 작업이 아닌 비트맵을 이용하는 포토샵과 같은 프로그램으로 작업을 하게되면 1의 배수, 1.5의 배수~ 4의 배수까지 고려를 해서 해상도가 떨어지지 않도록 해상도에 맞는 작업을 해야 합니다. 그러나 모든 비율에 맞게 작업을 하는 것이 아니라 4의 배수를 고려해서 만들어놓게 되면 xxhdpi~ldpi 값으로 축소되었을때 대응이 되기 때문에 4의 배수로 작업을 해놓고 축소하는 방식으로 제작을 하게 됩니다. 

이 부분을 모르시겠다면 다시 위로 올라가서 표를 봐봅니다.

그래서 비트맵을 이용하는 포토샵의 경우 작업환경을 4 의비율로 만들어 작업을 하고 그 배수를 줄여 작업을 합니다. 예를 들어 360 DPI 아이콘을 만들기 위해 720 DPI 아이콘을 만들어 그 크기를 반으로(*1/2) 만들어 버리는 경우를 말합니다.

여기서 하나더! (★중요)

그러나 4의 크기로 만드는 게 아니라 8의 크기를 기준으로 작업을 하는 것이 좋습니다.
예를 들어 4px 두께의 선을 그린다고 했을 때,
4px -> 3px -> 2px -> 1px (1.5는 정수가 아니다)
8px -> 6px -> 4px -> 3px -> 2px로 나타낼 수 있다.

(그러니까 32dp의 status bar를 그리기 위해서 밀도에 비례해서 2를 곱해서 64px의 가이드를 잡아야 hdpi값을 잡을 수 있다는 말이다.)

그렇기 때문에 구글 머터리얼 디자인 가이드를 보면 8의 배수로 작업이 된 것들이 많습니다. ​

그렇기 때문에 

'8' 요소끼리의 최하 간격
'16' 스크린에서 최하 좌우 마진(실제로 좁아서 24를 쓰는 경우도 있다. 모든 경우에는 예외가 있다!!)
'24' 버튼의 크기

로 주로 많이 사용을 하게 됩니다. 그러나 모든 컴포넌트가 8의 배수로 들어가기 어렵기 때문에 4의 배수도 씁니다. 이거 정말 중요한 내용입니다. 우리 다 같이 숙지하고 숙지를 합시다!

 

여기서부터는 이런 8의 배수가 어떻게 적용이 되는지 실제 안드로이드 기기를 통해 알아보도록 할게요. 

---

안드로이드의 디바이스 규격은 어떻게 될까?

material.io/resources/devices/

Device Metrics - Material Design

위 사이트는 구글 머터리얼 디자인에서 가이드하고 있는 기기별 해상도입니다.

나와있는 해상도를 보면 가장 많은 해상도가 가로 360인데요. 360말 고도 1024, 800 등 많은 가로길이를 보실 수 있으실 거예요. (세로를 고려하지 않는 이유는 어차피 세로로 길어지는 것은 스크롤이 되기 때문에 360*의 해상도와 동일하다고 생각하시면 됩니다.)

뭔가... 위에서 봤던 내용이랑 교차가 되지 않으신가요...???!!!

!!!!

맞아요 이게 다 8의 배수입니다. 360도 640도 모두 8의 배수입니다. 모든 해상도에 대비하기 위한 비율의 해상으로 만들어졌다는 것입니다. 그래서

360*640의 갤럭시 S6

 

간단하게 S6를 살펴봅시다. 툴바 유닛도 UI 깊이도 거터 길이도 모두 8의 배수입니다. 뭔가 조금 더 안드로이드와 친해진 기분이 드시나요? 오늘은 DPI가 어떤 식으로 안드로이드에 적용이 되는지에 대해서 살펴보았습니다. 

다음 시간에는 그리드 시스템에 대해 알아보도록 할게요. DPI와 이어집니다.