[머티리얼 디자인] 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 magin + 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를 보여줄 수 있습니다. 만약 mpdi에서 픽셀 값이 1.5배(xhdpi) 하였을 때 소수점으로 나누어 떨어지면 개발자가 추가 수정해야 때문에 유의하셔야 합니다. 1.5배, 2배, 3배 하였을 때도 모두 4의 배수 단위로 떨어지면 최고입니다.
mdpi
xhpdi