UI 디자인 색상 사용의 10 가지 원칙

https://uxdesign.cc/10-principles-for-color-usage-in-ui-design-65174b213004

10 Principles for Color Usage in UI Design

UI 색상 사용을 위한 모범 사례들, 조언, 그리고 전문 용어.

 

Danny Sapio

 

 

1. 색상 전문 용어

색상 전문 용어는 우리의 색상 지식에 대한 기초를 형성한다. 휴, 틴트, 그리고 셰이드와 같은 색상 용어를 도구처럼 사용하여 독특한 색상 팔레트를 개발하는 데에 사용하는 것을 생각해보자.

 

• 휴: 휴는 색상에 대한 기술적인 용어이다. 휴는 부모 색상 - 흰색이나 검은색 없이 포화된 - 을 말한다.
• 틴트: 틴트는 흰색이 휴에 추가되면 생성된다.
• 셰이드: 셰이드는 검은색이 휴에 추가되면 생성된다.
• 톤: 톤은 회색, 즉 틴트(흰색)와 셰이드(검은색)이 휴에 추가되면 생성된다.
• 값(밸류): 값은 색상의 밝음이나 어두움을 나타낸다. 반사되는 빛의 양을 가리킨다.
• 포화(새츄레이션): 포화는 색상의 광택이나 강렬함의 정도를 나타낸다. 높이 포화된 색상들은 선명하고 빛이나지만 낮게 포화된 색상들은 칙칙하다.

2. 계층

한 요소의 모습이 그 주변과 대조될 때, 그 요소가 높은 중요도를 가지고 있음을 나타낸다. 우리는 한 인터페이스 안에서 계층을 설립하는 데에 색상과 색상의 무게를 사용할 수 있다.

 

색상의 틴트들을 사용함으로서 요소들에 다양한 레벨의 중요도를 부여할 수 있다.

 

만약 한 요소가 다른 요소 보다 더 중요하다면 그것이 더 높은 시각적 무게를 지녀야 한다. 이것은 사용자가 빠르게 페이지를 훑어 보며 중요한 것과 덜 중요한 정보를 쉽게 구분하게 해준다.

 

더 눈에 잘 띄고 더 굵은 정보에 사용자의 눈이 먼저 끌리게 될 것이고 그리고나서 그들은 그 아래의 보조 정보로 옮겨갈 것이다.

 

3. 표현력

당신의 브랜드의 독창적인 스타일을 강화할 브랜드 색상들을 기억할만한 순간에 보여주어라.

 

당신의 브랜드 색상들을 아보카도 토스트 접시위의 소금과 후추처럼 생각하라.

 

너무 많은 소금은 본연의 맛을 압도할 것이고 너무 적으면 밍밍할 것이다.

 

당신의 브랜드를 인터페이스에 강조시킬 색상들을 추가할 때, 언제 어디에 추가할 것인지 심사숙고하라.

 

4. 포용성

한 상품을 고안하는 것은 도서관이나 학교같은 공공 건물을 건설하는 것과 유사하다. 모두를 포용해야 한다. 도미노 피자에 물어보라. 그 웹사이트를 이용할 수 없었던 시각장애인에게 고소당했다. 도미노 피자처럼 되지 말고 접근성을 디자인하라.

 

웹 컨텐츠 접근성 가이드라인 (WCAG) 은 인터페이스에 있는 색상들이 행동, 청력, 인지 장애가 있는 사람들에게도 확실히 접근 가능하도록 하는 권고 사항들 가지고 있다. 예를 들어 글자 표준은 최소 4.5:1의 비율을 요구한다.

 

이러한 표준들을 지키고 있다는 것을 확실히 하려면 스타크를 다운로드하여 당신의 디자인들이 접근성 있는지 아닌지를 확인하라. 그 플러그인들로 색맹도 시뮬레이션 할 수 있고 필요한 만큼 고칠 수 있다.

 

종종 우리는 좋아 보이도록만 디자인 하려 하고 우리의 제품과 소통할 다양한 사용자들을 고려하는 것을 등한시 한다. 

 

내가 디자이너로 성숙해지면서, 내 완벽한 디자인 아이디어를 침해할 다양한 제약들을 인정하게 되었다. ADA 준수는 그러한 제약들 중 하나이다.

 

우리가 드리블(Dribbble)의 좋아요 점수를 따려 한다면 이런 것을 피할 수 있겠지만, 실제 인간들을 위한 제품을 개발할 때에는 이것은 좋은 연습이 아니다.

 

5. 의미

색깔들은 여러가지 느낌들과 감정들을 불러일으키기에, 색상 심리를 이해함으로써 우리의 목표 청중과 공명하는 브랜드 색상들을 활용할 수 있다.

 

당신의 청중이 누구인지 깨닫는 것은 중요하다. 그리고 지방, 문화에 따라 색상에 대한 인식이 다르다는 것을 기억하라. 예를 들면, 서양 문화에서 흰색은 종종 결혼식과 연관되지만 동남아시아 문화에서 흰색은 애도의 색깔로 인식된다.

 

색상과 그 의미들에 대해 이해하면 할 수록 그 의미가 더 강력해질 수 있다.

 

회사들은 우리의 감정에 항상 영향을 끼치는 전략으로서 브랜딩이나 마케팅에 색깔들을 사용한다. 거의 모든 패스트푸드 레스토랑들이 팔강과 노랑을 자기 브랜드에 사용하는 것을 눈치챘는가? 그것은 빨강이 자극, 식욕, 배고픔을 유발하고 주의를 끌기 때문이고, 노랑은 행복과 호의적인 감정을 유발하기 때문이다.

 

