[UX] 구글 머티리얼 디자인 – 3.2.머티리얼 기초(Material foundation) – 환경(Environment): 높이값(Elevation)
머티리얼 기초(Material foundation)에서 높이값(Elevation)은 평평한 2차원 개체인 표면(Surface)와 함께 구글 머티리얼 디자인(Google material design) 을 이루는 핵심 요소입니다. 머티리얼 디자인에서의 3차원 입체 표현은 표면(Surface)에 높이값을 부여함으로써 완성됩니다.
오늘 다룰 높이값(Elevation)에 대한 이해만 제대로 하더라도 왠만큼 완성도 있는 제품 및 서비스의 디자인 형태를 구성할 수 있습니다. 또한 해당 내용은 기본 디자인 구성요소(UI Component)와 매우 밀접하게 관련이 있는 내용이기 때문에 주의깊게 살펴봐야 합니다.
출처: 원문보기
1. 높이값 (Elevation)
높이값(Elevation)은 z축에 대한 두 표면(surface)간의 상대적 거리를 의미합니다. 즉, 평평한 2차원 평면에서 어떤 사물이 더 높이 공중에 부양되어 있나를 정의하는 것이 높이값에 대한 정의라고 보면 됩니다.기본 UI 구성요소(UI component)들의 높이값(Elevation)을 살펴보면 다음과 같습니다. 이 요소들은 거의 대부분의 모든 서비스에서 사용되는 요소들이기 때문에 반드시 확인해야 합니다.
가장 먼저 Navigation drawer는 16dp의 높이값을 갖습니다. 위 그림의 1번 항목이 Navigation drawer입니다.
다음으로 App bar는 4dp의 높이값을 갖습니다. 위 그림의 2번 항목이 App bar입니다.
Card는 1dp에서 8dp의 높이값을 갖습니다. 다른 구성요소들과 달리 높이값의 범위가 조금 광범위하게 적용됩니다. 위 그림의 3번 항목이 여기에 해당됩니다. (세부 내용은 향후 살펴보겠습니다.)
FAB(Floating action button)는 6dp의 높이값을 갖습니다. 위 그림의 4번 항목입니다.
Button은 2dp에서 8dp의 높이값을 갖습니다. 대부분의 버튼 요소들이 카드(Card)나 다른 요소들 위에 높이기 때문에 카드(Card)와 같이 높이값이 다양하게 적용되는 것이 특징입니다. 위 그림의 5번 항목입니다.
마지막으로 Dialog는 24dp의 높이값을 갖습니다. 모든 표면(Surface) 요소들을 덮고, 사용자에게 피드백을 요청하는 UI 구성요소이기 때문에 가장 높은 높이값을 갖는 것이 특징입니다.
1.1. 머티리얼 디자인에서의 높이값 (Elevation in Material Design)
1.1.1. 높이값 측정 (Measuring elevation)
머티리얼 디자인에서 높이값은 머티리얼 표면(Surface) 간의 거리로 측정됩니다. 하나의 머티리얼 표면으로부터 다른 표면까지의 거리는 z축을 따라서 측정되며, dp에 기반한 값을 적용하며, 이는 그림자로써 표현됩니다. 높이값을 dp로 지정하면, 자동으로 그림자 표현으로 표면(Surface)간의 입체효과가 적용된다는 것입니다.
높이값을 측정하는 방식은 아래의 예시와 같이 설명할 수 있습니다. 2번 항목의 굵은 선으로 표시된 검은 라인이 z축의 원점이 되는 것이고, 기본 표면(Surface)은 1dp의 높이값을 갖습니다. 여기에 8dp 높이의 표면(Surface)을 새로 적적용하면 두 표면은 왼쪽 1번 항목과 같이 높이값이 서로 다른 것으로 표현됩니다. (그림자의 크기와 깊이값이 달라진 것을 볼 수 있습니다.) 실제로 두 표면의 표현면의 거리차는 7dp인 것을 확인할 수 있습니다. 표면의 기본 높이값이 1dp로 표현되기 때문에 생기는 현상입니다.)
표면에 높이값을 적용한 다른 사례는 아래와 같습니다. 서로 다른 두 표면이 4dp와 8dp로 각각 적용되었고, 적용된 결과는 아래 그림의 왼쪽 항목1에서 확인할 수 있습니다. 각각의 표면에 적용된 그림자 표현을 보여줍니다.
여기서 주의해야 될 부분이 있는데, 위 그림에서 표면A와 표면B는 같은 높이값인 8dp가 적용되어 있지만 실제로 표현된 그림자는 상이한 것을 볼 수 있습니다.
이는 표면B의 경우 표면C 위에서 다시 출력된 상태로 실제 그림자 표현은 4dp의 높이값을 갖는 표면C와 동일하게 표현된다는 것입니다.
다시 말해, 같은 높이값이 적용된 두 표면이 있다고 하더라도 종속적인 관계에 있는 표면이 존재하느냐에 따라서 그림자 표현은 달리 적용될 수 있다는 것입니다. 또한 적용되는 그림자의 크기나 효과는 종속된 표면에 상대적인 값을 갖는다는 것을 이해하는 것은 머티리얼 디자인에서 매우 중요합니다.
1.1.2. 높이값 체계 (The elevation system)
모든 머티리얼 표면(Surface), 컴포넌트(Component)들은 높이값을 갖습니다. 다른 높이값을 갖는 표면(Surface)들은 다음을 따릅니다.
- 다른 표면(Surface)의 앞이나 뒤에 있는 표면은 이동이 가능합니다. (높이값을 기준으로 App bar 뒤에 위치한 콘텐츠의 스크롤이 가능합니다. 부연설명을 하자면 App bar 뒤에 있는 리스트는 스크롤이 가능합니다.)
- 높이값은 공간적인 관계를 반영합니다. 예를 들어, 카드(Card) 요소 위에 출력되어 있는 FAB(Floating action button)의 그림자는 카드 요소와 어떻게 공간적으로 분리되어 있는지를 나타냅니다.)
- 가장 높이 출력되어 있는 요소는 주의를 집중시킵니다. 예를 들어, 대화 상자(Dialog)는 일시적으로 다른 표면(Surface)들보다 가장 앞(상위)에서 나타납니다.
높이값은 그림자, 표면의 채우기 색상 또는 투명도 등에 따라서 묘사 될 수 있습니다. (서로 다른 두 대상이 중첩된 위치에 있는 것으로 가정할 때, 그림자, 색상, 투명도를 통해 어떤 표면(Surface)이 더 상위에 위치하고 있는지를 알 수 있다는 의미입니다.) 아래 그림을 예로 살펴보겠습니다.
기본적으로 머티리얼 디자인에서 높이값은 위 그림의 맨 왼쪽의 예에서처럼 그림자로 표현합니다.
일부 서비스에서는 위 그림의 중간 예에서처럼 서로 다른 색상 채우기를 통해서 앱 바(App bar) 영역이 카드(Card) 영역보다 더 위에 있음을 구분하기도 합니다. 카드(Card)에 채워진 이미지가 앱 바(App bar) 영역에 잘려 있다는 것이 앱 바(App bar)가 카드(Card) 보다 상위에 위치한다는 것을 알 수 있습니다.
위 그림의 맨 오른쪽의 예는 앱 바(App bar) 영역에 투명도를 주어 앱 바(App bar)가 카드(Card) 영역보다 더 상위에 위치한다는 것을 알 수 있습니다.
하지만 머티리얼 디자인에서 높이값(Elevation)을 표현하는 가장 표준적인 방식은 그림자를 이용하는 방식으로 색상 채우기나 투명도를 통한 높이값 구분을 권장하고 있지 않습니다.
1.1.3. 지정된 높이값 (Resting elevation)
지정된 높이값에 대한 설명은 각 UI 컴포넌트에 부여되는 높이값이 기본값으로 설정된다는 것입니다. 또한 아래서 설명하겠지만 UI 컴포넌트들은 사용자와 시스템 이벤트 반응에 따라 특정한 높이값으로 변경될 수도 있습니다. 모든 머티리얼 컴포넌트는 같은 타입의 컴포넌트와 동일하게 지정된 높이값을 갖습니다. 예를 들어, 모든 카드(Card) 컴포넌트들은 서로 같은 높이값을 갖고, 대화상자(Dialog)는 서로 다른 대화상자와 동일한 높이값을 갖습니다.
1.1.3.1. 지정된 높이값과 환경 (Resting elevation and environment)
정해진 높이값은 환경, 플랫폼, 또는 앱에 따라 다양할 수 있습니다. 모바일에서 정해진 높이값은 특정 컴포넌트가 상호작용이 가능하다는 것을 나타내기 위해 그림자와 같은 시각적 힌트를 제공하여 설계됩니다.
반대로 데스크탑에서의 지정된 높이값은 특정 컴포넌트가 상호작용이 가능하다는 것을 마우스 오버 효과(hover) 등으로 표현하기 때문에 높이값을 덜 강조하여 표현합니다. 예를 들어, 데스크탑에서 카드(Card) 컴포넌트는 0dp의 높이값을 갖고, 높이값 대신에 외곽선을 사용하여 표현합니다.
1.1.4. 높이값 변화 (Changing elevation)
컴포넌트는 사용자의 상호작용 또는 시스템 이벤트에 의해 높이값이 변할 수 있습니다. 동적으로 변하는 높이값(Dynamic elevation offsets)은 지정된 높이값에서 다른 높이값으로의 일시적 변화를 의미합니다.
이러한 동적인 높이값 변화(Dynamic elevation offsets)는 동일한 컴포넌트에서 동일하게 적용됩니다. 예를 들어, 모든 카드(Cards) 컴포넌트는 동일한 동적인 높이값 변화(Dynamic elevation offsets)를 갖는다는 의미입니다.
동적인 높이값 변화는 아래의 예를 통해 설명할 수 있습니다. 아래 그림에서 기본 상태(Idle state)에서 버튼 컴포넌트의 지정된 높이값(Resting elevation)은 2dp로 설정되어 있습니다.
하지만 모바일 환경에서 사용자가 화면 터치를 통해서 버튼을 선택 시, 버튼의 높이값은 일시적으로 8dp로 변경됩니다. 이 부분에 대한 이해는 매우 중요합니다. 최신 안드로이드 OS에서의 대부분의 사용자의 화면 터치에 대한 상호작용(Interaction)은 이 높이값 변화를 통해서 표현되기 때문입니다.
머티리얼 디자인에서 표면(Surface) 요소에 대한 화면 터치와 이에 대한 상호작용은 아래와 같이 동적인 높이값 변화(Dynamic elevation offsets)로 설계됩니다.
1.1.5. 높이값 간섭 (Elevation interference)
아래 그림의 맨 왼쪽 카드(Card) 컴포넌트는 1dp, FAB(Floating action button)은 6dp의 지정된 높이값(Resting elevation)을 갖습니다.
이때 아래 그림의 가운에 처럼 카드 컴포넌트에 사용자 입력(터치 이벤트)이 발생하면 카드 컴포넌트는 동적인 높이값 변화(Dynamic elevation offset)가 적용되어 일시적으로 8dp의 높이값을 갖게 됩니다. 이 경우, 이미 6dp의 높이값을 갖고 있던 FAB의 높이값과 충돌하게 됩니다.
이전 포스팅에서 머티리얼 기본 규칙을 설명한 바와 같이 이러한 경우 서로 다른 머티리얼 요소는 관통할 수 없기 때문에 높이값 표현에 모순이 생길 수 있습니다.
이를 위해 높이값 변화에 따른 간섭을 해소하기 위해 머티리얼 디자인은 FAB 출력을 일시적으로 제외시킵니다. 사용자의 입력이 없어지면서 카드 컴포넌트가 다시 원래 지정된 높이값(Resting elevation)으로 돌아가고, FAB는 다시 출력되게 되는 동작 구조입니다.
이는 개별 제품 및 서비스에서 구성되는 메인 UI 컴포넌트 간에 이러한 간섭 요소가 발생하진 않는지를 잘 검토하여 동작 설계를 하여야 함을 의미합니다.
이 부분에 대한 이해가 부족하여 임의로 동작 설계를 하는 경우가 실무에서 많이 발생하며, 이러한 것들은 개발 후, 여러가지 디버깅 요인을 유발할 수 있는 만큼 최소한 메인 UI 컴포넌트(예: App bar, Card, Menu drawer 등) 간의 동작 및 설계에 유의해야 합니다.
예를 들어, 머티리얼 디자인은 이러한 높이값에 대한 간섭을 피하기 위해 아래와 같은 대안적 설계를 추천하고 있습니다. 카드(Card)가 선택되어 일시적으로 동적인 높이값 변화(Dynamic elevation offsets)가 있더라도 FAB와 간섭을 피하기 위해 각 표면(Surface) 요소들이 서로 중첩되지 않도록 설계하고 있는 것이 하나의 방법이 될 수 있습니다. (단, 화면이 작은 모바일 환경에서 이러한 설계는 유효하지 않을 수도 있겠습니다.)
1.2. 높이값 표현하기 (Depicting elevation)
높이값을 제대로 표현하기 위해 표면(Surface) 요소들은 다음을 반드시 보여줘야 합니다. 각 내용은 아래에서 자세히 설명하도록 하겠습니다.
- 표면의 주위로부터 표현을 강조하기 위한 표면의 테두리
- 움직이는 움직이지 않는 다른 표면들과의 중첩
- 다른 표면들로부터의 거리
1.2.1. 표면의 테두리 (Surface edges)
표면의 테두리(Surface edge)는 어디서 하나의 표면이 끝나고 어디서 또 다른 표면이 시작되는지를 구분하는 요소입니다. 예를 들어, 앱 바(App bar)의 테두리는 그리드 리스트(Grid list)가 앱 바로부터 구분된 그리드 리스트가 독립적으로 스크롤이 가능하다는 것을 보여줍니다.
기본적으로 머티리얼 표면(Surface)는 테두리를 그림자로 표현합니다. 표면의 테두리를 표현하기 위한 다른 방법은 앞서 기술한 바와 같이 다른 색상이나 다른 투명도를 적용하여 구분할 수 있습니다.
테두리 구분을 위한 색상은 접근성(Accessibility)을 고려하여 주변의 다른 표면 요소와의 충분한 명암비를 고려해야 합니다. 이는 향후 색상과 관련한 내용에서 별도로 다루겠습니다.
1.2.2. 표면의 중첩 (Surface overlap)
하나의 표면이 다른 표면에 중첩이 될 때, 서로 다른 두 표면은 서로 다른 높이값을 점유하게 됩니다. 더 높은 높이값을 가진 표면은 더 낮은 높이값을 가진 표면보다 화면 상 더 앞에 출력됩니다. (이는 표면들이 Z축을 따라 서로 다른 높이값을 갖고 위치한다는 것을 의미합니다.)
이러한 표면의 중첩은 서로 간에 설정된 기본 높이값에 따라 중첩되거나 UI 상에서의 위치값 변화 등에 따른 결과로 서로 중첩됩니다. (이 내용은 동적인 높이값 변화(Dynamic elevation offsets 등의 내용을 설명하는 것입니다.)
표면이 서로 다른 투명도나 불확실한 명암을 갖을 때, 어떤 표면이 화면 상 더 앞에 출력되는지를 확인하는 것은 어렵습니다. 확실하게 정의된 표면의 테두리를 통해 불확실한 표면 간 중첩을 피해야 합니다.
위의 그림에서 1번은 그림자가 표면의 테두리, 표면의 중첩, 높이값의 정도를 나타내고 있는 것을 표현한 것입니다. 2번은 서로 다른 표면의 색상이 표면의 테두리, 중첩을 나타내지만 높이값의 차이를 나타내고 있지는 못하는 것을 표현한 것입니다. 3번은 투명도가 표면의 테두리와 중첩은 나타내지만 높이값의 차이를 나타내고 있지는 못한 것을 표현한 것입니다.
참고로 2번 그림에서 분홍색 사각형이 파란색보다 위에 출력되어 있으니 분홍색의 높이값이 파란색보다 높은 것으로 볼 수 있지 않을까 하는 것도 이야기가 될 수 있습니다. 하지만 두 표면이 중첩이 되어 중첩된 부분에서 상호간의 상대적 높이값에 차이가 있는 것처럼 보여질 수 있으나 중첩되지 않은 부분에서 두 표면이 실제로 Z축을 기준으로 어디에 위치하고 있느냐를 갖고 판단한다면 두 표면의 실제 높이값을 구분할 수 없다는 것을 알 수 있습니다.
결론적으로 그림자를 통해서 두 표면간의 높이값을 명확히 하고, 명암비를 이용해서 서로 다른 색상을 정의하는 것이 가장 확실하게 두 표면의 중첩을 표현하는 것임을 알 수 있습니다.
위의 그림에서 왼쪽은 앱 바(App bar) 영역이 카드 영역과 서로 다른 영역으로 중첩되어 있다는 것을 색상으로 표현한 사례입니다. (물론 이 경우에 높이값에 차이는 보여주지 못하고 있습니다.) 위의 그림에서 오른쪽은 앱 바(App bar) 영역과 카드 영역이 같은 색상으로 표현하고 있어 두 표면의 중첩이 구분되지 않는 상황입니다. 테두리도 모호하고 높이값의 차이도 알 수 없는 상황임을 알 수 있습니다.
바람직하진 않지만 두 표면 간 중첩을 명확하게 확인하기 위한 최소 요소는 서로 다른 두 표면 요소는 확실하게 구분될 수 있는 명암비를 가진 서로 다른 색상으로 정의하는 것임을 위의 사례를 통해서 알 수 있습니다.
1.2.3. 거리 (Distance)
표면들 간에 높이값 차이의 정도는 배경이나 그림자를 통해서 표현됩니다.
1.2.4. 모션(Motion)과 높이값
모션은 다음과 같은 방법들을 통해 높이값을 강조할 수 있습니다. 여기서 모션이란 흔히 제품 및 서비스에 적용된 애니메이션 등의 효과로 이해하면 됩니다.
- 그림자의 변화 (Changes in shadows)
- 중첩효과 (Displaying overlap)
- 밀어내기 효과 (Pushing)
- 확대, 축소 효과 (Scaling)
- 시차 표현 (Parallax)
1.2.4.1. 그림자의 변화 (Changes in shadows)
그림자는 카드(Card) 요소가 떠오르는 것(높이값이 커지는 것 또는 Z축으로 양의 값을 갖는 것)을 강조하기 위해 크게 커질 수 있습니다. 해당 동작은 어떤 요소가 선택됐다는 것을 표현하기 위한 모션 효과로 주로 사용됩니다.
1.2.4.2. 중첩효과 (Displaying overlap)
하나의 표면(Surface) 요소는 에니메이션 효과와 함께 또 다른 표면에 부분적으로 또는 완전하게 중첩될 수 있습니다. 다시 말해 특정 표면 요소가 다른 것들 위에 덮일 수 있다는 것을 의미합니다.
위의 그림에서 리스트의 특정 아이템을 선택하면 해당 아이템의 상세 페이지가 에니메이션과 함께 리스트 위로 덮이면서 중첩이 될 수 있는 것을 의미합니다.
1.2.4.3. 밀어내기 (Pushing)
같은 높이값을 갖는 표면은 에니메이션이 실행되는 과정에서 표면을 이동할 수 있습니다.
위의 예에서 특정 아이템(Pencil)이 선택이 되면서 리스트 내에 있던 Pencil 아이템은 상세 페이지가 중첩되어 출력되며 사라지는데, 이때 같은 높이값을 갖고 있던 리스트 내 다른 아이템들도 함께 사라진다는 것을 설명하는 개념입니다.
1.2.4.4. 확대, 축소 (Scaling)
표면 사이즈를 확대, 축소 하는 것으로 높이값 변화를 강조할 수 있습니다.
위의 그림에서 전면과 후면에 출력된 표면들의 크기 변화는 높이값 변화를 강조하는데 사용될 수 있습니다.
1.2.4.5. 시차 표현 (Parallax)
애니메이션 효과 적용 시, 서로 다른 속도로(시차를 두고) 이동하며 다른 높이값을 가진 다수의 표면 요소는 전면에 출력된 표면 요소를 강조하기 위한 표현요소로 사용될 수 있습니다.
전면에 출력되어 있는 표면 요소가 후면에 출력된 표면 요소보다 더 빠르게 움직이는 것을 볼 수 있습니다.
위의 그림에서 위로 스크롤이 진행될 때, 사이즈 등을 표현한 상세 페이지(전면에 출력된 표면 요소)는 모델 사진 이미지(후면에 출력된 표면 요소)가 완전히 사라지기 전에 이동하며, 아래로 스크롤이 진행될 때, 사이즈 등을 표현한 상세 페이지가 사라지고 이미지가 나중에 시차를 두고 출력되는 것을 볼 수 있습니다.
1.2.4.6. 모션 기술에 대한 조합 (Combining motion techniques)
가로 스크롤, 세로 스크롤 등의 과정에서 발생하는 에니메이션 효과에서 중첩(Overlap), 일어내기(Pushing), 확대, 축소(Scaling), 시차(Parallax) 등을 사용하여 높이값에 대한 강조를 할 수 있습니다.
1.3. 높이값 계층구조 (Elevation hierarchy)
콘텐츠는 다른 콘텐츠들이 동일한 높이값 혹은 다른 높이값을 갖는지에 따라 다른 콘텐츠들과 동작 등에 연관성이 생길 수 있습니다.
1.3.1. 다른 높이값들을 갖는 콘텐츠 (Content at different elevations)
다른 표면들보다 전면에 있는 표면들은 대체로 다음과 같습니다.
- 더 중요한 콘텐츠를 포함하는 경우
- 대화상자(Dialog)와 같이 사용자의 관심을 유도해야 하는 경우
- 앱 바(App bar)의 특정 동작처럼 뒤에 있는 표면들을 조종해야 하는 경우
위의 그림은 데스크톱 환경에서의 인터페이스를 묘사한 것입니다. B영역은 실제 콘텐츠가 위치한 영역으로 2dp의 높이값을 갖고 있으며, A영역은 B에 대한 부연 설명(예: 노트)을 위한 영역으로 더 높이값이 낮은 위치(0dp)에 있는 것을 확인할 수 있습니다.
위의 그림은 모바일 환경에서 대화상자(Dialog)와 유사한 역할을 하는 bottom sheet가 출력된 상황을 설명하고 있습니다. bottom sheet은 사용자의 주의를 환기하는 역할을 하기 때문에 다른 표면 요소보다 높은 높이값(16dp)을 갖는다는 의미입니다.
위의 그림은 모바일 환경에서 Navigation drawer를 통해 출력되는 항목을 변경하는 동작을 설명한 것입니다. Navigation drawer에서 선택된 Section1과 Section4가 본문에 번갈아 가며 변경되는 과정을 모사한 것이고, 이처럼 뒤에 출력되는 요소를 제어하기 위한 앱 바(App bar) 등의 요소들은 다른 표면 요소들보다 더 상위(16dp)에서 출력되는 것을 알 수 있습니다.
1.3.2. 동일 평면상에 위치한 콘텐츠 (Content on coplanar surface)
같은 높위에 표면(Surface) 요소를 위치시키는 것은 그것들을 동일 평면상에 있게 하는 것을 의미합니다. 그것들은 동일한 중요도를 갖는 콘텐츠임을 의미합니다. 예를 들어, 하나의 컬렉션 내에 있는 모든 카드(Card) 요소들은 동일한 중요도를 갖습니다.
위의 그림에서 카드A와 카드B는 동일한 컬렉션에 속한 요소로서 동일한 높이값(4dp)를 갖고 있다는 것을 설명한 그림입니다.
경우에 따라 높이값을 갖지 않는 표면(Surface) 요소들은 동일한 평면에 있음을 의미하기도 합니다. 높이값을 표현하지 않더라도 콘텐츠의 수평면, 수직면 상에 있는 레이아웃 포지션 등을 통해 콘텐츠들의 계층 구조의 차이를 구분할 수 있습니다. (아래 그림 참조)
예를 들어, 아래 그림처럼 동일한 평면상에 위치한 표면 요소를 갖는 대시보드가 있다고 합시다. 세부 콘텐츠들은 언어가 출력되는 순서 방향에 따라서 부모 콘텐츠 다음에 위치합니다.
부연 설명을 하면 영어나 한글의 경우 왼쪽으로 오른쪽으로 언어가 쓰이고 읽히기 때문에 중요한 부모 콘텐츠는 왼쪽에 세부 콘텐츠들은 오른쪽에 출력이 된다는 것을 의미합니다. 반대로 중동 국가 언어는 오른쪽에서 왼쪽으로 쓰이고 읽히기 때문에 중요한 콘텐츠부터 오른쪽에서 왼쪽으로 위치한다는 것을 뜻합니다.
1.4. 기본으로 설정되는 높이값들 (Default elevations)
모든 머티리얼 요소들은 지정된 높이값(Resting elevation)과 동적인 높이값 변화(Dynamic elevation offsets)를 위해 기본으로 설정되는 값을 갖습니다. 특정 요소들은 모든 요소들 전반에 걸쳐 일관된 높이값 순서를 정하기 위해 다른 요소들에 비해 더 높은 높이값을 갖습니다.
예를 들어, 대화상자(Dialog)는 다른 요소들보다 항상 전면에 출력됩니다.
다음은 요소들의 지정된 높이값(Resting elevation)과 동적인 높이값 변화(Dynamic elevation offsets)에 대한 기본 설정 값을 표로 나타낸 것입니다.
제품 및 서비스 설계 시, 반드시 해당 요소를 숙지하고 서비스 레이아웃에 참고하시기 바랍니다. 일부 요소들은 동적인 높이값 변화를 포함하지만 모든 요소들이 동적인 높이값 변화를 포함하는 것은 아닙니다. 주로 버튼이나 리스트 등의 UI 요소들이 동적인 높이값 변화를 별도로 갖습니다.
반대로 앱 바(App bar) 등의 UI 요소는 사용자 입력에 대한 상호작용이 필요없기 때문에 동적인 높이값 변화와 관련된 별도의 값을 갖지 않습니다.
| Component | Default elevation values (dp) |
|---|---|
| Dialog | 24 |
| Modal bottom sheet Modal side sheet | 16 |
| Navigation drawer | 16 |
| Floating action button (FAB – Pressed) | 12 |
| Standard bottom sheet Standard side sheet | 8 |
| Bottom navigation bar | 8 |
| Bottom app bar | 8 |
| Menus and sub menus | 8 |
| Card (When picked up) | 8 |
| Contained button (pressed state) | 8 |
| Floating action button (FAB – resting elevation) Snackbar | 6 |
| Top app bar (scrolled state) | 4 |
| Top app bar (resting elevation) | 0 or 4 |
| Refresh indicator Search bar (scrolled state) | 3 |
| Contained button (resting elevation) | 2 |
| Search bar (resting elevation) | 1 |
| Card (resting elevation) | 1 |
| Switch | 1 |
| Text button | 0 |
| Standard side sheet | 0 |
위의 테이블에서 명시한 각각의 UI 컴포넌트는 이후 포스팅에서 별도로 다룰 것입니다. 또한 해당 용어와 실제 모습을 잘 숙지하여 일관된 문서 기술에 참고 할 것을 적극 권장합니다.
기본적인 용어에 대한 통일없이 임의로 UI 컴포넌트를 지칭하여 사용하는 것은 동일한 용어의 다른 컴포넌트가 있을 경우 커뮤니케이션에 낭비를 만들어 낼 수 있기 때문에 이 부분은 와이어프레임이나 시나리오 문서화 작업 시 매우 중요한 부분입니다.
UI를 설계하는 작업자의 기본은 해당 개념과 실제 컴포넌트를 정확하게 이해하고 있는 것에서 있다고 필자는 백번 천번 강조해도 모자라지 않는다고 생각합니다.
위의 테이블의 각 요소들을 높이값에 따라 시각화를 시킨 다이어그램은 다음과 같습니다.
2. 마무리
높이값(Elevation)에 대한 이해는 제품 및 서비스 전반의 레이아웃 구성과 모션 등을 설계하는데, 매우 중요한 요소입니다. 높이값이 머티리얼 기초(Material foundation)가 되는 환경(Environment)에서 표면(Surface), 높이값(Elevation), 빛과 그림자(Light and shadow)를 구성하는 하나의 축인 이유도 바로 여기에 있습니다.
이후 세부 레이아웃과 UI 컴포넌트들을 하나씩 다루겠지만 이 내용에 대한 이해가 없다면 전체적인 서비스의 균형이 깨질 수 있기 때문에 반드시 내용을 숙지하는 것을 두번, 세번 강조합니다. 아무쪼록 즐거운 시간이었길 바라며, 다음 시간에 머티리얼 기초(Material foundation) 내용 중 환경(Environment)의 마지막 내용인 빛과 그림자(Light and shadow)에 대해서 다루도록 하겠습니다.
댓글
댓글 쓰기