UI 디자이너들은 밥 먹듯이 들어가서 봐야 한다는 Google Material Design에서 5월 20일에 새로운 업데이트를 한다고 합니다. 사이트 자체에는 한국어가 없어서 아쉬웠는데 영상에는 한국어 자막이 달려 있길래 좋은 내용이라고 생각되어서 나중에 보려고 정리했습니다.
이미지는 영상을 직접 보시는 게 좋고, 전 디자이너분들이 말씀하는 것만 텍스트로 정리했습니다. 기록하고 싶은 부분만 정리한 것이라 일부 내용은 생략되어 있습니다. Material Design은 자막에 나온대로 '머티리얼 디자인'으로 적겠습니다.
머티리얼 디자인의 철학 - 0:26
머티리얼 디자인은 대담하고 아름다우면서 일관적인 디자인 경험을 개발하기 위한 시스템을 도입되었고 구글 제품 디자인의 기본 원칙이 되었습니다. 이는 수백만 개의 앱에서 사용되었지만 디자인 시스템은 그대로 머무를 수 없고 그래서도 안 됩니다.
이 시스템은 계속 개선되었고 2018년에 테마를 적용하면서 더 통합적이고 적응력이 뛰어난 디자인 시스템을 만들었습니다. 테마는 사용자 지정 색과 서체, 도형을 지원함으로써 브랜드의 정체성을 표현하는 범위를 확장했습니다. 또한, 구글 앱을 만드는 데 사용한 구성 요소를 오픈 소스 라이브러리로 제공했습니다.
이후에도 어두운 테마, 모션 시스템, 도구 등을 꾸준히 업데이트했고, 올해는 Android 12와 더불어 최신 머티리얼 업데이트를 발표합니다.
사용자들은 맞춤 설정이 강화된 환경을 원합니다. 유틸리티와 디자인에 대한 지나치게 현대적인 접근법이나 일률성을 강조하는 개념은 이제 생각의 전환이 필요해 보입니다. 스마트폰의 기능이 계속 발전하고 있는데도 일률적인 것을 강조하는 방식은 인간적으로 느껴지지 않습니다.
개인의 기기는 자신의 개성이 묻어나야 합니다. Android 12에서는 기기를 사용하는 사용자의 개성을 드러내고 정체성을 표현할 수 있도록 노력하고 있습니다. 인간의 행동, 필요, 바람에 따라 다양하게 나타낼 수 있는 제품 표현을 지원합니다.
과거 저희 디자인 시스템의 중심이었던 은유와 패러다임의 경우 공상 과학, 초현대적 기술 유토피아, 이상적인 현대주의적 디자인을 결합한 아이디어를 기반으로 구성했습니다. 그리드, 계층, 일관성이 초기 머티리얼의 상징과도 같았습니다. 기호와 은유는 효과적인데다 공감도 얻었지만 기기와 화면에 대한 우리의 관계가 더욱 유연하면서도 개별적으로 바뀌면서 보다 확장된 디자인 표현이 필요하다고 느꼈습니다. 머티리얼 디자인을 통해 사람들이 사적 생활과 공적 생활을 모두 존중하는 방식으로 살아가도록 도울 방법을 고민했습니다.
모든 사용자를 위한 제품을 구축하겠다는 구글의 목표를 가져와 개인에게도 적용하기로 했습니다. 보편적으로 아름답고 유용한 디자인 시스템을 만들겠다는 목표는 미학과 효용이 매우 개인적이라는 지식을 타파해야 달성할 수 있습니다.
Android 12부터 설정된 머티리얼 디자인의 원칙 - 3:43
표준적이지 않은 세상에서 표준 언어가 통하려면 어떻게 해야 할까요? 그래서 세 가지 기본 원칙을 설정했습니다.
1. 편안함
기기가 집처럼 편안하게 느껴지는 디자인 시스템을 고민했습니다. 작년은 여러 가지 의미로 힘든 한 해였습니다. 서로 간에 연결되고 기술에 익숙해져야 할 필요성이 그 어느 때보다 커졌습니다. 그래서 사람들이 공감할 수 있고 사람들이 생각하는 편안함에 해당하는 환경을 만들기 시작했습니다.
2. 습관을 타파
익숙한 가정과 규칙을 버려야 할 필요성을 느꼈습니다. 하드웨어, 운영체제, 앱의 경계가 흐려질 것입니다.
3. 디자인에 영혼 넣기
자연계의 정신을 디지털 개발에 담고 싶었습니다. 표면 효과를 이용해 일상적 상호작용에 활기를 더하고 새로운 에너지를 불어넣습니다. 이러한 생기는 도형, 공간, 빛, 모션을 통해 표현됩니다.
편안함 실현 - 4:56
사람들이 시각적 환경을 함께 개발하고 각자의 세계를 디자인하여 그 안에서 편안함을 찾기를 바랍니다.
동적 색상 - 5:03
사용자의 배경 사진에서 개인화된 색상 팔레트를 가져오는 새로운 기능입니다. 사용자의 사진을 시작점으로 하여 세밀한 시각적 튜닝을 적용합니다. 색상 추출 패턴은 중성적 변화에서 높은 대비까지 다양합니다.
시스템이 사용자의 배경 이미지에서 색을 선택하고 색조 범위로 변환합니다. 다양한 밝고 어두운 색조가 추출됩니다. 동일한 팔레트를 밝은 테마, 어두운 테마, 대비가 높은 테마에 적용하고 같은 색상 슬롯에 넣을 수 있습니다.
기본적으로 색상 시스템에는 모든 사용자가 편안함을 느끼게 하고 기기에 이를 반영하는 기능이 있습니다. 이제 색을 더욱 확장하여 사용할 수 있기 때문에 접근성이 좋은 대비가 만들어지는 색 조합을 찾아야 합니다.
어떤 색상 페어링이라도 실제 테스트 없이 어울리도록 해야 했습니다. 동적 색상의 불확실성을 관리하기 위해 밝기에 기반한 기존의 색상 간 관계를 활용했습니다. 색조가 아니라 밝기를 계산하여 어떤 색조가 성공적으로 결합되는지를 정의할 수 있었습니다. 여기서 '성공적'이란, 지나치게 밝은 색상이 페어링되어 대비가 약해지지 않도록 했다는 의미입니다. 이렇게 포용성과 접근성을 라이브러리 사용자가 지켜야 할 기본적 표준으로 삼았습니다.
이 색상 시스템은 모든 UI에 적용되었습니다. 언제든 손쉽게 밝은 환경에서 어두운 테마로 색을 바꿀 수 있죠.
가변 글꼴 - 6:54
구글 앱의 서체는 Google Sans Text를 사용하는데 구글 마케팅 자료에서 자주 사용하는 Google Sans 글꼴 모음 외에도 작은 크기 글꼴에 새로운 옵티컬 사이즈를 디자인하고 본문 텍스트와 조화를 이루도록 했습니다. 가변 글꼴 기술을 이용해 하나의 파일에서 다양한 수정 사항이나 버전을 고려하도록 했습니다.
가변 글꼴 기술은 '인습 타파'라는 기본 원칙을 강조합니다. 정형을 깨고 그 순간의 필요에 따라 변화하는 디자인 시스템을 구축하고 있습니다.
이외의 변화 - 7:57
이제 음영(그림자)에 의존하는 대신 색상 등의 요소를 이용하여 앞과 뒤를 구분합니다. 도형을 통해 수납과 상태를 새롭게 바라보게 되었습니다. 마지막으로 일정한 상호작용에도 생기를 불어넣었습니다.
은은한 빛이 반짝이는 등의 새로운 표면 효과는 상호작용 상태에 대한 익숙한 색조에 생기를 불어넣습니다. 예를 들어, 휴대폰이 충전기에 연결되어 있을 때 희미한 빛으로 충전 상태를 알려줍니다. 표면 효과를 통해 오버레이와 페이드 이상의 무언가를 보여주고 싶었습니다.
유연한 도형에서부터 레이아웃을 매끄럽게 도입하고 상호작용을 새롭게 표현하기 시작했습니다. 화면의 요소가 늘어나며 스크롤 영역의 한계를 알려줍니다. 모션도 화면 간 전환 이상의 역할을 합니다. 디테일을 애니메이션화하여 유기적 움직임을 모방할 뿐만 아니라 화면에 생기를 불어넣습니다.
변화는 이걸로 끝이 아닙니다. 시스템 디자인에 끝은 존재하지 않기 때문입니다.
0 댓글