[UX] 구글 머티리얼 디자인 – 3.2.머티리얼 기초(Material foundation) – 환경(Environment): 빛과 그림자(Light and shadows)
머티리얼 기초(Material foundation)에서 빛과 그림자(Light and shadows)는 표면(Surface), 높이값(Elevation)과 함께 머티리얼 환경(Environment)을 이루는 핵심 요소입니다. 그림자(Shadows)는 머티리얼 표면(Surface)이 광원(Light source)을 막을 때, 생성됩니다.
출처: 원문보기
1. 빛 (Light)
1.1. 빛과 그림자 (Light and shadows)
머티리얼 디자인 환경(Material design environment)에서 가상의 빛은 UI 요소들에 비칩니다.
이 중 주광선(Key lights)은 날카롭고, 방향이 있는 그림자를 만들어 냅니다. 이 때 이 그림자를 주그림자(Key shadows)라고 부릅니다. (일반적인 디자인에서 Drop shadow의 형태라고 생각하면 됩니다.)
환경광(Ambient light)은 모든 각도로부터 산란되고, 부드러운 그림자를 만들어 내기 위해 나타납니다. 이때 이 그림자를 주변그림자(ambient shadows)라고 합니다. (일반적인 다지안에서 outer shadow의 형태라고 생각하면 됩니다.)
해당 개념은 아래 그림으로 다시 설명하겠습니다. 참고로 주광선, 주그림자, 환경광, 주변그림자 등의 개념은 별도로 존재하는 개념은 아니며, 번역과정에서 임의의 용어를 사용하였음을 밝힙니다.
위 그림의 왼쪽은 주광선(Key light)에 의해 만들어진 그림자를 나타내며, 오른쪽은 환경광(Ambient light)에 의해서 만들어진 그림자를 나타냅니다.
위 그림의 왼쪽은 주광선(Key light)과 환경광(Ambient light)이 혼합된 것으로부터 만들어진 그림자를 나타냅니다. 위의 Shadow cast by a key light 사례와 혼합된 빛으로 생성된 그림자를 비교해보면 혼합된 빛으로 생성된 그림자는 사각형의 상단 테두리에 생기는 그림자는 약하고, 좌, 우, 하단에 생기는 그림자는 강하게 표현되고, Shadow cast by a key light는 상,하,좌,우에 생기는 그림자가 모두 강하게 표현된 것을 확인할 수 있습니다.
위 그림의 오른쪽은 머티리얼 환경은 검정 표면에서도 가시성은 떨어지지만 그림자를 만들어 내고 있고, 이에 대한 예시를 나타낸 것입니다.
1.2. 광원 (Light sources)
머티리얼 환경에서 그림자는 주광선(Key light)과 환경광(Ambient light)에 의해서 만들어집니다. Android와 iOS 개발에서 그림자는 광원이 머티리얼 표면에 의해서 차단될 때 Z축을 따라서 다양한 방향으로 생성됩니다.
웹에서 그림자는 Y축으로만 생성됩니다. 다음의 예시는 6dp 높이값(Elevation)을 갖는 카드에 대한 예시입니다.
위의 그림의 왼쪽은 주광선(Key light)에 의해서 생성된 그림자를 나타내고, 가운데는 환경광(Ambient light)에 의해서 생성된 그림자를 나타냅니다. 마지막으로 오른쪽은 주광선(Key light)과 환경과(Ambient light)이 조합된 형태에서 생성된 그림자를 나타냅니다.
위의 예시는 모바일 환경에서의 사례를 나타냅니다. 머티리얼 환경에서 주광선(Key light)과 환경광(Ambient light)을 독립적으로 이용한 그림자 표시는 권장하지 않는 것을 알 수 있습니다.
2. 그림자 (Shadows)
그림자는 깊이와 이동 방향, 표면(Surface)의 테두리(Edge)에 대한 힌트를 제공합니다. 표면의 그림자는 높이값(Elevation)과 다른 표면들과의 관계를 통해서 결정됩니다.
이전 포스팅에서 설명한 바와 같이 동일한 높이값을 갖는 표면(Elevation)일지라도 어떤 표면 위에서 출력되느냐에 따라 그림자의 크기가 달라지는 것을 다시 설명하는 것입니다.
2.1. 사용법 (Usage)
그림자는 표면들 간의 높이값의 정도를 표현하기 때문에 그림자는 제품 및 서비스 내에서 일관되게 사용되어야 합니다. 즉, 임의로 그림자의 크기를 변경해서 사용하거나 서로 같은 표면 요소들이 다른 그림자 크기를 갖지 않도록 하라는 의미입니다.
실무를 보다보면 주관적인 디자인 컨셉을 이유로 임의로 그림자의 크기를 바꾸는 경우를 볼 수 있기 때문에 이에 대한 주의를 환기시키기 위한 내용입니다.
높이값(Elevation)은 그림자의 일관된 사용에 의해서 위와 같이 표현됩니다. (그림자의 크기가 커질 수록 더 높은 높이값을 갖음을 의미하는 것을 볼 수 있습니다.
위의 그림은 그림자의 크기가 높이값(Elevation)을 반영합니다. 가장 높은 높이값을 갖는 표면(Surface)은 상대적으로 더 큰 그림자를 갖습니다. 위의 그림에서 FAB(Floating Action Button)은 가장 높은 높이값을 갖고 있고, 이에 따라 그림자가 가장 크게 표현되고 있음을 확인할 수 있습니다.
위의 그림은 제품이나 서비스에서 그림자를 사용하지 않는다면 시차 모션(Parallax motion)과 같은 다른 방식을 통해 높이값에 대한 표현을 하도록 하고 있습니다. 공식적으로 이 방식을 머티리얼 디자인에서 권장하진 않습니다.
위의 그림은 아이템들이 사용자 선택에 의해 재정렬 되는 과정에서 선택된 아이템이 더 상위에 출력되고, 이동되는 것을 그림자를 통해서 나타내고 있는 것을 예시로 나타낸 것입니다.
2.2. 그림자와 모션 (Shadows and motion)
그림자는 표면들간의 거리가 늘어나거나 줄어들더라도 표면의 이동방향에 대한 도움이 되는 힌트를 제공합니다.
위의 그림은 표면이 모양과 크기가 변경되지만 높이값은 그대로 유지될 때, 표면의 그림자 값은 변경될 수 없습니다.
당연한 이야기처럼 들릴 수 있지만 표면 요소가 자유롭게 늘어날 수 있고, 이에 따라 표면에 반영된 그림자 역시 그 늘어나는 것과 동일하게 유지된다는 것을 설명하는 것입니다.
위의 사례와 반대로 표면의 높이값이 변경되면, 그림자의 크기 역시 변경된다는 것을 의미합니다. 이에 대한 사례가 현재 머티리얼 공식 페이지에 잘못 업데이트가 되어 있습니다.
이전 포스팅에서 설명했던 동적 높이값 변경(Dynamic elevation offsets)에 대한 내용이 중복되어 설명되고 있다고 보면 됩니다.
3. 연구 (Research)
머티리얼 디자인은 시력이 저하된 참가자들을 대상으로 그림자(Shadow)와 외곽선(Outline)을 통해 머티리얼 컴포넌트와 상호작용하고 참가자들이 이를 인식하는 능력에 미치는 영향을 더 잘 이해하기 위해 인터뷰를 수행했다고 합니다.
연구결과는 다음을 포함합니다.
- 그림자와 외곽선(Outlines)은 사용자가 머티리얼 요소(Element)를 인식하는 능력에 영향을 주는 여러 속성 중 하나입니다. 이와 유사한 다른 속성들로는 폰트 특징(Font characteristics), 높이값(Elevation), 색상(Color), 머리티얼 요소들 중 레이아웃, 적절한 상황을 잘 제시하는지와 관련된 사용 맥락(Context of use) 들이 있습니다.
- 그림자와 외곽선은 사용자가 제품 및 서비스 페이지를 둘러볼 때, 요소를 쉽고 빠르게 발견할 수 있게 합니다.
- 머티리얼 컴포넌트(개별 UI를 의미하는 것으로 예를 들어, 버튼, 카드 등의 UI 컴포넌트를 의미) 주변의 그림자와 외곽선을 사용하는 것은 사용자가 해당 컴포넌트와 상호작용할 수 있는지 없는지를 판단할 수 있도록 합니다.
4. 마무리
머티리얼 환경을 구성하는 마지막 내용인 빛과 그림자(Light and shadows)는 표면(Surface), 높이값(Elevation)과 함께 머티리얼 요소들의 기본 환경이 됩니다. 참고로 여기서 이야기 하는 요소(Element), 컴포넌트(Component), 표면(Surface)은 개별 UI 컨트롤(예: 버튼, 카드, 앱 바)을 의미한다고 이해하면 되겠습니다. 세부적으로 구분을 한다면 조금씩 개념이 다르겠지만 개별 UI 컨트롤로 커뮤니케이션을 하면 가장 무난하겠습니다.
다음 시간엔 실제 머티리얼 디자인(Material design)과 관련된 첫 시간으로 레이아웃(Layout)에 대한 내용을 다루겠습니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기