[UX] 구글 머티리얼 디자인 – 3.3.머티리얼 기초(Material foundation) – 레이아웃(Layout): 구성 요소 동작 방식(Component behavior)

머티리얼 디자인에서 구성 요소 동작 방식(Component behavior)은 UI 요소들의 위치를 정의하는 용어 및 방식(Positioning terminology), 구성 요소의 너비(Component width), 반응형 패턴(Responsive patterns)과 관련한 내용을 설명합니다.

출처: 원문보기

1. UI 요소들의 위치값을 정의하는 용어 (Positioning terminology)

개별 UI 요소들(UI elements)은 각 분기점(Breakpoint) 범위에서 서로 다른 방식으로 동작할 수 있습니다. 다시 말해, 분기점에서 출력되는 레이아웃의 변화와 함께 개별 요소(Element)의 표현방식(예: Side navigation으로 표현할지, Tab으로 표현할지)이나 위치값(예: FAB를 화면 하단 오른쪽에 출력할지, 상단오른쪽에 출력할지) 등이 달라질 수 있다는 것입니다.

1.1. 용어 (Descriptors)

레이아웃 격자(Grid) 내에서 UI 개별 요소(Element), 구성 요소(Component), 표면(Surface)의 위치값은 다음의 용어들로 설명할 수 있습니다.

용어	설명
Above, below	각 개별 요소의 y축 위치값
In front of, behind	각 개별 요소의 z축 위치값
Left, right, centerd	각 개별 요소의 x축 위치값
Top, bottom	컨테이너 또는 스크린 테두리에 대한 각 개별 요소의 상대적인 y축 위치값
Vertically centered	컨테이너 또는 스크린 테두리에 대한 각 개별 요소의 상대적인 x축, y축 위치값
Sticky	스크롤이 발생한 상황에서 UI와 함께 스크롤이 되거나 특정한 위치를 점유하는 개별 요소
Floating	스크롤이 발생하는 콘텐츠로부터 z축으로 최상단에 위치하는 고정된 개별 요소

Descriptors for positioning

2. 구성 요소의 너비 (Component width)

구성 요소의 너비는 휴대폰 스크린 크기에 상관없이 동일한 너비로 남아 있을 수 있거나 스크린 크기의 변화에 따라 레이아웃이 변하면서 너비를 변경할 수 있습니다. 구성 요소의 너비는 다음과 같은 형식으로 정의될 수 있습니다.

• 고정값 너비 (Fixed)
• 변동값 너비 (Fluid)

고정된 너비값을 갖는 개별 요소(Element)는 레이아웃의 분기점(Breakpoint)이 변화면서 출력되는 격자(Gird)의 구성이 달라져도 너비값을 그대로 유지해야 되기 때문에 개별 요소들의 배치를 통해 새로운 레이아웃의 변화에따라 적용되어야 합니다.

변경된 레이아웃에 맞춰 고정된 너비값을 갖는 개별 요소를 배치하는 방식은 다음과 같습니다.

• 밀어내기 (Pushed)
• 중첩하기 (Overlaid)

2.1. 고정값 너비 (Fixed)

개별 요소(Element)의 너비값이 고정되도록 설정한 경우, 스크린 크기가 변하여 레이아웃이 변경되는 상황에서도 개별 요소의 너비값은 동일하게 출력됩니다.

Fixed width example

위 그림에서 스크린의 너비가 늘어나 격자(Grid)의 행(Column)이 가로 방향으로 더 늘어나더라도 버튼(Button)의 너비값은 변화없이 출력되는 것을 볼 수 있습니다.

2.2. 변동값 너비 (Fluid)

개별 요소(Element)의 너비값이 변하도록 설정한 경우, 스크린 크기 변화여 레이아웃이 변경되는 상황에서 개별 요소의 너비값은 늘어나거나 축소됩니다.

Fluid width example

위 그림에서 버튼의 너비는 오른쪽 2개 행(Column)에 맞춰서(Snap to) 늘어났다 줄어들었다 하는 것을 볼 수 있습니다.

Fluid width wrong example

위 그림은 개별 요소에 변동값 너비를 적용할 때, 패딩값이 작아 출력 영역에 여유가 없을 경우 변동값 너비 적용을 하지 말아야 하는 사례를 설명합니다. 위의 사례에서 개별 요소(예: 버튼)가 2개 행(Column)에 맞춰서 너비값이 변동하는 것과 달리 해당 사례는 개별 요소(예: 버튼)가 1개 행(Column)에 맞춰서 너비값이 변동하도록 설정한 사례입니다.

