[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 구성 요소 간 밀집도 적용(Applying density)
밀집도 적용(Applying density)은 머티리얼 디자인에서 각 구성 요소 간의 간격을 나타내는 것과 관련된 내용을 다룹니다. 해당 내용은 레이아웃, 구성 요소, 접근성, 서체 등의 표현에서 어떤 방식으로 구성 요소들을 밀집시켜 디자인을 하는지를 안내합니다.
출처: 원문보기
1. 적용 사례 (Usage)
이 가이드라인은 밀집도(Density) 적용을 어떻게 언제 적용하는지에 대해서 기술합니다. 참고로 해당 내용은 2021년 3월 현재 베타 버전으로 안내하고 있습니다. 향후 변경될 수 있는 내용을 추적하여 확인할 필요가 있습니다.
1.1. 기본 원칙 (Principle)
구성 요소 간 밀집도(Density)를 설정하기 위한 원칙은 크게 3가지입니다.
첫째, UI 요소들의 밀집도는 많은 양의 콘텐츠를 탐색(Navigating)하거나 보기(Viewing) 쉽게 해야 합니다. 둘째, UI 요소들의 밀집도는 사용자가 특정 과업을 수행하기 위한 동작을 줄여주어 과업수행에 집중하는데 도움이 되어야 합니다. 셋째, 밀집도를 높이는 것은 더 많은 콘텐츠와 특정 과업을 수행하기 위해 필요한 더 많은 동작을 하나의 화면에서 수행할 수 있게 합니다.
1.2. 밀집도 가이드라인 (Density guidelines)
1.2.1. 적용하는 방법 (How to apply)
머티리얼 디자인의 밀집도 가이드라인은 밀집도 설정이 사용자 경험(UX)을 언제, 왜 개선하는지를 이해하기 위한 내용을 안내합니다. 각 머티리얼 구성 요소(Component)의 밀집도 설정은 프로그래밍 코드에 의해서 조정됩니다. 이 외에 각 플랫폼 별 밀집도 설정은 별도 내용을 참고하시기 바랍니다.
1.2.2. 적용 시점 (When to apply)
사용자가 구성 요소와 상호작용을 하는 방법에 있어 머티리얼 디자인 담당자는 UI 구성 요소의 밀집도를 증가시킬지 말지에 대한 결정을 해야 합니다. 사용자가 더 많은 정보를 다루어야 할 때, 밀집도가 높은 구성 요소 디자인은 사용자 경험을 개선시킬 수 있습니다.
리스트(List), 테이블(Table), 폼(Form) 등의 구성 요소에서 밀집도를 증가시키면 한 화면에서 더 많은 콘텐츠를 확인하여 정보를 쉽게 탐색하고(Scan), 확인하고(View), 비교할(Compare) 수 있습니다.
당연한 이야기겠지만 위 그림에서처럼 왼쪽의 리스트(List)의 열(Row) 간격을 줄여 밀집도를 증가시키면 한 화면에서 더 많은 리스트 항목(Item)을 확인할 수 있고, 오른쪽의 폼(Form)의 각 입력 필드(Input field)의 높이값을 줄이면 더 많은 입력 필드(Input field)를 한 화면에서 출력하는 것이 가능하다는 의미입니다. 어렵게 설명을 하고 있지만 단순하고 직관적으로 이해할 수 있는 내용입니다.
1.3. 밀집도 설계를 하지 말아야 할 때 (When not to apply density)
특정 과업을 수행하거나 사용자에게 경고를 하기 위한 구성 요소(Components)는 밀집도가 높게 설정하면 안 됩니다.
1.3.1. 집중해야 하는 과업(Focused tasks)
드롭다운(Dropdown) 메뉴나, 피커(Picker)와 같이 상호작용을 하면서 집중을 해야 하는 과업을 포함하는 구성 요소의 밀집도는 높게 설정하지 말아야 합니다. 데이트 피커(Date picker)와 같은 구성 요소의 높은 밀집도는 터치 할 수 있는 영역을 제한할 수 있기 때문에 사용성을 떨어뜨릴 수 있습니다.
다시 말해, 사용자가 화면 터치 등을 통해 별도의 입력값을 선택해야 하는 UI 구성 요소들은 임의로 밀집도를 높이지 말라는 의미입니다.
위 예시는 날짜를 선택하기 위한 데이트 피커(Date picker)의 밀집도를 너무 높여서 사용자가 원하는 날짜를 선택하는 데 어려움이 있다는 것을 표현한 것입니다.
1.3.2. 경고와 메시지 안내 (Alerts and messaging)
스낵바(Snackbars) 또는 대화상자(Dialogs)와 같이 사용자의 선택을 경고하기 위한 구성 요소는 밀집도를 높이지 않아야 합니다. 경고 메시지의 밀집도를 높이는 것은 사용자가 콘텐츠에 집중하는데 방해가 될 수 있습니다. 예를 들어, 대화상자(Dialogs)에서 사용자에게 경고를 하기 위한 메시지는 밀집도가 높아지면 가독성(Readability)이 떨어질 수 있습니다.
위 그림은 대화상자(Dialogs)에서 메시지의 밀집도가 높아 가독성이 떨어지는 것을 예로 든 것입니다. 당연한 이야기겠지만 대화상자의 타이틀 텍스트, 본문, 버튼의 텍스트는 각각 일정한 간격으로 띄워져 있어야 한다는 의미입니다.
간혹 이 값을 출력해야 하는 본문이 많다는 이유로 임의로 조정하는 경우가 있는데, 머티리얼 디자인에서는 이를 금지하고 있습니다. 대화 상자(Dialog) 내에서 본문 텍스트 출력에 문제가 있다면 본문 텍스트를 더 간결하게 조정해야 합니다. 구글에서 대화상자에서 출력하는 텍스트를 어떻게 간결하게 표현할지에 대한 가이드라인이 있습니다. 이 내용은 향후에 별도로 다루겠습니다.
2. 레이아웃 (Layout)
2.1. 격자(Grid)와 구성 요소(Component)의 밀집도
격자(Grid) 레이아웃과 구성 요소(Component) 사이의 균형을 유지하는 것이 본 내용의 핵십입니다.
탐색가능한 콘텐츠 그룹을 설계하기 위해 높은 밀집도를 가진 구성 요소(Component)와 낮은 밀집도를 가진 격자 레이아웃을 사용해야 합니다. 구성 요소의 밀집도가 높아질수록 레이아웃에서의 도랑(Gutter)와 여백(Margin)의 너비는 더 넓어져야 합니다.
구성 요소와 레이아웃 격자가 모두 밀집도가 높으면 사용자가 콘텐츠 그룹을 구분하는 것을 어렵게 만들게 됩니다.
요약하면 정보를 보여주는 콘텐츠를 포함하는 구성 요소는 밀집도가 있게 설계하되 각 구성 요소 사이의 공간은 충분히 여유를 두고 디자인을 하라는 의미입니다. 여기서의 핵심 목표는 각 콘텐츠 그룹을 사용자가 쉽게 식별할 수 있게 하는 것에 있습니다.
위 그림에서 왼쪽의 메뉴 영역, 중간의 Accounts 영역, 오른쪽의 Alerts 영역은 각각의 구성 요소로 구분이 되어 있으며 각 구성 요소를 구분하는 도랑(Gutter), 여백(Margin)은 넓게 설정된 것을 볼 수 있습니다.
위 그림은 좁은 여백(Margin)과 좁은 도랑(Gutter)을 설정하여 밀집도를 높인 디자인 방식이며, 머티리얼 디자인은 이러한 디자인을 하지 말라고 하고 있습니다.
하지만 안타깝게도 아직도 많은 현장에서 의사결정권자의 이해부족으로 제한된 공간에 무조건 많은 정보를 노출하기 위해 이런 디자인을 채택하는 경우가 많이 발생하고 있습니다. 최소한 담당자는 이것이 잘못된 설계 방향이라는 것은 알고 디자인에 반영될 수 있도록 최대한 노력해야합니다.
3. 구성 요소 (Component)
3.1. 구성 요소(Component)의 밀집도를 적용하는 방법
구성 요소의 밀집도는 독립적으로 적용되면 안 됩니다. 구성 요소 그룹 간에 일관된 밀집도 설정을 적용해야 합니다. 하나의 구성 요소에 밀집도를 높여서 적용할 때, 이러한 것이 다른 요소에 어떤 영향을 미칠지에 대해서 고려해야 한다는 것입니다.
아래 머티리얼 구성 요소의 밀집도 설정과 관련하여 기본 설정(Default), 여유로운 설정(Comfortable), 축약된 설정(Compact)에 대한 예시를 확인할 수 있습니다.
다시 말해, 버튼(Button), 텍스트 입력(Text field), 체크박스(Checkbox) 등의 구성 요소들의 높이값이나 각 항목들 간의 간격들을 임의로 설정하지 말라는 뜻입니다.
스크롤 동작을 하지 않게 한다는 이유로 임의로 특정 페이지에서만 밀집도를 임의로 조정하는 것은 앱에서의 디자인 일관성을 떨어뜨린다는 의미인 것입니다.
3.1.1. 데모 확인 (Interactive demo)
각 설정 별 구성 요소의 밀집도 변화는 위 그림과 같이 표현될 수 있습니다. 상세한 차이를 확인하려면 바로가기 페이지에서 확인하기 바랍니다.
3.2. 밀집도 크기 (Density scale)
밀집도의 크기는 필요한 경우 개별 구성 요소 설정에서 설정값 조정을 통해서 할 수 있습니다. 밀집도 크기는 숫자로 설정할 수 있고, 기본 설정값은 0입니다. 크기값은 -1, -2, -3과 같이 음의 값을 가질 수록 구성 요소의 공간이 줄어들어 더 높은 밀집도를 갖게 됩니다.
각 구성 요소의 밀집도를 조정하기 위한 높이값은 4dp씩 조정됩니다. 즉, 0을 기준으로 -1씩 감소할때마다 4dp씩 구성 요소의 높이값이 줄어든다고 이해하면 됩니다.
위 그림은 밀집도 크기별 변경되는 구성 요소의 높이값을 보여주고 있습니다.
위 그림은 밀집도를 너무 높여 구성 요소의 높이값이 구성 요소 자체를 표현하는데 문제를 일으키는 것을 나타내고 있습니다. 그림에서 칩(Chip)을 예로 든 것이 칩의 밀집도는 -4에서 정상적인 형태로 출력이 불가능한 것을 보여주고 있습니다.
3.3. 간격 설정 방법 (Spacing methods)
구성 요소의 밀집도를 높일 때, 패딩(Padding)과 정렬(Alignment)에 대한 설정값은 유지됩니다. 그렇지만 구성 요소의 높이값은 줄어듭니다.
다시 말해, 구성 요소 내에서 각 개별 요소(Elements)의 간격을 의미하는 패딩(Padding) 값이 밀집도 설정 변경과 관련해서 변경되지 않는다는 의미이고, 구성 요소 내에서 개별 요소(Element)의 정렬 값이 변경되지 않는다는 의미입니다.
위 그림에서 가장 왼쪽 그림은 더하기 아이콘(+)과 버튼 텍스트(BUTTON) 사이와 바깥의 패딩(Padding)값은 밀집도가 변경되는 것과 무관하게 12dp, 8dp, 16dp로 유지된다는 것을 나타냅니다. 가운데 그림은 밀집도 변화에 따라 높이값(Dimension)이 변하는 것을 표현한 것입니다. 높이값은 위의 설명했던 바와 같이 설정값에따라 4dp씩 변합니다. 오른쪽 그림은 밀집도가 변하더라도 개별 요소(Element)인 더하기 아이콘(+)과 버튼 텍스트(BUTTON)의 세로 정렬값인 Centered값은 변경되지 않는 것을 나타내고 있습니다.
즉, 밀집도의 변화에서 변화가 일어나는 부분은 위 그림에서 보라색으로 채워지는 버튼의 높이 영역만 변화하며, 내부의 개별 요소인 더하기 아이콘(+)이나 버튼 텍스트(BUTTON)의 디자인에는 영향을 주지 않는다는 것을 알 수 있습니다.
3.3.1. 여러 개별 요소의 간격 설정 방법 (Spacing multiple elements)
하나의 구성 요소(Component)에 여러 개의 개별 요소(Elements)가 세로 방향으로 쌓는 방식으로 디자인이 설계될 때, 각 개별 요소는 4의 배수값을 갖는 dp로 설정되어야 합니다. 또한 여러 개별 요소는 하나의 그룹으로 간주하여 구성 요소 컨테이너의 세로 방향으로 중간 정렬(Center)되어야 합니다.
위 그림에서 Text field 내에 Label과 Input text가 있다고 가정했을 때, Label과 Input text는 각각 4의 배수에 해당하는 dp값으로 설정이 되어야 한다는 것을 나타내는 게 1번 항목입니다. (그림에서 Input text 영역을 20dp로 설정하고 있습니다.) 2번 항목은 Label과 Input text는 하나의 그룹으로 간주하고, 이 그룹이 Text field 안에서 세로 방향으로 중간에 위치하도록 정렬하도록 하라는 의미입니다.
UI 디자인과 UI 개발을 하는 과정에서 담당자들과 이야기를 하다 보면 이 부분에 대한 이해를 잘 못하는 경우가 많습니다. 실제 UI 설계 시 매우 자주 활용되는 사례로 반드시 숙지하고 넘어가시기 바랍니다.
4. 접근성 (Accessibility)
4.1. 터치 영역 (Touch target)
터치 영역(Touch target)에 대한 밀집도는 터치(Touch), 비터치(Non-touch) 입력을 전달받는 장치에 모두 적용할 수 있는 개념입니다. 디바이스가 터치를 지원하든 지원하지 않든 화면을 구성 하는 구성 요소 전반에 걸쳐 구성 요소의 밀집도를 고려하여 모두 적용할 수 있다는 의미입니다.
정보의 밀집도와 사용성의 균형을 위해 구성 요소의 기본 밀집도 설정을 위한 터치 영역은 최소 48dp x 48dp 이어야 합니다. 각 구성 요소 간 터치 영역은 최소 8dp를 두고 설정되어야 합니다. 다시 말해, 서로 다른 두 구성 요소가 인접해 있다고 할 때, 두 구성 요소의 터치 영역의 거리가 최소 8dp를 두고 설정되어야 한다는 의미입니다. 참고로 iOS는 최소 터치 영역으로 44dp x 44dp를 추천하고 있습니다.
위 그림은 각 개별 요소(Element)의 크기와 그와 대비한 터치 영역이 설정된 것을 나타내고 있습니다. 위 그림의 1번 항목은 40dp의 개별 요소가 48dp의 터치 영역값을 갖는 것을 나타내고, 2번 항목은 24dp의 개별 요소가 48dp의 터치 영역값을 갖는 것을 나타냅니다. 마지막으로 3번 항목은 36dp의 개별 요소가 48dp의 터치 영역값을 갖는 것을 나타낸고 있습니다.
위에서 설명한 바와 같이 iOS 제품을 제외하고, 최소 터치 영역은 다시 한번 강조하면 48dp x 48dp 입니다.
높은 밀집도(Density)를 가진 구성 요소에 대한 경험 시, 높은 밀집도를 가진 구성 요소는 접근성 요구사항(Accessibility requirements)을 만족할 수 없기 때문에 사용자는 직접 설정을 변경할 수 있어야 합니다.
위 그림은 높은 밀집도를 가진 구성 요소를 가진 패턴을 디자인할 경우 사용자가 설정값을 변경할 수 있도록 해야 한다는 것을 나타냅니다.
구글 머티리얼 디자인은 기존의 GUI 디자인과는 달리 각 구성 요소의 높이값이나 너비값을 임의로 조정하는 것을 제한하고 있다는 것을 다시 한번 확인할 수 있는 부분입니다.
이는 이미 여러 사용자 연구(User research)를 통해서 설정된 기본 높이값, 너비값들이 이미 최적화가 되어 있다는 것을 의미하며, 이를 디자인너가 임의로 변경할 경우에는 이를 위한 근거를 명확히 하고, 기본 설정으로의 복원을 지원할 수 있어야 한다고 하고 있습니다.
5. 서체 (Typography)
5.1. 줄간격 (Line height)
줄간격(Line height)은 텍스트(Text)의 줄 사이의 공간을 의미합니다. 줄간격은 활자 디자인(Typographic) 레이아웃의 밀집도를 결정하는 방법으로 사용됩니다.
위 그림의 1번 항목은 넓은 줄간격을 가진 사례를 나타냅니다. 각각의 줄간격은 글자의 하단 정렬 기준선(Baseline)을 기준으로 기준선과 기준선의 거리로 측정됩니다. 반대로 위 그림의 2번 항목은 좁은 줄간격을 가진 사례를 보여줍니다.
6. 적용방법 (Implementation)
각각의 플랫폼에서 지원하는 밀집도는 아래와 같습니다. 기본적으로 각 구성 요소에 설정되는 밀집도(Density)는 플랫폼에서 지정된(Planned) 값에 따라 설정가능합니다. 안드로이드(Android), iOS, Flutter는 지정된(Planned) 값을 지원하며, 웹(Web)의 경우 자체적으로 지원하지는 않지만 아래 하이퍼링크에 연결된 요소를 참조하여 설정할 수 있습니다.
| Platform | Status |
|---|---|
| Android | Planned |
| iOS | Planned |
| Web | Available |
| Flutter | Planned |
7. 마무리
구성 요소의 밀집도(Density)은 레이아웃 내에서 세부 구성 요소(Component) 및 개별 요소(Element)의 배치 간격을 설정하기 위한 개념입니다.
다시 한번 강조하면 여기서 중요한 것은 이 밀집도(Density)의 개념은 시력에 문제가 있는 사용자를 위한 접근성(Accessibility) 및 사용성(Usability) 등을 이미 연구하여 결정되어 있으며 임의로 디자이너가 이를 설정하는 것을 권장하지 않는다는 것입니다.
밀집도와 관련된 내용은 각 구성 요소에서도 별도로 다룰 예정이며, 기존에 반응형 레이아웃 격자(Responsive layout grid) 등에서도 해당 내용을 일부 다룬 적이 있습니다.
이것으로 레이아웃과 관련된 내용은 끝났습니다. 다음 내용은 제품 및 서비스의 각 화면(Activity) 간 이동을 나타내는 내비게이션과 관련된 내용입니다.
내비게이션 구조를 설계하고 분석하는 것은 결제, 네트워크 연결 등의 프로세스가 복잡한 서비스에서 문제가 발생할 수 있는 예외 상황을 점검하는데 특히 중요합니다.
많은 작업자들이 내비게이션 구조를 어떤 기준에서 분석을 해야하는지 잘 모르기 때문에 약간의 개발(Programming) 관련 내용을 다루고, 설명을 해보도록 하겠습니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기