작성자: Liam Spradlin (Material Design Advocate)
이 글의 원문은 여기서 확인 가능합니다.
머티리얼 디자인은 항상 적응할 수 있도록 빌드되었습니다. 이번 업데이트를 통해, 머티리얼 디자인은 휴대폰부터 태블릿, 데스크톱 등 모든 폼 팩터에 맞게 앱을 준비할 수 있도록 적응형 기능을 확장했습니다. 업데이트된 지침과 구성 요소 동작을 이용하시면, 각 기기에 최적화된 구성 요소를 사용하여 레이아웃을 일관적으로 유지하면서 앱의 화면 크기와 기능을 조절하실 수 있습니다.
레이아웃 및 구성 요소 반응성은 시스템 기능으로서 이제 머티리얼 지침의 일부가 되었습니다. 구성 요소 및 디자인 문서와 함께 레이아웃 지침 또한 업데이트되어, 화면 크기와 모양의 변화에 맞게 변하는 인터페이스를 만드는 방법을 확인하실 수 있습니다.
아래 내용을 통해 변경 사항을 살펴보시고, I/O의 대화면 용 앱 개발 시 고려해야 하는 5가지 사항 세션도 참고해 주시기 바랍니다.
새 레이아웃 지침에서는 반응형 그리드 구성과 동작을 정의합니다.
새 레이아웃 가이드
레이아웃 이해하기
레이아웃 이해하기 문서에서는 레이아웃 분석 및 구성 섹션이 업데이트되었습니다.
레이아웃 분석(Layout Anatomy) 섹션은 머티리얼에서 앱 레이아웃을 구성하는 세 가지 기본 컨테이너인 본문, 탐색, 앱 바를 설명합니다. 이러한 컨테이너는 여러 가지 화면 유형과 크기에 따라 조정되는 인터페이스에 대해 생각해 볼 수 있는 프레임워크를 형성합니다. 이 섹션에서는 각 컨테이너와 컨테이너의 기본 제약 조건 및 동작을 안내하며, 본문 컨테이너와 관련된 머티리얼의 반응형 레이아웃 그리드에 대해서도 간단히 소개합니다.
구성(Composition) 섹션은 레이아웃 내에 정보와 구성 요소를 배치하는 방법을 안내합니다. 앱이 더 큰 화면에 맞게 확장되면 콘텐츠와 작업을 표시할 공간이 더 많아지므로, 사용자가 추가 정보를 쉽게 인지할 수 있도록 세심하게 화면을 구성하는 일이 매우 중요해집니다. 이 섹션에서는 사용자가 앱을 더 빠르게 이해하고 사용할 수 있도록 쉽게 읽히는 정보 계층 구조를 만드는 몇 가지 기법을 제시합니다.
새로운 리소스(Resources) 섹션은 샘플 레이아웃 그리드 프레임을 비롯한 최신 다운로드를 위한 Figma의 머티리얼 디자인 커뮤니티 페이지를 소개합니다.
반응형 레이아웃 그리드(Responsive layout grid)
반응형 레이아웃 그리드 문서에서는 간소화된 중단점 시스템 및 그리드 행동에 관한 새로운 지침이 업데이트되었습니다.
휴대폰처럼 작은 화면부터 데스크톱 이상의 큰 화면까지 아우를 수 있도록 중단점(Breakpoints)이 간소화되었습니다. 업데이트된 표에는 본문 컨테이너 크기, 여백, 열 개수에 대해 안내되어 있어 다양한 기기 유형과 크기에 맞는 구체적인 기준을 알려드립니다.
레이아웃 분석(Layout anatomy)에서는 '레이아웃의 이해' 문서에서 심층적으로 설명하는 레이아웃 영역의 개념을 소개합니다. 레이아웃 영역은 반응형 열 그리드와 관련됩니다.
구성 요소 동작(Component behavior)
구성 요소 동작 문서에는 새로운 적응형 동작을 설명하는 섹션뿐 아니라, 레이아웃을 양방향으로 유지하기 위한 새로운 용어도 포함되어 있습니다.
양방향 레이아웃 구성에 관한 논의를 감안해, 위치 지정 용어(Positioning Terminology)에 '리딩 에지(leading edge)'와 '트레일링 에지(trailing edge)'에 대한 정의를 추가했습니다. 예를 들어, 레이아웃의 콘텐츠가 시작되는 '리딩 에지'는 LTR 언어에서는 왼쪽에 있지만 RTL 언어에서는 오른쪽에 있습니다.
구성 요소 너비(Component width)는 구성 요소 적응(Component adaptation) 섹션으로 바뀌었습니다. 이 섹션에서는 레이아웃이 다양한 기기 및 화면 크기에 맞춰 조정될 때 구성 요소의 일반적인 크기 조절, 방향 및 스와핑 동작에 대해 간략히 설명합니다. 스왑 가능한 구성 요소 유형에 대한 편리한 참조도 확인할 수 있습니다.
오버레이(overlay) 동작은 별개의 레이아웃 반응으로 다루어 레이아웃의 이해 문서로 옮겼습니다.
탐색 구성 요소가 화면에 들어올 때 본문 영역의 컨텍스트 유지에 초점을 맞추기 위해 푸시(push) 동작을 삭제했습니다.
구성 요소 업데이트는 개별 머티리얼 구성 요소에 대한 새로운 크기 조절 및 적응 동작을 정의합니다.
구성 요소 업데이트
업데이트된 레이아웃 지침을 보완하면서 구성 요소도 업데이트하여, 다양한 기기 및 화면 크기에 맞게 조정되는 환경에서 머티리얼 디자인 구성 요소를 사용하는 방법에 대해 더 구체적으로 안내합니다.
디자인 지침
개별 구성 요소 문서에 크기 조절 및 적응 섹션(동작 아래에 있음)이 업데이트되었습니다. 이 섹션은 구성 요소 동작 문서에서 다루지 않은 크기 조절 관련 특이 사항을 자세히 설명하므로, 특정 기본 적응 동작에 대한 궁금증에 답변이 될 수 있을 것입니다. 아래 내역 등의 구성 요소가 업데이트되었습니다.
코드 업데이트
탐색 레일
탐색 레일은 현재 다음 플랫폼에서 사용할 수 있습니다.
구성 요소 업데이트에 대한 자세한 내용은 I/O의 폴더블, 태블릿, 대화면 관련 새로운 소식에서 확인해보세요.
리소스
Figma용 머티리얼 기준 디자인 키트도 업데이트되어, 구성 요소로서 일련의 샘플 레이아웃 그리드가 추가되었습니다.
새로 수정된 중단점, 여백, 열 동작을 설명하는 레이아웃 그리드를 보려면, Assets 패널에서 원하는 화면 크기의 템플릿을 선택해 Figma의 View 메뉴에서 Show Layout Grids를 전환하세요. Layout regions 속성을 Design 패널에서 전환하여 탐색 영역과 앱 바를 표시할 수 있습니다.
또한 Material Theme 페이지의 색상 매핑에 영향을 주는 버그가 해결되었으며, Figma의 기능을 최대한 활용할 수 있는 더 많은 업데이트가 예정되어 있습니다.
머티리얼 디자인 커뮤니티 페이지에서 디자인 키트를 받으세요.
시작하기
앱을 대화면에 맞게 조정하고 모든 유형의 기기에서 작동되도록 할 준비가 되셨나요? Google I/O 2021에서 실시간으로 진행된 대화면용 앱 개발 시 고려해야 하는 5가지 사항 세션과 관련 블로그 블로그 게시물을 참고해 주세요.
또한 아래 링크의 리소스를 확인하고 궁금한 점이 있으시면 언제든지 Twitter에서 #AskMaterial @MaterialDesign으로 문의해주세요.
