Material 3 컬러 시스템 살펴보기 - 2
현업에서 보는 머터리얼 3 컬러 시스템
안녕하세요. 원티드랩 디자인플랫폼팀 길형진입니다.
이전 아티클에서는 Material 3에서 주요한 기능인 Dynamic Color가 어떻게 구성되어 있는지를 알아보습니다. 이번 아티클에서는 Dynamic Color로 구성된 Color Scheme가 어떤 상황에서 쓰이는지, 그리고 현업에서 본 다이나믹 컬러는 어떠한지를 주제로 이야기를 진행해보겠습니다. 혹시나 Material 3 컬러 시스템이 어떻게 작동하는지 보지 않으셨다면, 바로 읽고 오시죠!
이전화 보러가기 →
…Figma에서 Material 3 컬러 시스템을 써보고 싶어요
진행하기에 앞서서 Figma로 Material 3 컬러 시스템을 직접 써보고 싶으실텐데요, Google이 Figma에서도 쉽게 Material 3 컬러 시스템을 사용할 수 있도록 Material Theme Builder라는 플러그인을 제공한답니다. 아래 URL에서 설치해 사용해보세요.
Figma에서 Material Theme Builder 플러그인 설치하기
적용
앞서 말씀드렸듯 Material 3에서 Color Scheme의 쓰임새는 그리 간단하게 구분되어 있지 않습니다. 때문에 Color Scheme에서 안내하는 각각의 Role이 어떨 때 쓰이는지 이미지와 함께 알아보겠습니다.
Primary
우리가 아는 강조 색Primary는 Apple Human Interface Guidelines에서 쓰이는 Accent Color와 같은 개념입니다. 주요한 요소를 표현할 때 쓰입니다.
Primary Container
배경이 필요할 때
Primary Container는 주요한 요소로 표시하되, 배경이 필요한 요소에서 쓰입니다.
Secondary
잘 안 쓰입니다Secondary는 Apple Human Interface Guidelines에서는 없는 개념인데요, Primary보다 채도가 덜 강조되어 있는 모습과 같이 Primary보다 위계를 낮춰 표현하고 싶을 때 사용합니다. 사실 Material 3 Color System에서는 이 Secondary가 거의 쓰이지 않고, 대신 바로 아래에 있는 Secondary Container가 Secondary 역할로 주로 쓰입니다.
Secondary Container
Primary만큼 중요하지 않을 때Secondary Container도 Primary Container와 마찬가지로 배경이 필요한 요소에서 쓰이는데요, Primary보다는 낮은 위계로 표현하려 할 때 사용합니다.
Tertiary
이것도 잘 안 쓰이죠Tertiary는 색다르게 요소를 표시하려고 할 때 쓰입니다. 그러나 Secondary와 마찬가지로 Tertiary Container가 아닌 Tertiary는 주로 쓰이지 않습니다.
Tertiary Container
환기가 필요할 때Tertiary Container는 Primary Container, 그리고 Secondary Container와 비슷하지만 분위기를 환기해야 할 때 쓰입니다. 예를 들면 툴팁 메시지나 색다르게 강조가 필요한 FAB, Primary Container가 중복으로 쓰이기에는 심심한 상황에 적합합니다.
Background
더도 않고 덜도 않는배경과 배경 위 요소 색으로 쓰이는 Background입니다. 간단하죠?
Surface
일반에서 층위를 줄 때Surface는 색만 보면 Background와 다를 게 없는 듯하나 Background와는 다르게 Surface는 Elevation—층위라는 개념이 있고, Elevation이 필요한 레이어에 쓰인다는 점에서 차이가 있습니다. Top app bar, Search bar, Dialog, Drawer, Menu 같은 요소가 그 예인데요, 상황별로 권장하는 Elevation을 안내하는 가이드라인은 있으나, 실제 제품 레벨에서는 상황에 맞게 보다 유연하게 쓰이는 점을 참고하시면 좋겠습니다.
Surface Variant
강조는 필요한데, 강조는 필요하지 않을 때Surface Variant는 특정 요소의 배경을 조금 더 강조해야 할 때, 또는 Apple Human Interface Guidelines에서 Secondary Label과 같이 덜 중요한 상황으로 정보를 표시하고자 할 때 쓰입니다. 배경 요소에 조금 강조가 필요하면 Surface Variant를 쓰고, 요소의 색 위계를 조금 낮춰야 할 때는 On Surface Variant를 쓰는 식입니다.
Outline
강조되었으나 일반적인 선Outline은 사용자에게 행동을 안내하는 Button이나 Input 등에 쓰입니다. 이 Outline 색보다 옅게 선을 써야 하는 경우도 있을텐데요, 바로 다음에 대안이 있으니 계속 읽어봅시다.
Outline Variant
우리에게 익숙하지만 신중해야 하는 선Outline Variant는 여러 정보가 포함된 요소 등에 대비가 강하지 않게 구분을 줘야할 때 쓰입니다. 다만 재밌게도 Figma 플러그인으로 제공하는 Material Theme Builder에는 Outline Variant가 포함되어 있지 않아 디자인에서 필요할 경우 직접 추가해 사용해야 하는 점을 참고하시면 좋겠습니다.
현업에서의 고찰
여기까지 Material 3에서 쓰이는 다양한 Color Role들을 알아보았습니다. 이제 Material 3에서 컬러 시스템이 어떻게 돌아가는지 이해했으니, 우리는 Material 3 컬러 시스템을 지원하는 안드로이드 환경에서 명쾌하게 시스템 색을 쓸 수 있게 되었습니다. 뿐만 아니라 Material 3에서 중요시하는 생기를 위해 필요한 다이나믹 컬러를 적용할 수도 있게 되었습니다.
그렇다면 현업에서 바라보는 Material 3 컬러 시스템은 어떨까요? Material 3이 공개된지 오랜 시간이 지나지 않아 우리 곁에서 아직 보기 어려운 것도 있으나, 아직까지 현업에서는 선뜻 Material 3 컬러 시스템 개념을 도입하려는 바람이 이는 듯하지 않습니다.
난해하다
우선 어렵습니다. 텍스트 위계를 한 단계 낮추고자 할 때 iOS에서는 Label 색에서 Primary, Secondary, Tertiary, Quaternary와 같이 구성된 위계에서 한 단계만 아래로 낮춰 쓰면 되지만, Material 3에서는 On Background를 쓰든, On Surface를 쓰든, 또는 무엇이든 On Surface Variant를 사용해야 합니다. 또한 Material 3에서는 비활성화된 상태에서 쓰는 색이 없어 이러한 상황에서는 Opacity를 써야 하죠. 이렇듯 디자이너가 이러한 개념들을 온전히 이해하기에는 많은 시간이 필요하기 때문에, 효율적인 목적으로 시작된 디자인 시스템 구성에서 Material 3으로 인한 관리 비용이 상당해 도입에 어려움이 있습니다.
Dynamic Color로는 서비스 정체성을 표현하기 어렵다
또한 일반 서비스에서 Dynamic Color를 활용하기에도 여러가지 어려움이 따릅니다. 우리가 알고 있는 서비스 대부분은 서로의 브랜드 정체성을 표현하기 위해 브랜드 고유의 색을 제품에 입히지만, 다이나믹 컬러를 적용했을 때에는 사용자 환경에 맞게 색이 바뀌기 때문에 정체성을 표현할 수 있는 방법에 제한이 생깁니다. 효율성과 브랜드 정체성을 모두 잡고자 디자인 시스템을 택하지만, 가장 중요한 이점을 하나 잃게 되는 셈입니다. 물론 다이나믹 컬러를 적용하지 않고도 Material 3 컬러 시스템을 사용할 수 있으나, 앞서 이야기한 이해 난이도와 실제 효율성에 있어서도 큰 이점이 있지는 않습니다.
덜 완성되었다
재밌게도 이렇게 잘 만들어진 Material 3 컬러 시스템을 지금은 100% 활용할 수 없습니다. 디자인과 개발에서 사용할 수 있는 컬러 시스템의 가짓수에 차이가 있기 때문입니다. Figma 플러그인으로 제공하는 Material Theme Builder에서는 Material 3 컬러 시스템을 생성할 때 옅은 Outline 색인 Outline Variant는 생성하지 않아서, 이를 쓰려면 디자이너가 직접 Color Style을 만들어 써야 합니다. 또한 개발에서는 Color Scheme를 모두 쓸 수 있지만, Color Scheme 전 단계인 Tonal Palettes를 쓸 수 있는 방법이 없습니다. 만약 디자이너가 Material 3 컬러 시스템을 믿고 Tonal Palettes까지 썼다면, 개발에선 쓰지 못해 디자이너나 개발자 누군가가 이런 수고로움을 해결해야 하는 것이죠. 이런 이유 때문에 Material 3 컬러 시스템을 꼼꼼히 파헤칠 수 있는 사람이 아니고서야 이런 점을 알고 컬러 시스템을 잘 활용하기는 어렵습니다. 물론 이 부분은 차차 Google이 해결해나갈 수 있겠지만, 지금으로선 Material 3 컬러 시스템을 온전히 쓰기에 우리에게 어느정도 시간이 필요해 보입니다.
원티드에서는 어떻게 하나?
그렇다고 우리는 각 플랫폼 환경에 자연스럽지 않은 사용자 환경을 만들어서는 안 됩니다. 서비스는 언제나 플랫폼 아래에 있기 때문이죠. 그렇기에 원티드랩에서는 각 플랫폼마다 가장 자연스러운 사용자 환경을 제공하기 위해 각 플랫폼에서 권장하는 디자인 가이드라인을 면밀히 살펴보며 사용자와 서비스 모두가 조화로울 수 있는 방법들을 고민하고 있습니다. 이러한 예시로 원티드랩 디자인플랫폼팀에서는 구성원이 제품을 디자인할 때 macOS, 그리고 iOS와 Android 환경을 또렷이 구성할 수 있도록 Platform Library라는 디자인 라이브러리를 관리하면서, 디자이너가 직접 각 플랫폼의 타이포그래피와 컬러 시스템, 그리고 컴포넌트를 살펴보며 플랫폼에 적합한 사용자 환경을 구성할 수 있도록 지원하고 있습니다.
또한 원티드랩에서는 원티드 서비스를 이용할 수 있는 플랫폼인 iOS와 Android, 그리고 Windows와 macOS와 같은 다양한 범위의 사용자 환경을 보다 유연하고 편리하게 구성할 수 있도록 모든 플랫폼을 아우르며 사용할 수 있게 구성한 자체 디자인 시스템을 운용하고 있습니다. 디자인 시스템에서는 효율성이 중요하나, 앞서 이야기한 것처럼 서비스는 플랫폼과 떨어질 수 없기 때문에, 원티드랩 디자인플랫폼팀에서는 각 플랫폼에서 사용하는 디자인 시스템의 특장점을 지속적으로 연구해 제품 제작 속도와 퀄리티를 모두 잡을 수 있도록 신경쓰고 있습니다.
그래서 낭만이 있다
Material 3 컬러 시스템을 서비스에 자연스럽게 녹이기는 쉽지 않은 여정입니다. 그러나 디자인 시스템에는 정답이 없죠. 우리 각자가 새기고 있는 목적이 모두 다른 것처럼, 디자인 시스템 또한 저마다의 방향이 있는 것입니다. 마찬가지로 Material 3 컬러 시스템도 계산적이고 경직된 비즈니스로부터 인간성을 되찾기 위한 하나의 큰 방향이 아닐까 합니다. 이 글을 보시며 이러한 방향에 어느정도 마음이 가신다면 아래 URL에서 보다 자세히 Material 3 컬러 시스템에 대해 살펴보시는 것을 추천합니다.
https://m3.material.io/styles/color/the-color-system
끝으로
원티드랩 디자인플랫폼팀에서 준비한 Material 3 컬러 시스템 탐구 이야기는 여기까지입니다. 이번 글로 쉽게 알기 어려운 Material 3 컬러 시스템을 깊이 보고 이해할 수 있는 시간이 되었길 바랍니다. 또한 원티드의 슬로건이 ‘나다운 일의 시작, 원티드’ 인 것처럼, 우리에게 가장 우리다운 디자인은 무엇일지 고민할 수 있는 시간이었길 바랍니다. 나다운 일을 편안히 시작할 수 있도록 여러 부분에서 힘쓸 원티드랩 디자인플랫폼팀의 활약을 기대해주시길 바라며 이만 긴 글을 마치겠습니다. 감사합니다.
글. 원티드랩 디자인플랫폼팀
