지난 2022년 5월 11일 구글에서 주최한 개발자 행사 ‘Google I/O 2022’에서 구글이 머티리얼 디자인 3 (Material Design 3)의 최신 업데이트에 대한 정보를 발표했습니다.
머티리얼 디자인 3(Material Design 3)에 어떤 기능 들이 추가되었고 어떤 중요한 기술을 발표했는지 알아보고자 합니다.
가변 글꼴로 마이그레이션
이 기술은 어도비, 애플, 마이크로소프트, 구글이 협업한 결과물로 이번 사양에 추가되었습니다.
가변 글꼴이란 사용자가 유형과 아이콘을 제어할 수 있는 새롭고 혁신적인 글꼴 형식입니다. 기존 글꼴 패밀리에는 굵게, 가늘게 또는 축소와 같이 사용 가능한 모든 스타일에 대해 다른 글꼴 파일이 필요합니다. 가변 글꼴은 다양한 글꼴 파일의 제한된 세트가 아니라 가장 얇은 것부터 가장 굵은 것까지 연속 범위로 다양한 두께를 제공하므로 하나의 파일에서 사용자 정의 두께를 모두 선택할 수 있습니다.
가변 글꼴 내의 변수는 축 또는 인스턴스에 의해 제어됩니다. 변수 i를 선택하면 n 사용자가 제어할 수 있는 축에 유형 디자인을 할당할 수 있습니다.
사용자 정의 가능한 속성에는 등급(Grade), 굵기(Weight), 너비(Width), 광학 크기(Optical Sizes)가 있습니다. 등급은 굵기와 비슷하지만 문자열 너비에 영향을 주지 않습니다.
가변 글꼴을 사용하면 단일 글꼴 파일에 여러 스타일을 제공할 수 있으므로 웹 사이트를 보다 지속 가능하고 작고 빠르게 만들 수 있으며 디자이너가 표현력을 더 많이 제어할 수 있습니다.
가변 글꼴 사용으로 글꼴의 표현 능력이 광범위해지고 가독성을 개선할 수 있는 방법이 다양해졌습니다.
Demo: Variable Fonts
개인을 위한 접근성 디자인
디자인에 대한 개인화된 접근 방식을 가능하게 했습니다.
색상 추출 알고리즘을 사용하여 사용자의 배경화면에서 개별화된 색상 팔레트를 추출하고 색 구성표를 구축하고 사용자의 기기와 동적 색상을 허용하는 모든 앱에 적용됩니다.
시스템과 구성 요소 라이브러리를 사용하여 접근성과 사용성을 유지하면서 배경화면을 기반으로 생성된 고유한 구성표의 동적 특성을 도입하였습니다.
Codelab: Designing with accessible colors
태블릿 화면을 위한 앱 설계
우리는 항상 새로운 장비가 온다는 것을 알고 있습니다. 새로운 폼 팩터에 최적화하는 것은 단순히 화면을 채우는 것이 아닙니다. 요소와 기능을 응용 프로그램 기능에서 적극적이고 조화롭게 잘 배치해야 합니다.
태블릿 화면의 경우, 더 깊은 수준의 상호작용을 하고, 더 긴 사용시간을 통해 더 높은 기기 지출을 표시하는데 모바일 화면에 비해 아직 최적화되지 않았습니다.
애플리케이션 레이아웃 전에, 기기 및 사용자 기대치에 대해 기본을 고려해주세요. 우리는 인체공학 및 접근성을 고려해야 합니다. 응용 프로그램을 구성할 때 장치를 잡고 있는 손의 위치의 변화를 알고 있어야합니다. 일반적으로 사람들이 태블릿을 잡을 때는 양손으로 사용하기 때문에 중요한 작업을 화면 중앙에 넣으면 안 됩니다.
태블릿에서 사용자는 종종 더 많은 콘텐츠를 긴 시간동안 봅니다. 이것은 편안하고 몰입감 있는 경험을 제공하는 것을 고려할 수 있습니다.
다음은 태블릿 화면을 위한 앱 설계의 4가지 기본 원칙입니다.
- Comfort(편안함)
- Capability(능력)
- Efficiency(효율성)
-
Immersion(활력)
항상 사용자의 접근성을 최우선으로 고려해야 합니다.
이번 머티리얼 디자인 업데이트는 혁신이라는 단어가 아주 잘 어울립니다. 사용자 접근성 및 최적화뿐만 아니라 디자이너와 개발자의 고민까지 같이 덜어주었습니다. 이번 업데이트에 추가된 기능들을 사용해 볼 수 있다는 생각에 기대가 됩니다.