완벽한 UI를 위한 색상 가이드

안녕하세요 찐망고입니다.

이번 포스팅은 제가 자주 보는 글을 번역해서 올려보도록 하겠습니다.

 

색상은 아주 특별한 시각적 언어로써, 

주로 사용자가 화면에서 특정 동작을 취하거나 반드시 알아야 하는 중요한 정보를 강조하는 데 사용됩니다.

파란색꽃과 빨간색 꽃은 우리에게 다른 느낌을 전달합니다. 

그래서 디자인에서 색상을 다룰 때는 주의가 필요한데요

색상은 디자인에 디테일을 더해주는 역할뿐만 아니라 정보를 전달하는데에도 큰 역할을 합니다. 

교통 신호등에 녹색은 긍정적인 상태를, 노란색은 주의를, 빨간색은 금지를 의미하는것처럼요

색상은 마치 불과 같습니다.

올바르게 사용하면 원하는 결과를 얻을 수 있지만, 지나치게 사용하면 디자인을 손상시킬 수 있죠

특히 디지털 디자인에서는 사용자가 빠르게 우선순위에 따라 행동해야 할 상황에 따라 색상을 신중하게 다뤄야 합니다. 

이제 색상을 잘 활용하기 위한 중요한 속성들에 대해 알아보겠습니다.

 

Color Properties

색상, 채도, 명도

색상이 어떻게 작용하는지 이해하기 위해서는 각 색상이 가지고 있는 속성들을 알아야 하는데요

색상은 세 가지 속성을 갖고 있죠

첫 번째는 색조(Hue)로, 고유한 색상의 종류를 구별하고

두 번째는 채도(Saturation)로, 기본 색상의 깊이를 구별하며

세 번째는 명도(Brightness)로, 밝고 어두운 정도를 구별하는데

이 세 가지 속성을 이용하여 다양한 시각적 효과를 만들어냅니다.

먼저, 물체의 모양은 주로 명도를 이용하여 구성되며, 색상은 요소의 기능에 따라 분류되는데

일반적으로 검정색과 흰색, 그리고 한 가지 부각되는 색상을 사용하는 경향이 있습니다.

때로는 다른 기능을 위해 두 개 이상의 색상을 사용하기도 하지만,

중요한 정보를 나타낼 때에는 보통 한 가지 색상을 강조합니다.

 

명도, 채도, 색상

 

 

Color model

스케치나 Figma와 같은 작업에서 자주 볼 수 있는 도형들을 살펴봅시다. 

RGB와 HEX는 무엇일까요? 

그리고 디지털 환경에서 색상은 어떻게 표현될까요? 

디자인에 사용되는 색상, 컴퓨터에서 처리하는 색상, 그리고 모니터에 표시되는 색상은 

모두 각각의 규격에 따라 다르게 표현됩니다. 

색 공간이란 디지털 환경에서 색상을 관리하기 위한 표준을 의미하는데

디지털에서는 주로 RGB, HSL, HSB 등의 색상 모델이 사용되며, 작업할 때 주로 HEX와 RGB가 사용됩니다.

 

RGB, HSL

• RGBA(Red, Green, Blue, Alpha): 빛의 기본 색인 빨강, 녹색, 파랑과 투명도를 나타내는 알파를 조합하여
  다양한 색상을 표현하는 기본적인 방법
• HSV/HSB(색조, 채도, 명도 또는 밝기): 직관적이고 다루기 쉬운 색 속성
  색상의 색조, 채도, 그리고 명도 또는 밝기를 이용하여 색상을 표현
• HEX: RGB를 16진수로 변환한 코드로, 다른 요소들과 비교했을 때
  한 번에 복사하여 붙여넣기 할 수 있는 장점이 있으며,
  다양한 환경에서 쉽게 입력할 수 있는 보편적으로 사용되는 색상 값
  
  

스케치, 피그마, 포토샵

대부분의 주요 프로그램들은 색상을 선택할 때 HSB(색조, 채도, 명도 또는 밝기)를 사용하고, 

이를 16진수 HEX로 표시하여 보여줍니다. 

색상을 어둡게 만들고 싶을 때, HSB를 사용하는 경우 B(명도 또는 밝기)를 감소시키면

색상 속성을 직관적으로 다룰 수 있기 때문에 디자인 시에 매우 편리합니다.

반면 RGBA는 빨강, 녹색, 파랑을 혼합하여 어둡게 만들어야 해서 번거로울 수 있습니다.

하지만 개발 시에는 각 속성을 타이핑하고 쉼표를 치는 것이 번거로울 수 있으므로

가장 타이핑이 적고 구분하기 쉬운 HEX를 사용하는 경향이 있습니다.

 

 

 

Primary Color & Secondary Color

Primary Color, Secondary Color

