Ch04_4_1 z축과 그림자.

학습목표
UI디자인에 필요한 스타일가이드 요소 중 z축과 그림자에 관하여 학습한다.
Z축과 그림자는 UI 요소의 깊이와 계층 구조를 시각적으로 표현하는 방법을 이해한다.

---

Z축과 그림자는 UI 요소의 깊이와 계층 구조를 시각적으로 표현하는 중요한 방법

 

iOS의 디자인 변화:

• iOS는 iOS 7부터 플랫 디자인을 사용했지만, 최근에는 머티리얼 디자인 요소를 도입하였다. 이는 사용자 인터페이스에 좀 더 현실적인 깊이감을 주기 위해 디자인 철학에 변화를 준 것이다.

Z축과 깊이감:

• Z축의 개념: 화면의 X축(수평)과 Y축(수직)에 더해, Z축(깊이)을 추가함으로써 UI 요소들이 서로 다른 레이어에 위치해 있는 것처럼 보이게 한다. Z축은 화면에서 요소가 떠 있는 높이를 나타내며, 이를 통해 사용자는 어떤 요소가 앞쪽에 있고 더 중요한지, 또는 상호작용이 가능한지를 파악할 수 있다.
• Z축은 화면에서의 깊이감을 나타내며, 주로 그림자를 통해 표현된다.
• 그림자를 사용하면 화면상의 요소들이 마치 서로 다른 높이에 위치한 것처럼 보여, 사용자가 어떤 요소가 더 앞에 있는지를 직관적으로 이해할 수 있게 된다.
• 예를 들어, 버튼이 그림자를 통해 살짝 떠 있는 것처럼 보이면, 사용자는 해당 요소가 클릭 가능한 인터랙션 요소라는 인식을 하게 된다.

 

• 그림자의 크기에 따라 컨테이너가 부유하는Z값이구현되며, 원근법에 따른 변화가 생긴다.
•  

Component elevation values
1. Nav drawer: 16dp
2. App bar: 4dp
3. Card: 1dp to 8dp
4. FAB: 6dp
5. Button: 2dp to 8dp
6. Dialog: 24dp

---

엘리베이션(Elevation)

그림자값으로 높낮이를 조절하는것이 머티리얼디자인의 기본원칙이다.

• 그림자값을 통해 Z의 높낮이가 생기는 것을 엘리베이션(Elevation)이라 고한다.
• 머티리얼 디자인에서 엘리베이션(Elevation)은 서로 다른 Material(재질) 표면 간의 거리로 측정된다. 이 거리는 한 표면의 앞쪽에서 다른 표면의 앞쪽까지의 거리를 Z축을 따라 밀도 독립 픽셀(dp, density-independent pixels) 단위로 측정한다.
• 기본적으로는 그림자를 사용하여 이 깊이와 거리를 시각적으로 나타낸다.이러한 방식은 사용자에게 인터페이스의 요소들이 서로 다른 높이에 있는 것처럼 보이게 하여 화면상의 계층 구조를 직관적으로 이해할 수 있도록 도와준다.
• 그림자의 크기와 강도에 따라 요소가 더 높은 위치에 있는지, 혹은 더 낮은 위치에 있는지를 표현하며, 이는 사용자의 시각적 이해도를 높이고 중요한 요소를 강조하는 데 도움을 준다.

  

• 정면에서 볼 때, 하나의 표면이 1dp의 엘리베이션에 있고, 다른 표면이 8dp의 엘리베이션에 있다면, 이 두 표면은 각각 다른 높이에서 위치해 있는 것으로 보인다. 즉, 앞쪽에서 바라보면 두 요소가 서로 다른 그림자 깊이를 갖게 되어, 서로 다른 레이어에 위치한 것처럼 보이게 된다.
• 측면에서 볼 때, 두 표면 간의 엘리베이션 차이는 7dp이다. 이는 Z축을 따라 측정된 거리로, 낮은 표면(1dp)과 높은 표면(8dp) 사이에 7dp의 깊이 차이가 존재함을 의미한다. 이 깊이 차이는 그림자 크기와 강도를 통해 사용자가 시각적으로 구별할 수 있도록 나타난다.

