< MATERIAL DESIGN >
구글 머티리얼 디자인은 안드로이드를 기반으로 한 UX디자인 시스템으로, 구글 앱 내에서의 통일된 디자인을 보여주는 디자인 시스템입니다. 2014년도에 처음 만들어졌고 플랫한 디자인을 기반으로 하여 당시 ios의 스큐어모피즘(사물의 있는 그대로의 질감을 표현하는 기법)과는 상반된 디자인 시스템을 구축한 것으로 시작되었습니다.
구글 머티리얼 디자인은 끊임없는 발전을 통해 지금은 M3버전으로 소개가 되고 있습니다. 하지만 아직 M2를 기본으로 M3에서는 몇 가지 요소만 발전된 것이기에 오늘은 M2내용을 바탕으로 기획/디자인트랙분들에게는 UX/UI의 기본이 되는 머티리얼 디자인을 설명해 드리려고 하고, 개발트랙분들에게는 디자이너 없이 프로젝트를 진행할 때 어색하지 않고 깔끔한 서비스 화면 구축을 위한 머티리얼 디자인의 핵심을 몇 가지 소개해 드리려고 합니다.
/
/
-Layout
처음으로 소개해 드릴 요소는 레이아웃입니다.
머티리얼 디자인에서 레이아웃은 Columns, Gutters, Margins으로 이루어져 있습니다.
1. Columns은 화면에서 컨텐츠를 담을 영역을 설정해주는 기준으로, 고정값이 아닌 백분율로 설정하여 다양한 디바이스 크기에 따라 컨텐츠가 유연하게 변화되어 화면에 나타납니다. 또한 column의 개수는 break point에 따라 결정됩니다.
2. Gutters는 컨텐츠와 컨텐츠 사이의 공간을 설정해주는 것으로, 8의 배수로 결정됩니다.
3. Margins는 화면 가장자리에 비워두는 여백으로 이것 또한 디바이스의 크기에 따라 유연하게 결정됩니다.
구글 머티리얼 디자인에서 제안하는 디바이스 크기에 따른 레이아웃 기준은 다음과 같습니다.
따라서 반응형 웹사이트를 제작하는 경우 각 break point에 해당하는 크기에 맞는 레이아웃을 설정하면 보다 깔끔하고 어색하지 않은 화면을 구성할 수 있습니다.
/
이것은 프로덕트 디자인에서 소위 말하는 '국룰'로 사용되는 8pt디자인 시스템에 대한 내용입니다.
8pt 그리드 시스템
Columns, Gutters, Margins의 수치를 주로 짝수에 맞추게 되는 것도 이러한 이유를 바탕으로 하고 있습니다.
해당 내용을 숙지하고 의도적으로 짝수 디자인을 한다면 보다 어색하지 않고, 디바이스 크기가 달라져도 뭉개지지 않는 디자인을 할 수 있습니다.
Responsive layout grid
/
/
-Elevation
두번째로는 화면 안에서의 구조입니다.
실제로 멋사에서 개발자분들이 디자인 없이 프로젝트를 진행하는 경우 Shadow를 넣는 경우를 많이 보았는데, 몇몇분들은 Shadow를 넣는 이유를 대부분의 카드 디자인에서 넣어서, 또는 강조하기위해 넣는다고 말씀해주셨습니다. 그렇기에 과하게 어둡게 들어가거나 그림자가 사방으로 과도하게 퍼지는 등 실제 그림자와는 다른 느낌으로 카드 디자인을 하는 경우가 많았습니다.
머티리얼 디자인 시스템은 우리가 구글 서비스를 사용할 때, 일관된 사용자 경험을 제공하고 화면안에서 동작한다는 느낌을 사용자에게 주기위해 실제 사물이 가지는 빛과 그림자 그리고 종이와 잉크에서 영감을 받아 제작되었습니다. 하나하나의 창과 버튼을 카드라고 생각하고 그 카드가 3d공간 안에서 켜켜이 쌓여있는 느낌을 주기위해 그림자를 적극 활용하여 디자인했습니다.
아래의 영상에서 그 과정을 확인할 수 있습니다.
구글 머티리얼 디자인의 시작
어떠신가요 이제는 디자인에서 Shadow를 왜 넣는 거고 어떻게 넣어야 과하지 않고 자연스러운 그림자를 연출할 수 있는지 감이 오시나요?
수치화된 그림자의 진하기나 퍼짐은 없지만 영상을 통해 원리를 이해하고 Shadow효과를 적용하면 어색하지 않은 자연스러운 카드 디자인을 연출할 수 있습니다.
Elevation
Light & Shadow
/
/
-The color system
마지막으로 색상에 관한 가이드입니다.
보통은 서비스의 브랜딩을 통해 메인 컬러와 서브컬러등이 정해지지만 브랜딩 없이 디자인을 연습해야 할 때 구글 머티리얼 디자인의 컬러시스템을 유용하게 사용할 수 있습니다.
색은 주로 주조색과 보조색 그리고 그 색들의 명암차이로 만들어진 색상과 타이포에 사용되는 색상으로 서비스는 이루어집니다.
COLOR TOOL
해당 링크를 통해 원하는 주조색을 고르면 보조색과 어울리는 색을 골라주는 서비스를 이용해볼 수 있습니다.
추가적으로 M3에서는 Dynamic Color를 새로 도입하여 사용자 본인이 느끼는 편안한 이미지의 색 팔레트를 추출하여 그것을 시스템에 적용하는 것을 제안하였습니다. 이는 사용자에게 보다 편안한 경험을 전달하기 위한 것으로 생성된 팔레트는 다크모드에서도 조화롭게 사용될 수 있게끔 밝기를 기준으로 만들어집니다.
/
디자인을 연습해 볼 때에는 상관없겠지만, 실제 서비스를 출시할 때는 접근성 조건을 지켜 색을 골라야 합니다.
웹 접근성은 이러한 이유로 서비스 출시 전에 검토되어야 하는 사항이며, 장애인뿐만 아니라 비장애인에게도 높은 가독성의 경험을 전달하기 위해 고려되어야 하는 사항입니다.
구글 머티리얼 디자인 M3에서는 접근성에 대한 기준을 보다 명확히 하고있습니다.
색상 팔레트에서 40단계 이상 차이나는 색상은 3:1이상의 대비를, 50단계 이상은 4.5:1이상의 대비를, 70단계 이상은 7:1이상의 대비를 기준으로 합니다. 이러한 색 대비에 대한 비율은 구글에 컬러 접근성 체크라고 치면 다양한 사이트가 나오는데 거기서 바로 해볼 수 있습니다.
이런 다양한 색상 기준을 바탕으로 예쁘고 가독성 좋은 서비스를 디자인해보시기를 바랍니다.
The color system
/
/
구글 머티리얼 디자인을 통해 기본적인 UX/UI 가이드에 대해 소개해 드렸습니다.
디자인에 대한 감이 조금 오시나요? 물론 이것은 구글 안에서 사용되는 가이드이며, 서비스 디자인에 자유를 방해한다는 비판적인 시선도 있었습니다. 하지만 이 가이드대로만 따른다면 적어도 어색한 서비스 디자인은 피할 수 있을 거라고 생각합니다. 기획/디자인 트랙 분들은 기초를 탄탄히 해서 그걸 바탕으로 포트폴리오용 개인 작업을 해보시면 좋을 것 같고, 개발자분들은 디자이너 없이 혼자 프로젝트를 진행할 때 적용해보시면 좋을 것 같습니다. 구글 머티리얼 가이드 사이트에 나온 예시로 다양한 실습을 해보시길 바랍니다!
구글 머티리얼 디자인
/
/
오늘이 세션 마지막날이기에 추가적으로 디자인할 때 유용한 참고용 사이트, 피그마 플러그인을 몇가지 추천해드리려고 합니다!
-참고 사이트
- 구글 머티리얼 디자인 (M2)
- 구글 머티리얼 디자인 (M3)
- Human Interface Guidelines
-ios의 디자인 가이드입니다. - 연정's 피그마
-가장 유명한 무료 피그마 강의입니다. - Material Symbols
-구글 머티리얼 디자인에 소개된 구글에서 제공하는 무료 아이콘입니다. - wwit
-국내 어플 디자인을 모아놓은 사이트입니다. - pretendard
-한글 타이포에만 초점을 맞춰 제작되어 따로 자간 조정이 필요하지 않은 무료 폰트입니다.
/
-피그마 플러그인
- unsplash
-무료 이미지를 제공하는 플러그인입니다. - Lorem Ipsum
-더미텍스트를 넣는 플러그인입니다. - Material Design Icons
-머티리얼 디자인에서 제공하는 아이콘을 바로 쓸 수 있는 플러그인입니다. - iconify
-무료 아이콘을 사용할 수 있는 플러그인입니다. - Brandfetch
-브랜드 아이콘을 바로 적용할 수 있는 플러그인입니다.
/
마지막으로 UX/UI에 대해 입문하기 좋은 K-mooc강좌 4개 소개해드리겠습니다.
1. [UX/UI입문](8. UX/UI입문)
2. UX디자인
3. UI디자인
4. UX/UI디자인 프로젝트
/
/
총 5번의 세션 듣느라 고생 많으셨습니다!
열심히 들어주셔서 감사합니다 :)
