[UX] 구글 머티리얼 디자인 – 3.5.머티리얼 기초(Material foundation)

머티리얼 디자인 색상체계(Material design color system)는 개발하고자 하는 앱의 브랜드와 스타일을 반영하기 위해 필요한 색상 테마(Color theme)를 결정하는데 도움을 줄 수 있습니다.

1. 색상 사용법과 팔레트 (Color usage and palettes)

머티리얼 디자인 색상체계(Material design color system)는 의미있는 방법으로 UI의 색상을 결정하는데 도움을 줍니다. 색상체계에서 업무 담당자는 앱을 대표하는 메인색상(Primary color)과 보조색상(Secondary color)을 선택하게 됩니다. 머티리얼 디자인 색상체계는 각 색상의 밝기 변화에 따른 여러가지 색상값을 제공하며, 다양한 방법으로 앱의 UI에 적용될 수 있습니다.

다시 말해, 머티리얼 디자인 색상체계에서 메인색상(Primary color)과 보조색상(Secondary color)을 고르고 나면 이 색상에 대한 어두운 색상과 밝은 색상을 알아서 제안한다는 의미입니다.

1.1. 색상과 테마(Color and theming)

색상테마는 조화롭게 디자인 되어 있고, 가독성이 높은 텍스트, UI 개별요소(Element)와 표면(Surface)들이 서로서로 구분될 수 있도록 합니다.

머티리얼 디자인 팔레트(Material Design palette tool) 도구 또는 2014 Material design palettes는 색상을 선택하는데 도움을 줄 수 있습니다.

기존엔 특정 앱의 색상값은 디자이너의 선택에 매우 의존적이었습니다. 하지만 머티리얼 디자인 색상체계는 색상의 조화 뿐만 아니라 텍스트 가독성을 위한 색상 선택과 다른 UI 요소들을 색상으로 구분짓기 위한 색상값을 여러 실험을 통해 제안하고 있습니다.

머티리얼 디자인 색상 체계 때문에 색상을 선택하는 디자이너의 역할마저 없어졌다고 생각할 수 있겠지만 접근성 등을 고려하여 더 체계적이고 더 과학적인 방법으로 앱을 디자인할 수 있다는 것을 의미하기 때문에 디자이너는 이를 잘 이해하고 업무에 활용할 수 있어야 합니다.

위 그림에서 1번 항목은 메인색상(Primary color)를 선택한 것이고, 2번 항목은 보조색상(Secondary color)를 선택한 것입니다. 3번 항목은 각 색상의 밝기에 따라 색상을 변형한 사례를 나타냅니다. 숫자값이 낮을 수록 밝은 색상을 표현한 것이고, 높을수록 어두운 색상을 표현한 것입니다.

1.2. 원칙(Principles)

색상을 선택하는 원칙은 다음의 3가지를 포함하고 있습니다.

계층적(Hierarchical) 구조를 갖는 색상은 개별요소(Element)가 상호작하는 것과 개별 요소들이 다른 요소들과 어떻게 관련되어 있는지를 색상의 밝기, 어둡기 변형에 따른 색상으로 나타냅니다. 같은 색상의 밝기만 다른 색상은 서로 연관관계에 있는 정보라는 것을 의미할 수 있어야 한다는 것입니다. 또한 중요한 요소들은 색상을 통해 앱 내에서 가장 눈에 띄어야 합니다.
가독성이 좋은(Legible) 색상은 텍스트(Text), 아이콘과 같은 중요한 개별요소(Element)는 배경색상 위에서 표현될 때, 가독성 기준에 부합할 수 있어야 합니다. 다시 말해, 주변의 색상과 텍스트, 아이콘 같은 요소들은 색상의 대비를 통해 충분히 가독성이 확보되어야 한다는 뜻입니다. 실무에서 유려한 디자인을 한다고 하면서 어두운 색상에 어두운 텍스트를 적용한 사례들을 많이 볼 수 있지만 이는 색상체계를 잘못 이해하고 있는 것입니다.
충분히 표현 가능한(Expressive) 색상은 앱에서 표현하고자 하는 브랜드 스타일을 사용자에게 각인시키기에 충분히 기억할 수 있어야 합니다. 예를 들어, 당근의 색상이 주황색이라는 것, 환경을 이야기 할 때 녹색을 기억하는 것은 이를 접하는 사용자에게 매우 직관적인 색상이 될 수 있으며, 이러한 색상값을 앱에 적용하라는 의미입니다.