머티리얼 디자인의 엘리베이션 시스템

모든 표면과 구성 요소에 엘리베이션 값이 존재한다. 이는 각 요소가 서로 다른 높이에 위치함을 의미하며, 엘리베이션은 그림자 또는 시각적 신호(예: 표면 채우기, 불투명도)를 통해 표현될 수 있다. 이러한 엘리베이션 값은 다음과 같은 기능을 수행한다:

1. 표면 간의 이동: 엘리베이션을 통해 특정 표면이 다른 표면 앞이나 뒤로 이동할 수 있다. 예를 들어, 콘텐츠가 스크롤될 때 앱 바 뒤로 이동하는 방식으로 표현된다.
2. 공간적 관계 반영: 예를 들어, 플로팅 액션 버튼(FAB)이 카드 모음 위에 떠 있는 것처럼 보이도록 그림자를 사용하여 해당 요소가 다른 요소와 분리되어 있음을 시각적으로 나타낸다.
3. 초점 집중: 엘리베이션 값이 높은 요소는 사용자의 주목을 받게 된다. 예를 들어, 다이얼로그가 일시적으로 다른 표면 앞에 나타나 사용자에게 강조되는 효과를 준다.

---

Resting Elevation이란?

컴포넌트에 기본적으로 부여되는 시작 엘리베이션 값을 의미한다. 이는 컴포넌트가 초기 상태에서 갖는 높이를 나타내며, 사용자의 상호작용이나 시스템 이벤트에 따라 resting elevation에서 다른 높이로 이동할 수 있다. 모든 머티리얼 컴포넌트는 동일한 유형의 컴포넌트끼리 동일한 resting elevation을 갖는다.

예를 들어, 모든 카드 컴포넌트는 같은 resting elevation을 가지며, 다이얼로그 역시 다른 다이얼로그들과 동일한 resting elevation을 가진다.

Resting Elevation과 환경의 차이

Resting elevation 값은 환경, 플랫폼 또는 앱에 따라 다를 수 있다.

• 모바일: 모바일에서는 그림자와 같은 시각적 신호를 통해 컴포넌트가 상호작용 가능함을 표시한다. 따라서 모바일의 resting elevation은 그림자를 통해 사용자에게 컴포넌트의 상태를 전달하는 데 중점을 둔다.
• 데스크탑: 데스크탑에서는 hover 상태와 같은 시각적 신호가 상호작용 가능성을 나타내므로, 기본 resting elevation이 더 낮다. 예를 들어, 데스크탑의 카드 컴포넌트는 0dp의 resting elevation을 가지며, 그림자 대신 외곽선(stroke)으로 강조 표시된다.

---

Elevation Interference

컴포넌트가 resting elevation에서 dynamic elevation offset으로 이동할 때 다른 컴포넌트와 충돌하지 않도록 하는 것을 의미한다. 컴포넌트가 서로의 위치를 침범하지 않게 하여 시각적 혼란을 방지하고, 사용자 경험을 향상시키기 위한 디자인 규칙이다.

충돌 방지 방법

 

• 컴포넌트 이동: 예를 들어, 카드의 엘리베이션이 증가하여 플로팅 액션 버튼(FAB)과 충돌할 가능성이 생길 경우, 버튼을 화면 밖으로 이동시키거나 일시적으로 사라지게 함으로써 충돌을 피할 수 있다.
• 레이아웃 설계: 충돌을 사전에 방지하기 위해, 앱 레이아웃을 디자인할 때 상호작용 요소들이 서로 충돌하지 않도록 배치하는 것도 중요한 방법이다. 예를 들어, 카드 바로 위에 플로팅 액션 버튼을 배치하는 대신, 카드 옆에 버튼을 두어 충돌 가능성을 줄일 수 있다.

---

Depicting elevation

표면이 주변과의 계층적 관계를 효과적으로 보여주기 위해 다음 세 가지 요소를 강조하여 시각적으로 나타내는 것이다.

