[UX] 구글 머티리얼 디자인 – 3.2.머티리얼 기초(Material foundation) – 환경(Environment): 표면(Surface)
머티리얼 기초(Material foundation)에서 환경(Environment)은 UI 요소들을 표현하는 외부적 환경 요소를 의미합니다. 예를 들어, UI 요소(예: 버튼, 텍스트, 이미지)를 3차원(Dimension) 형태로 표현한다고 했을 때, 이를 어떻게 표현하는지 등의 내용 등을 다루고 있습니다.
3차원 표현이라는 것도 다양한 표현이 가능한데, 애플은 iOS 7.0 이전기 버전에서 스큐어모피즘이라는 디자인 방식으로 UI 요소들을 디자인 했었습니다. (스큐어모피즘에서 아이콘이나 기타 요소들은 실제 3차원 사물처럼 디자인이 되었습니다.)
하지만 현재 디자인 추세는 iOS와 안드로이드는 모두 미니멀리즘을 지향하는 디자인 트렌드에따라 플랫 디자인(Flat design) 형태로 3차원을 표현하고 있습니다.
플랫디자인에서 디스플레이는 평면이고, 모든 디자인 요소는 이 디스플레이 위에 올려진 2차원 면(Surface)로 간주합니다. 2차원 면(Surface)을 3차원의 형태로 표현하는 것과 관련된 내용들이 머티리얼 기초(Material foundation)에서 주로 다루는 내용입니다.
출처: 원문보기
1. 표면 (Surfaces)
머티리얼 디자인은 각 UI 요소를 표현하는 표면(Surface), 깊이(Depth), 그림자 표현(Shadow) 등을 통해 3차원을 표현합니다.
여기서 표면(아래 왼쪽 원기호 1번~원기호 2번)이라는 것은 이미지, 텍스트, 버튼 등의 세부 UI 요소(아래 오른쪽 마름모기호 1번~마름모기호 4번 요소)들을 포함하는 영역 또는 그 세부 UI 그 자체가 표면이 될 수 있습니다.
표면은 각 표면에서 서로 다른 동작이 구현될 수 있다는 특징이 있습니다. 예를 들어, 아래 그림에서 원기호 1번 표면(Surface)에서 지도는 상,하,좌,우로 이동할 수 있는 스와이프(Swipe)터치 동작이 구현될 수 있고, 원기호 2번 표면(Surface)에서 리스트는 상,하로 이동할 수 있는 스크롤(Scroll) 동작이 구현될 수 있습니다. 때로는 세부 UI 자체가 표면으로 정의될 수도 있습니다.
대표적인 사례가 Floating button 등의 UI 요소는 그 자체가 표면으로 정의되어 독립된 클릭(Press) 동작이나 독립된 3차원 사물(Object)의 형태로 표현됩니다.
머티리얼 기초에서 이야기하는 환경(Environment)은 이 표면에서 깊이(Depth)와 그림자(Shadow) 등을 표현하는 것으로 정의할 수 있습니다.
1.1. 머티리얼 환경 (Material environment)
1.1.1. 물리적 현실을 반영한 디자인 (Physical world)
우리가 사는 현실에서 사물(Object)은 서로 쌓거나 붙일 수 있습니다. 그러나 사물들은 물리적 법칙에 따라 서로 관통할 수 없습니다. 사물들은 빛을 서로 반사하거나 그림자를 생성하는 특징이 있습니다.
머티리얼 환경은 이러한 현실에서의 물리적 특징을 반영하여 어떻게 UI를 표현하고, 표면(Surface)을 표현하는 환경으로 구성할지를 정의합니다.
표면(Surface)과 UI 요소들이 3차원 공간에서 어떻게 움직이는지를 이해하는 것은 실제 사물들이 현실에서 어떻게 동작하는 지와 매우 유사합니다. 이러한 공간 모델은 앱 간 이동에 있어서도 일관되게 적용되어 있습니다.
머티리얼 환경은 단순히 앱 내에서만 적용되는 것이 아니라 안드로이드 시스템 전반에 반영되어 있고, 이러한 환경을 이해하지 않고 앱을 개발하면 다른 앱과의 동작에서도 이질적일 수 있음을 설명하고 있는 것입니다.
이러한 측면에서 쉽게 간과하기 쉬운 머티리얼 환경에 대한 이해는 기초적이지만 다른 앱들과의 동일한 동작 및 형태를 제공하여, 사용자들로부터 앱의 접근성과 사용성을 더 높이는데 매우 중요한 요소가 될 수 있습니다.
1.1.2. 깊이 (Depth)
머티리얼 디자인에서 UI 요소들은 빛(Light), 표면(Surface), 그림자(Shadow)로 구성된 3차원 머티리얼 환경에 출력됩니다. (머티리얼 환경의 3요소는 ‘빛’, ‘표면’, ‘그림자’로 구성됩니다.)
모든 머티리얼 환경에서 UI 요소들은 가로(x축), 세로(y축), 깊이(z축) 값을 갖습니다. 단, 깊이 값은 사용자가 보는 관점에서 양의 방향으로만 표현됩니다. 다시 말해 z축에 대한 깊이 표현은 양각 표현(공중에 부양된 형태의 표현)만으로 구성됨을 의미합니다.
2. 전반적 속성 (Properties)
표면(Surface)은 머티리얼 디자인 전반에 걸쳐 일관되고, 변경할 수 없는 특징과 동작(behavior)을 포함합니다.
UI 요소들을 담는 그릇이 되는 표면(Surface)에 대한 특징을 이해하는 것은 그만큼 중요함을 의미합니다.
2.1. 차원 (Dimensions)
머티리얼 디자인에서 표면(Surface)은 x축, y축에 따라 다양한 형태로 생성할 수 있습니다. (아래 그림 왼쪽 Do 항목)
단, 머티리얼 요소 자체를 3차원 형태의 입방체로 구성할 수 없습니다. (아래 그림 오른쪽 Don’t 항목)
부연설명을 하면 버튼이나 surface 자체를 3차원 입체감을 가진 디자인 요소로 별도 디자인 하지 말라는 뜻입니다. 예를 들어, 버튼 UI 요소를 3차원 입체감을 가진 아쿠아 버튼과 같은 형태로 디자인하지 말라는 뜻입니다.
머티리얼 요소에서 z축에 따른 깊이 표현은 기본적으로 1dp(=4pixel)로 설정됩니다. (기본 깊이 값이 1dp로 설정된다는 것에 유념해야 합니다.)
2.2. 그림자 (Shadows)
표면(Surface)은 입체 표현을 위해 그림자를 출력합니다. 이는 머티리얼 디자인에서 표면(Surface)이 1dp(=4pixel)의 평평한 면으로 구성되어 있기 때문에 입체 표현을 빛과 그림자 효과를 통해서 함을 의미합니다. 표면이 z축으로 상승함(떠오름)에 따라서 그림자가 출력되는 것은 허용합니다. (아래 왼쪽 Do 항목) 그러나 z축으로 상승함(떠오름) 없이 그림자의 크기를 늘이거나 임의로 생성하는 것은 허용하지 않습니다. (아래 오른쪽 Don’t 항목)
다시 말해 머티리얼 디자인에서는 표면(Surface)에 그림자를 통해 통해 표면과 표면 사이의 입체감(elevation)을 구분함을 의미합니다. 입체 감에 대한 표현 의도 없이 임의로 단순히 그래픽 디자인을 위해 표면에 그림자 값을 설정하지 말라는 것입니다.
머티리얼 디자인에서 그림자가 투영된 표면(Surface)은 주변의 그림자가 없는 다른 표면에 비해 더 입체값이 있는 상태(공중에 더 부양된 상태)로 간주합니다.
이와 관련하여 흔히 발생하는 문제 중에 잘못된 그림자 표현과 대화상자(Dialog, 예: 팝업창)간의 간섭이 있을 수 있습니다. 대화상자는 대부분 특정 상황에서 가장 상단에 출력되는 표면인데, 이미 출력된 표면에 잘못 설정된 그림자 표현은 대화상자 입체감 표현 과정에 영향을 주게 됩니다.
2.3. 해상도 (Resolution)
머티리얼 요소(머티리얼 디자인에서 제공되는 표면 및 기타 UI 요소들)는 해상도에 제약이 없습니다. 디스플레이 해상도에 따라 이미지 크기가 확대됨에 따라 해상도가 영향을 받지 않음을 의미합니다. (Vector image의 경우를 생각하면 되겠습니다.)
2.4. 콘텐츠 (Content)
콘텐츠는 머티리얼 영역에 출력되는 항목들입니다. 대표적으로 이미지, 텍스트, 아이콘 등이 있습니다. 이러한 콘텐츠는 어떠한 머티리얼 형태나 색상에서도 출력될 수 있습니다. 예를 들어, 4각형의 이미지가 원 형태의 머티리얼 표면(Surface)에서도 출력될 수 있다는 것입니다.
콘텐츠는 머티리얼 요소에서 별도의 입체 표현을 하지 않습니다. 위에서 언급한 것처럼 머티리얼 요소 기본 깊이값은 1dp(=4px)입니다. 여기에 포함되는 콘텐츠들이 별도의 깊이(Depth) 값을 가지지 않음을 의미한다. 이는 콘텐츠가 머티리얼 요소에 별도로 부양하지 않고, 유격없이 부착된 형태로 출력됨을 의미합니다.
아래 그림의 예에서 보라색 사각형은 머티리얼 표면(Surface)입니다. 하나의 머티리얼 영역에 여러 콘텐츠가 변경되면서 출력이 가능합니다. 예를 들어, 하나의 영역에 가로 스크롤을 통해서 이전 다음 콘텐츠가 변경되면서 출력될 수 있습니다.
콘텐츠는 머티리얼 영역에서 독립적으로 구성될 수 있다. 아래 흰색 영역은 머티리얼 표면(Surface)입니다. 여기에 콘텐츠는 자유롭게 출력될 수 있습니다. 예를 들어, 이미지 전체를 채우기 할 수도 있고, 특정 위치에 정렬도 가능하며, 머티리얼 요소 영역과 별개로 콘텐츠 자체 크기가 작아도 작은 대로 그대로 출력할 수 있음을 의미합니다.
콘텐츠는 머티리얼 영역에서 종속적으로 구성될 수 있다. 아래와 같이 머리티얼 영역이 변경됨에 따라 출력되는 콘텐츠 크기가 자동으로 변경(Resize)되거나 머티리얼 영역에 따라 잘릴(Crop) 수 있습니다.
콘텐츠에 대한 이해는 그래픽 디자인 자산(GUI asset) 작업과 관련하여 중요한 가이드라인을 제공합니다.
예를 들어, 잘 디자인된 하나의 이미지가 있다고 가정했을 때, 이를 사각형, 원, 기타 도형 표현에서 자유롭게 사용할 수 있는 상황이라면 굳이 각 상황에 따라 이미지를 사각형, 원, 기타 도형의 형태로 따로 앱 내에 포함하지 않아도 됨을 의미합니다.
이는 앱의 리소스를 줄일 수 있는 효율적인 작업 방향이 될 수도 있으며, 그래픽 디자인 자산 작업 및 관리 전반에 매우 유용할 수 있습니다. 이러한 구성에 대한 충분한 검토가 머티리얼 디자인에서는 더욱 중요해집니다.
다시 말해, 머티리얼 디자인에서는 그때그때 상황에따라 디자인 자산을 위한 작업을 별개로 하지 말라는 것이며, 이러한 철학은 icon 디자인 등의 가이드라인에서도 동일하게 적용되어 있습니다.
2.5. 물리적 속성 (Physical properties)
머티리얼 요소에서 사용자 입력은 머티리얼 표면(Surface)를 통과하여 전달될 수 없다. 아래 그림에서와 같이 출력된 대화상자를 통과해 배경에 있는 표면을 터치한 것과 같은 효과를 적용할 수 없음을 의미합니다.
서로 다른 표면(Surface)은 동일한 공간의 깊이값을 공유할 수 없습니다. 다시 말해 서로 다른 두 표면은 서로 다른 깊이(Depth) 값을 가져야 함을 의미합니다. 아래 그림에서와 같이 더 위에 부양해 있는 표면과 덜 부양해 있는 표면이 서로 다른 깊이(Depth) 값을 갖고 출력되어야 함을 의미합니다.
서로 다른 표면(Surface)는 서로의 깊이 값을 바꾸어 가면서 출력될 수 없습니다. 아래 그림의 왼쪽과 같이 표면 A(Surface A)가 표면 B(Surface B)보다 더 위에 부양해 있다면, 어떤 상황에서도 표면 A는 표면 B보다 더 높은 위치에 위치해야 합니다.
이는 대화상자가 출력되는 상황에서 대화상자는 표면 A로 기존에 출력되어 있던 표면 B위에 출력될 것이며, 표면 B를 다시 출력하기 위한 방법은 표면 A를 종료하는 방식으로 구현이 되어야 함을 의미합니다. 임의로 표면 A와 표면 B의 위치를 바꾸는 방식으로 구현을 하지 말라는 의미입니다.
이는 시스템에서 특정 화면에서의 상태값을 관리하는 방식과도 관련된 것으로 해당 규칙을 위배하는 것은 앱 동작에 문제를 야기할 수 있으므로 매우 주의해야 합니다.
머티리얼 동작(Behavior)은 특징 중에 가스(Gas), 액체(Liquid), 젤(Gel) 형태로 동작하지 않습니다. 여기서의 동작은 머티리얼 표면(Surface)이 등장하고 사라지는 것을 의미합니다.
머티리얼 동작으로 허용되는 형태는 투명도 변경(예: 페이드 효과), 사이즈 변경(예: 확대/축소), 위치 변경(예: 떠오르기, 가라앉기)입니다.
2.6. 형태 변형 (Transforming Material)
머티리얼은 형태를 변경할 수 있습니다. 예를 들어, 원, 사각형, 다각형 형태로 자유롭게 형태를 변형할 수 있습니다. 모핑(Morphing) 효과 처럼 자유롭게 표면을 변경할 수 있습니다.
2.7. 이동 동작 (Movement)
머티리얼 표면은 연속적으로 생성됐다 사라졌다를 반복할 수 있습니다. 깜빡이기 형태로 연속적으로 등장과 사라지기를 반복할 수 있다는 의미입니다.
머티리얼 표면은 표면의 어떤 축으로든 회전이 가능합니다. 예를 들어, 도형의 어떤 꼭지점을 기준으로도 회전이 가능하다는 의미입니다.
머티리얼 동작에서 표면들은 서로를 기준으로 모션을 조정할 수 있습니다. 예를 들어, 파워포인트의 애니메이션 처럼, 특정 개체의 등장 후에 다른 개체가 등장할 수 있도록 할 수 있다는 의미입니다.
z축을 따라서 실행되는 머티리얼 동작은 일반적으로 사용자 인터렉션 결과로 처리됩니다. 예를 들어, 특정 영역을 터치했을 때, 터치된 것에 대한 피드백을 알려주는 등의 효과는 사용자 인터렉션의 결과로 볼 수 있습니다.
3. 세부 특성(Attributes)
3.1. 기본 머티리얼 표면 (Basic Material surface)
기본 머티리얼 표면(Surface)은 불투명한 흰색의 1dp 두께로 그림자를 기본으로 생성하여 표현됩니다. 머티리얼 디자인에서 모든 UI 세부요소들은 이 표면 위에서 표현됩니다.
3.2. 동작 (Behavior)
머티리얼 표면은 특정한 방식으로 동작합니다.
변하지 않는 표면 (Rigid surface)
모든 인터렉션에서 동일한 사이즈의 표면을 유지하는 형태입니다.
늘어날 수 있는 표면 (Stretchable surface)
늘어날 수 있는 표면은 사이즈가 늘어날 수 있는 한계 내에서 단방향 혹은 여러 방향으로 늘어날 수 있다. 그리고 변하지 않는 표면(Rigid surface)으로서 동작을 수행합니다.
길이가 늘어나는 것은 변하지 않는 표면과 다르지만 길이가 늘어나고 나면 세부 동작이 진행될 때는 변하지 않는 표면과 동일하게 동작한다는 의미입니다.
움직일 수 있는 표면 (Pannable surface)
표면이 늘어나진 않지만 표면 내에서 콘텐츠가 스크롤을 통해서 위치를 이동할 수 있는 표면입니다. 대표적으로 지도 탐색에서 지도를 표현하는 공간은 유한하지만 특정 위치로 자유롭게 이동할 수 있는 형태가 여기에 해당됩니다.
3.3. 혼합 표면 (Composite surface)
표면은 특정 영역 내에서 서로 다른 동작(Behavior)을 수행하는 서로 다른 표면으로 구분될 수 있다.
예를 들어, 하나의 표면 내에 표면이 움직일 수 있는 표면(Pannable surface)과, 늘어날 수 있는 표면(Stretchable surface)을 서로 다르게 구성할 수 있음을 의미합니다. (위의 [그림. Material foundation surface definition] 참조)
3.4. 늘어날 수 있는 표면 (Stretchable surface)
늘어날 수 있는 표면은 늘어날 수 있는 한계에 다다를 때까지 가로, 세로, 가로&세로 동시에 늘어날 수 있습니다.
3.5. 표면 위치값 및 이동 방식 (Surface positioning and movement (x/y)
아래 그림에서 1번 표면(Surface)는 앱 바(App bar)이고, 2번 표면(Surface)는 카드 리스트는 각기 서로 다른 위치값에 대한 규칙을 갖습니다. 카드 리스트는 상,하 스크롤로 위치값을 변경하지만 앱 바의 경우에는 위치값을 항상 상단에 고정하여 출력합니다.
아래 그림에서 1번 표면은 카드 리스트이고, 2번 표면은 콘텐츠 영역입니다. 1번 표면은 가로 스크롤을 하며 위치값을 변경할 수 있고, 2번 표면은 상,하 스크롤을 하여 위치값을 변경할 수 있습니다. 위치값에 대한 변경은 한번에 하나의 위치값에 대한 변경을 허용합니다.
다시 말해, 1번 표면의 카드 리스트를 가로 스크롤함과 동시에 2번 표면의 상,하 스크롤을 동시에 조작할 수 없음을 의미합니다. (가로 스크롤과 동시에 상,하 스크롤을 동작하는 것 자체가 사용자 인터렉션 측면에서 매우 어색한 동작인 것을 우리는 직관적으로 알 수 있습니다.)
아래 그림에서 각각의 색상 카드는 서로 다른 표면입니다. 분홍색 카드는 자유롭게 위치값을 변경할 수 있습니다. 이러한 동작은 매우 동적인 UI 설계 방식에 해당됩니다.
아래 그림에서 리스트와 플로팅 액션 버튼(+모양의 버튼)은 서로 다른 표면입니다. 리스트가 상,하 스크롤을 통해 위치값을 변경하더라도 플로팅 액션 버튼의 위치값에는 영향이 없이 설계할 수 있습니다.
아래 그림에서 리스트와 하단 앱 바(Bottom app bars, 하단에 출력된 메뉴 서랍과 검색 아이콘이 포함된 앱 바)는 서로 다른 표면입니다. 리스트의 상,하 스크롤을 통한 위치값 변경은 하단 앱 바의 출력, 미출력에 영향을 줄 수 있습니다.
예를 들어, 리스트를 스크롤 다운 동작을 하면 하단으로 위치값을 변경하면, 하단 앱 바가 등장했다가 스크롤 업 동작을 하면 하단 앱 바가 사라지는 동작을 설계할 수 있습니다.
즉, 서로 다른 표면들의 동작을 상호 연계하도록 설계할 수 있음을 의미합니다.
3.6. 표면 불투명도 (Surface opacity)
머티리얼 표면은 투명, 반투명, 불투명하게 표현할 수 있습니다.
아래 그림에서 1번 표면은 앱 바(App bar)이고, 2번 표면은 상, 하 스크롤이 가능한 콘텐츠 영역입니다. 앱 바를 반투명하게 처리하면 2번 표면이 상,하 스크롤 되는 과정에서 앱 바의 타이틀 텍스트와 콘텐츠의 텍스트가 겹쳐 보일 수 있습니다. 머티리얼에서는 가독성을 문제로 이러한 동작을 권장하지 않습니다.
불가피하게 간섭이 발생하는 두 표면에서 가독성 문제를 해결하기 위해서 머티리얼에서는 서로 다른 두 표면의 동작을 상호 연계하도록 설계할 수 있게 하였습니다. (3.5의 dependent move in another surface movement 항목 참조)
이 경우 이상적인 해결 방법은 2번 표면에 스크롤이 발생하는 동안 앱 바를 숨기기 하다가 2번 표면이 더 이상 하단 스크롤이 불가능해지는 경우에 앱 바를 다시 등장하게 설계할 수 있습니다.
아래 그림에서 1번 표면은 앱 바(App bar)이고, 2번 표면은 상, 하 스크롤이 가능한 콘텐츠 영역입니다.
머티리얼 디자인에서 서로 간섭이 발생하는 표면에 완전 투명한 효과를 적용하는 것을 제한하고 있습니다. 이 경우 앱 바의 타이틀 텍스트와 콘텐츠 영역의 텍스트가 서로 간섭을 일으켜 가독성에 문제가 발생하기 때문에 이런 방식의 설계를 해서는 안 됩니다.
비단 앱 바와 콘텐츠 영역의 문제가 아니라도 텍스트가 출력되는 표면에 대한 투명, 반투명 효과 적용 시에는 미리 간섭이 일어날 수 있는 케이스가 있는 반드시 검토해야 합니다.
3.7. 스크림 (Scrim)
스크림은 덜 중요한 표면에서 콘텐츠를 부각시킬 수 있도록 하는데 적용할 수 있는 임시 표현 방법입니다. 흔히 특정 화면에 Dimming 처리 하는 것을 스크림의 개념으로 이해하면 됩니다.
스크림은 다음을 포함하여 다양한 방법으로 사용할 수 있습니다.
표면과 콘텐츠를 밝게 하거나 어둡게 하는 목적
표면과 콘텐츠의 불투명도를 줄이기 위한 목적
스크림은 후면(Background), 전면(Foreground) 어느 위치에서도 출력할 수 있습니다.
아래 그림의 왼쪽 예시는 후면에 출력된 콘텐츠에 스크림을 출력하여 전면에 출력된 콘텐츠를 강조하는 효과를 내었으며, 반대로 오른쪽 예시는 스크림을 통하여 콘텐츠를 밝게 처리(그림의 Subheader 영역)하여 다른 콘텐츠와 구분이 되도록 한 것을 볼 수 있습니다.
4. 마무리
오늘은 머티리얼 환경에서 이야기하는 표면의 개념과 표면이 갖고 있는 다양한 특성과 성질들에 대해서 이야기했습니다. 다음엔 머티리얼 환경의 두번째 요소인 높이값(Elevation)에 대해 이야기하겠습니다.
댓글
댓글 쓰기