2. 색상 테마 만들기 (Color theme creation)

2.1. 기본 머티리얼 색상 테마 (The baseline Material color theme)

머티리얼 디자인은 이미 정의되어 있고, 바로 사용할 수 있는 기본 색상 테마를 제공합니다. 참고로 색상 테마는 위에서 설명한 메인색상(Primary color), 보조색상(Secondary color), 각 색상들의 밝기에 따른 변형색상(Color variatns) 등을 모두 포괄하는 색상값들을 의미합니다.

색상테마는 다음의 기본 색상들을 포함합니다.

메인색상과 보조색상 (Primary and secondary colors)
메인색상과 보조색상의 밝기별 변형색상(Variants of primary and secondary colors)
UI 색상, 배경(Background) 색상, 표면(Surfaces) 색상, 오류 색상, 글자 색상, 아이콘 색상 등의 추가적인 색상

이러한 색상들은 앱 별로 수정되어 사용될 수 있습니다.

위 그림에서 1번 항목은 메인색상(Primary)을 의미하며, 2번 항목은 메인색상을 어두운 색상으로 변형한 변형색상입니다. 3번 항목은 보조색상(Secondary)을 의미하며, 4번 항목은 보조색상을 어두운 색상으로 변형한 변형색상입니다. 5번 항목은 배경 색상을 의미하며, 6번항목은 카드 등에 적용되는 표면(Surface) 색상, 7번 항목은 오류가 발생할 경우 오류를 표현하기 위한 색상으로 사용되는 색상입니다. 8번 항목은 메인색상 위에서 아이콘이나 글자 등이 표현되는 경우에 적용되는 색상(On Primary)을 의미하며, 9번 항목은 보조색상 위에서 아이콘이나 글자 등이 표현되는 경우에 적용되는 색상(On Secondary)을 의미합니다. 10번 항목은 배경 색상 위에서 아이콘이나 글자 등이 표현되는 경우에 적용되는 색상(On Background)을 의미하며, 11번 항목은 표면 위에서, 12번 항목은 오류가 출력되는 상황에서 아이콘, 글자 등이 표현되는 경우에 적용되는 색상을 의미합니다.

예를 들어, 6번 항목처럼 흰색(#FFFFFF) 배경을 갖는 표면(Surface) 요소인 카드(Cards) UI가 있다고 가정했을 때, 카드 UI 내에 텍스트가 출력이 될 경우 검정색(#000000) 색상을 사용하는 것이 기본이라는 것을 나타내는 것입니다.

2.2. 메인색상 (Primary color)

메인색상(Primary color)은 앱 화면과 구성요소(Component) 전반에 걸려 가장 흔하게 사용되는 색상을 의미합니다.

2.2.1. 밝기 정도에 따른 메인색상 변형 (Dark and light primary variants)

선택된 메인색상은 밝기 정도에 따라 어두운 색상과 밝은 색상으로 변형색상(Color variants)을 정의하여 색상 테마를 만들어 사용할 수 있습니다.

메인색상이 결정되면 이 색상의 밝기값에 따라서 변형을 할 수 있고, 이렇게 변형한 색상들을 앱 내에서 색상 테마로 정의하여 사용할 수 있다는 의미입니다.

2.2.2. UI 개별 요소 구분 (Distinguish UI elements)

휴대폰의 배터리 잔량, 통신 상태 등을 나타내는 시스템 바(System bar)로부터 앱 바(App bar)나 UI 개별 요소(Element)를 구분하기 위해 메인 색상으로부터 변형한 밝은 색상 또는 어두운 색상을 사용할 수 있습니다. 이러한 변형색상은 구성요소(Component) 내에서 개별요소(Element)를 구분하기 위해서도 사용할 수 있습니다.

예를 들어, 원형 컨테이너의 구성 요소 내에 속한 Floating action button의 개별 요소인 아이콘 등에 해당 색상 등을 사용할 수 있다는 의미입니다.

Primary color variants from a system bar

위 그림은 시스템 바(System bar)로부터 앱 바(App bar)를 구분하기 위해 앱 바에 밝기 차이에 따라 변형한 변형 색상을 적용한 것을 보여주고 있습니다. 해당 사례에서 앱 바(App bar)와 Floating action button은 메인색상(Primary color)을 사용하고 있고, 시스템 바(System bar)는 메인색상보다 어두운 밝기를 가진 색상으로 변형하여 적용한 것을 볼 수 있습니다.

위 그림은 앱 바(App bar) 내에 메인색상(Primary, #6200EE)이 적용되고, 시스템 바(System bar)와 차트에 메인색상을 어둡게 변형한 색상(Color variants, #3700B3)이 적용되고, Floating action button에 메인색상을 밝게 변형한 색상(Color variants, #BB86FC)가 적용된 사례를 나타내고 있습니다. 하나의 메인색상과 두 가지의 변형색상(Color variants)가 적용된 사례입니다.

2.3. 보조색상 (Secondary color)

보조색상(Secondary color)은 앱을 색상으로 구분하기 위한 더 다양한 방법을 제공합니다. 보조색상은 선택적으로 적용될 수 있고, UI 내에서 부분적으로 강조하기 위해서 적용될 수 있습니다. 반대로 말하면 메인색상은 반드시 설정이 되어야 하는 의미이기도 합니다.

보조색상을 앱에 적용하지 않았다면, 메인색상이 UI 개별요소(Element)에 사용될 수 있습니다. 보조색상이 사용될 수 있는 개별 요소들은 다음과 같은 것들이 있습니다. (중요)

Floating action buttons
Selection controls, like sliders and switches
Highlighting selected text
Progress bars
Links and headlines

보조색상이 아무 곳에서나 사용되는 것은 아닙니다. 작업자는 이 부분에 주의하여 보조색상 적용을 검토해야 합니다.

2.3.1. 밝기 정도에 따른 보조색상 변형 (Dark and light secondary variants)

보조색상도 메인색상처럼 밝기에 따라 색상을 변형하여 사용할 수 있습니다. 다시 말해, 메인색상과 보조색상을 앱 내에서 사용하였다면, 두 색상의 밝기에 따른 변형색상들을 적용하여 사용할 수 있다는 의미입니다.

Dark and light variants of primary and secondary colors

Color theme case of primary color, primary variant, and a secondary color

위의 예시는 메인색상(#6200EE)과 메인색상을 어둡게 적용한 변형색상(#3700B3), 보조색상(#03DAC5)가 적용된 예시입니다. 위의 설명에서 보조색상 역시 밝기를 변형하여 적용할 수 있다고 하였지만 위의 예시에서 이를 보여주고 있지는 않습니다.

2.4. 표면, 배경, 에러 색상 (Surface, background, and error colors)

표면(Surface), 배경(Background), 에러 색상(Error color)는 기본적으로 앱의 브랜드를 대표하지 않습니다. 다시 말해 앱에서 메인색상이나 보조색상으로 정의한 색상테마와는 무관하게 적용된다는 의미입니다. 표면, 배경, 에러 색상 등에 메인색상이나 보조색상이 사용되는 것은 색상을 과도하게 잘못 적용하는 사례가 될 수 있다는 것을 뜻하는 것이기도 합니다.

구글 머티리얼에서 특정 색상을 적용하는 대상(예: 구성요소(Component), 개별요소(Element))이 생각보다 자유롭지 않다는 것을 알 수 있고, 이는 강조하고자 하는 특정 대상과 다른 대상과 구분을 색상으로 하기 위해 부득이하게 제한하고 있다는 것을 이해해야 하는 부분이기도 합니다.

표면 색상(Surface color)은 카드(Cards), 시트(Sheets), 메뉴(Menus)와 같이 구성요소(Component)의 표면에 적용되는 색상입니다.
배경 색상(Background color)은 스크롤이 되는 콘텐츠의 뒤에 적용되는 색상입니다. 기본적으로 배경 색상과 표면 색상은 흰색(#FFFFFF)이 적용되어야 합니다.
에러 색상(Error color)은 텍스트 입력 시 잘못 입력한 텍스트 등과 같이 구성 요소 내에서 에러를 표시하는데 사용되는 색상입니다. 기본적으로 에러 색상은 붉은색(#B00020)이 적용되어야 합니다.

위 그림은 배경, 표면, 에러 색상에 대한 예를 나타냅니다. 1번 항목은 배경 색상으로 흰색(#FFFFFF)이 적용된 사례이고, 2번 항목은 표면 색상으로 흰색(#FFFFFF)이 적용된 사례, 3번 항목은 에러 색상으로 붉은색(#B00020)이 적용된 사례입니다.

2.5. 글자, 아이콘 색상 (Typography and iconography colors)

“다른 대상 위에 출력하는 색상” (“On” colors)

앱에서 표면(Surface)은 특정한 분류기준에 따라 메인색상과 같이 색상 테마에서 정의한 색상을 적용합니다. 글자(Text), 아이콘(Icons) 등의 개별요소(Element)는 이러한 표면들 위에서 출력됩니다. 이에 따라 개별요소들은 개별요소 뒤에 출력되는 다른 요소들과 구별되는 가독성 좋은 색상이 사용되어야 합니다.

이 분류기준이 되는 색상을 “on” colors라고 부릅니다. 이러한 색상들은 메인색상, 보조색상, 표면색상, 배경색상, 에러색상 등을 배경으로 하여 전면에 출력됩니다.

에를 들어, 메인색상 위에 출력되는 개별요소의 색상은 on primary color라고 부릅니다. on primary color는 메인색상(Primary color) 카테고리로 분류되며, 접두사로 “on”을 붙여서 관리됩니다.

“On” colors는 우선적으로 글자(Text), 아이콘(Iconography), 외곽선(Strokes)에 적용됩니다. 경우에 따라 표면(Surface)에 적용될 수 있습니다.

기본적으로 “On” colors는 흰색(#FFFFFF)과 검정색(#000000)을 사용합니다.

Baseline colors for text and iconography

위 그림에서 1번 항목은 메인색상 위에 사용된 on color로 흰색(#FFFFF)이 적용되고, 2번 항목은 보조색상 위에 사용된 on color로 흰색(#FFFFFF)이 적용되고, 3번 항목은 배경색상 위에 사용된 on color로 검정색(#000000), 4번 항목은 표면색상 위에 사용된 on color로 검정색(#000000), 5번 항목은 오류색상 위에 사용된 on color로 흰색(#FFFFFF)가 적용된 사례입니다.

참고로 해당 그림에 설명 원문에 일부 설명이 오류가 있는 것으로 확인되어 번역하는 과정에서 수정하여 설명하였습니다.

2.6. 접근성 표준을 위한 색상 (Accessible colors)

접근성 표준이란 시각 장애를 가진 사람이나 시력이 좋지 않은 노인들을 위해 가독성을 높이기 위해 적용하는 표준체계입니다. 기본적으로 안드로이드 시스템은 접근성 표준을 지키기 위해 색상, 크기, 모션 등의 다양한 방식을 활용하고 있습니다.

색상을 이용한 접근성은 밝은 글자 또는 어두운 글자의 배경색상 조정하여 설정할 수 있습니다. 배경색상은 메인색상(Primary color)과 보조색상(Secondary color)의 밝기를 변형한 변형색상으로 적용할 수 있습니다.

예를 들어, 밝은 글자 색상을 사용한다면 배경색상은 메인색상과 보조색상을 어둡게 변형한 변형색상을 적용하고, 어두운 글자 색상을 사용한다면 배경색상은 메인색상과 보조색상을 밝게 변형한 변형색상을 적용한다는 것을 뜻합니다. 글자 색상과 배경 색상은 색상의 밝기 대비를 통해서 접근성을 높이는 게 원칙입니다.

이러한 메인색상과 보조색상의 변형색상들은 반대로 어두운 색상과 밝은 색상의 배경에 대비를 이루어 사용될 수 있습니다.

다시 말해, 배경색상에 메인색상과 보조색상의 변형색상을 적용할수도 있고, 반대로 배경 위에 출력되는 글자(Text)나 아이콘에 메인색상과 보조색상의 변형색상을 적용할 수 있다는 뜻입니다.

2.6.1. 색상견본 (Color swatches)

견본(Swatches)은 유사한 색상들의 범위에서 선택된 색상 샘플입니다. 쉽게 말해, 메인색상 또는 보조색상을 밝기 변화에 따라 변형한 같은 색상의 밝기만 다른 색상 집단을 색상 견본이라고 합니다.

Color swatches

위 그림에서 체크 표시의 색상은 선택된 배경색상에 출력되는 글자의 색상을 나타냅니다. 예를 들어, 300의 밝기에 선택된 체크 표시가 검정이라면 해당 색상을 배경으로 글자가 출력되면 검정색으로 출력되어야 한다는 의미입니다.

White text color having dark background color

흰색 글자(Text)를 사용하는 앱은 흰색 글자에 대응하여 접근성을 위해 충분히 어두운 색상을 배경으로 사용해야 합니다. 위의 예제는 400의 밝기를 갖는 색상을 배경색으로 사용하고, 흰색 글자(Text)가 그 위에 출력된 것을 나타내고 있습니다.

Black text color having light background color

위 그림에서 검정색 글자(Text)를 사용하는 앱은 검정색 글자에 대응하여 접근성을 위해 충분히 밝은 색상을 배경으로 사용해야 합니다. 50에서부터 300까지의 밝기를 가진 변형 색상들이 사용될 수 있다는 것을 의미합니다. 반대로 400부터 900까지의 변형 색상 위에 글자(Text)가 출력되면 흰색으로 반드시 출력되어야 함을 의미합니다. 위 예시는 50의 밝기를 갖는 배경색상 위에 검정색 글자가 출력된 것을 나타냅니다.

2.7. 대안 색상 (Alternative colors)

머티리얼 디자인 색상 체계(Material design color system)는 앱에서 사용하는 메인색상, 보조색상과 다르게 사용되는 대안색상의 사용을 허용합니다. (대안 색상은 앱 내의 특정 테마에서 추가적으로 구성되는 색상을 의미합니다.) 대안 색상은 UI의 다른 섹션을 구분하기 위해 사용됩니다.

대안 색상은 다음과 같은 상황에서 사용할 수 있습니다.

밝은 테마와 어두운 테마를 갖는 앱
다른 섹션에서 다른 테마를 갖는 앱
여러 제품군의 하나의 부분으로서의 앱

대안 색상은 기존에 적용된 색상 테마와 상충할 수 있기 때문에 주의하여 사용해야 합니다.

2.7.1. 밝은 테마와 어두운 테마 (Light and dark themes)

일부 앱들은 밝은 테마와 어두운 테마를 모두 갖고 있습니다. 개별요소(Element)와 글자의 가독성을 유지하기 위해 밝은 테마와 어두운 테마에서는 각각 다른 색상 스키마를 적용해야 합니다.

위의 왼쪽 그림은 밝은 테마를 갖고 있는 뉴스 앱에서 사용한 색상 스키마를 나타내고, 오른쪽 그림은 같은 앱의 어두운 테마가 적용되었을 때의 색상 스키마를 나타내고 있습니다.

위의 예시화면에서 주의하여 살펴볼 부분은 밝은 테마와 어두운 테마 사이에서 사용되는 글자의 색상이 가독성을 위해 어떻게 다르게 사용되고 있는지를 살펴보는 것입니다.

2.8. 섹션 테마를 위한 대안 색상 (Alternative colors for section themes)

대안 색상은 앱 내에서 다른 테마를 갖는 영역에서 사용될 수 있습니다. 섹션의 개념은 쉬운 예로 여행 앱에서 “숙박”, “항공”, “렌터카” 등과 같이 제공하는 서비스가 각기 다른 성격을 갖는 경우 이를 섹션으로 볼 수 있습니다. 각 섹션은 서로 다른 테마(예: 색상, 레이아웃, UI 구성요소)로 구성될 수 있습니다.

위 그림에서 해당 앱의 각 섹션은 서로 다른 색상 테마를 갖고 있고, 각 색상 테마에 적용되는 3가지 메인색상(Primary color)을 갖고 있습니다. 각 테마는 앱 내에서 서로 다른 부분으로 사용되고, 사용자들이 색상을 통해 해당 부분에 위치하고 있는 것을 더 잘 이해할 수 있도록 합니다.

2.8.1. 테마 1 (Theme 1)

노란색은 관심 주제를 선택하고 서비스를 시작하기 위한 영역에 메인색상으로 사용되었습니다.

Theme 1 with yellow color as a primary color

2.8.2. 테마 2 (Theme 2)

파란색은 개인 사용자의 계정과 관련된 영역에 메인색상으로 사용되었습니다. 참고로 관심주제를 선택하면 해당 관심주제의 전문가를 추천해주는 서비스가 OWL 서비스의 한 섹션으로 이해하면 됩니다. 파란색은 전문가를 추천해주는 영역에 사용된 것입니다.

Theme 2 with blue color as a primary color

2.8.3. 테마 3 (Theme 3)

분홍색은 선택된 전문가의 상세 내용을 설명하는 영역에 메인색상으로 사용되었습니다. 위의 테마 2에서 전문가 리스트를 통해 선택한 전문가의 상세 내용을 출력하는 영역에 별도의 메인색상을 적용한 것입니다.

Theme 3 with pink color as a primary color

2.9. 데이터 시각화를 위한 추가 색상 (Additional colors for data visualization)

데이터 시각화를 위한 추가 색상은 메인색상을 벗어서 추가적으로 정의되어 사용할 수 있습니다. 추가 색상들은 색상 팔레트의 부분이 될 수 있습니다.

머티리얼 디자인에서 예외적으로 데이터를 시각화하기 위해 메인색상, 보조색상 등에서 정의하지 않은 별도의 다른 색상을 사용하는 것을 허용한다는 의미입니다.

이 경우 적용되는 색상의 범주가 전체적인 색상 구성에 영향을 미치는 정도가 크지 않은 선에서 허용되는 것이지 전체적인 색상 체계를 위배할 정도의 추가 색상 적용을 의미하지 않는다는 것에 유의해야 합니다.

Additional colors for data visualization

위 그림에서 해당 앱은 같은 페이지에서 다양한 데이터 시각화를 보여주기 위해 5개의 추가 색상을 가진 색상 테마를 적용하였습니다.

1번 항목은 계정(Account)과 관련된 영역으로 초록색이 사용되었으며, 2번 항목은 청구서(Bill) 관련 영역으로 주황색과 노란색이 사용되었고, 3번 항목은 예산(Budget) 관련 영역으로 보라색과 파란색이 사용되었습니다. (각 항목을 한 화면에 출력하여 설명하기 위해 각 영역을 50% 크기로 축소하여 임의 구성)

3. 색상 선택을 위한 도구 (Tools for picking colors)

3.1. 머티리얼 팔레트 생성도구 (Material palette generator)

머티리얼 팔레트 생성 도구는 작업자가 선택한 색상으로부터 색의 밝기에 따른 변형색상과 이와 어울릴 수 있는 다양한 색상을 자동 알고리즘을 통해 추천합니다.

3.1.1. 색상 입력 (Input colors)

해당 도구는 메인색상을 입력하면 보색(Complementary), 유사색(Analogous), 삼보색(Triadic)을 추천합니다. 또는 메인색상과 보조색상을 기반으로 확장된 팔레트를 생성할수도 있습니다.

아래 도구에서 메인색상(Primary color)과 보조색상(Secondary color)을 선택한 후 “View in color tool”을 선택하면 확장된 팔레트가 생성되며, 이와 관련된 앱 내 색상 구성 형태를 확인할 수 있습니다.

3.1.2. 접근성을 위한 변형 색상 (Color variations for accessibility)

색상 팔레트는 메인색상과 보조색상을 사용하기 위한 보완적 방법을 제공합니다. 팔레트는 접근성 표준에 부합하기 위한 색상들을 밝기 변화에 따라 함께 제공합니다. 아래 도구에서 직접 확인할 수 있습니다.

https://material.io/inline-tools/color

3.2. 2014 머티리얼 디자인 색상 팔레트 (2014 Material Design color palettes)

이 색상 팔레트는 2014년 머티리얼 디자인에 의해서 생성된 것입니다. 앱에서 사용할 수 있도록 각 색상들은 서로 조화를 이룰 수 있는 색들로 선정되었습니다. 더 조화로운 색상 팔레트를 생성하고 싶다면 위에서 제안하는 머티리얼 팔레트 생성 도구를 이용하여 직접 팔레트를 생성하면 됩니다.

위에서 제공한 머티리얼 팔레트 생성도구를 통해 메인색상과 보조색상 선정이 어렵다면 위의 2014 머티리얼 디자인 색상 팔레트를 통해 메인색상과 보조색상을 선택할 수 있다는 것입니다. 여기에 선정된 색상은 색상의 보색, 유사색, 삼보색 등의 검토하여 선정된 색상들로 어떤 색상을 선정하든 각 색상들 간에 조화를 이룰 수 있다는 것을 의미합니다.

색상 선정에 어려움이 있다면 이 팔레트에서 색상을 선정해보는 것도 방법이라는 것입니다.

4. 마무리

색상에 대한 선택은 앱(브랜드)을 어필하기 위해 필요한 디자인 요소 중 가장 기본이 되는 것입니다. 기존에 디자이너들이 이를 고안해 내는 것은 디자인 컨셉에 핵심이 되기도 하였습니다. 물론 지금도 이 색상을 선택하고 여기에 의미를 부여하는 것은 여전히 디자이너의 고유한 역할이기도 합니다.

하지만 머티리얼 디자인은 이 영역에 대해서도 다양한 사례 연구 및 과학적 접근 방법을 통해 보다 체계적이고, 접근성 표준 등을 고려할 수 있는 방향성을 제시하고 있습니다.

단순히 작업자의 감에 의존해 색상을 선택하고, 이를 디자인에 반영하는 것이 아니라 근거가 될 수 있는 여러 검토사항을 활용하여 의사결정권자들에게 합리적인 디자인 설득을 할 수 있도록 하는 것이 이 내용의 핵심이라고 보면 되겠습니다.

다음 내용은 색상 테마를 통해 선택한 여러 색상(예: 메인색상, 보조색상, 변형색상, 추가색상, 대안색상)을 개별 UI에서 어떻게 활용하고 사용하는지를 다룰 예정입니다. 그럼 다음 시간에 뵙겠습니다.

이 블로그 검색

UNCLESOON'S BLOG