[머티리얼 디자인] Layout 이해하기
들어가기 앞서
가장 많이 사용하는 해상도
Material Design에서 px이 아니라 dp를 이용한다는 것을 이전 포스팅을 통해 알아보았다. 다만 유의할 점은 이제 160 dpi 스마트폰은 거의 나오지 않는다는 점이다. mdpi를 가진 스마트폰 사용자는 거의 없다.
출처: https://developer.android.com/about/dashboards/index.html#Screens
실제 안드로이드 측에서 제공하는 통계를 보면 보통 스크린 사이즈에 hdpi 혹은 xhdpi, xxhdpi를 많이 사용하고 있다. UI 디자인 시에 mdpi를 기준으로 작업하더라도 결국 이후에는 hdpi, xxhdpi에서 사용된다는 점을 생각해두면 좋다.
dpi는 dot per inch를 의미하며 보통 mdpi에서 1dp를 1px 기준으로 하여 작업한다. mdpi는 160 dpi, 즉 1인치당 160개의 점이 찍혀 있는 해상도다. hdpi는 mdpi의 1.5배, xhdpi는 2배, xxhdpi는 3배, xxxhdpi는 4배다.
스크린의 dp 가로폭을 계산하는 방법
dp를 계산하는 방식은 다음과 같다. dp = (width in pixels * 160) / screen density다. UI 디자인에 들어가기 전에 처음 가로의 dp 설정을 몇으로 해야 하는지 알아둘 필요가 있다. 만약 가로에 360px이 있고 스크린 밀도가 240인 디바이스라면 가로폭은 240dp가 된다. 360*(160/240)이다. 그렇다면 가로에 720px이 있고 스크린 밀도가 480인 경우 가로폭은 어떻게 될까? 720*(160/480)을 해보면 720/3이 되고 마찬가지로 240이 된다. 이 부분은 이해가 어려우면 스킵해도 된다.
기본 그리드
기준선은 어떻게 구성되어 있는가?
머티리얼 디자인의 그리드는 8dp다. 즉 가로와 세로가 8dp인 정사각형으로 그리드가 꽉 채워져 있다. 스케치 기준으로 이러한 그리드가 나온다. 그리드는 나처럼 직접 그리지 말고 머티리얼 디자인 가이드에서 컴포넌트를 받아 쓰면 된다.
타이포 기준선은 어떻게 구성되어 있는가?
타이포는 4dp 기준선에 맞춰 정렬되어 있다.
출처: https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-baseline-grids
종합하자면 머티리얼 디자인의 요소들은 4의 배수 기준으로 정렬된다. (8의 배수가 4의 배수이므로.) 특별한 문제가 없다면 요소의 배치를 4의 배수 기준으로 맞추는 편이 좋다. 타이포에서 빼놓을 수 없는 글줄 조정 역시 미리 정해져 있으므로 이에 맞춰 사용하면 된다.
UI 요소 간 마진 값은 8dp를 기준으로 16dp, 32dp 등으로 맞춰 사용한다. 5dp, 6dp처럼 마진 값을 줄 때도 있지만 기본적으로는 8dp의 배수로 적용한다. 그리드상의 마진과 거터(gutter) 값은 8, 16, 24, 40, (40 margin + 24 gutter) 같은 조합이 기본이다.
모바일에서 칼럼 값은 4칼럼을 기본으로 하고, 16 거터를 기준으로 한다. 마진 값은 시각 보정을 거쳐 위의 값 중에서 골라 선택하면 된다.
마이크로 타이포그래피와 마진, 거터에 대해서는 할 이야기가 많지만 기회가 되면 이후 포스팅에서 다루겠다.
추가로 조심하면 좋을 부분은 배경과 텍스트의 대조다. 7:1 이상이면 안전하다. 최소 4.5:1을 기준으로 한다. 웹 표준을 생각하면 된다.
https://webaim.org/resources/contrastchecker/ 이곳에서 확인할 수 있다.
기본 UI 요소들 설명
안드로이드를 디자인할 때 dp값이 정해져 있는 요소들이 있다. Status bar, App bar(Primary tool bar), Bottom Navigation 등은 가로와 세로의 dp값이 정해져 있다. 아래에 추가로 정리한다.
Status bar: 24dp
App bar (Primary tool bar): 56dp
Subttitle : 48dp
Bottom Navigiation: 48dp
list : 72dp
Space between content areas: 8dp
기본 요소들을 px값으로 디자인하고 싶다면 mdpi를 1px 기준으로 잡으면 간단하다. mdpi와 xhdpi에서 픽셀 값의 차이를 확인해보면 된다. mdpi보다 xhdpi에서 픽셀이 2배로 많아졌으니, 당연히 픽셀 수도 2배가 되어야 같은 UI를 보여줄 수 있다. 만약 mdpi에서 픽셀 값을 1.5배(xhdpi) 했을 때 소수점으로 나누어떨어지지 않으면 개발자가 추가 수정해야 하므로 유의해야 한다. 1.5배, 2배, 3배를 했을 때도 모두 4의 배수 단위로 떨어지면 가장 좋다.
mdpi
xhpdi