저자는 디지털 제품 UI에서 색상을 엄격하고 제한적으로 사용하는 경향이 있는데요

색상을 잘못 사용하면 콘텐츠 탐색에 방해가 될 수 있기 때문입니다.

우리는 기준을 관리하기 위해 색상의 계층 구조를 정의하는데

서비스에서 사용하는 색상 서비스는 주로 기본 색상, 보조 색상, 그리고 흑백 (검정색, 흰색)을 사용합니다.

서비스의 성격에 따라 더 다양한 색상 조합을 결정하기도 하고

서비스에서 사용할 기본 색상들은 주로 브랜드의 그래픽 규칙을 따르게 됩니다.

 

Primary Color, Secondary Color

• Primary Color: 색상이 필요한 곳에서 가장 많이 사용되는 색상.
• Secondary Color: 기본 색상을 사용할 때 다른 요소와 구별해야 할 때 사용되는 색상
• Black and White: 주로 배경과 텍스트에 사용되며, 가장 밝은 색과 가장 어두운 색

 

Hierarchy

Hierarchy

제품에서 사용할 색상 유형을 결정했다면 사용해봐야겠죠?

페이지에서 색상을 사용할 때는 정보의 중요성을 따라가야 합니다.

기본적인 구조는 흑백으로 이루어지고,

기능적이거나 반드시 알아야 할 정보와 같은 중요한 요소들은 주요 색상과 보조 색상을 사용하여 강조합니다.

특히, 특별한 상황에서는 인지나 행동이 중요한 요소인 경우, 다른 정보와 달리 의미에 적합한 색상을 사용하는데

이렇게 함으로써 중요한 최종 행동 요소와 그를 위해 반드시 확인해야 하는 정보를 강조합니다.

 

Hierarchy - importance

 

 

Ratio

Ratio

사용할 색상을 결정한 후에는 어떤 비율로 사용할지 결정해야 합니다.

색상은 강력한 자극이기 때문에 모든 요소에 색상을 사용하여 눈의 피로를 피해야 하는데

가장 편안하고 받아들일 수 있는 비율은 실내 인테리어에서 사용되는 60-30-10 규칙을 활용할 수 있습니다.

배경 색상은 60%와 30%로 분배하고, 강조해야 할 요소나 텍스트 중심의 서비스에는 10%를 할당합니다.

전체 양을 고려하여 배경 색상을 분배한 후에는 10% 내에서 점진적으로 포인트 색상을 추가함으로써

색상 비율을 조정합니다.

실내 공간 디자인이 목적에 따라 달라지듯이, 색상 조합도 공간에 적용됩니다.

 

Ratio

 

 

 

Contrast

contrast

색상이 흐릿하면 눈은 디테일을 보기 위해 초점을 맞추어야 합니다. 

가능한 한 대조를 강하게 주는 것이 가장 좋은데요

색상을 희미하게 구분해야 하는 상황이라면, 색상을 사용하여 요소를 충분히 구분할 수 있는지를 고려해야 합니다. 

만약 색상을 다르게 표현하기로 결정한다면, 해당 색상이 다른 색상들과 명확하게 구별될 수 있도록 

충분한 대조를 제공해야 하구요

배경 색상과 다른 요소들과의 상대적인 관계를 고려하여 색상을 조정하는데

색상 대비는 WCAG가 분할한 레벨에 따라 따르며, 주로 AA 레벨을 기준으로 사용됩니다.

• A (at least) — 3:1
• AA - 4.5:1
• AAA — 7:1

배경 색상과 텍스트 사이의 대비 수준을 측정하여 확인하는 사이트입니다 참고하세요

https://colourcontrast.cc

Colour Contrast Checker

 

 

 

Combination

combination

 

일반적으로 많이 사용할 색상을 결정했더라도 때로는 다른 색상이 필요한 경우가 있습니다.

이때는 색상 바퀴를 기반으로 주요 색상과 조화를 이루는 다른 색상을 선택해야 하는데요

모든 요소는 주로 단일 색상으로 표현되며, 주요 색상과 유사한 개념이지만,

차별성이 필요한 경우에는 유사한 색상을 사용하고,

다른 요소들보다 더욱 뚜렷하게 사용자가 인식해야 하는 정보에는 보완적인 색상을 사용합니다.

monochromatic, analogous, complementary

• 단색(monochromatic): 주요 정보에는 주요 색상을 사용하고, 회색 영역에는 주요 색상과 동일한 음영을 사용.
• 유사(analogous): 유사한 개념이지만, 차별성이 필요할 때는 유사한 색상을 사용
• 보완(complementary): 다른 요소들보다 강조해야 할 필요가 있는 경우에 상보 색상을 사용

 

Light & Dark

base, dark, light

 

