[UX] 구글 머티리얼 디자인 – 2.1.머티리얼 시스템(Material system) – 개요(Introduction)

구글 머티리얼 디자인(Material design)은 혁신적인 기술과 과학적 기반에서 훌륭한 디자인의 표준이 되는 가이드라인을 제공하는 시각적 언어이다.

구글 머티리얼 디자인(Google material design)이 이번에 대대적 개편이 있어 리뷰를 남기고자 글을 씁니다. 그 동안 Google material design은 Android 5.0/6.0을 Base로 한 내용들을 포함하고 있었습니다. 조만간 Android 10이 공식지원되는 것과 맞물려 새롭게 개편된 내용들이 많아질 듯 합니다. 중간중간에 개편작업이 있어왔지만 이번처럼 대대적인 개편이 있던 건 꽤나 오랜만인 거 같습니다.

출처: 원문보기

참고로 현재 내용을 리뷰하는 내용은 2020년 3월 19일자로 업데이트된 내용을 기준으로 작성하고 있으니 업무에 참고하시기 바랍니다.

구글 머티리얼 디자인(Google material design)은 구글이 앱과 웹사이트 등의 서비스를 만들면서 기획자, 디자이너, 개발자의 작업을 전반적으로 권고하고 있는 일관된 체계입니다. 와이어프레임 및 시나리오 작업, 디자인 어셋 작업, 개발자들의 코드 설계 방향성 등의 굉장히 방대한 범위를 안내하고 있습니다.

자료들이 영어로 되어 있다보니 많은 작업자분들이 업무에 참고하는데 애로사항이 있는 듯 하여 이번에 별도로 주요 내용을 요약하기 위한 차원에서 포스팅을 하고자 합니다. 번역하는 과정에서 이해에 도움이 되기 위해 개인적인 견해나 부연설명 등이 포함될 수 있음을 미리 안내 드립니다.

오늘은 그 첫 번째로 Google material design내용이 전반적으로 어떻게 구성되어 있는지 위주로만 설명을 하고, 다음포스팅에서 내용 하나하나를 살펴보면서 세부 내용을 다루겠습니다.

어떤 체계를 살펴 보는데, 가장 효과적인 방법은 역시나 목차를 살펴 보는 거겠죠? 우선 각 목차구성과 목차에서 다루고 있는 내용들을 간단하게만 리뷰하고 넘어가도록 가겠습니다.

1. 머티리얼 시스템(Material System)

구글은 머티리얼 디자인(Material design)이라는 것을 다음과 같이 정의하고 있습니다.

“머티리얼 디자인(Material design)은 혁신적인 기술과 과학적 기반에서 훌륭한 디자인의 표준이 되는 가이드라인을 제공하는 시각적 언어이다.”

이를 다시 한번 잘 해석을 해보면 이미 이 디자인에는 혁신적인 기술적 분석(예: 최근 개발된 기술 트렌드를 반영)과 인문/사회/과학적(예:인지심리, 인간공학 등)을 배경으로 만들어졌다는 것을 의미합니다.

또한 중요하게 봐야 될 부분으로 표준으로 삼을만한 가이드라인을 제공한다는 것에 있습니다. 표준으로 삼기 위해 얼마나 많은 테스트와 사례연구가 이루어져 있는지를 이해할 필요가 있다는 것을 의미하기 때문에 그냥 단순히 구글이 제공하는 디자인인가로 이해할 것이 아니라 어떤 디자인에 대한 배경을 이해하기 위한 추론적 연구도 필요함을 의미한다는 것입니다. 이걸 모른다는 건 적재적소에 필요한 요소를 설계하지 못한다는 의미기도 하기 때문에 저는 앞으로 이러한 추론적 배경을 기술하는데 많은 내용을 다룰 예정입니다.

1.1. 개요(Introduction)

소개부분에서는 목표(Goal), 원리(Principle), 전체구성(Material system, Material foundation, Material guideline)에 대해서 설명하고 있습니다.

1.1.1. 목표(Goal)

목표에서는 아래와 같은 3가지를 언급하고 있습니다.

Create
훌륭한 디자인 표준에 따라서 시각적 언어를 창조하라

Unify
플랫폼, 디바이스, 입력장치를 넘어서서 하나의 단일화된 사용자 경험을 제시하라.

Customize
각 자의 서비스 브랜드에 맞게 유연하게 Material system을 접목시켜라.

목표를 간단히 다시 요약해보면 이런 의미로 해석할 수 있겠습니다. “디자인 표준을 따르되 다양한 환경에서도 단일화된 사용자 경험을 제시하고, 각자 상황을 잘 파악해서 유연하게 적용해라.”

사실 이 말이 굉장히 모순되는 것 같으면서도 중요한 의미를 내포하고 있습니다. 그만큼 다양한 환경에서도 단일화된 사용자 경험을 제시할 수 있는 유연한 시각적 설계 도구를 제공한다는 의미인거죠.

반대로 이야기하면 이런 부분에 대한 이해가 부족하다면 코에 걸면 코걸이 귀에 걸면 귀걸이가 될 수도 있는 엉터리 결과물을 만들 수 있다는 것에 경계를 해야 된다는 말이 될 수도 있다는 의미입니다.

