[머티리얼] large screens

머티리얼 디자인3 스크린 페이지 내용 읽으면서 요약

---

 

0. Design for large screens

landscape(가로)와 portrait(세로) 방향의 디바이스를 위한 설계. 레이아웃 그리드를 조정할 때 내용과 요소들을 디바이스의 크기에 맞춰 유동적으로 사용할 수 있는 컬럼으로 나눈다.

 

1.반응형 레이아웃 그리드

1.1. 컬럼, 거터 그리고 마진

반응형 컬럼 그리드는 body 영역 안에 있는 요소들의 편리한 레이아웃 구조를 위해 컬럼, 거터 그리고 마진으로 만들어졌다. 스크린 크기와 방향에 따른 논리적이고 일관된(logical and consistent) 레이아웃 경험을 만들기 위해 컬럼 그리드에 컴포넌트, 이미지 그리고 텍스트가 정렬된다. body 영역의 크기가 커지거나 줄어들면(grows or shrinks) 그리드 컬럼의 수가 그에 따라 변한다.

 

1.2. 구분점(breakpoints)

구분점은 반응형 레이아웃 요구사항을 준수하는 스크린의 크기를 정의한다. 머티리얼의 구분점 범위는 레이아웃에 사용된 거터값 뿐만 아니라 컬럼과 마진의 갯수를 고려한다.

Breakpoint range

Portrait

Landscape

Window size class

Columns

Minimum margins

 

머티리얼 디자인의 대부분 구성요소는 8dp 단위로 크기가 조정되고 나열되므로 일관된 시각적 리듬을 제공한다. Smaller elements, such as icons, can align to a 4dp grid, while typography can fall on a 4dp baseline grid. This allows each line’s typographic baseline to be spaced in increments of 4dp from a neighbor.

---

2. 레이아웃 구조(anatomy)

큰 화면 레이아웃은 다음 3가지 주요 영역을 포함한다. 내비게이션, 앱 바, body

 

2.1. 내비게이션

내비게이션에는 drawer 또는 rail과 같은 탐색 목적의 구성요소들이 있다. 내비게이션 영역은 확장시 360dp, 축소시 80dp의 폭을 일정하게 유지한다. 레이아웃의 여백이 48dp 미만이면 탐색 영역에 맞게 본체 영역의 너비가 줄어들 수 있다. (예: 화면 너비 600 - 839dp)

 

2.2. Body

body 영역은 3가지 파라미터에 따른 크기 조절 값을 사용한다.

Vertical and Horizontal dimensions, Number of columns, Margins

 

ex: 가장 작은 구분점에서 마진은 16dp 값을 가진다. 레이아웃 크기가 증가하면 body 섹션이 화면 너비에 비례하여 확장되는데 이 때 첫번째 구분점(small; 600dp width)에 도달하면 마진이 32dp로 증가한다. body의 너비가 840dp가 되면 마진은 최대 200dp로 증가한다. 최대 너비에 닿으면, body 영역은 다시 한번 반응하여 수평으로 계속 scale 된다.

 

2.3. Containment

Containment는 이미지와 캡션 같은 내용을 공유하는 관련 요소들을 연결하는 방법이다. 요소들을 시각적으로 연결하고 관련 없는 요소와 구별하기 위해 경계를 설정하는 그룹핑의 형태이다.

 

암묵적 및 명시적 containment

각 컨테이너는 텍스트 크기를 쉽게 조정하고 읽을 수 있도록 반응형 치수를 사용한다.

 

 암묵적 containment는 암시적인 boundary 또는 container를 부여하는 내용을 그룹핑한다. 암묵적인 containment를 사용하여 콘텐트를 그룹화하고 여러 요소에 미묘한 결합력을 부여한다.

 

 명시적 containment는 컨테이너의 boundaries를 보여주고 해당 항목을 '탭' 할 수 있음을 보여준다. 또한 무언가를 강조하기 위해서도 쓰인다. 명시적 containment 방법에는 그룹 아웃라인과 elevation 레벨을 추가하는 것을 포함한다.

 

컨테이너 텍스트

 When adapting for large screens, apply fluid container dimensions to components that contain type so, allowing typography to adjust. 

 

컨테이너 속성

컨테이너가 다른 스크린 크기에 맞게 조절되므로 컨테이너의 위치와 정렬을 고려해야 한다. 컨테이너와 그 요소들은 부모 컨테이너의 scale에 따라 좌, 우 또는 중앙으로 정렬될 수 있다. 고정 위치도 가능하다.

 

 컨테이너들은 다른 컨테이너 안에 배치될 수 있다. (body 컨테이너 안에 카드와 캐러샐이 함께 있거나 카드 안에 리스트 아이템이 있는 것처럼)

 

---

3. Component adaptation

