[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 간격 설정 방법 (Spacing methods)
머티리얼 디자인에서 간격 설정 방법(Spacing methods)은 기준 격자(Baseline grids), 중심선(Keylines), 패딩(Padding), 비율, 컨테이너, 터치 영역을 적용하기 위해 8의 배수에 해당하는 dp값으로 간격(Incremental spacing)을 설정합니다.
출처: 원문보기
0. 구성 요소(Component)와 개별 요소(Element)의 이해
개념을 설명하다보면 구성 요소(Component)와 개별 요소(Element)에 대한 이야기가 많이 나옵니다. 해당 개념들을 단순히 사전적으로 번역을 하면 “요소”로 번역됩니다. 사전적 의미에 차이가 없기 때문에 이하에서 구성 요소(Component), 개별 요소(Element)와 같이 개념을 조작적으로 정의하여 사용할 것입니다.
구성 요소(Component)와 개별 요소(Element)의 차이는 어떤 것은 구성 요소, 어떤 것은 개별 요소로 정의되는 확정적 개념의 용어가 아닙니다. 일반적으로 구성 요소는 개별 요소를 포함하는 좀 더 상위의 개념으로 정의하고 있습니다.
이해를 돕기 위해 아래 그림을 예로 들어 보겠습니다.
위 그림의 왼쪽 이미지처럼 카드(Card)로 구성된 레이아웃이 있다고 했을 때, 1번 항목처럼 작게 보면 버튼(Button)은 구성 요소(Component)가 되며, 그 안에 +를 표시하는 개별 요소(Element) 아이콘(Icon)과 버튼텍스트인 개별 요소(Element) 글자(Type)이 있다고 볼 수 있습니다.
이를 2번 항목처럼 조금 더 크게 보면 구성 요소(Component)를 카드(Card)로 본다면 이 구성 요소(Component) 내에는 버튼(Button), 이미지(Image), 글자(Type) 등이 개별 요소(Element)로 정의된 것을 볼 수 있습니다.
다시 말해, 해당 요소를 포함하는 상위 계층 요소가 존재하느냐에 따라서 구성 요소(Component), 개별 요소(Element)로 구분해야 한다는 의미입니다.
이 개념은 구글에서 별도의 내용으로 공식 정리된 것이 아닙니다. 내용의 이해를 돕기 위해 본 포스팅에서 임의로 설명한 것임을 밝힙니다. 이에 따라 작업자들 사이에서 서로 다른 개념 사용에 의한 혼선을 빚지 않도록 의사소통에 유의하시기 바랍니다.
1. 기준 격자 (Baseline grids)
1.1. 8dp 격자 (8dp grid)
모바일, 태블릿, 데스크탑 플랫폼 환경을 위한 머티리얼 디자인에서 모든 UI 요소는 8dp 사각 기준 격자에 정렬됩니다. 이 부분을 이해하는 것은 매우 중요합니다. 흔히 이 부분에 대한 이해 없이 각 서비스에서 임의로 간격을 설정하여 디자인을 하는 것이 비일비재하게 발생하며, 이는 더이상 권장하는 방법이 아닙니다. 모든 UI 요소들은 8dp 격자 내에서 좌측, 우측, 하단, 상단에 격자에 정렬하여 배치되어야 합니다.
부연 설명을 하면 여기서 정렬이라 함은 격자에 맞춤(Snap)을 의미하는 것입니다. UI 요소들이 배치되는 과정에서 이 grid 라인에 맞춰서 배치가 된다는 뜻으로 이해하면 됩니다.
위 그림은 8dp 격자 내에서 최상단의 System bar 영역(배터리와 시간 등을 표기하기 위한 영역)과 앱 바(App bar) 영역, FAB(Floating action button)이 8dp 격자에 정렬되는 것을 보여주는 예시화면입니다.
여기서 그림자 효과로 나타나는 높이값(Elevation) 영역은 그라데이션 효과 등에 의해 예외적으로 명확하게 이 8dp 격자 내에 정렬하는 것처럼 보이지 않을 수 있습니다.
1.2. 4dp 격자 (4dp grid)
위에서 설명한 바와 같이 대부분의 UI 요소들은 8dp 격자 내에서 정렬이 되어야 합니다. 단, 아이콘(Icon), 글자(Type), UI 요소 내에 있는 몇몇 요소들은 예외적으로 4dp 격자에 정렬할 수 있습니다.
위 그림은 4dp 격자에 정렬되어 있는 아이콘과 글자 요소들을 나타내고 있습니다.
1.3. 4dp 기준 격자 (4dp baseline grid)
글자는 4dp 기준 격자에 맞게 정렬됩니다.
위 그림은 텍스트가 4dp 기준 격자에 맞춰서 출력된 것을 나타냅니다.
글자는 버튼 내에서 출력되거나 목록 내 항목(List item)으로 표시되는 것과 같은 상황에서 UI 구성요소가 중앙 정렬 등의 별도의 정렬을 설정할 때 4dp 격자를 벗어나서 출력될 수 있습니다.
텍스트는 예외적으로 텍스트를 포함하는 별도의 UI 요소(예: 버튼텍스트, 목록 내 항목)가 존재할 경우 해당 UI 요소가 격자에 정렬되는 것 외에 해당 요소 내에서 설정할 수 있는 정렬값(예: 텍스트 왼쪽 정렬, 오른쪽 정렬, 중앙 정렬 등)에 따라 4dp 격자를 벗어나 정렬하는 것을 허용한다는 것입니다.
위 그림은 텍스트 요소 일부가 세로 정렬 기준으로 4dp 밖에 위치하더라도 텍스트는 그 자체로 UI 요소 내(예: 버튼텍스트, 목록 내 항목)에서 별도의 정렬값에 따라 정확하게 정렬된다는 것을 나타낸 것입니다.
다시 말해, 단어 Single에서 g가 4dp 기준 격자를 벗어나는 것은 문제가 되지 않는다는 것입니다. 반대로 g를 기준으로 4dp 기준 격자에 맞춰 정렬을 하면 다른 글자들의 세로정렬에 문제가 생긴다는 의미입니다.
2. 간격 설정 (Spacing)
2.1. 간격 설정 방법 (Spacing methods)
간격 설정방법은 반응형 레이아웃 격자(Responsive layout grid)에서보다 더 촘촘하게 설정됩니다. 간격 설정 방법은 레이아웃과 UI 요소들 내부에 포함된 또 다른 요소들을 배치하는 것과 관련된 내용입니다.
다시 말해, 반응형 레이아웃 격자(Responsive layout grid)에서는 말 그 대로 서비스의 전체적인 골격을 구성하는 큰 UI 요소(예: 카드(Cards), 앱 바(App bar))들에 대한 설명을 포함하고 있다면 간격 설정 방법(Spacing methods)은 큰 UI 요소들에 포함되는 세부 요소들(예: 카드(Cards)에 포함된 이미지(Image), 텍스트(Type), 아이콘(Icon) 등)에 대한 간격 설정을 어떻게 하는지와 관련된 내용을 다룬다고 이해하면 되는 것입니다.
2.1.1. 패딩 (Padding)
내부 공백을 의미하는 패딩(Padding)은 일반적으로 특정 요소의 내부에 발생하는 공백을 의미합니다. 아래 그림에서 + 아이콘과, BUTTON 텍스트는 버튼 내부에서 각각의 영역이 있으며, 버튼 내에서 이 영역들 사이에 발생하는 공백을 패딩으로 정의하는 것입니다. (위 그림의 가장 왼쪽 이미지의 파란색 음영으로 표시한 부분이 패딩 영역입니다.)
2.1.2. 영역 (Dimensions)
+ 아이콘과 BUTTON 텍스트는 버튼 요소 내에서 각각의 영역(Dimension)을 차지한다고 하였습니다. 각각의 높이와 너비로 영역이 정의되며, 정의된 공간을 영역(Dimension)으로 부릅니다. 위 그림의 중간 이미지를 참고하면 됩니다.
2.1.3. 정렬 (Alignment)
정렬은 UI 구성 요소(Component) 내에서 개별 요소(Element)들의 위치값을 의미합니다. 예를 들어, 버튼 UI 구성 요소(Component) 내에 + 아이콘과 BUTTON 텍스트 개별 요소(Element)는 버튼 영역(Dimension)에서 세로 중앙 정렬을 하는 것을 예로 들 수 있습니다. 위 그림의 가장 오른쪽 이미지 내 하늘색 라인은 개별 요소들의 세로 정렬을 위한 중심선입니다.
2.2. 패딩 (Padding)
패딩(Padding)은 개별 요소(Element) 사이의 공백입니다. 패딩(Padding)값은 8dp, 4dp로 정의된 중심선(Keyline)을 기반으로 하는 레이아웃에서 대안이 되는 간격설정 방법입니다. 패딩(Padding)은 가로와 세로를 기준으로 정의될 수 있고, 레이아웃 전체의 폭이나 높이값을 조절하는 개념이 아닙니다.
위 그림에서 격자(Grid) 구조 내에 위치한 공유 아이콘과 검색 아이콘 구성 요소(Component) 사이의 거리는 패딩(Padding)값을 통해서 조절되며, 패딩(Padding)값의 조절이 격자(Grid)의 너비 등에는 영향을 미치지 않는다는 것을 의미합니다. 다시 말해, 두 아이콘 사이의 패딩(Padding)값을 통한 공백 조정 시, 24dp 이상으로 설정되지 않으며 격자(Grid) 레이아웃의 너비에 변화를 주지 않는다는 의미입니다.
리스트에서 각 아이템 열(Row)의 간격 조정도 패딩(Padding)값 조절을 통해서 이뤄지고 있는 것을 위 그림에서 확인할 수 있습니다.
머티리얼 디자인에서 각 요소들의 세부 간격은 이 패딩(Padding)과 중심선(Keylines)을 통해서 조정이 되기 때문에 이를 이해하는 것은 매우 중요합니다. 아래의 컨테이너(Container)와 함께 레이아웃의 세부 디자인을 위한 핵심 개념이오니 반드시 숙지하시기 바랍니다.
2.3. 영역 (Dimensions)
영역(Dimensions)은 개별 요소(Element)의 너비와 높이값을 나타냅니다.
일부 앱 바(App bar)와 같은 구성 요소(Component)들은 개별 요소로써 영역으로 높이값(Height)만 갖기도 합니다. 앱 바(App bar)가 개별 요소(Element)로써 높이값만 갖을 때 앱 바(App bar)는 8dp 격자에 맞춤 정렬해야 합니다. 이때 앱 바가 너비값(Width)을 갖지 않는 이유는 스크린 너비에 따라 너비값은 반응형으로 늘어났다 줄어들었다 할 수 있도록 설계되어 있기 때문입니다.
위 그림에서 상태 표시 바(Status bar), 앱 바(App bar), 리스트 항목(List item)은 높이값(Height)만 갖으며, 너비값(Width)은 갖지 않습니다.
2.4. 정렬 (Alignment)
정렬은 구성 요소(Component) 내에서 개별 요소(Element)들의 배치와 관련된 설정입니다.
위 그림은 세로 격자(Vertical grid) 시스템 내에서 행(Column)과 각 격자에 배치된 개별 요소들의 영역(Dimension)을 나타내고 있습니다. 각 개별 요소들은 세로 기준 중간 정렬(Centered) 상태에 있음을 나타내고 있습니다.
다시 말해, 해당 앱 바(App bar)를 구성 요소로 하는 상황에서 각 개별 요소(Element)인 Menu drawer, App bar title, icon(share and search)들은 앱 바 영역(Dimension)의 중간 정렬로 정렬된다는 것을 나타내는 것입니다.
2.4.1. 중심선 (Keylines)
중심선(Keylines)은 레이아웃 격자(Layout grid) 영역을 벗어나 개별 요소(Element)가 일관된 배치치를 할 수 있도록 하는 정렬 도구 중 하나입니다. 중심선(Keylines)는 개별 요소들이 격자에 정렬하지 않을 때, 어디에 위치해야 되는지를 보여주기 위한 세로선(Vertical line)입니다.
보통 구성 요소(Component)나 개별 요소(Element)는 레이아웃 격자(Layout grid)에 따라 각 행(Column)이나 열(Row)의 모서리에 맞춰서 정렬한다고 이전 시간이 이야기하였습니다.
중심선(Keylines)는 스크린 끝에서부터 각 개별 요소(Element)까지의 거리로 결정되고, 8의 배수가 되는 dp값을 갖습니다. 세부 설명은 아래 그림에서 다시 설명하겠습니다.
위의 그림의 2번 항목은 중심선(Keyline)을 나타냅니다. 화면 왼쪽의 초록색 여백(Margin)이 시작되는 것처럼 왼쪽 화면 끝에서부터 72dp 만큼 떨어진 위치에 중심선이 사용된 예시를 보여주고 있습니다. 중심선은 위에 설명한 것처럼 8의 배수인 dp값으로 결정됩니다. (위의 예시에서 72dp는 8dp의 9배수가 되는 값입니다.)
중심선(Keylines)은 레이아웃 내 개별 요소(Element) 사이에서 더 크거나 작은 공백을 만들 수 있습니다. 중심선은 격자가 반응형으로 변경되는 분기점(Breakpoint) 범위 내에서 조정할 수 있습니다. 다시 말해 하나의 행(Column)이나 열(Row) 내에서 위치값을 변경할 수 있다는 의미입니다. 이때 유의할 것은 중심선은 8의 배수인 dp값으로만 움직여야 한다는 것입니다.
위의 그림은 세로 중심선(Keylines)의 위치가 48dp, 56dp, 64dp, 72dp로 각각 변경되는 것을 보여줍니다. 이 중심선에 따라 구성 요소(Component)인 리스트(List)의 개별 요소(Element) 항목의 글자(Item text) 정렬 위치가 변경되는 것을 확인할 수 있습니다.
단, 예시 이미지가 스크린의 맨 끝으로부터 거리로 지정이 되어야 하는데, 위의 예시 내용과는 달리 여백(Margin)으로부터의 거리로 표현이 되어 있는 것 같습니다. (공식 홈페이지의 예시 이미지에 오류가 있는 것 같습니다.) 별다른 이유가 없다면 이미지가 잘못 작성된 것으로 보는 게 맞을 것 같습니다. 구글에 직접 피드백을 남겨두었으니 어떻게 변경이 되는지 향후 확인해 봐야겠습니다.
중심선(Keylines) 개념은 개별 요소들의 정렬에 가장 많이 사용될 수 있는 개념이기 때문에 반드시 숙지하고 계시기 바랍니다.
3. 컨테이너와 비율 (Containers and ratios)
3.1. 컨테이너 (Container)
컨테이너는 닫힌 공간(Enclosed area)을 표현하기 위해 사용됩니다. 컨테이너는 이미지, 아이콘, 표면(Surface)과 같은 UI 개별 요소(UI element)를 감싸서 붙잡아두는 특징이 있습니다.
위 그림에서 1번은 컨텐이너 내부에 이미지로 채워진 개념이며, 2번은 아이콘, 3번은 버튼이 표면의 예시로 채워진 것을 보여줍니다.
컨테이너(Container)는 컨테이너 내부에 포함된 개별 요소(Elements)들의 사이즈를 제한하거나 일부를 자르기 할 수 있습니다. 또한 컨테이너는 컨테이너에 포함된 콘텐츠(Content)의 사이즈를 늘리거나 유연하게 변경할 수 있도록 합니다.
위 그림에서 1번은 이미지의 일부를 잘라내는 것을 예시로 든 것이며, 2번은 채워진 이미지를 채워진 상태로 늘리는 것을 나타냅니다.
3.2. 종횡비 (Aspect ratios)
종횡비(Aspect ratio)는 개별 요소(Element)의 가로(Width)와 세로(Height)의 비율을 의미합니다. 종횡비(Aspect ratio)는 다음과 같이 “가로:세로”로 표기됩니다. 흔히 우리가 자주 접하는 TV나 모니터의 비율을 나타낼 때 사용하는 단위(Unit)가 종횡비라고 생각하면 됩니다.
레이아웃의 일관성을 유지하기 위해 이미지(Image), 표면(Surface), 스크린 사이즈(Screen size) 등의 개별 요소(Element)에 일관된 종횡비를 사용하라고 구글 머티리얼 디자인은 강조하고 있습니다.
시각적 효과를 강조하기 위해서 이미지를 사용하는 경우가 많은데, 이미지가 포함되는 영역에 임의로 그때그때 사이즈를 지정해서 포함시키지 말고, 제품 내에서 사용하는 종횡비를 정하고 일관되게 사용하라는 것을 강조하는 것입니다.
위 그림은 전반적인 UI 디자인에서 추천하는 종횡비 비율을 나타내고 있습니다. 16:9에서부터 2:3까지의 다양한 비율을 추천하고 있습니다.
3.3. 가변 비율 (Flexible ratios)
가변 비율(Flexible ratio) 크기는 레이아웃 격자(Layout grid)에 의해서 결정됩니다.
- 컨테이너(Container) 너비는 스크린 레이아웃에 의해서 결정되고, 허용가능한 최대 공간에 채워지기 위해 늘어날 수 있습니다. (아래 그림에서 컨테이너는 행(Column)에 채워지게 되고, 이 컨테이너의 너비값은 행(Column)의 너비값이 변화하는 것에 따라서 늘어날 수 있다는 것을 의미하는 겁니다.)
- 컨테이너(Container) 높이는 컨테이너 내부의 이미지 높이값에 의해서 결정됩니다. (컨테이너에 채워진 이미지가 있다면 이 이미지의 높이값이 변경되는 것에 따라서 컨테이너의 높이는 자동으로 조정된다는 것을 말하고 있습니다.)
구글 머티리얼 디자인은 정해진 종횡비를 사용하는 것보다 가변 비율을 사용해 콘텐츠(예: 이미지)가 컨테이너의 높이를 자동으로 결정하여 호환성이 높은 디자인을 하도록 권장하고 있습니다.
3.4. 반응형 자르기 (Responsive cropping)
머티리얼 디자인은 이미지를 반응형으로 출력하기 위해 서로 다른 분기점 영역(Breakpoint range)에서 어떻게 이미지가 잘려지는 지를 정의하는 것을 권장합니다. 서로 다른 분기점 영역에서 자르기(Cropping) 설정을 다음과 같이 다르게 지정할 수 있습니다. 아래 설정에 대한 자세한 내용은 그림과 함께 다시 설명하겠습니다.
- 이미지의 종횡비를 하나의 고정된 것으로 유지하기
- 각 분기점 영역에서 서로 다른 종횡비를 적용하기
- 이미지 높이값(Height)를 고정하기 (이미지가 확대되면서 높이값을 초과하면 자르기)
3.4.1. 이미지의 종횡비를 하나의 고정된 것으로 유지하기
위 그림은 모바일과 태블릿 레이아웃에서 레이아웃이 분기점(Breakpoint) 영역을 벗어나 출력되는 격자(Grid)에 변화가 발생한 상황을 보여줍니다. (단, 이 예시에서 격자의 기준이 되는 행(Column)은 1개로 정의되어 있는 레이아웃입니다.) 모바일과 태블릿에서 동일한 종횡비의 이미지를 출력하며, 이에 따라 하단의 리스트 영역의 세로 배치값(Positioning)도 함께 아래로 이동된 것을 볼 수 있습니다.
3.4.2. 각 분기점 영역에서 서로 다른 종횡비를 적용하기
위 그림은 모바일에서는 1:1 비율의 이미지를 사용하고, 태블릿에서는 16:9 이미지를 사용하는 것을 나타내는 예시입니다. 1:1 비율의 이미지를 16:9로 늘리는 것은 이미지 비율이 왜곡되는 문제를 야기하므로 원본 이미지는 16:9의 이미지로 보는 것이 타당하며, 이를 1:1의 영역에서 자르기(Crop)하여 적용한 것으로 보아야 합니다.
3.4.3. 이미지 높이값(Height)를 고정하기 (이미지가 확대되면서 높이값을 초과하면 자르기)
위 그림은 이미지가 가로로 확대되면서 세로로 함께 확대되는데, 이 영역에서 정해진 이미지 높이값을 초과하는 경우 자르기(Crop)하는 것을 의미합니다. 이를 통해 모바일과 태블릿에 적용된 레이아웃의 일관성을 리스트 배치의 변화없이 조금 더 유사한 형태로 가져가는 효과를 볼 수 있습니다.
4. 터치 영역 정의 (Touch targets)
터치 영역(Touch target)은 접촉(touch) 또는 비접촉(non-touch) 입력 모두를 받아들이는 어떤 장치에도 적용됩니다. 화소와 사용성 등의 균형을 위해 터치 영역은 최소 가로 48dp, 세로 48dp로 적용하도록 합니다.
또한 터치 영역과 터치 영역이 포함하고 있는 콘텐츠 사이에 최소 8dp의 공백이 있도록 해야 합니다. (상, 하, 좌, 우 어느 영역으로든 한 군데 이상에서 합산한 공백의 폭이 8dp를 넘을 것을 권장한다는 의미입니다.)
위 그림에서 1번 항목은 가로 48dp, 세로 48dp 영역에 속한 이미지는 가로 40dp, 세로 40dp로 터치 영역(Touch target)과 최소 8dp의 차이가 있는 것을 타나냅니다.
2번 항목은 가로 48dp, 세로 48dp 터치 영역 내 가로 24dp, 세로 24dp의 아이콘이 채워진 예시입니다. 3번 항목은 가로로는 터치 영역이 거의 꽉 채워진 형태이며, 세로로 위와 아래를 합하여 12dp로 터치 영역과의 공백을 둔 것을 예시로 든 것입니다.
5. 마무리
간격 설정방법(Spacing method)은 머티리얼 디자인에서 각 구성 요소(Component)와 개별 요소(Element)의 레이아웃 내 배치와 관련하여 중요한 역할을 합니다. 레이아웃 내에서 각 요소들의 세부 조정을 위한 개념으로 디자인의 일관성을 통해 완성도를 높이고, 호환성, 사용성 등을 높이는 역할을 하는 개념입니다.
다시 한번 강조하지만 아무렇게나 디자인을 할 수는 있지만 구글에서 원칙을 권장하는 이유는 다 이유가 있는 겁니다. 단기간에 쉽게 개발하고, 쉽게 디자인하는 방법을 선택하지 말고, 원칙과 개념들을 잘 숙지하여 장기적으로 프로젝트 자원을 낭비하지 않도록 했으면 합니다.
다음 내용은 구성 요소(Component)와 개별 요소(Element) 들의 등장, 사라짐, 확대, 축소, 오버레이 등의 동작과 관련된 구성 요소 동작(Component Behavior)입니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기