1.1.2. 원리(Principle)

Material design은 현실 세계에서의 재질, 빛을 은유적으로 형상화했고, 종이와 잉크를 매개로 이를 표현했습니다.

이는 Material design 전반적인 디자인 철학과도 관련이 있는데요. 종이와 잉크를 매개로 했다는 것은 여전히 2차원적인 디자인 철학을 가져간다는 의미고요, 재질과 빛(그림자) 등을 이용해서 입체감을 표현한다는 것을 의미합니다. 이를 이해하고 통일성 있는 디자인을 한다는 것은 매우 중요합니다. 이 부분은 기존과 크게 달라지지 않은 부분 같네요.

Bold, Graphic, intentional
구조화할 때, 의미를 부여할 때, 사용자들에게 집중하게 하고자 할 때, 선의 굵기를 강하게, 그래픽 요소를, 의도를 담아서 표현하라고 하고 있습니다.

Motion provides meaning
모션(예: 화면전환 효과, 상호작용 결과)은 관심을 집중 시키고, 프로세스의 연속성을 유지시키는 효과를 제공합니다. 사용자의 행위에 대한 결과로서 모션효과를 주면 효과적일 수 있다는 것을 의미합니다.

예를 들어, 사용자가 잘못입력한 전화번호 타입에 대해 피드백을 주는 문구 등의 출력 등이 여기에 해당될 수 있겠습니다.

Flexible foundation
컴포넌트, 플러그인, 디자인 요소를 각 서비스에 맞게 통합할 수 있도록 제공합니다.

Cross-platform
여기서의 플랫폼의 의미는 웹, 모바일, 안드로이드, iOS와 같이 형식이 다른 적용 환경을 의미하며, 동일한 UI를 제공하여 크로스 플랫폼에서 대응이 가능합니다.

이 부분은 중요한 내용인데요. 예전에는 안드로이드, iOS, 모바일, 웹 등이 전부 다 제 각각인 UI 환경으로 구성이 되어 유지보수 관리 등에 각 플랫폼에 필요한 작업이 별도로 이뤄졌다면 Material design을 통해 이러한 요소들을 최소화될 수 있음을 의미합니다. 이를 이해하고 잘 설계하면 최소의 작업으로 다양한 플랫폼에서 최적의 결과물을 만들어 낼 수 있음을 의미하기도 합니다.

이 부분이 제가 볼 때는 우리가 업무 담당자로서 가져야할 가장 중요한 목표가 될 수 있다고 생각합니다. 모든 사업자(업무 담당자를 고용하는 주체)가 원하는 것이 결국 적은 노력으로 다양한 플랫폼에 대응되는 서비스를 개발하고 유지보수하고 싶어하는 게 너무나 당연한 것일 테니까요.

1.1.3. Material Foundation

Material design은 UI 영역, GUI, 컴포넌트로 표현하는 것을 광범위하고, 디테일하게 정의합니다. 이 부분은 UI 요소에 대한 표현을 광범위하게 다루고 있습니다. 레이아웃, 내비게이션 방식, 색상 표현, 타이포 표현, 사운드, 아이콘 표현, 쉐이프 표현, 모션, 인터렉션 방식 등의 다양한 요소를 포함하고 있습니다.

1.1.4. Material Guidelines

Material guideline에서는 개별 서비스에서 설계한 Material design을 커스터마이질 하는 것에 대한 참고사항을 제공합니다. 반드시 준수해야 되는 것은 아니지만 더 효과적인 서비스를 위한 가이드라인을 제공하고 있습니다. 장애인 등을 위한 호환성 높은 디자인을 위한 요소들이 여기에 포함될 수 있습니다. Material foundation을 기반으로 조금 더 완성도 높은 결과물을 개발하기 위한 요소로 볼 수 있겠습니다.

1.2. 머티리얼 스터디(Material studies)

여기서는 Material design에 대한 우수사례를 다루고 있습니다. 기존에 우수한 서비스 사례를 위해서 벤치마킹을 별도로 해야 되는 작업을 줄여주고자 Material design에서 이를 이미 잘 정리해서 요약해 놓은 것입니다. 이게 Material studies의 가장 주요한 목적일 거 같습니다.

예를 들어, 갤러리 방식의 서비스를 제공하고자 한다면 이와 관련된 사례를 참고하면 되겠고요. 그래프와 챠트를 위주로 하는 서비스를 개발하고자 한다면 해당 사례를 참고할 것을 이야기하고 있습니다.

Material studies는 별도 포스팅에 간단히 다룰 예정이므로, 다음 포스팅을 참고하시면 되겠습니다.

원문이 영어로 되어 있어서 최대한 직역을 하는데 집중하였고요. 의역에 대한 부분은 최대한 부연 설명으로 내용을 이해할 수 있도록 중점을 두었습니다. 이해가 잘 안되는 부분은 원문 링크를 함께 첨부드리오니 같이 보시면 이해에 도움이 되지 않을까 싶습니다.

궁금한 내용은 언제든지 댓글로 남겨주시고요. 그럼 다음 포스팅에서 뵙겠습니다.