Ch04_4_4_모바일디자인가이드요소_Color

1. Z축과 그림자
2. 해상도와 밀도
3. 그리드
4. 컬러테마
5. 타이포그래피 시스템

---

4.컬러 테마

색상은 데이터를 시각화하고 상태 정보를 전달하며 시각적 연속성을 제공하는 것은 물론 사용자와의 상호작용에 대한 피드백을 제공하는 데도 도움을 준다.

iOS의 노란색 노츠나, 캘린더의 상호작용 시 빨간색으로 정의해두고 다른 색상으로 대체하지 않을 것을 권장하죠

---

컬러에 대한 기본적인 이해

• 인간는 빛의 넓은 영역에서 380 ~ 780 nm의 아주 작은 범위 즉 가시광선 영역을 감지하는데 이 범위를 색, color 라고 합니다.
• 프린팅 영역과 달리 디지털에서는 우리가 보는 빛과 유사하게 스스로 광을 가진 요소의 결합으로 색을 표현하는데 빛의 삼원색인 Red, Green, Blue의 조합으로 약 1600만 가지 색상을 보여준다.
• 이 컬러를 Primary color라고 하죠. 우리는 이 컬러의 조합으로 색상을 인지합니다.
• 프라이머리 컬러는 가산혼법으로 빛을 더해서 색상을 표현한다고 해서 가산혼법이라고 하면 다 합치면 흰색이 되죠. 반대로 CMYK는 기본색의 보색, 즉 반대색이라고 보면됩니다.
• 0부터 255까지의 RGB 값으로 R, G, B는 빛의 가산 혼합 방식으로 작동하는데 레드와 그린이 합쳐지면 옐로우가 만들어지며 레드와 블루가 합쳐지면 마젠타가 된다. 빛의 삼원색에서 서로 마주하는 색상은 보색이며 광원에서 원색을 빼면 보색이 남고 보색과 다시 원색을 합치면 광원이 되는 것이다.

 

• 디지털에서는 삼원색의 자리에 256가지 색상을 숫자로 표현하는데 이를 다시 16진법을 사용하는 헥사코드로 변환하여 사용한다.
• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
• RR, GG, BB로 보며 각 자릿수 0, 1에 맞게 16을 곱하여 두 자릿수를 더하면 #ff0000은 255.0.0이 되고 R이 255 즉 100%이므로 순색 레드 컬러이다.

---

4.1 기본 색상과 보조 색상

브랜드를 나타낼 기본 색상과 보조 색상을 선택합니다. 그런 다음 각 색상의 어둡고 밝은 변형을 UI에 다양한 방법으로 적용할 수 있습니다.

기본 색상과 보조 색상은 UI에서 브랜드 아이덴티티를 나타내고, 구성 요소를 구별하거나 강조하는 데 중요한 역할을 한다. 이러한 색상을 사용하면 일관된 시각적 경험을 제공할 수 있으며, 사용자에게 특정 기능이나 중요성을 전달할 수 있다. 

컬러시스템

1. 기본 색상 (Primary Color)

• 브랜드의 주요 색상으로, UI의 대부분에서 사용되는 핵심 색상이다. 예를 들어, 앱의 툴바, 버튼, 링크 등에서 반복적으로 적용된다.
• 기본 색상은 앱 전반에 걸쳐 가장 자주 사용되며, 보조 색상 없이도 구성 요소를 충분히 강조할 수 있어야 한다.
• 기본 색상의 밝고 어두운 변형을 만들어, 각 요소의 크기나 배경색과 대조를 줄 수 있다. 예를 들어, Primary-500이 가장 중심이 되는 색상이라면, Primary-700은 더 어두운 색상으로 버튼이나 텍스트 강조에 사용하고, Primary-200은 배경과 같은 넓은 면적에 사용하여 가독성을 높인다.

2. 보조 색상 (Secondary Color)

• 보조 색상은 UI에서 특정 요소를 강조하거나 구분하는 용도로 사용된다. 선택 항목, 플로팅 버튼(FAB), 진행 바 등과 같이 사용자가 상호작용하는 영역에 주로 적용된다.
• 선택적으로 사용할 수 있지만, UI 내에서 강조를 원하는 부분에 추가하여 시각적인 강조를 줄 때 유용하다.
• 보조 색상 또한 Dark와 Light 변형을 사용할 수 있다. 예를 들어, 보조 색상으로 설정한 파란색을 더 밝게 하여 배경에 사용하거나, 더 어둡게 하여 버튼에 사용함으로써 시각적인 구별이 가능하다.

3. 기본 색상과 보조 색상의 변형 사용

• 머티리얼 디자인에서는 기본 색상을 중심으로 밝고 어두운 단계를 만들어 사용한다. 기본 색상을 기준으로 100~900 단계로 나누어 각 단계별 색을 만들어서 UI에서 필요한 명도와 채도를 조절한다.
• 밝은 색상(Primary-50, Primary-100 등)은 넓은 배경이나 경고 메시지 등 가벼운 요소에 적합하며, 어두운 색상(Primary-700, Primary-900)은 텍스트, 버튼, 액션 아이콘과 같은 작은 요소에 적합하다.
• 보조 색상도 마찬가지로 단계별 변형을 만들어 강조하고자 하는 위치나 컨트롤에 적용하여 사용자가 중요한 요소를 쉽게 인식할 수 있도록 한다.

4. 컬러 테마의 일관성 유지

