[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 레이아웃 이해하기(Understanding layout)
머티리얼 기초(Material foundation)에서 레이아웃(Layout)은 플랫폼, 환경, 동일하고 균일한 요소와 간격을 이용하여 스크린 사이즈 전반에 걸쳐 일관성 있는 디자인을 유지시켜주는 역할을 합니다.
출처: 원문보기
1. 원칙 (Principles)
결론부터 이야기하면 레이아웃의 핵심은 “일관성“에 있습니다. 일관된 레이아웃을 통해서 직관적이고, 예측가능한 제품 및 서비스를 설계하고, 세부적으로는 UI 요소들의 실제 배치 및 구성 등에 일관성있게 설계하고, 다양한 사용자 환경에 일관된 경험을 제공할 수 있는 레이아웃을 설계하는 것이 레이아웃에 대한 기본 원칙이 되는 것입니다.
- 예측가능성(Predictable): 일관된 UI 구역을 구분하고 공간을 조직적으로 구성하여 직관적이고 예측가능한 레이아웃을 사용합니다. 실무에서 많은 경우가 이러한 레이아웃에 대한 원칙을 지키지 않고, 각 서비스 페이지별로 서로 다른 레이아웃과 일관되지 않은 UI를 구성하는 것을 많이 보게 됩니다. 직관적이고 예측 가능한 레이아웃의 핵심은 얼마나 일관된 UI 레이아웃을 조직적으로 잘 구성하느냐와 관련이 되기 때문에 단순히 개별 페이지를 디자인 하는 것을 목표로 특정 페이지를 설계하지 말라는 의미입니다.
- 일관성(Consistent): 레이아웃은 격자(Grid)의 사용, 중심선(Keylines), 내부여백(Padding) 등에서 일관되어야 합니다. UI 요소에 대한 정렬, 정렬의 기준이 되는 중심선, 간격 등이 일관되게 구성이 되어야 함을 의미합니다. 역시 다시한번 강조하는 것은 “일관성”임을 알 수 있습니다.
- 반응성(Responsive): 레이아웃은 사용자 입력에 대한 반응이나 기기, 스크린 요소 등의 사용환경에서 적응형(Adaptive)으로 설계가 되어 일관된 서비스를 제공할 수 있어야 합니다. 제품 및 서비스가 여러 사용자 환경에서 동일하게 제공될 수 있도록 레이아웃이 설계가 되어야 함을 의미합니다.
2. 머티리얼 측정방법 (Material measurements)
머티리얼 디자인 레이아웃(Material design layout)은 시각적으로 균형잡힌 모습을 보여줍니다. 대부분 레이아웃은 8dp 격자(Grid) 영역에 정렬이 됩니다. 다시 말해 개별 UI 요소들이 8dp 격자에 맞춤 형태로 정렬이 되어야 한다는 것을 의미합니다.
여기에는 전체적인 레이아웃 외에도 개별 UI 요소들 사이의 간격을 설정하는 것도 모두 이 8dp의 격자에 정렬이 되어야 하는 것으로 이 기본 개념을 기억하는 것은 매우 중요합니다.
아이콘 등의 세부 타입의 소형 요소들은 4dp 격자(Grid)에 정렬될 수 있습니다. 예외적으로 소형 UI 요소들에 대해서는 4dp 격자(Grid)를 기준으로 정렬하는 것을 허용합니다.
3. 반응형 레이아웃 격자 (Responsive layout grid)
머티리얼 디자인에서 반응형 레이아웃 격자는 컴포넌트와 요소들의 배치에 대한 충분한 가이드가 됩니다. 반응형 레이아웃 격자는 스크린 크기와 화면의 회전(가로 보기 모드, 세로 보기 모드), 레이아웃 전반에 걸쳐 일관성을 제공합니다.
위 그림에서 1번은 각 열을 의미하며, 2번은 각 열을 나누는 도랑(Gutter)을 의미합니다. 도랑은 각기 다른 스크린 크기 등에 따라 UI가 반응하여 변경되는 지점으로 이해하면 됩니다. (자세한 설명은 이후에 해당 내용을 별도로 다룰 때, 다시 설명하도록 하겠습니다.) 마지막으로 3번은 여백(Margin)을 의미합니다.
4. 마무리
반응형 레이아웃 격자를 통해 반응형 페이지를 어떻게 설계하는지 등에 대해서는 별도 챕터로 향후에 다시 다룰 예정입니다. 이번 내용에서는 대략적인 내용을 이해한다는 생각으로만 이해하고 넘어가시면 되겠습니다. 다음시간에는 Pixel density에 대해서 내용을 다루도록 하겠습니다.
댓글
댓글 쓰기