이러한 적용방식을 금지하는 이유는 개별 요소의 너비값이 행(Column)의 너비가 레이아웃의 변화와 함께 축소되는 과정에서 버튼의 텍스트가 잘리거나 하는 등의 문제가 발생하기 때문입니다.

Fluid width bad example

위 그림은 반대로 너무 여러 행(Column)에 걸쳐 변동값 너비를 적용하여 특정 개별 요소(예: 버튼)가 지나치게 강조하는 것을 권장하지 않고 있습니다. 해당 동작 사양은 버튼의 텍스트가 잘리거나 하는 등의 심각한 문제가 발생하진 않지만 레이아웃 내의 다른 개별 요소 및 구성 요소 등의 동작이나 디자인에 영향을 줄 수 있기 때문에 권장하지 않는 것입니다.

2.3. 밀어내기 (Push)

구성 요소의 너비값과 관련하여 고정값 너비가 설정된 상태에서 스크린 크기가 변하여 레이아웃에 변화가 발생할 때, 구성 요소(Component)는 원래의 위치로부터 위치의 변화가 생길 수 있습니다. 밀어내기(Push) 방식은 이와 관련된 동작 중 하나입니다.

밀어내기(Push)는 구성 요소의 너비값이 고정값으로 설정된 상태에서 레이아웃 변화에 따라 원래 위치하던 구성 요소의 좌측 또는 우측으로 이동하여 가로축으로 위치값을 변화시키는 방식입니다.

이 동작이 발생하면 스크린 가장 자리에서 새로운 구성 요소의 등장과 함께 기존의 구성 요소 화면 일부가 화면 밖으로 밀려나면서 사라질 수 있습니다.

Pushed case

위 그림은 Navigation drawer에 의해서 밀어내기(Push) 동작이 발생하여 콘텐츠 영역(카드(Card)와 버튼(Button)이 위치하던 프레임 영역) 일부가 화면 밖으로 밀려나는 것을 설명하고 있습니다.

2.3. 중첩하기 (Overlaid)

레이아웃의 변화와 함께 하나의 구성 요소는 그것을 가리는 또 다른 개별 요소에 의해서 중첩될 수 있습니다. 구성 요소가 중첩되면 그것의 너비값과 위치값은 그대로 유지합니다.

이 방법은 밀어내기(Push) 방법처럼 구성 요소의 너비값을 변경하지 않고, 다른 구성 요소(Component) 또는 개별 요소(Element)와 상호작용을 하면서 발생하는 동작에 대응하기 위한 방법입니다. 밀어내기는 구성 요소의 너비값(Width)이 유지되면서 위치값(Position)만 변하면서 화면 밖으로 밀려나는 반면, 중첩하기(Overlaid)는 너비값(Width)도 유지하고 위치값(Position)도 동일하게 유지한다는 점에서 밀어내기(Push)와 다른 것입니다.

Overlaid case

위 그림은 콘텐츠 UI 영역(카드(Card)와 버튼이 출력된 프레임 영역)이 내비게이션 UI 영역(Side navigation이 출력되는 영역)에 의해서 중첩되는 것을 나타냅니다.

3. 반응형 패턴 (Responsive patterns)

구성 요소(Component)는 스크린 사이즈나 디바이스 종류에 따라 다음과 같은 디자인 패턴을 사용해 그들의 영역을 다르게 적용할 수 있습니다. 이러한 적용방식은 다음과 같은 내용들이 포함됩니다.

• 각 스크린, 디바이스의 UI 구성 공간에 더 적합한 다른 구성 요소의 대체
• 더 작은 공간에 수용가능한 구성 요소의 출력 상태 대체
• 사용자 입력 방식의 변경

해당 내용은 스크린 사이즈에 따라 아예 적용하는 구성 요소(Component)의 디자인을 달리 가져가는 것과 관련된 것으로 각 스크린 사이즈 크기에 따라 어떤 패턴으로 디자인을 할 수 있는지를 레이아웃을 정의하는 격자(Grid) 수준이 아닌 각 구성 요소(Component) 수준에서 설명을 하고 있습니다.

이 패턴에 대한 이해를 하는 것은 스크린 사이즈에 따른 전체적인 레이아웃에 대한 이해 뿐만 아니라 개발하고자 하는 서비스 및 제품의 기능적 일관성을 최대한 유지하면서 해당 스크린 사이즈에서 최적화된 구성 요소 배치를 가능하게 하기 때문에 중요합니다.