• 기본 색상과 보조 색상을 활용하여 앱의 전체적인 컬러 테마를 유지하면, 사용자 경험에서 일관된 브랜드 아이덴티티를 유지할 수 있다. 또한, 다양한 화면 크기와 상황에 맞게 색상의 밝기와 대조를 조절하여 가시성을 높일 수 있다.

예시

1. 기본 색상: 앱의 주요 인터페이스에 적용된 청색 계열의 Primary-500을 기본 색상으로 설정.
2. 보조 색상: Secondary-500을 버튼과 같은 상호작용이 필요한 요소에 적용.
3. 밝고 어두운 변형: 기본 색상의 Primary-200을 배경에 사용하고, Primary-700을 강조 텍스트에 사용하여 대비를 줌.

• 머티리얼 디자인의 기본 테마에는 기본 색상과 보조 색상이 포함되어 있으며,
• 배경, 표면, 오류, 타이포그래피, 아이콘그래픽(인포그래픽)의 색상과 같이 UI를 정의하는 추가 색상도 포함되어 있다. 이 모든 색상은 앱에 맞게 사용자 정의로 사용할 수 있다.
• 기본 색상은 앱의 화면과 구성 요소에 가장 자주 사용되는 색상으로, 보조 색상 없이 기본 색상만 으로도 구성 요소를 강조할 수 있다.
• 기본 색상과 어둡고 밝은 변형을 사용해 색상 테마를 만들고, 시스템 바에서 최상위 응용프로그램인 상태 바를 구분하는 것과 같이 UI 요소 사이의 대조를 밝게 또는 어둡게 설정할 수 있다. 
• 머티리얼 디자인에서는 기본 색상을 500이라는 수치로 정중앙에 배치하고, 각 단계별로 수치를 100씩 높여 어둡게 만든다.
• 또한 흰색과 함께 사용하기 위한 50 수치의 밝은 색상도 만든다.
• 이런 방법을 통해 기본 색상만으로 구성 요소를 구분하는데, 이처럼 단계를 만들어 사용하는 이유는 작은 아이콘이나 가는 선과 넓은 면적 등에서는 색상의 사용성이 다르게 인식되고 색의 온도 차이도 크게 느낄 수 있기 때문이다.
• 따라서 기본 색상을 기준으로 어두운 단계와 밝은 단계를 구성한 후 사용 면적의 크기나 포인트 위치에 따라 다른 번호의 색상을 사용하는 것을 권장한다.
• 보조 색상은 구성 요소를 구별하거나 강조하는 다양한 용도로 사용한다.

---

보조 색상을 지정하는 것은 선택 사항으로

• 보조 색상이 없는 경우 기본 색상을 사용하여 요소를 강조할 수도 있지만.
• 가급적 UI의 선택 부분을 강조하기 위해 적용한다. 주로 플로팅 버튼, 슬라 이더 및 스위치와 같은 선택 컨트롤, 진행률 표시, 링크나 헤드라인 등에 사용할 것을 권장한다.
• 기본 색상과 마찬가지로, 보조 색상은 Dark and light 변형을 통해 사용 할 수 있습니다.
• 보조 색상은 구성 요소를 구별하거나 강조하는 다양한 용도로 사용

---

Surface, background, and error colors

• 기준 배경과 표면 색상은 #FFFFFF
• 오류 색상은 텍스트 필드의 잘못된 텍스트와 같은 구성요소의 오류를 나타냅니다.
• 기준 오류 색상은 #B00020.

---

4.2 색상 선택 방법

색상 단계를 만들기 어렵다면 색상 선택 도구를 사용해 생성할 수 있다.
선택 색상 도구를 사용하면 접근성 표준을 준수하면서 색조(hue), 채도(chrom), 밝기(tone)를 자동으로 조절해 밝고 어두운 단계를 조절할 수 있다.

 

머티리얼 디자인에서 색상을 적용하는 방법은

• 적용 색상을 알려주는 컬러 툴을 이용하는 것도 좋다. 기본 색상과 보조 색상을 선택하면 해당 컬러가 실제 어디에 적용되는지 미리보기를 통해 확인할 수 있다.
• 색상 팔레트는 기본 입력 색상 및 기본 색상과 관련하여 원하는 팔레트가 유사, 보완 또는 3중이어야 하는지 여부에 따라 생성할 수 있습니다.
• 또는 기본 및 보조 색상을 기준으로 확장된 팔레트를 생성할 수 있습니다

https://m2.material.io/resources/color/#!/?view.left=0&view.right=0

Color Tool - Material Design

https://m3.material.io/theme-builder#/custom

Material Design

color 적용 해 보기-실습

• 재료 팔레트 생성기Material palette generator를 사용하여 입력한 색상에 대한 팔레트를 생성할 수 있습니다.
• 색조, 채도, 밝기는 사용 가능하고 미적으로 만족스러운 팔레트를 만드는 알고리즘에 의해 조정된다.
• 입력 색상 : 색상 팔레트는 기본 입력 색상과 원하는 팔레트가 기본 색상과 관련하여 유사, 보완 또는 삼원색이어야 하는지 여부에 따라 생성할 수 있습니다.

 

또는 기본 및 보조 색상을 기반으로 확장된 팔레트를 생성할 수 있습니다.

접근성을 위한 색상 변형Color variations for accessibility(액세서빌리티)

이러한 팔레트는 기본 및 보조 색상을 사용할 수 있는 추가 방법을 제공합니다. 표면을 분리하는 밝은 색과 어두운 색상의 옵션이 포함되어 있으며 접근성 기준에 맞는 색상을 제공합니다.

 

https://www.materialpalette.com/deep-orange/green

Material Palette - Material Design Color Palette Generator

https://materialui.co/colors

https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder