Material Design 3

💛 Google Material Design 이란?

Google에서 공식적으로 제공하는 Web, Android, iOS, Flutter 등을 대상으로 하는 디자인 라이브러리

Material 3 Color System 구성

💛 Dynamic Color

• 이미지에서 색을 분석해 하나의 Source Color가 만들어짐
• Source Color를 바탕으로 색상, 채도, 명도가 조절되어 각각 목적에 맞게 5가지의 Key Color 생성
• Key Color에서 가장 어두운 색부터 밝은 색까지 13단계로 확장되어 Tonal Palette 생성
• 디자인은 Tonal Palette를 통해 파생되는 Color Role의 묶음인 Color Scheme을 통해 하게 됨

💛 Color Scheme

• Materail 3에서는 목적에 맞게 색상을 사용하기 위함으로 총 24개의 Color Scheme을 제공
• Color Scheme 쓰는 이유
  1. 다크모드: 다크 모드 대응을 위해 단순히 Tonal Palette에서 0부터 100까지 되어 있는 색을 뒤집는다고 해서 명확한 가독성을 보이기 어려움
  2. 목적에 따른 색 사용의 필요성: 어떤 상황에서는 어떤 색을 쓰게끔 목적에 맞는 색을 미리 정의 해두면 작업 시간과 커뮤니케이션 비용을 줄일 수 있음
• 목적에 맞는 각각의 규칙 Color Role
  • Primary
    • Accent Colr와 같은 개념으로 주요한 요소를 표현할 때 사용
  • Primary Container
    • 주요한 요소로 표시하되, 배경이 필요한 요소에 쓰임
  • Secondary
    • Primary보다 채도가 덜 강조되어 있는 모습과 같이 Primary보다 위계를 낮춰 표현하고 싶을 때 사용
  • Secondary Container
    • Primary Container와 마찬가지로 배경이 필요한 요소에서 쓰이는데, Primary 보다는 낮은 위계로 표현하려 할 때 사용
  • Tertiary
    • 색다르게 요소를 표시하려고 할 때 사용
  • Tertiary Container
    • Primary, Secondary Container와 비슷하지만 분위기를 환기해야할 때 사용
    • 예를 들어, 툴팁 메시지나 색다르게 강조가 필요한 FAB, Primary Color가 중복으로 쓰이기에는 심심한 상황에 적합
  • Background
    • 배경과 배경 위 요소로 쓰이는 Background
  • Surface
    • 색만 보면 Background와 비슷하지만, Background와는 다르게 Surface는 Elevation 층위라는 개념이 있고, Elevation이 필요한 레이어에 사용
    • Top app bar, Search bar, Dialog, Drawer, Menu
  • Surface Variant
    • 특정 요소의 배경을 조금 더 강조해야 할 때, 배경 요소에 조금 강조가 필요하면 Surface Variant를 쓰고, 요소의 색 위계를 조금 낮춰야 할 때는 On Surface Variant 사용
  • Outline
    • 사용자에게 행동을 안내하는 Button이나 Input등에 쓰임
  • Outline Variant
    • 여러 정보가 포함된 요소 등에 대비가 강하지 않게 구분을 줘야할 때 사용