레이아웃 기본 원리

기본 원리

머티리얼 디자인은 사용자로 하여금 경험에 몰두하게 만드는 계층 구조, 의미, 그리고 초점을 생성하기 위해서 타이포그래피, 그리드, 공간, 비율, 색 그리고 이미지와 같은 인쇄 기반의 디자인 요소에 의해 설명됩니다. 머티리얼 디자인은 인쇄 디자인 분야로부터 온 도구(기준선 그리드와 구조적 템플릿과 같은)를 취하며, 그 도구는 플랫폼과 화면 크기에 걸쳐 시각적 요소, 구조적 그리드, 그리고 간격을 반복함으로서 여러 환경에 걸쳐 일관성을 유지하도록 돕습니다. 크기 변경이 가능한 앱을 생성하는 과정을 단순화시키는 이러한 레이아웃은 어떠한 화면 크기에도 알맞게 크기를 변경합니다.

어떻게 페이퍼가 동작하는가 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

머티리얼 디자인에서, 페이퍼의 물리적 속성은 그 화면에서 번역됩니다. 어플리케이션의 배경은 페이퍼 한 장의 평평하고 불투명한 질감과 유사하며, 어플리케이션의 동작은 크기 변경되고, 섞이며, 여러 시트가 함께 묶이는 페이퍼의 속성을 흉내 냅니다.

어플리케이션을 구성하는 표면(Surface)은 이 명세에서 머티리얼이나 머티리얼의 시트로 언급됩니다.

시스템 바와 같은 어플리케이션 바깥의 요소는 앱 아래의 앱 내용물에서 분리되어 있으며, 머티리얼로서 다루어지지 않습니다.

머티리얼에 관한 자세한 정보를 위해, 머티리얼의 속성을 확인하십시오.

공통의 가장자리 전체를 공유하는 페이퍼의 두 시트를 층(Seam)이라고 부릅니다. 층으로 연결되는 동안, 이들은 함께 움직입니다.

머티리얼의 두 시트에서 층(Seam)

계단

페이퍼에서 서로 다른 z축 위치(또는 깊이)로 겹쳐진(Overlapping) 두 시트는 계단(Step)을 형성합니다. 이들은 서로 독립적으로 이동합니다.

겹치는 머티리얼의 두 시트에서 계단(Step)

플로팅 액션 버튼 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

플로팅 액션 버튼

플로팅 액션 버튼(FAB, Floating Action Button)은 툴바로부터 분리된 원형의 시트입니다. 이것은 단일의 홍보된 액션을 대표합니다.

만약 FAB가 계단(Step)이 생성하는 내용물과 관련이 있다면, 이것은 계단(Step) 양쪽에 걸칠 수 있습니다.

계단(Step)을 걸치는 플로팅 액션 버튼

플로팅 액션 버튼이 양 시트의 내용물과 관련이 있다면, 이것은 층(Seam) 양쪽에 걸칠 수 있습니다.

액션을 위한 고정점(Anchoring Point)을 제공하기 위해서 장식용의 층(Seam)을 넣지 마십시오.

층(Seam)을 걸치는 플로팅 액션 버튼

플로팅 액션 버튼에 관한 자세한 정보를 위해, 플로팅 액션 버튼을 확인하십시오.