1. 표면 가장자리 (Surface Edges): 표면과 주변 영역을 대비시켜, 표면의 가장자리가 명확하게 보이도록 한다. 이를 통해 해당 요소가 다른 요소와 분리되어 있다는 인식을 사용자에게 제공한다.
2. 다른 표면과의 겹침 (Overlap): 요소가 정지 상태에 있거나 움직이는 동안 다른 표면 위에 겹쳐지면서 계층 구조를 나타낸다. 이를 통해 어떤 요소가 더 앞에 있고, 어떤 요소가 뒤에 있는지를 시각적으로 알 수 있다.
3. 다른 표면과의 거리 (Distance): Z축을 따라 다른 표면과의 거리를 그림자나 깊이감으로 표현하여 높이 차이를 시각적으로 보여준다. 이를 통해 표면이 더 높거나 낮은 위치에 있음을 직관적으로 전달할 수 있다.

 

Elevation Hierarchy

Elevation Hierarchy는 콘텐츠 간의 관계를 정의하는 요소로, 서로 비슷한 엘리베이션에 있는 콘텐츠와 다른 엘리베이션에 있는 콘텐츠에 따라 상호 관계가 달라진다. 특히 다른 엘리베이션에 있는 표면은 다음과 같은 역할을 하게 된다.

1. 중요한 콘텐츠 포함: 높은 엘리베이션에 있는 표면은 더 중요한 정보를 포함하는 경우가 많다. 예를 들어, 중요한 메시지나 알림을 표시하는 다이얼로그는 다른 요소들 위에 나타난다.
2. 사용자 주목 집중: 다이얼로그와 같은 요소는 화면에서 높은 위치에 있어, 사용자의 시선이 해당 요소에 집중되도록 설계된다. 이는 사용자에게 특정 정보나 행동을 강조하는 데 효과적이다.
3. 배경 요소 제어: 앱 바와 같은 요소는 그 뒤에 있는 콘텐츠에 영향을 줄 수 있다. 예를 들어, 앱 바에서 제공하는 액션은 뒤에 있는 콘텐츠와 상호작용하여 사용자가 다양한 작업을 수행할 수 있도록 한다.

---

Diagram of default elevation values

머티리얼 디자인에서는 모든 요소에 기본 resting elevation과 dynamic elevation offset이 설정되어 있으며, 일부 컴포넌트는 다른 컴포넌트보다 높은 엘리베이션에 위치하여 일관된 엘리베이션 순서를 유지한다. 예를 들어, 다이얼로그는 항상 다른 모든 컴포넌트 앞에 나타나도록 설정된다.

이러한 기본 설정은 사용자 경험에서 중요한 요소가 더 앞에 위치하여 사용자의 주목을 받게 하고, UI의 계층 구조를 명확히 하는 역할을 한다.

다음은 기본 resting elevation 값과 dynamic elevation offset 값이 정리된 표이다. 이 표는 각 컴포넌트의 초기 엘리베이션 값과 상호작용 시 변경되는 엘리베이션 오프셋을 나타내어, 컴포넌트 간의 일관된 계층 구조를 유지하는 데 도움을 준다.

---

그림자(Shadows)

shadow는 다른 기술로는 표현하기 어려운 표면 간의 엘리베이션 차이를 효과적으로 나타낼 수 있다.

• 그림자의 크기와 확산 정도는 두 표면 간의 거리를 나타낸다. 예를 들어, 그림자가 작고 선명할수록 해당 표면이 뒤에 있는 표면과 가까이 있음을 의미한다. 반대로, 큰 그림자에 부드러운 확산이 적용된 경우, 두 표면 간의 거리가 더 멀다는 것을 표현한다.
• 미묘한 그림자 차이는 다음과 같은 정보를 전달한다:
  • 두 표면 간의 상세한 거리 정도
  • 겹치지 않는 표면들 간의 엘리베이션 차이

그림자 는 표면의 가장자리와 배경에 대한 엘리베이션 정도 를 보여준다. 또한, 겹치지 않는 표면 간의 엘리베이션 차이 를 사용자에게 인지할 수 있게 한다.

---

참고

https://m2.material.io/design/environment/elevation.html#elevation-hierarchy

Material Design

---