6. 색상 제한

당신의 앱에 색상 사용을 제한함으로써 색상을 받는 부분들, 글자, 이미지, 그리고 버튼들과 같은 개별적인 요소들이 더 관심을 받게 된다.

 

인스타그램이나 트위터처럼 수 많은 컬러풀한 게시글들과 예측할 수 없는 내용이 있는 많은 앱들의 인터페이스들은 꽤나 단순하다는 것을 눈치채게 될 것이다. 이것은 미묘하지만 시선을 인터페이스에서 떼어내어 내용에 집중하게 한다.

 

7. 상태

색상은 앱의 상태, 그 컴포넌트들 및 각 요소들에 관한 정보를 제공해줄 수 있다.

 

색깔은 인터페이스의 상태의 변화를 나태나는 방식 중 하나이다. 한 버튼의 색깔을 없앰으로써 그 버튼이 비활성화되었음을 알리거나 빨간색으로 강조함으로써 오류 신호를 보낼 수 있다. 또한 평확성을 보장하고 색맹 사용자들에게 잘 보이도록 오류 메시지 및 아이콘의 오류 색상을  같이 가져가야 한다.

 

8. 일관성 및 맥락

인터페이스에서 색 사용은 일관성 있어서 맥락이 변하더라도 색깔들은 같은 것을 의미해야 한다.

 

만약 빨강이 브랜딩에 사용되었다면 오류 상태를 알리는 데에 그것의 사용을 피해야 한다. 혼란을 피하기 위해 노랑과 같은 대체 색상을 가용할 수 있다.

 

이것은 해결하기 쉬운 문제이기 때문에 빨강이나 노랑을 브랜딩에 사용하는 것을 피할 이유가 없다.

 

9. 칼라 팔렛

이제 가장 중요한 질문, 어떻게 완벽한 칼라 팔렛을 얻는가?

 

그것은 간단한 색상 이론과 기초 도구를 이해함으로써 시작된다.

 

1 단계 - 주 색상 및 시스템 색상

 

선호도, 연구, 또는 위의 5번에서 공유한 색깔의 의미에 기반하여 결정할 주 색상부터 시작하겠다.

 

내가 선택한 주 색상은 나의 브랜드 색상이다.

 

주 색상을 정했으니 글자, 배경, 컨테이너 등을 위한 색상들이 필요하다.

 

나는 전형적으로 글자에는 어두운 색상을 선택하고 배경으로는 밝은 회색을 사용할 것이다.

 

2 단계 - 팔렛 생성하기

 

내 UI 를 위한 기본 색상들을 선택하고 나면 나는 그 색깔들을 구글 색상 도구(바닥 근처)에 놓아 그 색깔로부터 여러 가지 셰이드 및 틴트들을 얻는다.

 

이것은 항상 완벽한 것은 아니지만 나중에 필요한 만큼 추가하거나 고칠 수 있는 거의 완벽한 칼라 팔렛을 생성하는 간단한 방법이다.

 

보색들이나 접근성 시험이 필요하면, 구글 색상 도구로 전부 다 할 수 있다. 원 스톱 샵이다.

 

3 단계 - 모두 함께 묶어라

 

10. 60-30-10 규칙

60%는 주요 색깔, 30%는 부차적인 색깔, 그리고 10%는 강조 색깔.

 

이 개념에 대해 워이칙 젤린스키 (Wojciech Zieliński) 의 UI 디자인에서 색상 사용하기 라는 글에서 처음 배웠다.

 

"이 인테리어 디자인 규칙은 색채 조합들을 쉽게 한군데로 모으는 것을 도와줄 수 있는 변치 않는 장식 기술이다. 60%+30%+10% 비율은 색깔들에 균형을 주기 위한 것이다. 이 공식이 통하는 이유는 이것이 균형감을 생성하고 우리 눈이 한 촛점에서 다음으로 편안하게 옮겨가도록 해준다."

 

앞에 언급한 조언들 - 색깔을 아껴 사용해서 브랜딩을 강조하고 강화하는 것- 과 유사하게, 60-30-10 은 색상을 과도하게 사용하지 않도록 하게 하는 개략적인 도구이다.

 

나는 또한 내 인터페이스에서 몇 발짜국 뒤로 가서 눈을 가늘게 뜨고 보기를 좋아한다. 흐릿한 이미지는 계층에 대한 아이디어 및 혹시 내가 색깔을 너무 많이 쓰고 있지 않은지에 대해 아이디어를 줄 것이다.

 

 

보너스: 색상 도구 및 자료

 

색상 도구 재료 디자인 (바닥 가까이 스크롤하면 있음)

Material Design

 

칼라 팔렛 생성하는 데 내가 아는 최고의 도구이다. 알고리즘을 활용하여 접근성 있고 미적으로 흡족한 팔렛들을 만들어 낸다.

 

Dribbble.com/colors

Browse by color | Dribbble

드리블은 UI 영감을 얻는 데에 내가 가장 좋아하는 곳이다. 색깔로 검색하기 기능으로 다른 디자이너들이 특정 색깔을 자신들의 디자인에 어떻게 사용하고 있는지에 대해 간단하게 아이디어를 얻을 수 있다.

 

Colors.co

Trending color palettes - Coolors

쿨러스는 인기있는 칼라 팔렛을 둘러 보고 디자인으로 빠르게 복사할 수 있게 하는 대단한 곳이다.

 

Shaerade

Shaderade - Color Shader

셰이더레이드는 셀 수 없이 많은 적확한 틴트들과 휴들을 활용한 단색 색채 조합들을 생성한 빠르고 쉬운 도구이다.