만약 하나의 주요 색상으로 정보를 구별하기 어려운 경우, 밝은 색과 어두운 색을 사용합니다. 

이 때, 주요 색상보다 더 밝은 색과 주요 색상보다 더 어두운 색을 정의하고, 

색상은 자연에서 색이 변화하는 규칙에 따라 밝기-채도-색조 순으로 변형됩니다.

 

밝기-채도-색조

• Darken color: RGB 기반 색조를 따라 이동하여 채도를 증가시키고 명도를 감소.
• Lighten Color: CMY 톤으로 이동하여 채도를 감소시키고 명도를 증가

 

 

Reason 1. Color Change in Nature

 

reflection, absorption

자연에서는 빛이 강할 때 물체의 색상 채도가 약해집니다

(예를 들어 손전등을 사과 바로 앞에 대는 것을 상상해보세요).

빛이 물체의 재질에서 반사되어 물체의 색상이 나타나기 때문인데요

반사가 너무 적으면 어두워 보일 것입니다.

물체의 색상이 밝아지면 채도가 줄어들고 명도가 증가하며,

물체의 색상이 어두워지면 채도가 증가하고 명도가 감소합니다.

 

 

 

Reason 2. The brightness of the hue itself

노란색은 밝고 흰색 배경 위에 쓰기 어렵고, 파란색은 어두워 검정색 배경 위에 쓰기 어렵지만, 

서로 다른 색상들의 밝기 차이를 상상하기 어렵습니다. 

화면에서 보이는 색상의 밝기를 어떻게 알 수 있을까요?

화면에서 보이는 색상의 밝기를 알기 위해 HSL(Hue, Saturation, Lightness) 색상 모델이나

HSV(Hue, Saturation, Value) 색상 모델을 사용할 수 있습니다.

이러한 색상 모델에서 색상의 밝기는 명도 또는 밝기로 표현됩니다.

명도는 0에서 100의 범위로 표현되며,

0은 완전히 어두워진 상태를 의미하고, 100은 완전히 밝아진 상태를 의미합니다.

이를 통해 각 색상의 밝기를 비교하고,

필요에 따라 적절한 색상을 선택하여 배경과의 대비를 고려하여 텍스트를 표시할 수 있습니다.

 

hue, luminosity

일러스트레이터에서 HSB(Hue, Saturation, Brightness)의 색조(Hue)를 조정하고 12가지 색상을 할당했는데요 

그리고 그대로 복사하여 흑백으로 변환하였습니다. 

노란색과 파란색은 예상대로 보이는데, 나머지 색상들은 매우 규칙적으로 보이지 않죠

왜 180도와 300도의 색상이 더 밝게 보이는 걸까요?

이러한 현상은 색상환(Hue circle)에 기인합니다.

HSB 모델에서 색조(Hue)는 0~360도 사이로 표현되는데, 이는 색상환을 한 바퀴로 나타낼 수 있는데

 0도와 360도는 동일한 색상(빨간색)을 나타내며, 180도와 300도는 서로 보색 관계에 있습니다. 

보색은 두 색상이 결합되었을 때 흰색을 만들어내는 색상 관계를 의미하구요

따라서 180도와 300도의 색상은 기존의 노란색과 파란색보다 더 밝게 보이는 것은 정상적인 현상이며, 

이러한 관계를 이해하여 색상을 조정하고 표시하는 것이 중요합니다. 

색상환의 다른 부분들은 다양한 색감과 조화를 이루지만, 

명도에 따라 밝기가 달라지는 경우가 있기 때문에 색상 변환을 흑백으로 할 때 더 불규칙적으로 보일 수 있습니다.

 

각 숫자에 대한 그래프를 비교하면, 빨강(Red), 녹색(Green), 파랑(Blue)으로 갈수록 어두워지고,

시안(Cyan), 마젠타(Magenta), 노랑(Yellow)으로 갈수록 밝아집니다.

RGB와 CMY는 표준으로 사용되며, 화면은 빛의 세 가지 주요 색상을 사용하기 때문에

색상이 섞일수록 흰색에 가까워집니다.

따라서 가장 기본적인 색상을 갖고 있는 CMY가 더 밝게 보이게 되는거죠

 

 

Background color

 

dark, light

색상은 상대적인 개념이기 때문에 주변에 어떤 색상이 있는지에 따라 그 특성이 변화하는데

다크 모드를 디자인할 때는 배경 색상이 반전되기 때문에 동일한 색상을 사용하는 대신

각 테마에 적합한 색상을 사용해야 합니다.

• 다크 배경 + 밝은 영역 + 어두운 내부 요소
• 라이트 배경 + 어두운 영역 + 밝은 내부 요소

 

 

 

 

참고사이트

https://medium.com/design-bootcamp/color-for-good-ui-afd19424cc89

Ultimate Guide for a Good UI: Color