시각적 presentation에 대한 변화를 묘사한다. (padding, 크기, 레이아웃, 정렬) 또는 다른 구성 요소로 전환하여 디바이스의 크기와 사용 케이스에 적합하게 만든다. (ex: 동일한 요소지만 접은 세로 화면 뷰와 접지 않은 가로 뷰에서 각각 다른 모습을 가진다.)

 

레이아웃 컨테이너 또는 컴포넌트의 크기를 늘리거나 줄일 때, 그 위치와 정렬이 바뀌는 것을 고려해야 한다. 내부 요소들은 부모 컨테이너의 scale에 따라 왼쪽, 오른쪽 또는 중앙에 모서리에 맞추거나 고정 위치를 가질 수도 있다. (ex: 내비게이션 drawer에 있는 FAB)

* FAB: floating action button

 

아이콘 버튼의 경우에는 버튼 안에 있는 아이콘과 텍스트 레이블이 서로 고정된 상태로 유지될 수 있고, 버튼이 수평으로 조정될 때 버튼 안에서 중심을 유지할 수 있다.

 

3.1. Visual presentation

visual presentation은 가장 공통적인 adaptaion 방법이다. 모바일 디바이스의 텍스트 목록은 태블릿과 같은 더 큰 화면에 잘 맞도록 마진, 수직 간격, 밀집도를 조정할 수 있다. 

 

3.2. Component swapping

레이아웃이 화면의 크기에 따라 변경되므로 유사한 기능을 가진 요소를 교환할 수 있다. 이 것이 큰 규모의 변화를 위한 레이아웃을 조정할 수 있게 한다. (ex: 작은 화면에서 큰 화면으로 바뀔 때 기능과 기본 콘텐츠의 노출을 유지하면서 다른 다이얼로그 유형으로 바꿀 수 있다.)

 

3.3. Component group

구성요소를 교환할 때는 구성요소 그룹 목록에서 기능적으로 동일한지 확인한 후 교환한다.

Component Type

Mobile Option

Tablet and Foldable Option

Laptop Option

---

4. Canonical layouts

세 가지 표준  레이아웃을 사용하여 공통 요소를 구성할 수 있다. 각 레이아웃은 공통 사례와 구성 요소를 고려하여 앱이 화면 크기와 구분점에 맞추는 방법을 해결한다. 

 

4.1. 목록 세부 정보 보기(List-detail view) 레이아웃

 

사례

• 문자 메시지 + 대화
• 파일 브라우저 + 폴더 열기
• 뮤지컬 아티스트 + 앨범 상세

 

 목록 세부 정보 보기는 콘텐츠를 검색하고 세부 정보를 빠르게 보는 것에 적합하고 정보 계층(information hierarchies)을 지원한다. 두 개의 컬럼을 사용하는데 한 컬럼은 목록 또는 아이템 그룹을 위한 것이고 다른 하나는 상세 보기를 위한 영역이다. 두 영역을 나눌 때 작은 창의 크기에서는 동일한 비율을 사용하고, 큰 창 크기에서는 비대칭 비율로 나눌 수 있다.

 

Breakpoint range(dp)

Portrait

List detail

Landscape

List detail

 

폴더블 디바이스에서 세로 방향으로 전환할 때는 하나의 열을 사용하여 작은 화면 차원에서 콘텐츠가 편안하게 흐르도록 하는 것이 좋다.

 

 

4.2. 보조 패널(Supporting panel) 레이아웃

 보조 패널은 스크린 확장을 위한 한 방법이다. primary와 secondary focal points가 동일한 중요성을 가지므로 목록 세부 정보 보기 레이아웃과는 다르다. 이 레이아웃은 seamless hinge 디바이스에 적합하다. 

 

사례

• 생산성
• 문서 편집 및 주석 달기
• 콘텐츠 및 미디어 검색

 보조 패널 레이아웃은 focus panel 그리고 supporting panel의 관계성을 만든다. 이 레이아웃은 화면의 3분의 2를 컨테이너에 사용하고 남은 공간에 보조 패널을 놓아 짝을 이룬다. 더 작은 디스플레이에서는 supporting panel이 focus panel 아래에 위치할 수 있다. 

 

 

4.3. Feed 레이아웃

Feed는 새소식과 소셜 콘텐츠의 공통적인 레이아웃이다. feed는 그리드 컴포지션을 사용하여 콘텐츠의 탐색과 검색을 활성화한다. 피드 레이아웃은 카드 및 목록을 활용하여 다른 콘텐츠를 표시할 수 있다. 뉴스나 사진과 같은 콘텐츠 중심의 경험을 지원한다. 카드, 목록 및 배너와 같은 구성 요소는 앱의 콘텐츠에 대해 여러 접근 방법을 제공한다. 또한 다양한 비율과 크기를 가진 콘텐츠들을 담기에 충분히 유연한 레이아웃이다. 피드 레이아웃은 모든 디바이스 방향에 잘 작동한다.