구글 매터리얼 디자인 / Sytles / Color / Overview

 

색상은 스타일을 표현하고 의미를 전달하는데 사용된다.

매터리얼에서는 동적으로 색상을 적용하여 개인의 선호와 요구를 반영할 수 있도록 컬러 시스템을 체계적으로 적용하는 것을 초석으로 한다.

색상은 의미를 만들고 상태를 표현하거나 계층 구조 및 브랜드를 전달하는데 사용된다. 

• UI 테마를 실시간으로 변경할 수 있는 동적 색상 Dynamic Color
• UI 고정 디자인 토큰에 설정된 기본 컬러 시스템 Basic Color System
• 기본적으로 접근성에 부합하도록 대비값이 설정된 매터리얼 컬러 시스템 
• 제품 특성에 맞게 확장 적용할 수 있는 26가지 이상의 색상 역할 Color Roles
  

매터리얼 새소식 What's New

톤(색조) 기반 배색 Tone-based surface colors

톤 기반 배색은 이전에 사용하던 +1부터 +5까지의 단계적 계층 구분에 의한 표면 표현 방식을 대체한다. 새로운 방식에서는 계층의 단계와 관계 없이 색상의 기능을 보다 유연하게 지원한다. 업데이트된 내용은 아래와 같다. (+ 한 때 구글에서 심도를 나누어서 깊이감을 주도록 화면 구성을 했었던 적이 있었던 것 같은데, 다시 톤 기반으로 변경된 상태인가 봄)

• 기본인 밝은 테마의 배색에는 톤 99부터 톤 98까지의 색상을 사용한다.
• 저채도 톤 팔레트의 채도는 4에서 6으로 높게 변경한다. (색채학에서는 Neutral Color를 무채색으로 규정하지만, 맥락상 구글 매터리얼에서 의미하는 Neutral Color는 기조색의 채도를 아주 낮춰 만든 보조색으로 다양한 역할을 함, 채도를 아예 없애 버리고 회색으로 대체 사용해도 되지만 UI 시스템의 색상표현을 풍부하게 하기 위해 저채도의 중립적인 색상을 사용하는 것이라 Neutral Color로 표기하는 것으로 유추됨, 이하 저채도 톤 또는 중립 저채도 톤 색상으로 표기할 예정)
• 어두운 테마에서의 표면 색상은 아주 약간 더 어둡게 조정되었다.  

유연하게 추가해 사용할 수 있는 강조색들 Additional accent colors

컬러 시스템 구성표에 설정된 강조색들을 사용하여 조금 더 유연하고 선택적인 배색이 가능하다. 특히 주조색과 보조색 및 제 3의 강조 그룹 색상 세트는 밝은 테마와 어두운 테마에서 모두 동일한 느낌을 유지하도록 설정되었다.

개인적으로는 이 부분이 십 수 년 간 디자인 작업을 하면서 해왔던 배색 계획의 근간에 대한 인지지도를 다시 바꿔야 하는 순간이었는데, 그동안 시스템 UI 컬러 팔레트를 설정하면서 주조색과 보조색의 구분이 석연치 않다고 느껴왔던 부분이 약간 해소되는 느낌도 있었다. 브랜드 컬러를 늘 주조색으로 설정하지만 화면 전체 면적에서 사용되기 보다는 강조되는 부분에 부분 적용해야 깔끔하게 떨어지는 경우가 많고, 주조색이라고 해서 이쪽 저쪽 무분별하게 사용하면 전체 UI가 산만해지는 느낌이 많았다. 이제 가이드부터 컬러 설정까지 새로 해야 할 때가 왔다. 

동적으로 적용하는 색상 Dynamic Color

동적 색상은 시스템 UI 및 어플리케이션 내에서의 경험은 일관성을 유지하면서 가변적으로 색상을 다시 매핑하는 기능을 뜻한다. (사실 역동적 분위기의 배색을 뜻하는 줄 알았지만 다른 의미에서의 역동성이었다.) 컬러 시스템을 사용하게 되면 어플리케이션 내에서 배경의 선택적 적용 또는 음악 및 비디오의 썸네일 아트 등 어플리케이션 내부 콘텐츠 등의 색상을 사용자 선호에 따라 동적으로 반응하게 만들 수 있다. 