스크린 사이즈가 더 크다면 더 많은 구성 요소를 출력하여 사용자가 수행하고자 하는 과업(Task)의 생산성을 높이는 것도 UX 측면에서 매우 중요하지만 이에 대한 검토를 소홀히 하는 경우가 많습니다.

물론 이 문제는 개발하고자 제품과 서비스가 호환하고자 하는 타깃 디바이스을 어떤 것으로 할지에 따라 달라질 수 있으며, 이는 단순히 개발 과정에서의 의사결정 요소로 볼 수도 있습니다.

하지만 현재는 휴대폰에 대해서만 지원하지만 향후 태블릿에 대해서도 지원할 계획이 있다면 이에 대한 사전 검토와 함께 두 가지 타입의 기기에서 모두 유연하게 대응할 수 있는 레이아웃과 디자인 패턴을 설계하는 것이 필요할 것입니다.

스티브 잡스가 아이폰과 아이패드에서 기본 앱으로 제공하는 계산기 앱을 이야기 하면서 아이패드의 계산기와 아이폰의 계산기가 달라야 한다고 의사결정 했던 것은 이와 관련이 있다고 보면 되겠습니다. (여담이지만 이러한 이유 때문에 결국 계산기 앱은 아이패드에서 더이상 기본 앱으로 제공되지 않는다고 합니다.)

스크린 공간이 늘어남에 따라 다음의 반응형 패턴이 적용될 수 있으며, 각 패턴들은 어떤 것들이 있는지 아래에서 하나씩 살펴보겠습니다.

3.1. 나타내기 (Reveal)

나타내기(Reveal)는 작은 화면에서 출력하지 않는 UI 중 일부가 특정 분기점(Breakpoint)에서 추가적으로 공간에 여유가 생기면 나타나는 동작입니다.

Some elements become visible as the screen size increases

위 그림의 1번 항목은 휴대폰에서의 UI 구성을 나타냅니다. 2번 항목처럼 태블릿 사이즈로 화면이 커지거나 화면 회전(Rotation)이 일어나 확장된 분기점에 의해 레이아웃 상에서 출력되는 행(Column)이 많아지면 내비게이션 메뉴가 나타나는 것과 관련된 동작입니다.

Simple UI reveal more robust or complex options

또 다른 예시로 위 그림의 1번 항목에서 텍스트 편집과 관련된 메뉴가 휴대폰 화면에서는 단순하지만 2번 항목의 태블릿 화면에서는 더 많고 복잡한 옵션을 제공하는 것을 볼 수 있습니다.

Contents can be revealed by default when more space is available

마지막으로 출력되는 콘텐츠에서도 차이가 있는데, 1번 항목은 휴대폰 화면에서 콘텐츠(여기서는 텍스트) 출력이 생략되지만, 2번 항목은 태블릿 화면에서 기본적으로 더 많이 콘텐츠가 출력되는 것을 나타냅니다.

3.2. 변형하기 (Transform)

이 동작은 특정 분기점에서 출력되는 UI 항목에 대한 구성 요소가 아예 다른 요소로 대체되어 출력되는 것을 나타냅니다.

Side navigation can transform into tabs

위 그림에서 1번 항목은 리스트의 카테고리 출력이 Side navigation 형태로 출력되고 있지만 2번 항목은 리스트의 카테고리가 Tab 형태로 출력되는 것을 예로 든 것입니다.

다시 말해, Side navigation과 Tab은 카테고리 등을 출력하는 과정에서 상호 호환될 수 있는 UI 구성 요소임을 의미합니다.

A list can transform into image grid view

또 다른 예로 위 그림에서 1번 항목은 단순 리스트(List)로 출력되지만 더 큰 스크린 사이즈에서 이미지 리스트(Image list)로 출력될 수 있습니다. 이는 더 큰 스크린에서 효과적인 정보 전달이 가능한 이미지 리스트를 사용하는 것을 예시로 표현한 것입니다.

Menu item can transform into icons

마지막으로 위 그림에서 1번 항목은 리스트 편집 등을 위한 Menu 내에 구성되지만 해당 메뉴의 상세 항목(예: Favorite, Voice, Video)은 더 큰 화면에서 Toolbar 내 아이콘(Icon)으로 각각 출력될 수 있는 것을 보여줍니다.

