Material Design 컬러 완벽 가이드
머티리얼 디자인(Material Design)은 구글이 2014년에 발표한 디자인 시스템으로, 모바일 앱과 웹 애플리케이션의 일관된 사용자 경험을 위해 체계적인 색상 팔레트를 제공합니다. 이 도구는 19개의 컬러 패밀리(Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey)를 포함하며, 각 패밀리마다 50부터 900까지의 기본 명도 단계와 A100, A200, A400, A700의 강조(Accent) 색상을 제공합니다.
머티리얼 디자인 색상 체계는 주요 색상(Primary Color), 보조 색상(Secondary Color), 배경 색상, 표면 색상 등으로 구분하여 사용합니다. 일반적으로 500번대 색상을 주요 색상으로, 강조 색상(A200 등)을 액센트 컬러로 활용합니다. 색상의 명도 단계를 활용하면 호버 상태, 비활성 상태, 배경 등 다양한 UI 상태를 자연스럽게 표현할 수 있습니다.
앱 개발이나 웹 디자인 시 머티리얼 디자인 컬러 시스템을 활용하면 색상 선택에 대한 고민을 줄이고, 접근성이 보장된 조화로운 색상 조합을 빠르게 구성할 수 있습니다. 본 도구에서는 색상 클릭만으로 HEX 코드를 즉시 복사할 수 있으며, RGB, HSL 값도 함께 확인할 수 있어 CSS, Flutter, Android XML 등 다양한 개발 환경에서 바로 사용 가능합니다.
자주 묻는 질문 (FAQ)
Q. 머티리얼 디자인 색상에서 500은 무엇을 의미하나요?
A. 500은 각 컬러 패밀리의 기본(Base) 색상을 의미합니다. 50은 가장 밝은 색이고, 900은 가장 어두운 색입니다. 앱의 주요 색상(Primary Color)으로 보통 500번대를 사용하며, 어두운 변형이 필요할 때 700이나 800을, 밝은 변형이 필요할 때 100이나 200을 사용합니다.
Q. A100, A200 같은 Accent 색상은 언제 사용하나요?
A. Accent(강조) 색상은 플로팅 액션 버튼, 토글 스위치, 텍스트 링크 등 사용자의 주의를 끌어야 하는 인터랙티브 요소에 사용합니다. 기본 팔레트보다 채도가 높아 시각적으로 강한 인상을 줍니다. Brown, Grey, Blue Grey 패밀리에는 Accent 색상이 없습니다.
Q. 다크 모드에서 머티리얼 디자인 색상은 어떻게 사용하나요?
A. 다크 모드에서는 200번대의 밝은 색상을 주요 색상으로 사용하고, 배경은 #121212 같은 어두운 회색을 사용하는 것이 권장됩니다. 순수한 검정(#000000)보다 약간 밝은 회색을 사용하면 눈의 피로를 줄이고 가독성을 높일 수 있습니다.
Q. 색상 접근성(Accessibility)은 어떻게 확인하나요?
A. WCAG 기준으로 텍스트와 배경 간 명도 대비가 4.5:1 이상이어야 합니다. 일반적으로 밝은 배경(50~300)에는 어두운 텍스트를, 어두운 배경(600~900)에는 흰색 텍스트를 사용합니다. 본 도구에서는 각 색상의 명도에 따라 자동으로 적절한 텍스트 색상(흰색/검정)을 적용하여 보여줍니다.