머티리얼 디자인의 확장 : Material 3 Expressive

카테고리

디자인

서브카테고리

UI 디자인

대상자

• *디자이너 및 개발자**
• 난이도: 중급 (디자인 시스템 이해 및 컴포넌트 활용 기초 필요)

핵심 요약

• Material 3 Expressive는 감성적으로 강렬한 UX 구축을 위한 새로운 디자인 전략과 15개 신규/개선 컴포넌트 추가
• 사용자 연구 결과에 따라 UI 요소 식별 속도가 최대 4배 향상
• Hero moment 생성을 위한 형태, 색상, 텍스트, 컨테이너, 모션, 유연한 컴포넌트의 통합적 결합 강조

섹션별 세부 요약

###1. 개요

• Material 3 Expressive은 기존 M3를 대체하지 않고 업데이트된 버전으로, M4가 아닌 M3의 확장
• 2014년 이후 18,000명의 사용자 참여 연구 통해 모든 연령대가 Expressive 디자인 선호
• 감정적 임팩트와 핵심 인터랙션 기준으로 Hero moment 판단

###2. 주요 업데이트

• 15개 신규/개선 컴포넌트 : Button groups, FAB menu, Loading Indicator, Split button, Toolbars 등
• 35종 이상의 새로운 도형 추가 및 애니메이션 변형 지원
• 모션-물리 시스템 : 공간/효과 스프링 기반의 강조된 타이포그래피
• 색상 확장 : 개인화 및 계층 강조를 위한 색상 범위 확대

###3. 실무 활용

• Hero moment 생성 : 형태, 색상, 텍스트, 컨테이너, 모션, 유연한 컴포넌트의 통합적 결합
• 디자인 키트 및 도구 : 업데이트된 Figma 디자인 키트, Jetpack Compose 알파 코드 제공
• 구성 요소 예시 : ButtonGroup, FABMenu, AnimatedContainer 등의 활용 권장

결론

• Hero moment를 위한 감정적 임팩트와 핵심 인터랙션 기준을 명확히 정의하고, Figma 디자인 키트와 Jetpack Compose를 활용한 실무 적용이 필수적
• 사용자 연구 결과를 반영한 UI 요소 식별 속도 향상 효과를 고려한 디자인 시스템 적용 권장