흔히 이때 Toolbar 내 아이콘으로 어떤 것들을 정의할지에 대한 고려 없이 아무 요소를 아이콘으로 구성하는 경우가 많습니다. 이는 잘못된 디자인 설계에 해당될 수 있습니다. 아이콘에 맵핑되는 기능들이 리스트 편집 등을 위한 Menu 상세 항목들로 볼 수 있는지 등을 검토하여 아이콘으로 구성해야 합니다.

3.3. 분할하기 (Divide)

여러 레이어에서 출력되는 UI 요소는 더 큰 스크린에서 한번에 모두 출력될 수 있습니다. 분할하기(Divide)는 여러화면에서 중첩, 전환하며 출력되는 UI 개별 요소(Element)를 하나의 새로운 공간에서 공간을 분할 구성하여 출력하는 패턴입니다.

Side navigation, list contents, detailed contents divide to fill a single view

위 그림에서 1번 항목은 모바일에서의 리스트(List) UI를 나타낸 것이며, 2번 항목은 태블릿에서의 리스트(List)와 Side Navigation이 함께 화면에 나뉘어 출력된 것을 나타냅니다.

이 사례는 위의 나타내기(Reveal) 사례와 유사할 수 있으나 나타내기(Reveal)와의 달리 Side Navigation이 출력되면서 리스트(List)의 일부가 화면 밖으로 밀려나지 않습니다. 또한 출력된 Side Navigation은 사용자 입력 또는 선택에 의해서 나타났다 사라졌다를 반복하지 않는다는 점에서 차이가 있습니다.

Tabbed sibling content is divided within the same view

위 그림에서 1번 항목은 Tab 구조로 해당 Tab에 속한 List의 항목(Item)을 선택하면 해당 항목(Item)을 출력하는 View page(View route)로의 전환되는 동작설계 방식입니다.

2번 항목은 List 항목의 Item을 선택하면 오른쪽의 View 영역에 선택된 Item의 상세 내용(View page)이 바로 반영되어 출력되는 구조를 설명합니다. List 페이지와 View 페이지가 한 페이지 내에서 화면을 분할하여 화면전환 없이 List 페이지와 View 페이지를 한번에 보여주는 것을 출력되는 것을 보여줍니다. (사실 이 예시는 실제 서비스로 흔히 적용되는 사례는 아닙니다.)

3.3. 이어붙이기 (Reflow)

UI 요소는 새롭게 이용가능한 공간에서 레이아웃을 이어붙이기하면서 변할 수 있습니다.

Elements from a single-column format can reflow to fill the content area

위 그림에서 1번 항목은 1개의 행(Column)으로 구성된 리스트(List) UI 입니다. 2번 항목은 더 큰 화면에서 콘텐츠 영역을 채우면서 리스트의 항목을 이어붙이기한 예입니다. 이런 사례는 리스트(List) UI를 더 화려하게 시각화 하기 위해서 종종 사용됩니다. 리스트 항목(Item)들이 동적으로 바둑판 형태로 이어서 구성될 수 있는 사례입니다.

잡지, 쇼핑몰 등을 디자인하는 과정에서 특정 아이템을 강조하고자 할 때, 이런 디자인 패턴을 채택하는 경우가 흔히 있습니다.

Horizontal tabs can reflow into a vertical list

위 그림의 1번 항목은 휴대폰에서 각 탭에 속한 항목(Item)들이 그리드 뷰(Grid view) 형태로 출력된 사례이며, 이를 더 큰 화면에서 세로형 리스트(Vertical list)로 출력되는 것이 2번 항목에서 나타내고 있습니다.

이 형태의 패턴은 플레이스토어(Player) 등의 형식에서 많이 차용하는 방식의 패턴입니다. 각 카테고리에 속하는 항목들은 가로 스크롤이 적용되며, 카테고리가 세로로 이어짐에 따라 세로 스크롤을 통해 카테고리 탐색이 가능한 구조의 디자인 패턴입니다.

Elements can reflow within a component

위 그림에서 1번 항목은 2개의 개별 요소(Element)로 구성된 UI입니다. 상단의 시간을 표시해주는 영역과 아래의 시간을 설정하는 영역은 서로 각각 다른 요소(Element)로 볼 수 있습니다. 2번 항목은 1번 항목의 각 요소를 가로로 이어붙이기한 디자인 패턴을 보여주고 있습니다.

