작성일: 2024-04-15
# 머티리얼 디자인 시스템 분석 회고
– **목적:** 회사 프로젝트의 디자인 시스템 구축을 위한 리서치
– **내용:** 구글 머티리얼 디자인 시스템을 참고하여 작업한 일에 대한 회고
—
2024년 봄, 내가 근무하는 회사에서 이전에 개발된 혹은 개발 예정인 제품들에게 통일된 UX/UI 디자인을 만들어가자는 분위기가 만들어 지고 있었다. 나는 회사의 유일한 UX/UI 디자이너였기 때문에 자연스럽게 그 요구를 충족하기 위한 디자인 시스템 구축(이하 BDS)을 떠올렸고, 가장 먼저 해야되는 일이 ‘잘 만들어진 디자인 시스템’을 뜯어보는 것이었다. 디자인 시스템은 구글 머티리얼 디자인 뿐만 아니라 휴먼 디자인, 카본 디자인, 앤트 디자인 등 많지만 함께 일하는 개발자들에게 익숙한 구글 머티리얼 디자인 시스템을 중점으로 접근해보기로 했다.
당시 서비스하던 머티리얼 디자인 시스템은 버전 3이며, 추구하는 특징은 다음과 같다.
- 역동적인 색상, 향상된 접근성, 대화면 레이아웃, 디자인 토큰을 위한 베이스
- 미니멀한 디자인으로 UX를 풀어갈 수 있는 시스템
- 불필요한 인지가 없는 매끄러운 인터페이스
- 제품의 방대한 Scope
- 3가지 파트: Foundations, Styles, Components
## 1. 레이아웃
**그리드 기준은 8pt:** 많이 사용되고 있는 화면들의 대부분은 짝수인 8로 나눌 수 있고, 8pt가 10pt보다 많은 선택지를 제공한다
앱은 레이아웃 그리드보다는 여러 디바이스의 크기에 대응할 수 있는 canonical layout으로 시작해볼 것(https://m3.material.io/foundations/layout/canonical-layouts/overview)
창 크기의 조정(Adjusting window sizes): 기본은 50대 50으로 나란히. 1:3 또는 2:3 비율로 조정한다. 이 비율은 기본-보조 관계를 제공하고 더 큰 유연성을 제공하며 하나의 앱에 집중할 수 있도록 한다.
- 레이아웃이 2→1 이나 1→2 으로 transition할 때 엘리먼트들을 이동해서는 안된다(https://m3.material.io/foundations/layout/understanding-layout/parts-of-layout#b863eaa2-9bd0-4f60-a372-1b54b11cfa22)
- 팬에 있는 콘텐츠는 여러 열로 표시하여 내용을 분할 및 정렬 할 수 있다. 열은 팬 안에서만 이루어지며 Window에서는 사용하지 않는다.
## 2. Color
구글 머티리얼 디자인의 컬러 시스템에 대한 내용이다. 최근 이런 디자인 시스템의 대부분은 ‘디자인 토큰’이라는 방식을 사용한다.
- 하드코드 값 대신 설계된 토큰을 사용하고, 토큰에는 색상, 글꼴, 치수 값이 포함되어 있다.(토큰 테이블에서 알 수 있는 것: 컴포넌트의 상태, 적용된 구성 요소, 스타일 특성, 토큰의 역할, 토큰의 값)
- 토큰의 이름은 사용 되는 방법 또는 사용 위치로 정해진다.( https://m3.material.io/foundations/design-tokens/how-to-read-tokens#98e82e98-5ecd-4c5d-a03a-7d4cc5d55c20 )
- 컬러 토큰은 정적인 16진수 값(Hex)보다 자체 이름으로 정보를 담는다.
- 토큰은 스타일의 선택과 변화를 기록하여 추적할 수 있는 저장소를 제공한다.
- M3 색상 시스템 구성: Color relationships, 컴포넌트에 맵핑된 26개 이상의 컬러 규칙, 다크 테마 색상, Static baseline color with default colors assigned to each color role, Dynamic color features including user-generated and content-based color
### 컬러 규칙
- 기본 색상 스키마는 변하지 않는다.
- 동적 컬러 스키마는 기본 컬러의 입력 값에 따라 변한다.
- 시맨틱 컬러처럼 특정 컬러는 동적 변화로 설정할 수 없다.
### Contrast level
머티리얼 디자인은 전세계 사용자의 시력 요구사항에 맞는 대비 설정을 제공하고 있다. 크게 Standard, Medium, High가 있다. 이 시스템은 HCT(Hue, Chroma, Tone) 값을 조절하여 0~100가지 톤으로 각 색상에 대한 톤 팔레트를 생성한다. 색상 관계에 대한 정의가 알고리즘에 내장되어 있고, 이 알고리즘은 버튼에 어두운 톤을 부여하고 레이블에 밝은 색을 부여하여 색상의 대비가 3:1이 되도록 만든다.
> HCT (Hue, Chroma, Tone)으로 색상 정의: 유연하면서도 예측이 가능한 방식으로 조작 가능, 다른 색상 공간(ex: HSL, RGB)와는 달리 톤에 영향을 주지 않고 색상의 색조와 채도를 조작할 수 있다.
### Define static colors
참조 컬러를 입력하면 머티리얼이 색상표의 기존 역할과 일치하는 파생 컬러 4개를 반환한다.
ex: green → success, on success, success container, on success container
## 3. Typography
– 5가지 role(display, headline, title, body, label), 15가지 scale
– font, line-height, size, tracking, weight를 토큰으로 사용
font-weight를 조정할 때 Grade가 Weight보다 더 세분화 되어 있어 글자의 너비나 선이 끊기는 일이 없다. 라이트모드, 다크모드를 전환할 때 같은 weight 값이지만 더 무거워보이거나 더 가벼워보일 수 있기 때문에 구글 머티리얼에서는 negative grade의 사용을 고려해보라는 제안이 적혀있다.
이 외에도 Opacity, Component 등 머티리얼 디자인 시스템의 내용은 많지만 그 모든 내용을 여기에 옮겨오는 것은 무의미하다. (영어를 번역하여 의미를 해석해가며 읽는 것만 거의 3-4일이 걸렸다)
방대한 내용의 머티리얼 디자인 시스템 내용을 읽으며 내가 만들어야 하는 BDS에도 도입하고 싶은 것은 너무 많았지만 여러 현실적인 이유들로 반영하지 못한 것이 너무 많다. (Pane, 컬러 외 요소에 대한 토큰 등) 그래도 BDS에서 오른쪽에서 나타나는 부가 기능에 대한 창을 ‘Pane’ 이라고 부르게 되었다던지, 이전에 없던 컬러 토큰과 Define static color의 개념을 도입했다는 점에서 유의미한 리서치였다.