UI 디자인을 구성하는 요소들은 여러 가지가 있지만 그중에 컬러는 가장 강력한 시각언어입니다.
구글 Material Design이나 애플의 Human Interface Guidelines 에도 컬러에 대한 정의가 잘 나와있지만, 실제 프로젝트에서는 어떻게 적용하고 진행해야 하는지에 대해 공유하려고 합니다.

_____
Principles

디자인을 하기에 앞서 기본이 되는 아래의 원칙들을 기억해 두면 좋을 것 같습니다.

Hierarchical : 정보 계층에 따른 정의가 필요하고 중요한 요소에서는 컬러를 강조해서 사용해야 합니다.
Legible : 가독성을 고려해야 합니다. 웹접근성(WCAG 2.1) 지침을 준수하여 명암비를 충족하는 컬러를 사용하여 저시력과 색맹인 사용자를 고려하여야 합니다.
Expressive : 브랜드(서비스)의 성격을 잘 나타낼 수 있어야 합니다.
Communication : 명확한 의사소통과 상태를 전달할 수 있어야 합니다.

____
Usage

컬러를 적용하는 과정을 순서대로 정리해 보았습니다.

1. 주색(Primary Color) 정하기

보통 시안을 잡고 디자인을 확정하는 과정에서 주컬러와 보조컬러를 정의하게 될 것입니다.
주색은 브랜드를 대표하는 Main Color를 말합니다.(Key Color 또는 Point Color라고도합니다)
보통은 브랜드 고유의 컬러를 기준으로 배리에이션 하거나, 서비스의 특성에 따라 컬러를 정하게 됩니다.
어떤 색을 선택하느냐에 따라 앱(웹)의 이미지가 달라지기 때문에 주색을 정하는 것은 매우 중요합니다.
해당 서비스의 콘셉트를 잘 보여줄 수 있는 유의미한 컬러를 사용합니다.

2. 보조색(Secondary Color) 정하기

보조색은 주색과 조화를 이루는 컬러를 사용해야 합니다. 명도와 채도를 맞추어야 하는 것은 기본이겠지요.
사용되는 영역은 선택 컨트롤, 버튼, 링크, 헤드라인 등에 쓸 수 있고, 선택된 텍스트 강조용으로 쓰기도 합니다.
주색을 기준으로 유사색이나 보색 중에 사용하게 됩니다.

단색 : 다양한 컬러 사용을 지양하고 포인트되는 한가지 컬러만 사용합니다.
유사색 : 주색을 중심으로 양쪽에 있는 색들을 말합니다. 조화롭고 안정적인 느낌을 줍니다.
보색 : 주색의 반대되는 색으로 대비가 커서 생동감 있고 활동적인 느낌을 줍니다. 주로 강조할 UI가 있을 때 사용합니다.

예시 이미지

