Weekly UX Study/[Aug 2022] Material Design 3

[8월 3주차] Material Design 3 - Adaptive Design (1)

se_starry 2022. 8. 21. 21:10

Adaptive Design 

반응형 레이아웃이란 사용자가 입력한 인풋, 디바이스 종류, 스크린의 요소에 반응하는 것이다

자연스럽게 반응하는 것, 다양한 크기의 디바이스에 반응하는 것이 중요하다

 

 

Design for large screens

(1) Responsive layout grid

 

Grid는 Column (기둥), Gutter(기둥 간의 여백), Margin (기둥과 프레임 간의 여백) 으로 구성된다

텍스트, 이미지 등 다양한 UI 요소를 Grid에 맞춰 배치함으로써 일관적이고 논리적인 사용자 경험을 만들어낼 수 있다

프레임의 크기가 변하면 프레임 내의 Column 의 갯수도 그에 맞춰 변한다

 

 

 

(2) Breakpoints

 

아래 가이드라인은 스크린 사이즈 별로 어떤 레이아웃이 반응형 디자인을 하기에 가장 적합한지를 나타낸 것이다

 

(내가 몰라서 정리하는 용어)

  • Portrait : 화면 방향이 세로인 상태
  • Landscape : 화면 방향이 가로인 상태

 

구글에서 권고하는 가이드는 아래와 같다

Portrait, Landscape 열도 있었는데 내가 꼭 기억해야 하는 내용은 아닌 듯 해 해당 열은 생략한다

Breakpoint range(dp) Window size class Columns Minimum margins
0 - 599 Compact  4 8
600 - 839 Medium 12 12
840 + Expanded 12 32

 

(여담)

살펴보면 Columns 갯수, Minimum margins 모두 4의 배수인데

여러 경험담을 모아보니 4의 배수가 요소 배치를 균형감 있게 하는 데에 좋은 숫자라고들 하더라

+ 나도 현재 사이드 프로젝트에서 4의 배수인 12를 기준으로 Grid를 만들었다

 

 

(3) Material measurements

 

UI 요소의 크기 변화 또한 규칙적으로 맞춰주면, 반응형 레이아웃의 일관성을 달성하기가 좋다

 

  • 대부분의 UI 요소 -> 8dp 씩 증감하도록
  • 아이콘처럼 작은 UI 요소 -> 4dp 씩 증감하도록

 

 

Layout anatomy

(1) Layout regions

 

레이아웃의 구역은, 사용자와 상호작용하는 경험을 만들기 위한 초석과도 같다

레이아웃의 구역별로, 비슷한 기능을 공유하는 요소가 모여있기 때문이다

 

구역은 크게 3가지로 나뉜다

1) Navigation

2) App bar

3) Body

 

 

(1-1) Navigation region

 

사용자가 본인이 원하는 행동을 취하기 위한 종착점으로 빠르게 이동할 수 있도록 돕는 navigation drawer나 navigation rail과 같은 요소를 포함하는 구역이다

 

(내가 몰라서 정리)

  • navigation drawer : 원래는 숨겨져 있는데, 햄버거 등 아이콘을 클릭하면 마치 서랍 열리는 것처럼 나오는 메뉴
  • navigation rail : drawer와 달리 숨겨져 있지 않으며, 메뉴가 쭉 나열된 형태를 말한다

Navigation Region은 접혀 있을 때는 80dp, 열릴 때는 360dp의 너비가 권고된다

 

 

 

(1-2) Body region

 

주요 콘텐츠가 배치되는 영역이 Body region이다

리스트, 카드, 버튼, 이미지와 같은 요소가 배치된다고 보면 된다

 

breakpoint 첫 단계에서 margin은 16dp 가 권고되며, 레이아웃의 사이즈가 커질수록 스크린의 화면에 맞춰 body region의 너비 또한 넓어진다

breakpoint 두번째 단계에 도달할 때까지 margin은 32dp까지 증가할 수 있다

body의 너비가 840dp가 되면 margin은 최대 200dp까지 증가할 수 있다

 

 

(2) Containment

 

Containment method는 주요 콘텐츠를 묶는 모든 방법을 일컫는 용어이다

 

  • Implicit Containment (암시적 방법) : 명시적으로 테두리나 경계선이 있는 것은 아니지만 서로 연관이 있는 콘텐츠를 한 곳에 묶는 방법
  • Explicit Containment (명시적 방법) : 콘텐츠가 서로 묶여있다는 것을 명시적으로 보여주기 위해 경계선을 확실하게 보여주는 방법으로, 무언가를 강조할 때 쓰이기도 한다. 경계선 안에 연관이 있는 요소가 모인 UI 카드가 대표적인 예시

 

 

(2-1) Text in container

 

화면의 너비가 늘어날 때 텍스트'만' 늘리는 것이 아니라 텍스트가 들어있는 컨테이너도 같이 늘어나야 한다

다만 이 때 화면에 있는 다른 요소는 고정되어 있는데 텍스트 컨테이너만 늘어나면 가독성을 해칠 수 있으니 주의해야 한다

 

 

 

(2-2) Container properties

 

화면의 크기에 따라 컨테이너의 크기가 달라지는 만큼, 컨테이너의 위치와 정렬 또한 중요하게 고려되어야 한다

더불어, 컨테이너는 다른 컨테이너 안에 위치할 수도 있다