Google Material 2.0 번역 #01
Introduction
안녕하세요, 주니어 디자이너를 위한 커뮤니티 Bigpicture입니다.
머티리얼 디자인에 대해 들어보셨나요? 머티리얼 디자인이란 안드로이드의 최적화 디자인 시스템인데요, 나무위키에 따르면 “구글이 제창하여 2014년도부터 이용되기 시작한 플랫 디자인 기반의 디자인 메뉴얼.”이라고 합니다. (애플에서는 Human Interface Guideline이라는 디자인 메뉴얼을 사용하고 있습니다)
앱이나 웹을 디자인할 때 시작하기가 막막하셨다면 구글이 오픈 소스로 공유해 놓은 디자인 가이드의 도움을 받는 것도 효율적인 방법이 될 수 있습니다. 이번 카카오톡 8.0 업데이트도 구글 머티리얼 디자인 정책에 영향을 받았다고 할 정도로 머티리얼의 명성과 영향력은 대단한 것 같습니다.
그래서 오늘은 구글 머티리얼 가이드 번역글을 들고 왔습니다. 올해 5월, 구글에서 Material 2.0를 발표하며 디자이너 사이에서 많이 회자되고 있습니다. 하지만 한국어로 번역된 글이 없어 번역글을 진행하게 되었습니다. 파트별로 나누어 글을 업로드할 예정이며, 이번 글은 Material 2.0의 소개 내용입니다. 이후 본격적인 번역글에서는 구체적인 사례를 덧붙여 함께 전해드리도록 하겠습니다.
Material 2.0 원본글은 아래 링크에서 확인할 수 있습니다.
소개
머티리얼 디자인은 과학과 기술의 혁신, 그리고 좋은 디자인의 일반적인 원리를 종합한 시각 언어입니다.
IT 분야에 종사하고 계신 디자이너라면 필수적으로 접해본 구글의 디자인 가이드라인이기도 합니다.
목표
1. 만들다 : 기술과 과학의 혁신과 함께 올바른 디자인의 일반적인 원리를 종합한 시각언어를 만듭니다.
2. 통합하다 : 플랫폼, 장치 및 입력 방법에 걸쳐 사용자 환경을 통합하는 단일 기본 시스템을 개발합니다.
3. 커스터마이징하다 : 머티리얼의 시각적 언어를 확장하고 혁신과 브랜드 표현을 위한 유연한 기반을 제공합니다.
원칙
머티리얼 = 메타포(은유)
머티리얼 디자인은 어떻게 빛을 반사하고 그림자가 드리워지는지를 포함하는, 물리적 세계와 그 질감에 영감 받았습니다. 머티리얼은 종이와 잉크의 매체를 다시 재구성하여 표현하였습니다.
강조하고, 그래픽적이며, 의도적인
머티리얼 디자인은 인쇄 설계 방법(인쇄, 그리드, 공간, 축척, 색상 및 이미지)을 기반으로 만들어졌습니다. 이는 계층과 의미를 만들며, 사용자가 몰입하도록 도와줍니다.
의미를 제공하는 모션
모션은 미묘한 반응과 일관성 있는 전환을 통해 주의를 집중시키고 연속성을 유지합니다. 요소가 화면에 나타나면, 새로운 변환을 생성하는 인터랙션으로 환경을 재구성합니다.
유연한 기반
머티리얼 디자인 시스템은 브랜드를 표현하기 위해 설계되었습니다. 구성 요소, 플러그인 및 설계 요소를 원활하게 구현할 수 있는 맞춤형 코드 베이스와 통합할 수 있습니다.
크로스 플랫폼
머티리얼 디자인은 Android, iOS, Flutter 및 웹에서 공유 컴포넌트를 사용하여 플랫폼 간에 동일한 UI를 유지합니다.
둘러보기
머티리얼 가이드는 아름다운 프로덕트를 더욱 빠르게 만들어 줍니다. 머티리얼 및 공유 작업을 커스터마이징하고, 머티리얼 사례에서 영감을 얻으며, 머티리얼 테마로 제품의 고유한 정체성을 표현할 수 있습니다.
머티리얼 시스템
우리의 업데이트된 디자인 시스템은 디자인 및 개발 사이의 워크플로우 개선을 위해 머티리얼 툴 및 컴포넌트와 통합됩니다.
머티리얼 기반
머티리얼 디자인을 뒷받침하는 원칙과 이론을 익히면서, 머티리얼 디자인 구조를 사용하여 당신의 앱을 설계할 방법을 디자인하고 전략화합니다.
머티리얼 가이드라인
디자인부터 코드까지 제품 전반에 걸쳐 고유한 머티리얼 테마를 체계적으로 커스터마이징하고 배포합니다.
이전 머티리얼 가이드라인 또한 볼 수 있습니다.
https://material.io/archive/guidelines/
업데이트
머티리얼은 시간에 따라 진화할 수 있도록 설계되었습니다. 2018년 5월부터는, 머티리얼 디자인 시스템의 표현 기능을 향상하여 보다 많은 머티리얼 테마를 제작할 수 있도록 달마다 출시할 예정입니다.
릴리즈 알림을 받기 위해서는 이메일을 등록해야 합니다. (이메일을 등록하여 소식을 빠르게 받아보세요!)
https://services.google.com/fb/forms/google-design-updates/
GitHub에서 최신 릴리즈 정보와 계획을 확인하십시오.
https://github.com/material-components/material-components/blob/develop/ROADMAP.md/
여기까지 Material 2.0의 Introduction 파트 번역글이었습니다. 처음 머티리얼 디자인이 나왔을 때에는 다소 획일한 된 부분이 있었다면, 2.0 가이드는 1.0 때보다는 유연하게 열리고 조금 더 일관된 룰로 정리되었다고 합니다. 그러나 혹자는 “머티리얼 디자인은 다른 것이지, 나은 것 아니다”며 (https://brunch.co.kr/@blackindigo-red/20) 완벽한 디자인 언어는 없다는 글을 쓰기도 했습니다.
번역자 덧: 사실 구글에서 처음에 어떤 원칙과 어떤 생각을 갖고 처음 디자인 가이드를 만들었는지는 몰랐던 것 같아요. 주로 안드로이드 디자인을 진행할 때 참고하기 위해 확인했던 경우가 많아서 Introduction 부분은 확인하지 않았었거든요. 그래서 업데이트와 관련된 내용, 구독이 가능하다는 것도 몰랐는데, 이번 기회에 디테일한 부분을 알게 된 것 같습니다.
번역에 어색한 부분이 있거나 그 외 피드백이 있으신 경우에는 댓글이나 아래 링크에 의견 남겨주세요.
https://goo.gl/forms/hfSozfcTUBvewMeU2
아직은 소개 부분이라 가볍게 읽으셨을 것 같아요. 본격적인 내용은 다음 편부터 시작할 텐데요, 다음 편에서는 더 구체적인 요소들과 사용 사례들을 가지고 오겠습니다. 읽어주셔서 감사합니다!
Brunch | https://www.brunch.co.kr/@bigpic
Facebook | https://www.facebook.com/bigpic.design
Instagram | https://www.instagram.com/bigpic.design
