Material Design 3와 Material You: 웹·React 적용 판단 가이드

한 줄 결론

Material Design 3(M3)는 색상·타이포그래피·형상 토큰과 접근성·적응형 레이아웃 원칙을 묶은 디자인 시스템이다. Material You는 M3 안에서 개인화를 강조하는 경험이며, 대표 사례가 Android의 동적 색상이다. Android Compose에서는 M3 구현 경로가 비교적 직접적이지만, React 웹에서는 사용하는 컴포넌트 라이브러리가 M3를 어디까지 구현하는지 별도로 확인해야 한다.

Material Design 3는 무엇이 달라졌나

M3를 “보라색 버튼이 많은 Google 스타일” 정도로 이해하면 도입 판단이 어려워진다. 실무에서 먼저 봐야 할 것은 컴포넌트 모양보다 토큰 체계와 역할이다.

• 색상: 단일 브랜드 색상만 정하는 대신, 표면·강조·텍스트의 역할을 나눠 명암과 상태를 일관되게 설계한다.
• 타이포그래피: display, headline, title, body, label처럼 역할별 스케일을 두고 화면 맥락에 맞춘다.
• 형상과 고도: 모서리·표면·톤을 함께 사용해 계층과 주의를 표현한다.
• 접근성과 적응성: 기본 토큰을 그대로 쓰더라도 충분하지 않으므로, 특히 커스텀한 조합은 대비·포커스·큰 화면 레이아웃을 함께 검증한다.

Android 공식 문서는 Compose의 M3 테마를 colorScheme, typography, shapes로 구성하고, 컴포넌트가 이 값을 함께 반영한다고 설명한다. 즉 도입의 시작점은 개별 버튼 교체가 아니라 이 세 축을 제품 토큰으로 정의하는 일이다.

Material You는 M3와 어떻게 다른가

Material You는 M3의 개인화 방향을 설명하는 이름이다. Android 12 이상에서는 배경화면에서 색을 추출해 동적 색상 체계를 만들 수 있고, 사용할 수 없는 환경에서는 제품의 고정 light/dark 색상 체계로 되돌아가야 한다.

따라서 동적 색상은 브랜드 색을 포기하라는 지침이 아니다. 제품의 핵심 행동, 위험 상태, 법적 고지처럼 색의 의미가 고정되어야 하는 곳은 역할과 대비를 명확히 정의하고, 개인화는 읽기 경험을 해치지 않는 범위에서 적용하는 편이 안전하다.

플랫폼별 도입 판단

Android와 Jetpack Compose

Compose를 사용하는 Android 제품은 MaterialTheme의 색상·타이포그래피·형상을 먼저 정하고, 필요한 경우 Android 12 이상에서만 동적 색상을 적용하는 방식이 자연스럽다. 실험 API는 별도 opt-in이 필요하므로 제품 전체의 기반 토큰과 실험 컴포넌트를 같은 위험도로 취급하지 않는 것이 좋다.

웹과 React

웹에서는 “M3를 쓴다”가 곧 특정 라이브러리를 설치한다는 뜻이 아니다. 다음 선택지는 성격이 다르다.

• Material Web: @material/web은 M3를 사용하는 웹 컴포넌트 라이브러리다. 다만 공식 저장소는 새 유지관리자를 찾는 동안 유지보수 모드라고 안내한다. 새 의존성으로 고를 때는 장기 유지보수, React의 custom element 통합, SSR과 이벤트 처리를 작은 화면에서 먼저 검증한다.
• Material UI(MUI): MUI는 React 컴포넌트 라이브러리이며 공식 개요에서 Material Design 2를 지원한다고 설명한다. 이미 MUI를 쓰고 있다면 전면 교체보다 테마 토큰, 색 대비, 핵심 컴포넌트의 시각·상호작용 요구를 목록화해 M3 요구사항을 개별적으로 충족시키는 쪽이 현실적이다.

MUI의 createTheme과 CSS theme variables는 제품 토큰을 적용하는 데 유용하다. 하지만 CSS 변수를 켠다고 자동으로 M3가 되는 것은 아니다. 디자인 토큰의 이름과 역할, 컴포넌트 상태, 접근성 검증을 팀의 디자인 시스템에서 명시해야 한다.

React 팀을 위한 5단계 체크리스트

1. 목표를 분리한다. 브랜드 일관성, Android와의 시각적 정합성, 동적 색상, 접근성 중 무엇을 해결하려는지 한 문장으로 적는다.
2. 토큰부터 만든다. primary 같은 색 이름만 나열하지 말고 surface/on-surface, 강조 수준, 상태, 타이포그래피 역할, 모서리 규칙을 정한다.
3. 대표 흐름을 먼저 만든다. 로그인·검색·결제처럼 사용 빈도와 위험도가 높은 한 흐름에 버튼, 입력, 오류, 다크 모드를 적용한다.
4. 접근성을 측정한다. 커스텀 색 조합마다 대비를 확인하고, 키보드 포커스·스크린리더 이름·오류 설명을 실제 사용자 흐름에서 점검한다.
5. 라이브러리 교체는 마지막에 판단한다. 현재 컴포넌트의 접근성·번들·SSR 문제가 해결되지 않는다면 라이브러리를 바꿔도 디자인 시스템 문제는 남는다.

흔한 오해

M3를 도입하면 모든 화면이 Google 앱처럼 보여야 하나요?

아니다. M3의 목적은 동일한 컴포넌트를 복제하는 데 있지 않다. 토큰과 역할을 일관되게 쓰면서 제품의 브랜드와 사용자 맥락을 표현하는 데 있다. M3의 기본값을 그대로 사용하기보다, 브랜드 토큰을 만들고 그 토큰이 접근성과 상태 표현을 지키는지 확인하는 편이 중요하다.

동적 색상은 웹에서도 기본으로 켜야 하나요?

아니다. Android 동적 색상은 지원 플랫폼의 개인화 기능이다. 웹에서는 브라우저·운영체제별 동작과 브랜드 제어 범위를 고려해야 하므로, 먼저 light/dark 체계와 대비를 안정화한 뒤 개인화가 실제 사용성을 높이는 경우에만 실험하는 것이 낫다.

공식 참고 자료

• Material Design 3 가이드
• Android Developers: Material Design 3 in Compose
• Material Web 저장소와 유지보수 안내
• MUI 개요
• MUI 테마와 CSS theme variables