[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 반응형 레이아웃 격자 (Responsive layout grid)
머티리얼 디자인 반응형 레이아웃 격자(Responsive layout grid)는 스크린 사이즈와 화면 회전 등의 상황에서 레이아웃 전반에 일관성을 보장합니다. 다시 말해, 반응형 레이아웃 격자 시스템은 구성한 레이아웃을 스크린 상황에따라 가변적으로 변경하는 방식이라 생각하면 되겠습니다.
출처: 원문보기
1. 행, 도랑, 여백 (Columns, gutters, and margins)
행(Column)은 세로로 나열된 집합을 의미합니다. 도랑(Gutter)은 도로가의 배수로나 지붕의 빗물을 바닥으로 내려보내도록 만든 빗물받이 도랑의 의미를 갖습니다. 여백(Margin)은 디자인에서 디자인 요소의 바깥 영역의 공백을 의미합니다.
위 그림에서 1번은 행(Column), 2번은 도랑(Gutter), 3번은 여백(Margin)을 의미합니다. 각각의 역할은 아래에서 다시 설명하겠습니다.
1.1. 행 (Column)
콘텐츠는 행(Column)을 포함하는 스크린 영역에 위치합니다. 다시 말해, 행(Column)이 UI 요소나 사진 등의 콘텐츠가 해당 위치를 기준으로 맞춤 정렬된다는 것입니다.
행의 너비는 콘텐츠가 어떤 스크린 사이즈에서든 유연하게 적용될 수 있도록 고정된 값이 아닌 퍼센트를 사용하여 정의됩니다. UI 요소가 dp로 정의되는 것과 달리 행은 %값으로 정의를 한다는 것입니다.
그리드에서 출력되는 행(Column)의 개수는 분기점(Breakpoint range)에 따라서 결정됩니다. 쉽게 말해 각 디바이스(예: 휴대폰, 태블릿, PC)의 스크린 사이즈에 따라서 출력되는 행의 개수가 정해진다는 것입니다. 또한 여기서 휴대폰, 태블릿, PC를 구분하는 길이에 대한 기준이 분기점으로 정의된다는 의미입니다.
위의 예는 가로가 360dp인 경우에 출력되는 모바일 환경에 대한 행(Column)에 대한 예시입니다. 모바일에서는 위의 그림처럼 행(Column)이 4개가 출력됩니다.
분기점이 360dp가 되는 것이고, 가로의 크기가 360dp 이하가 되면 반응형 레이아웃 격자(Responsive layout grid) 시스템은 모바일 환경으로 간주하여 해당 레이아웃으로 변경을 한다는 의미입니다.
이전 콘텐츠에서 화소 밀도(Pixel density)를 설명하면서에서 dp에 대한 설명을 했었는데, dp는 단순히 화면의 해상도나 화면의 크기를 의미하는 개념이 아니기 때문에 이에 대한 이해가 안 된다면 다시 한번 내용을 숙지하시기 바랍니다.
위의 예는 가로가 600dp인 경우에 출력되는 모바일 환경에 대한 행(Column)에 대한 예시입니다. 모바일보다는 많은 8개의 행(Column)이 출력되는 것을 볼 수 있습니다. 태블릿 환경을 나타내며, 분기점은 600dp가 됩니다.
1.2. 도랑 (Gutters)
도랑(Gutter)은 행(Column) 사이의 공간을 의미합니다. 도랑은 콘텐츠를 분리하는 역할을 합니다.
도랑(Gutter)은 각 분기점에서 고정된 값(dp)을 갖습니다. 스크린에 더 잘 적응하기 위해서 도랑(Gutter)의 너비는 다른 분기점에서 고정된 값으로 변경할 수 있습니다.
다시 말해, 고정된 도랑(Gutter)의 너비값은 경우에 따라 변경할 수 있다는 의미입니다.
더 넓은 도랑(Gutter)은 행(Column) 사이의 더 많은 공백을 생성하기 때문에 큰 스크린에 더 적합합니다.
위의 그림은 모바일 환경에서의 도랑(Gutter)으로 16dp의 고정값을 갖습니다. 이는 360dp를 기준으로 분기되는 상황을 설명한 것입니다.
위의 그림은 태블릿 환경에서의 도랑(Gutter)으로 24dp의 고정값을 갖습니다. 모바일 환경보다 더 넓은 도랑값을 갖는 것을 볼 수 있습니다. 600dp의 분기점을 기준으로 해당 레이아웃이 출력됨을 의미합니다.
1.3. 여백 (Margins)
여백(Margin)은 스크린의 좌측, 우측 끝과 콘텐츠 사이의 공백입니다. 여백(Margin)의 너비는 각 분기점에서 고정된 값(dp)으로 정의됩니다. 스크린에 더 잘 적응하기 위해서 여백의 너비는 다른 분기점에서 고정된 값으로 변경할 수 있습니다.
다시 말해, 고정된 여백(Margin)의 너비값은 경우에 따라 변경할 수 있다는 것입니다.
도랑(Gutter)과 같이 더 넓은 여백(Margin)은 콘텐츠 주변에 더 많은 공백을 생성하기 때문에 큰 스크린에 더 적합합니다.
위의 그림은 모바일 환경에서의 여백(Margin)으로 16dp의 고정값을 갖습니다. 이는 360dp를 기준으로 분기되는 상황을 설명한 것입니다.
위의 그림은 태블릿 환경에서의 여백(Margin)으로 24dp의 고정값을 갖습니다. 모바일 환경보다 더 넓은 도랑값을 갖는 것을 볼 수 있습니다. 600dp의 분기점을 기준으로 해당 레이아웃이 출력됨을 의미합니다.
2. 사용자 정의 격자 (Grid customization)
레이아웃 격자(Layout grid)는 앱이나 다양한 디바이스 사이즈의 니즈에 따라 수정될 수 있습니다. 위에서 설명한 값들을 필수적으로 반드시 지켜야 하는 것은 아니라는 의미입니다.
2.1. 사용자 정의 도랑 (Customizing gutters)
도랑은 레이아웃의 행(Column) 사이에서 더 넓게 혹은 더 좁게 공백을 적용할 수 있습니다.
위의 레이아웃 격자는 8dp의 도랑값을 사용합니다. 더 좁은 도랑은 이미지 간에 더 가까이 있는 것으로 보여지게 되고, 이는 이미지들이 서로 연관성을 갖고 있는 컬렉션의 일부로 간주되게 됩니다.
예를 들어, 사진 앱에서 특정 주제의 앨범을 선택했을 때, 해당 주제의 사진들(컬렉션)이 위와 같은 형태로 출력될 수 있다는 것을 의미합니다.
위의 레이아웃 격자는 32dp의 도랑값을 사용합니다. 이는 각 이미지들이 8dp의 도랑값을 갖는 레이아웃 격자에 비해서 서로 독립적인 개체로 간주됩니다.
도랑값은 각 앱 상황에 따라서 정의할 수 있도록 하고 있지만 너무 크게 정의하지 말라는 것을 보여주는 예시입니다. 도랑의 너비가 행(Column)의 너비와 동일할 정도로 크게 정의하지 않아야 합니다.
이 경우, 너무 넓은 도랑값에 의해서 콘텐츠가 충분히 출력되지 못하여 가시성이 떨어질 수 있기 때문입니다.
2.2. 사용자 정의 여백 (Customizing margins)
여백은 콘텐츠와 스크린 좌측, 우측 끝 사이의 공백을 더 많이 더 적게 설정될 수 있습니다. 여백은 각 분기점에서 고정된 값을 사용합니다.
참고로 본문 내용의 가독성을 위해 이상적인 콘텐츠 너비는 글자수 기준 40자에서 60자가 한 줄에 출력되는 정도입니다.
다시 말해, 여백을 통해서 한줄에 40자에서 60자가 출력하도록 조정할 수 있다는 뜻입니다.
위의 그림은 8dp 여백을 설정(더 작은 여백을 설정)하여 콘텐츠 영역을 더 많이 사용한 사례입니다.
위의 그림은 64dp 여백을 설정(더 큰 여백을 설정)하여 콘텐츠의 너비를 제한한 사례입니다.
위의 사례는 지나치게 큰 여백을 설정하여 콘텐츠 너비가 제한된 사례를 보여줍니다. 위 그림은 너무 큰 여백을 설정하지 말 것을 안내하는 사례입니다.
2.3. 도랑과 여백 (Gutters and margins)
같은 분기점 내에서 도랑과 여백은 서로 다르게 설정될 수 있습니다.
예를 들어 모바일에서 권장하는 도랑의 너비와 태블릿에서 권장하는 여백이 함께 사용될 수 있다는 의미입니다. 다시 말해 넓은 도랑 너비와 좁은 여백이 함께 사용될 수 있고, 좁은 도랑 너비와 넓은 여백이 함께 사용될 수 있다는 뜻입니다.
위의 그림은 넓은 여백과 좁은 도랑을 함께 사용한 사례입니다.
2.4. 가로 격자 (Horizontal grids)
머티리얼 디자인 레이아웃 격자는 가로 스크롤 터치 UI를 위해 커스터마이징할 수 있습니다. 일반적인 경우 디자인 레이아웃 격자는 세로 스크롤 터치 UI를 기본으로 가정하여 설명을 해왔습니다.
행(Columns), 도랑(Gutters), 여백(Margins)은 좌측에서 우측으로 누워서 배치됩니다. 스크린의 높이값이 가로로 출력되는 격자에서 행의 개수를 결정합니다.
다시 말해 스크린의 높이값이 높으면 더 많은 행(Column)이 출력된다는 의미입니다.
가로 스크롤 UI는 터치 방식을 사용하지 않는 웹 플랫폼 환경에서는 흔하지 않은 방식입니다.
위 그림은 가로 격자(Horizontal grids)를 설명합니다. 1번은 가로로 배치된 행(Column)을 의미합니다. 흔히 우리는 이것을 열(Row)의 개념으로 더 많이 사용하지만 여기서는 그대로 행(Column)의 개념으로 사용합니다. 2번은 도랑(Gutter)을 의미하며, 3번은 여백(Margin)을 의미합니다.
가로 격자(Horizontal grids)는 앱 바(App bar)와 같이 최상단에 위치한 다른 UI 영역에 의해서 다른 높이값이 적용될 수 있습니다. 격자 영역이 앱 바(App bar) 영역을 제외한 영역에 출력된다는 의미입니다.
위의 그림은 앱 바(App bar)를 제외한 영역에 316dp의 높이값을 갖는 가로 레이아웃 격자(Horizontal layout grid)가 구성된 것을 나타냅니다.
최근 앱 바(App bar)의 위치가 스크린 하단에 위치하는 경우도 있기 때문에 이 부분을 고려해야 될 수도 있습니다.
3. 분기점 (Breakpoints)
분기점(Breakpoint)은 특정 레이아웃이 출력되는 스크린 사이즈의 범위를 의미합니다. 분기점, 중단점, 구분점 등으로 용어를 달리 사용할 수 있지만 개념은 동일하다고 보면 됩니다.
즉, 스크린 사이즈에 따라서 출력되는 행(Column)이 달라지는데, 언제 이 출력되는 행(Column)이 변경되는지를 이 분기점을 통해서 알 수 있다는 것입니다.
주어진 분기점 영역에서 레이아웃은 스크린 사이즈와 화면 회전 등에 적합하게 조정됩니다.
3.1. 분기점 시스템 (Breakpoint system)
머티리얼 디자인은 행(Column) 구조를 바탕으로 반응형 레이아웃을 제공한다는 것에 대해서 설명하였습니다. 분기점 시스템은 4개, 8개, 12개 행(Column) 격자를 사용한 레이아웃이 다양한 스크린에 걸쳐 사용할 수 있도록 합니다.
3.2. iOS에서 분기점 (iOS breakpoints)
iOS에서 스크린, 디바이스, 화면 회전 등에 적용하는 행(Column) 개수, 여백(Margin), 도랑(Gutter)의 규격을 나타내는 표는 다음과 같습니다.
| Device | Orientation | Vertical Size Category | Horizontal Size Category | Columns | Margins / Gutters* |
|---|---|---|---|---|---|
| iPhone | Portrait | Regular | Compact | 4 | 16 |
| iPhone | Landscape | Compact | Compact | 4 | 16 |
| iPhone Plus | Portrait | Regular | Compact | 4 | 16 |
| iPhone Plus | Landscape | Compact | Regular | 4 | 16 |
| iPad | Portrait | Regular | Regular | 8 | 16 |
| iPad | Landscape | Regular | Regular | 8 | 24 |
| iPad – Even Split Multitasking | Portrait | Regular | Compact | 12 | 24 |
| iPad – Even Split Multitasking | Landscape | Regular | Compact | 12 | 24 |
| iPad – 2/3 Split Multitasking | Portrait | Regular | Compact | 12 | 24 |
| iPad – 2/3 Split Multitasking | Landscape | Regular | Compact | 12 | 24 |
| iPad – 2/3 Split Multitasking – First App | Landscape | Regular | Regular | 12 | 24 |
| iPad – 2/3 Split Multitasking – Second App | Landscape | Regular | Compact | 12 | 24 |
| iPad Pro – Even Split Multitasking | Portrait | Regular | Compact | 12 | 24 |
| iPad Pro 13in – Even Split Multitasking | Landscape | Regular | Regular | 12 | 24 |
여백(Margin)과 도랑(Gutter)은 유연하게 값을 조정할 수 있고, 머티리얼 디자인 격자 시스템(Material design grid system) 내에서 반드시 동일해야 할 필요는 없습니다.
4. 격자 동작 방식 (Grid behavior)
4.1. 유동 격자 (Fluid grids)
유동 격자(Fluid grid)는 콘텐츠 크기를 조정하는 행(Column)을 사용합니다. 유동 격자의 레이아웃은 레이아웃이 극적인 변화를 필요로 할지 말지에따라 분기점을 사용할 수 있습니다.
다시 말해, 행(Column)의 너비가 늘어나거나 줄어들 때, 이를 분기점(Breakpoint)를 사용하여 레이아웃을 바꿀지 아니면 단순히 행(Column)의 너비를 늘이거나 줄이거나 할지를 유동 격자에서 결정할 수 있다는 뜻입니다.
위의 그림을 보면 도랑(Gutter)과 여백(Margin)은 변화가 없지만 스크린 너비값이 변경됨에 따라 행(Column)의 너비가 늘어나고 줄어드는 것을 확인할 수 있습니다.
4.2. 고정 격자 (Fixed grids)
고정 격자(Fixed grids)는 각 분기점(Breakpoint)에서 콘텐츠 영역이 변경되지 않도록 하기 위해 유동적으로 늘어나는 여백과 고정된 사이즈의 행(Column)을 사용합니다.
유동 격자(Fluid grids)와 반대로 행(Column) 영역은 변경되지 않으며, 여백(Margin) 영역이 스크린의 너비가 변경됨에 따라 늘어나고 줄어듭니다.
고정 격자의 레이아웃은 지정된 분기점에서만 레이아웃을 변경합니다. 스크린의 너비가 늘거나 줄어드는 것을 기준으로 레이아웃이 변경되는 것이 아니라 사전에 지정한 스크린 사이즈에서 레이아웃이 변경되는 것을 의미합니다.
위의 그림을 보면 콘텐츠 영역인 행(Column)과 관련된 영역은 스크린의 너비가 늘어나고 줄어드는 것에 영향을 받지 않으며, 여백(Margin) 영역만 변경되는 것을 볼 수 있습니다.
5. UI 구역 (UI regions)
레이아웃은 사이드 내비게이션, 콘텐츠 영역, 앱 바 등의 몇몇 UI 구역으로 구성될 수 있습니다. 이 구역들은 액션, 콘텐츠, 내비게이션과 관련된 내용을 출력할 수 있습니다. UI 구역은 다른 스크린 사이즈의 다른 분기점에 적용되는 동안 디바이스 전반에 걸쳐 일관되어야 합니다.
다시 말해, 각 UI 구역에 대한 동작 구성(Action)이나, 콘텐츠 구성(Content), 내비게이션 구조(Navigation destination) 등은 레이아웃이 변경이 되더라도 유지될 수 있어야 한다는 의미입니다. 예를 들어, 모바일에 적용된 레이아웃에 존재하는 내비게이션 구조가, 태블릿에 적용된 레이아웃에는 없거나 하는 등의 문제가 없어야 한다는 의미입니다.
이 부분에 대한 이해를 잘못하여 단순히 각 디바이스별로 단순히 레이아웃만 변경하면 된다는 생각을 하는 경우가 많습니다. 디자인으로 볼 때는 각 디바이스에 최적화가 되어있는 것처럼 보이지만 제대로 반응형 레이아웃을 구현하지 못한 사례들이 많이 발견되기 때문에 이 부분은 매우 중요한 요소로 보아야 합니다.
디바이스간의 유사성을 높이기 위해, 데스크탑을 위해 디자인된 UI 요소들은 모바일 UI와 함께 일관된 방식으로 구조화가 되어야 합니다.
위에서 전술한 바와 같이 데스크탑은 데스크탑대로 모바일은 모바일대로 레이아웃을 마음대로 정하지 말고, 데스크탑과 모바일 등의 기기에 이질감이 없도록 레이아웃 구성에 신경을 쓰라는 의미입니다.
위의 그림은 데스크탑, 태블릿, 모바일로 변경될 때 레이아웃 변화와 함께 각 UI 영역들이 어떻게 재구조화되는 지를 보여주는 예시입니다.
5.1. 영구 UI 영역 (Permanent UI regions)
영구 UI 영역(Permanent UI regions)은 내비게이션 서랍(Navigation drawer)처럼 반응형 격자(Responsive grid) 바깥 영역에 출력될 수 있는 영역입니다. 이 영역은 축소될 수 없고, 항상 출력 상태가 유지됩니다.
위 그림에서 item 리스트를 출력하는 UI 영역은 스크린 너비값의 변화와 상관없이 항상 출력되는 UI 영역으로 영구 UI 영역에 해당됩니다. 스크린의 너비가 변경되면 Subheader를 출력하고 있는 격자의 행(Column)만 변경됩니다.
5.2. 지속 UI 영역 (Persistent UI regions)
지속 UI 영역(Persistent UI regions)은 언제든 요청이 발생하면 출력되거나 그대로 출력된 상태로 남아있을 수 있는 UI 영역을 의미합니다. 지속 UI 영역은 켜기, 끄기를 통해 나타났다 사라지를 반복할 수 있습니다. 지속 UI 영역이 켜진 상태에서 지속 UI 영역의 출력 상태는 스크린의 다른 UI 요소들과 상호작용에 따라 영향을 받지 않습니다.
다시 말해, 직접적으로 지속 UI 영역이 켜진 상태에서 단순히 다른 UI 영역을 터치하거나 스크롤을 한다고 해서 해당 UI 영역이 끄기 상태로 변경되지 않는다는 것을 의미합니다.
명시적으로 지속 UI 영역을 끄고자 하는 사용자의 동작이 발생하기 전까지 지속 UI 영역은 출력 상태를 그대로 유지한다는 것입니다.
위 그림을 보면 Subheader 상단의 뒤로가기 버튼을 누르기 전까지 왼쪽의 메뉴 리스트는 Subheader 영역에서 어떠한 인터렉션이 일어나더라도 출력 상태를 유지하는데, 이것을 지속 UI 영역이라고 하는 것입니다.
5.3. 임시 UI 영역 (Temporary UI regions)
임시 UI 영역(Temporary UI regions)은 임시로 나타납니다. 임시 UI 영역은 반응형 격자(Responsive grid)에 영향을 미치지 않는 것이 특징입니다. 다시 말해, 임시 UI 영역이 스크린의 특정 영역을 점유하는 것으로 간주하지 않기 때문에 반응형 격자의 레이아웃이 변경되거나 하지 않는다는 의미입니다.
임시 UI 영역(Temporary UI regions)이 출력되면 해당 영역의 특정 아이템이 선택되면 영역이 사라지거나 영역 밖의 다른 공간에서의 인터렉션(예: 화면 터치)이 발생하면 사라집니다.
아래 그림 처럼 대표적으로 Menu drawer(Navigation drawer)가 화면을 덮었다가 사라지는 것이 임시 UI 영역의 대표적인 예시입니다.
임시 UI 영역(Temporary UI regions)이 출력되면 스크린에 있는 다른 UI 요소들은 인터렉션을 할 수 없습니다. 이 부분도 임시 UI 영역(Temporary UI regions)의 특징이라 할 수 있는데, 임시 UI 영역(Temporary UI regions)이 출력되면 다른 UI 요소들은 터치나 다른 동작을 할 수 없습니다. 임시 UI 영역은 화면의 최상단에 임시로 출력되어 동작하기 때문입니다.
5. 화이트프레임 (Whiteframes)
화이트프레임은 레이아웃, 레이어, 그림자 등에 일관성있는 설계를 제공하기 위한 구조화된 레이아웃입니다. 흔히 와이어프레임이라고 부르는 것을 화이트프레임이라고 이해하면 되며, 레이아웃과 레이아웃에 포함된 일부 UI 요소들을 머티리얼 디자인에서 함께 제공하는 와이어프레임 세트(Set)라고 생각하면 되겠습니다.
위 그림은 모바일과 데스크탑에서 사용할 수 있는 반응형 격자(Responsive gird)에 대한 레이아웃입니다. 화이트프레임은 모든 UI 요소를 탑태하고 있지는 않습니다. 전체적인 레이아웃과 관련된 틀을 제공하며, 각 서비스나 제품에 맞게 수정하여 사용해야 합니다.
위 그림은 본문(Body)과 관련된 콘텐츠를 출력하기 위한 레이아웃을 보여줍니다. 1개의 행(Column)을 갖는 격자(Grid)에 대한 레이아웃입니다.
6. 마무리
반응형 레이아웃 격자(Responsive layout grid)는 UI 설계 시, 생산성과 호환성을 높일 수 있는 방법입니다. 실무에서 이러한 설계에 대한 검토 없이 가로 보기 모드만 지원하거나 세로 보기 모드만 지원하는 경우를 많이 봐왔습니다.
이는 사용자에게 서비스 사용성이 떨어지는 것과 직결되며, 특정 기기의 스크린에 따라 서비스의 일관성이 유지되지 못하거나 여러 디바이에서 호환되지 않는 서비스 개발로 이어지는 경우가 많습니다.
큰 틀에서 레이아웃을 정의하고 설계하는 것은 UI 설계의 가장 기본 중에 기본인데, 기획자, 디자이너, 개발자의 이해부족으로 이런 부분들이 제대로 개발되지 못하는 경우가 많습니다.
레이아웃에 대한 설계를 단순히 프로젝트 요구사항 정도로 타협하지 말고, 프로젝트 기간이 조금 더 소요되더라도 제대로 UI 설계를 하여 여러 디바이스에 대응할 수 있는 생산성과 사용자에게 더 높은 사용성을 제공할 수 있기를 바랍니다.
다음 내용은 레이아웃에서 각 UI 요소들을 배치하거나 터치 영역 등을 정의하는 것과 관련된 간격을 정의하는 방법(Spacing methods)입니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기