토큰 디자인과 색상 역할 Design tokens & color roles 

토큰을 디자인하는 것은 디자이너가 고정적인 색상 값을 일일이 적용하는 것이 아니라, UI 내 요소(컴포넌트)의 역할에 따른 색상 역할을 부여해 두는 것으로 제품 전반에 걸쳐 유연성과 일관성을 유지할 수 있다.

새 제품 개발하면서 테마를 네 가지나 만들고, 테마에 따라 각각의 컴포넌트의 상태 설정을 디테일하게 별도로 조정해 보았는데 너무 힘들었다. 두 개의 테마로 좁혀서 작업하는 방향으로 재설정해야 할 것 같기는 한데, 시안 디자인에서의 Look & Feel의 다양한 제시는 무시해도 되겠나 싶기도 하다.

UI 요소들은 그 요소의 역할에 따라 입력할 때인지, 입력을 할 수 없을 때인지, 필수 요소인지, 수정 가능한지 등 상태에 따라 표현이 달라져야 하는데 그런 상황을 설계해 지정하는 것을 토큰 디자인으로 정의하고 있는 것 같고, 해당 상황이 특정 색상에만 국한되는 것이라 색상을 부여한 요소의 역할 상태에 따라 색상의 명도 및 채도 값이 유기적으로 변경되어 Hue에 해당하는 색상값을 어떤 것으로 변경하더라도 동일한 역할의 표현이 가능하도록 만드는 과정으로 보인다.  

컴포넌트의 상태에 따른 색상 값의 변형도 토큰 디자인이라고 생각했는데, 얼핏 살펴 보기로는 기본 토큰 목록은 많지 않고 전체 화면에서의 구조 정리에 필요한 부분들만 해당하는 것 같다. 각각의 컴포넌트 상태 설정은 컴포넌트 별로 별도 설정되어 있다. 컴포넌트까지 들여다 보려면 아직 한참 멀었다. 

토큰은 요소의 역할과 역할 사이에 할당된 색상 값 사이를 이어주는 역할을 한다. 토큰의 추가로 요소의 관계를 설계하는 것이 특정 색상을 직접 선택해 적용하는 것보다 더 기초적으로 선행되어야 할 부분이다. 

접근성 Accessibility

동적 컬러 시스템은 색상의 대비에 대해 기본적으로 접근성 표준을 충족하도록 설계되어 있다. 톤(색조) 팔레트 시스템은 기본적으로 모든 색상의 체계를 만들어내는 핵심이다. 동적 컬러 시스템 구성표에서는 배색된 색상 간의 거리를 기준으로 유기적으로 연결되어 구성되어 있으므로 색상이 변경되는데 구애받지 않고 색상 대비에 대한 요구사항을 충족시켜 준다. 

톤 팔레트 시스템은 이미 설정된 값이 있어 살펴 보니 백색 값과 흑색 값의 변화량에 국한되어 있지 않았고, 채도 값의 변화도 포함되어 있었다. SASS에서 작성할 때 Lighten / Darken 등 HSL 컬러값의 자동 조정으로 유사한 팔레트가 만들어질 지 궁금하다. 

CSS에 변수를 설정해서 색상을 넣을 요량으로 SASS로 작성하기 시작했는데 Lighten / Darken만 사용해서 색을 변화시키는 데에는 한계가 있어서 White / Black의 양을 추가하는 방법도 병행해서 사용중이었으나, 그 또한 전체적으로 손 볼 때가 왔다.

전체 팔레트 색상 설정 값의 범위가 전보다 늘어난 것이라고 생각하면 괜찮을까?

이 부분에서도 확신이 없어서 색상 팔레트를 일단 최소로 잡아 설정해 두었던 것이니 조금 더 촘촘하고 범위가 넓은 팔레트를 만든다고 생각해 보자. 일은 대체 언제 끝날지 모르겠다. 

2023.08.30 - [WORKING] - 구글 매터리얼 디자인 / Overview