특정 기능을 구현하는 각각의 요소를 잘 정의하여 화면 구성에 따라 세로로 이어붙이고, 가로로 이어붙일 수 있도록 정의하는 것은 휴대폰과 태블릿을 모두 호환하는 제품 및 서비스 개발에서 매우 중요한 디자인 패턴입니다. 이를 위해서는 각 기능을 잘 그룹화하여 그룹화된 기능을 하나의 위젯처럼 구성할 수 있도록 해야 하며, 이 디자인 패턴의 핵심은 아무 기능을 아무 위치에 배치하여 그룹화된 기능 구성을 저해하지 않도록 하는 것에 있습니다.

3.4. 확장하기 (Expand)

특정한 UI는 더 넓은 공간에서 확장하여 표현될 수 있습니다.

Card can expand to fill a new and larger space

위 그림에서 카드(Card)는 휴대폰에서 1번과 같이 출력되지만 태블릿과 같이 큰 화면에서 2번과 같이 카드(Card)가 차지하는 영역 자체를 확장하여 더 크게 출력될 수 있습니다.

Dialog can expand proportionally with content or in specific increments

위의 예시는 대화상자(Dialog)가 더 넓은 화면에서 넓게 확장하여 출력되는 것을 보여줍니다.

3.5. 위치변화 (Position)

해당 패턴은 UI 구성 요소(Component)의 위치가 더 적절한 위치(Position)으로 바꾸어 출력되는 사례를 보여줍니다.

A bottom sheet on a small screen can reposition itself as a menu on the larger one

위 그림에서 1번 항목은 사용자 입력을 위한 Bottom sheet, 2번 항목은 Menu를 나타냅니다. 1번 항목은 휴대폰에서 사용되는 디자인 패턴이고, 2번 항목은 태블릿과 같이 화면이 큰 영역에서 사용되는 디자인 패턴입니다.

2번의 Menus는 기존에 휴대폰에서도 많이 사용되던 디자인 패턴이었으나 최근 휴대폰 화면의 세로 길이가 길어짐에 따라 해당 UI 구성 요소(Component)는 한손 조작을 위한 조작성이 떨어지게 되어 1번 항목인 Bottom sheet으로 대체되어 사용되고 있는 추세입니다.

사용자 입력(User input)을 위해 자주 사용되는 디자인 패턴이기 때문에 이 디자인 패턴은 반드시 익혀두어야 합니다.

A floating action button can reposition on the large screen

위 그림은 FAB(Floating action button)의 위치변화 예입니다. 마찬가지로 한손 조작에 따라 버튼의 위치가 달라지는 것을 볼 수 있습니다.

기본적으로 휴대폰은 한손으로 최대한 조작할 수 있도록 디자인하는 것을 권장하며, 태블릿의 경우 두손으로 조작을 하는 것을 전제로 하기 때문에 UI 구성 요소(Component)의 위치가 이와 같이 달라지는 것입니다.

4. 마무리

구성 요소 동작 방식(Component behavior)은 분기점(Breakpoint)에 따라 레이아웃이 변경되는 과정에서 각 구성 요소들이 가변적으로 크기를 변화하거나, 위치를 바꾸거나, 다른 요소로 변경되거나, 나타났다 사라지는 애니메이션 등에 대한 동작 사양을 정의하고 있습니다.

큰 틀에서 레이아웃에 대한 이해와 레이아웃 내에서의 세부 구성 요소의 이해를 하는 것은 제품 및 서비스의 전체적인 틀을 이해하고 정의하는 데에 매우 중요한 요소입니다.

이어붙이기(Reflow)에서도 간단히 언급을 했었지만 이를 이해하고 각 구성 요소를 설계하는 것은 제품 및 서비스가 다양한 디바이스에서 호환될 수 있느냐 없느냐에 결정적인 역할을 할 수 있습니다.

대부분 세부 구성 요소에 대한 배치와 구조에 대해서만 이야기를 하지만 큰 틀에서의 제품 및 서비스의 디자인 개념을 정의하는 것은 두번, 세번 강조해도 부족하지 않습니다.

다음 내용은 머티리얼 기초(Material foundation) 중 레이아웃(Layout)의 마지막 내용인 밀집도 적용(Applying density)입니다. 세부 구성 요소 차원에서 밀집도(Density)를 어떻게 적용하고 어떻게 적용하면 안 되는 지와 관련된 내용을 다룹니다. 기존에 GUI 디자인 가이드라인 작업을 하면서 구성 요소 간의 세부 수치를 작성하는 것들이 여기에 해당된다고 보면 됩니다. 그럼 다음 시간에 뵙겠습니다.