[9월 1주차] Material Design 3 - Canonical layouts
Canonical Layout이란?
(말 그대로 표준적인/전형적인 레이아웃을 의미한다)
Material Design 3에서는 3개의 표준 레이아웃을 가이드로써 제시한다. 각각의 레이아웃은, 화면 크기 및 중단점 별로 유저의 기대와 니즈를 맞추기 위해 앱이 어떻게 반응해야 하는가를 고려해서 제작되었다
List-detail view
화면이 가로로 긴 Landscape 방향의 화면에서만 적용 가능한 레이아웃으로, 화면 왼쪽에는 리스트를, 오른쪽에는 해당 리스트의 자세한 내용을 보여주는 방식이다
(1) 주 사용처
- 텍스트 메시지 + 대화
- 파일 브라우저 + 선택되어 열린 파일
- (음악 서비스에서) 아티스트 + 앨범 상세 내용
(2) 사용하는 상황
콘텐츠를 둘러보면서 각 콘텐츠의 상세 내용을 빠르게 훑어보는 상황에 용이하게 사용된다. 큰 화면에서 필요한 정보의 위계를 나타내는 데에도 효과적이다.
(3) 화면 분할
화면을 크게 2개의 열로 나눈다. 왼쪽(List area)은 리스트 또는 아이템의 모임, 그리고 오른쪽(Detail area)은 각 아이템의 상세 내용으로 채운다.
- 폴더블 기기의 경우, 특별한 불편함 없이 List area와 Detail area를 1:1로 분할할 수 있다
- 폴더블 기기의 경우, List area의 너비는 고정하고 Detail area의 너비를 조정 가능하게 설정할 수도 있다. 단, List area의 가독성을 해치지 않는 선에서!
- 큰 화면의 경우, 정보의 위계에 따라 덜 중요한 List area는 작게, 더 중요한 detail view는 크게 나타내기도 한다.
(4) 상단 Bar
Detail area의 상단에 Bar를 위치시켜서 뒤로 이동 가능하게 만들기도 한다
(5) Transitions
기기에서 방향을 전환해 landscape모드가 portrait 모드로 바뀐 경우, List-Detail을 모두 보여주지 않고 하나의 열에 하나의 정보를 나타낸 레이아웃을 취하는 편이 좋다. portrait 모드로 바꾸기 전에 특정 정보를 선택한 상황이라면, 선택된 정보를 Detail view로 보여주는 게 좋고 그렇지 않으면 List view만 보여주기를 권장한다.
Supporting panel
확대 화면을 위한 레이아웃이다. List-detail 레이아웃과 다른 점은, 주요 초점과 부차적인 초점이 서로 동등한 중요성을 가지고 있다는 점이다. 접히는 부분이 없이 말끔하게 화면이 이어지는 기기에 적합한 레이아웃이다.
(1) 주 사용처
- 생산성 관련 서비스
- 문서 편집 및 댓글 달기
- 콘텐츠 및 미디어 탐색
(2) 사용하는 상황
주요 부분과 그것을 서포트하는 부분 간의 관계를 형성할 때 사용한다. 화면 왼쪽에 전체 화면의 2/3 크기로 콘텐츠 주요 부분이 있는 focus panel이 위치하고 오른쪽 나머지 공간에 supporting panel이 위치한다.
(3) 기타 상황
- 접히는 부분이 있는 기기 : Focus panel과 Supporting panel의 크기를 1:1로 맞추는 것도 좋다
- 컴팩트한 화면이 있는 기기 (ex. portrait 모드) : Supporting panel을 Focus panel 아래에 위치시킨다
- 태블릿 : Focus panel이 Supporting panel보다 커야 한다
Feed
피드는 뉴스나 소셜 콘텐츠 서비스에 가장 빈번하게 사용되는 레이아웃이다. 콘텐츠 탐색 및 검색을 용이하게 하도록 돕는다.
(1) 사용하는 상황
카드 또는 리스트 간 서로 다른 콘텐츠 내용을 보여주기에 효과적인 레이아웃이다. 콘텐츠 기반의 경험을 제공하는 서비스에서 자주 사용된다.
(2) 화면 분할
카드, 리스트, 배너와 같은 구성 요소가 콘텐츠 진입 요소의 역할을 수행한다. 화면 사이즈에 따라 피드의 열은 2개 이상이 될 수도 있다. 태블릿의 경우, 피드 열을 나누어서 서로 가로 너비가 다른 콘텐츠도 안정적으로 배치시킬 수 있다.