* 단색, 유사색, 보색을 각각 적용한 예 (이미지 출처 : https://designcompass.org/2020/05/16/색/ )

3. Gray Scale 컬러 테스트

주색과 보조색이 서비스의 아이덴티티를 나타내고 인터랙션 하는 역할을 한다면, Gray Scale 컬러는 정보전달과 위계를 나타낼 수 있는 중요한 역할을 합니다.

주로 BG, Text, line에 사용되며 특히 텍스트는 가독성을 고려해야 하기 때문에 배경과의 명암비를 잘 조정해야 합니다.
작은 텍스트(regular 18pt이하)는 배경 대비 4.5:1, 큰 텍스트(regular 18pt, bold 14pt 이상)는 3:1의 대비율을 권장하고 있습니다.

보통 디자이너의 직감으로 작업이 가능하지만 좀 더 정확한 명암비를 알고 싶다거나, 웹표준을 준수해야 하는 경우 사이트를 통한 테스트가 필요합니다.

최근에 Adobe Color 사이트에서 접근성 도구 메뉴가 추가되었는데, 텍스트와 배경색의 대비를 직관적으로 확인할 수 있습니다. 명암비율별로 제안도 받을 수 있으니 참고하시기 바랍니다.

* 단색, 유사색, 보색을 각각 적용한 예 (이미지 출처 : https://designcompass.org/2020/05/16/색/ )

❗컬러를 정의할 때, 명도차가 거의 안 나거나 유사한 컬러들의 배리에이션을 최소화해야 합니다.
너무 많은 컬러군이 있으면 작업자가 관리하기 힘들기도 하고, 사용자는 색 차이를 쉽게 구분하지 못합니다.

4. 비율 조정하기

주 컬러와 보조컬러,배경컬러를 어느정도의 비율로 사용할지를 결정해야 합니다.
사용 범위와 배색 비율은 디자이너가 상황에 맞게 정해야 하는데, 비율에 따라 디자인 느낌이 확 달라 지기 때문입니다. (ex. 콘텐츠를 강조해야 할 서비스라면 컬러를 최소화하고 그레이 컬러를 좀 더 활용한다던지..)
권장하는 배색 비율은 60:30:10나 70:25:5라고 하는데 서비스의 성격이나 UI 콘셉트, 주 컬러에 따라 테스트해보고 적절한 비율을 찾아야 합니다.

예시 이미지

5. 상태 컬러 따르기
System Colors Status Colors

피드백 컬러는 UNESCO 도로 표지판을 기준으로 국제적으로 표준화된 컬러입니다.
UI 디자인에서는 사용자에게 현재 시스템의 상태를 알려주며 상호작용하고 있다는 것을 보여주는 역할을 합니다.

* 이미지 출처 : https://spectrum.adobe.com/page/color/#Semantic-colors

____
색상 구성표 직접 만들어보기

사이트를 이용하지 않고도 색상을 직접 만드는 방법이 있어 소개해드리려고 합니다.
작업은 스케치를 기준으로 만들어보겠습니다.

1. 먼저 만들고 싶은 컬러 shape을 만듭니다.

#5DC388 컬러를 임의로 지정했습니다.

2. HSL 선택

RGB영역에 마우스 hover시, 컬러값 옵션을 선택할수 있는 셀렉트 박스가 나옵니다.
여기서 HSLHues, Saturation, Lightness)를 선택해줍니다.

3. L값을 변경

밝기 차이가 10인 Lightness 값을 만들고자 한다면, L(56)값에서 +10,-10를 가감해 줍니다.
범위는 0부터 100까지입니다.

이제 shape의 복사본을 10개 만들어 놓고, L에 숫자를 가감하면 됩니다.
(10은 임의의 수입니다. 밝기 차이를 조정하고 싶다면 원하는 숫자를 넣으면 됩니다.)

4. 보조 컬러 만들기

마찬가지로 상단의 컬러 베리에이션 방법을 활용하여 보조색도 만들 수 있습니다.
이번에는 기본 H값에 +30(-30)을 합니다.
맥시멈 컬러가 360이기 때문에 그보다 적은 범위 내를 선택해야 합니다.

* 이미지 출처 : https://chromatichq.com/blog/understanding-and-using-hsl-your-css

이제 이중에 원하는 컬러를 한 가지 선택합니다.
마찬가지로 L값을 변경하여 컬러의 단계를 만들면 됩니다.

5. 조합하기

이제 주 컬러와 보조 컬러를 선택하면 됩니다.

여기에 나머지 컬러까지 조합하면 디자인에 필요한 색상을 정의할 수 있습니다.

____
Dark Mode는 어떡하지?

최근에 다크 모드가 점점 늘어가고 있는 추세이고, 많은 앱들도 다크 모드를 출시하고 있습니다.

다크 모드를 사용하는 이유

• 콘텐츠 유형이 적고 비디오가 더 많은 경우(ex. tv, 동영상 콘텐츠)
• 핵심 요소가 눈에 띄고 눈에 띄기를 원할 때(ex. 내비게이션)
• 배터리 수명을 절약하고(LCD 제외) 접근성을 향상하고자 할 때
• 어두운 환경에서의 사용성을 향상하고자 할 때

다크 모드 사용 시 유의사항

1. 배경 컬러

iOS는 강한 대비를 위해 True Black(#000000)을 사용하고 있으나
올블랙을 사용하면 텍스트와의 대비 때문에 눈에 피로도가 증가할 수 있고, 디스플레이 패널에 따라 빛 번짐 이슈가 생길 수 있습니다.

그래서 다른 앱들은 어떤 bg컬러를 쓰고 있는지 살펴보았습니다.
아래와 같이 각자 서비스에 맞게 컬러를 지정하여 사용하고 있었습니다.

Material design에서는 Dark Grey(#121212) 컬러를 권장합니다.
다크 그레이 컬러를 사용했을 때의 장점은 그림자를 표현이 가능하여 더 넓은 범위의 색상, 고도 및 깊이를 표현할 수 있다는 점입니다.

2. 컬러 값 정의하기

라이트 모드와 다크 모드를 하나의 컬러를 기준으로 반전하면 좋겠지만, 실제 대응해보면 맞지 않는 컬러들이 나오게 됩니다. 따라서 다크 모드의 컬러는 따로 지정을 해주어야 합니다.
다크 배경은 컬러 대비가 크기 때문에 채도 낮은 컬러를 사용합니다.
아래 예시 이미지에서 알수 있듯이 컬러의 조정은 반드시 필요한 과정입니다.

Material design에서 비교한 라이트 모드 VS 다크 모드

* 이미지 출처 : https://material.io/design/color/dark-theme.html#ui-application

3. 의미론적 컬러 만들기

이전에 라이트모드만 염두하고 작업했을 때에는, Hex코드나 컬러명을 기재해 주었습니다.

그러나 다크 모드가 있는 경우, 스케치에서는 각각 라이브러리를 만들어줘야 합니다.
왜냐하면 라이브러리를 만들다 보면 동일한 Hex코드를 사용하는 컬러가 나올 수 있는데, 제플린에서는 2개의 Layer style을 추출할 수 없기 때문입니다.

그래서 네이밍 규칙을 새로 만들어 목적과 UI에 따라 지정해줍니다.
iOS에서는 이것을 시멘틱 컬러라고 명명하였습니다. (Sementic color = 의미론적 컬러)
ex. FFFFFF(White)→Background

레이블을 하나로 만들면 개발에서는 한 컬러만 불러와서 라이트와 다크 모드를 한번에 대응할 수 있습니다.
이렇게 만든 컬러는 심벌로 작업하여 컴포넌트로 업로드하여 사용해야 합니다.

____
마치며

사실 컬러를 정의할 때 이론보다는 서비스의 컨셉이나 전반적인 디자인 스타일에 따라 정하는 경우가 많습니다.
다만 UI 디자인에서도 반드시 따라야할 규칙이 있고(접근성 기준, 시스템컬러 등..) 사용하는 기준이 있어야 사용자나 클라이언트를 설득하는데 유리할 것입니다.
또 새롭게 대응해야 할 다크모드 같은 경우는 컬러 시스템을 어떻게 정의하느냐에 따라 개발 과 디자이너 간 업무효율성을 결정짓는 요인이 될 것입니다.

– 가치디자인그룹 정유희

[참고 자료]
https://material.io/design/color/the-color-system.html#colortheme-creation
https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753
https://uxplanet.org/create-a-color-scheme-around-any-color-in-8-easysteps-a0229e1985c
https://tech.socarcorp.kr/design/2020/07/10/dark-mode-01.html
https://tech.socarcorp.kr/design/2020/07/22/dark-mode-02.html