Material Design 3
date
Jul 20, 2022
slug
material-design-3
status
Published
tags
Design
frontend
UIUX
mockup
목업
summary
2021 Google I/O에서 Material You를 소개했다. 핵심은 팔레트 색상을 사용자의 배경화면 기반으로 색상코드를 자유 자제로 수정할 수 있고, UI를 개인화에 맞춰서 처리했다.
type
Post
디자인 시스템
요즘 내로라하는 IT 기업들은 디자인 시스템을 필수적으로 적용한다. 적게는 버튼 디자인부터 크게는 사용자 경험 디자인을 일관성 있게 유지함으로 사용자들이 서비스를 사용할때 어색한 느낌이 들지 않기 위함이다.
예를 들어 아이폰 앱을 실행했는데 기본 앱이 위의 [사진1] 디자인처럼 나오면 애플이 디자인했다는 기분이 들지 않을 것이다. 특히 디자인 시스템을 적용한 기업 중 디자인 시스템을 본격적으로 외부에 홍보하기 시작한 것은 구글의 머티리얼 디자인이다.
머티리얼 디자인 Metrial Design이란?
구글이 2014년부터 디지털 경험을 통합시키기 위한 도구로 사용한 디자인 시스템으로 기존적으로
Paper(종이) 라는 단순한 단위를 쌓는 느낌으로 각지고 둥근 다양한 형태의 가이드라인을 세워 디자인 시스템을 구성했다.
머티리얼 디자인 초기 버전과 2(일부 개선)는 컬러 팔레트(색상 코드 모음)을 비롯해서 아이콘, 버튼 디자인 등 수많은 디자인 가이드라인을 제시하여 웹 개발자들에게 일관성 있는 웹 디자인을 요구했고, 실제로 수많은 웹사이트가 머티리얼 디자인 가이드라인을 따라 설계되었지만 이에 대해 웹 디자인의 창의적인 자율성을 제한시켰다는 일부 비판 의견도 존재한다.
Material You의 등장
2021 Google I/O에서 Material You를 소개했다. 핵심은 팔레트 색상을 사용자의 배경화면 기반으로 색상코드를 자유 자제로 수정할 수 있고, UI를 개인화에 맞춰서 처리했다.
2022년 Google I/O에서는 Material You를 포함한 개선된 디자인 가이드라인인 Material Design 3를 공개했다.
The latest version of Material Design includes personalization and accessibility features that put people at the center 머티리얼 디자인의 최신버전(3)은 사용자 중심을 위해 개인화와 접근성을 중점으로 설계되었습니다.
혹시 머티리얼 디자인 3의 변화점이 궁금한 독자들은 이 글을 추천한다.
Material Design 3 on React
머티리얼 디자인 3는 Flutter와 Android(Jetpack Compose)에 한해 디자인 가이드라인을 적용시키기 굉장히 쉽다. 하지만 Web 컴포넌트는 아직 개발중이라고 한다.
실제로 구글에서 운영하는 material-web 레포지토리 (material-component-web에서 바뀔 예정)에서 매일 커밋하여 웹 컴포넌트를 개발중이며 실제 출시는 2022년 말쯤 예정되어있다고 한다.
→ 2023년 3월 현재 알파 버전으로 1.0을 사용할 수 있다.
혹시 React를 개발하는 프론트엔드 개발자라면 MUI Design Component를 기대할 수 있는데, MUI 또한 깃허브 마일스톤으로 개발 중이지만 아직 상태가 그렇게 높지는 않다. (오늘 기준 14%…)
혹시 머티리얼 디자인 3를 지금 자신의 웹사이트에 적용시키고 싶다면 MUI v5에 Global Theme를 수정하며 컴포넌트 일부를 수정하는 것을 추천한다. MUI v5에 머티리얼 디자인 3를 적용하는 방법은 다음 글에서 상세히 설명하도록 하겠다.