brunch

You can make anything
by writing

C.S.Lewis

by Wanted Creative and Design Dec 13. 2022

Material 3 컬러 시스템 살펴보기 - 1

머터리얼 3 다이나믹 컬러는 무엇인가?

안녕하세요. 원티드랩 디자인플랫폼팀 길형진입니다.

디자인플랫폼팀에서는 ‘디자인 퀄리티와 속도를 혁신한다’ 라는 미션 아래 원티드랩에서 사용하고 있는 디자인 요소들을 기초적인 것부터 하나씩 살펴보며 개선하고 있습니다. 그중에서 원티드랩에서 사용 중인 컬러 스타일에 대한 개선 방향을 살펴보면서, 대표적인 디자인 시스템 중 최근 Google에서 발표한 Material 3 Dynamic Color가 무엇이고, 컬러 시스템이 어떻게 구성되었고, 어떤 상황에서 쓰는지, 또 현업에서는 어떻게 바라보는지를 정리한 내용을 공유해보려고 합니다. 왜 브런치에 올리냐고요? 자세히 조사해 쉽게 올린 데가 없더라고요. 그럼 시작해봅시다!

개념

Dynamic Color가 뭔가요?

앱에서 색이 다이나믹하게... 바뀐다고...?

2021년 Google은 2014년에 발표한 Material Design을 지속적으로 개선하면서 대혼돈의 시기를 보낸 Android 환경을 어느정도 공통되게 정리하는 데 성공했습니다. 그렇게 기존 Material Design에서 천편일률적으로 되어버린 사용자 환경을 보다 인간적으로 보일 수 있도록 새로운 디자인 원칙—comfortable(편안함), iconoclastic(상징적인), spirited(생기 있는)—을 소개하고, 이를 다양한 방면으로 적용한 Material 3을 발표했습니다. 그중에서 가장 먼저 소개한 기능이 Dynamic Color인데요, 애플리케이션이 Dynamic Color를 지원하면 사용자는 자신의 배경화면 색이 앱에 쓰이는 색에 자연스럽게 입혀져 자신의 개성에 맞게 애플리케이션을 이용할 수 있는 기능이 Dynamic Color입니다.

각자 개성에 맞게 앱 환경을 보여준다는 건 참 매력적으로 보입니다. 그렇다면 Google이 Dynamic Color를 주요하게 안내하고 있는 만큼, Material에서 안내하는 Dynamic Color는 사용자 배경화면에 맞는 색을 도대체 어떻게 골라내고, 다양한 위계로 있는 색을 어떤 방식으로 제품 단계에 적용하는지 알아봅시다.

Material 3 Color System 구성

사용자 배경화면에 맞는 색을 앱에서 쓰는 다양한 위계에 대응해야 한다면 참 복잡하겠죠? 정말 그렇습니다. 어떤 방식으로 콘텐츠 이미지에서 색을 추출해낸 뒤 Dynamic Color로 적용되는지 이미지로 보겠습니다.

Material 3 컬러 유틸리티가 알아서 Tonal Palettes를 만들어줍니다.

먼저, 이미지에서 색을 분석해 하나의 Source Color가 만들어집니다. 그리고 이 Source Color를 바탕으로 색상, 채도, 명도가 조절되어 각각 목적에 맞게 5가지의 Key Color가 만들어집니다. 그 다음으로 각각의 Key Color에서 가장 어두운 색부터 밝은 색까지 13단계로 확장되어 Tonal Palette가 만들어지는데요, 이것이 바로 여러분이 Dynamic Color를 대응하고자 할 때 다양한 범위에서 쓰게 될 색입니다.

그렇다면 이제 이 Tonal Pallette에 있는 색을 써서 디자인을 꾸리면 되는 걸까요? 슬프게도 세상은 호락호락하지 않죠. Tonal Palette 대신 Tonal Palette에 있는 색을 참조하는 Color Role을 사용해야 하는데요, 아직 절망하지 않으셔도 괜찮습니다. 제가 이미지로 이해하기 쉽게 만들어보았으니, 정신을 다시 가다듬고 Tonal Palette를 통해 파생되는 Color Role의 묶음인, Color Scheme을 알아봅시다.

Dynamic Color의 핵심, Color Scheme

각 색이 어떨 때 쓰이는지 빠르게 이해할 수 있도록, 색이 쓰이는 예시를 붙여두었습니다.

Material 3에서는 목적에 맞게 색을 분명히 사용할 수 있도록 총 24개의 Color Scheme을 제공합니다. 잠깐 생각해보면 Tonal Palette를 통해 바로 색을 사용하면 될 것 같은데, 왜 Color Scheme가 필요할까요?

첫 번째 이유로는 다크 모드에 있습니다. 다크 모드 대응을 위해 단순히 Tonal Palette에서 0부터 100까지 되어 있는 색을 뒤집는다고 라이트 모드 때와 같이 명확한 가독성을 보이기 어렵기 때문입니다.

그리고 가장 중요한 두 번째 이유가 있습니다. 목적에 따른 색 사용이 필요하기 때문입니다. 어떤 상황에서는 어떤 색을 쓰면 되게끔 목적에 맞는 색을 미리 정의해두면 작업 시간과 커뮤니케이션 비용을 줄일 수 있겠죠.

그런데 그렇다고 Material 3의 Color Scheme는 목적에 따라 분명히 구분되고 있냐 하면 그건 또 아닙니다. 대체 Primary는 어떨 때 쓰이고, Secondary는 어떨 때 쓰이고, 그리고 Tertiary는 또 뭔지 실질적인 사용 예시를 보지 않고는 이해하기 어렵죠. 또 위 이미지에서 보시는 것처럼 Material 3에서 안내하는 Color Scheme가 모두 공통적인 규칙을 가지지도 않고요. 하지만 구글은 다 계획이 있습니다. 그 계획을 알기 위해 우리는 기세를 잡아 복잡한 Material 3 Dynamic Color를 치고 나가보는 것입니다.

적용

이제 Material 3 컬러 시스템의 개념과 Tonal Palette, 그리고 Color Scheme을 알아보았으니, Color Scheme에서 안내하는 Primary, Secondary 등의 규칙이 어떤 상황에서 쓰이는지를 다음으로 알아볼 수 있게 되었습니다. 이제 이 아티클의 꽃이자 핵심인 Color Scheme에서 안내하는 각각의 규칙인 Color Role이 어떨 때 쓰일 수 있는지, 또 현업에서는 어떻게 바라보는지를 다음 아티클에서 알아보겠습니다.