디자인 시스템 구축하기 2부 : 컬러
컬러, 공간 및 타이포그래피는 단단한 디자인 시스템을 위한 기본 구성 요소이다. 브랜드를 만들 때 중점을 두어야 할 특유의 시각적 요소이기도하다. 우리는 오늘 컬러에 대해 자세히 살펴볼 것이다.
1부 - 준비
2부 - 컬러
3부 - 크기와 간격
4부 - 타이포그래피
5부 - 보너스
목차
1. 컬러
2. 고려 사항
3. 접근성
4. 충분한 대비
5. 메인 컬러 정의
6. 보조 컬러 정의
7. 색조(Tint)와 음영(Shade), 그리고 색상의 단계
8. 차트
9. 컬러 스텝을 다루는 두 가지 공통적인 방법
10. 그레이 또는 중립
11. 정보를 담은 색상
12. 색채명 지정
13.의미론
14. 테밍(Theming)
15. 컬러 생성
1.컬러
디자인 시스템의 기본 구성 요소는 색상이다. 색은 어디에나 있고 당신이 만들 모든 것에 지속한다. 개요부터 배경 및 구성 요소에 이르기까지, 이것들은 색상의 사용을 통해 눈에 보이도록 만들어진다.
2.고려 사항
네이선 커티스 (Nathan Curtis)는 컬러 관련 시스템을 설정하는 16가지의 팁을 가지고 각 포인트에 대해 자세히 설명한다. 여기서 주목할 가치가 있는 일곱 가지를 강조해 보았다.
1. 브랜드 컬러를 빠르게 안정화하라-브랜드 컬러는 광범위하고 빠르게 확산하기 때문에 필수 브랜드 컬러를 조기에 결정해라.
2. 브랜드 팀을 포함시켜라 (브랜드 컬러를 변경한 경우) - 브랜드 컬러는 브랜드 팀의 영역이다. 따라서 그들과 조정을 논의하고 필요하면 판단을 연기해라.
3. 중간의 중립 색을 피해라 - 활용성 있는 대조 효과를 위해 밝은 회색과 어두운 회색을 몇 개 제공하되, 불명확한 와이어 프레임은 사용하지 마라. 중간 회색을 피하는 것을 고려해라.
4. "디지털 블루"로 가라. 모두 그러듯이. - 아마도 첫 브라우저가 나온 이래로 링크는 항상 파란색이었을 것이다. 당신이 만약에 “디지털 블루”를 사용한다면, 접근 가능한 파란색 또는 빨간색, 주황색, 보라색, 녹색과 충돌하지 않도록 해야 한다.
5. 테마가 어떻게 작동하는지 정의한다 - 특히 구동 중인 특정 UI 요소 속성을 참조하여 테스팅 작동 방식을 식별해라. 여기서 중요한 것은, 어느 요소가(다는 아니더라도) 제한을 벗어났는지를 명확히 하는 것이다.
6. 의식적으로 대비를 일찍 체크해라 - 컬러를 담당하는 모든 시스템 디자이너는 WCAG 2.0 규칙에 익숙해야 하며, 컬러의 짝을 테스트하고 컬러 선택에 관행을 통합하는 도구(타나구루와 같은)를 가지고 있어야 한다.
7. 색조(Tint)와 음영(Shade)의 수를 제한해라 - 몇 가지의 옵션을 제공하되 지루한 종류는 피해라. 시스템 사용자에게 단일 옵션 이상의 몇 개의 의도를 가진 선택만으로 선택권을 충분히 부여해라.
Ether는 확인할 가치가 있는 모든 디자인 시스템에 모듈 기반 시스템을 구축했다. 포괄적인 컬러 시스템을 만들 때, 다음의 세 가지 주요 용도에 걸쳐 컬러를 지정하는 것이 좋다.
1.UI 컬러 - UI 컬러는 인터페이스의 핵심 요소(버튼, 텍스트 및 인풋)에 적용된다. 당신은 구성요소를 구축하고 사용자에게 제품의 목표를 설정하는 데 적절한 액션 컬러, 호버 컬러, 기타 인터페이스 컬러에 액세스 할 수 있는지 확인해야 한다.
2. 시맨틱 컬러 - 때때로 컬러는 의미가 있어야 한다. 성공, 경고, 위험 등의 특정 색상이 고유한 색이나 브랜드보다 중요한 경우에 사용할 수 있는 색상이 있는지 확인해라.
3. 레이아웃 컬러 - 컨테이너, 보더, 카드, 규칙, 헤더, 푸터, 사이드 바와 같은 페이지 레이아웃에 사용되는 팔레트의 핵심 요소이다.
UXPin의 Marcin Treder는 컬러 팔레트는 다음을 따라야 한다고 말한다.
1. 충분하고 정밀하게 - 적은 수의 적합한 주요 컬러와 충분한 수의 악센트 색상을 정의한다.
2. 명확히 명명된 - 개발자와 디자이너는 시스템에 정의된 특정 색상을 쉽게 참조할 수 있어야 한다. 색채명은 쉽게 이해하고, 기억할 수 있도록 하며, 디자이너와 개발자 사이의 의미 있는 대화(그림자 변경, 대비 수정 등)를 촉발시킨다.
3. 접근성 - 외부 사용자 접근성(모든 사용자가 색상 조합을 얼마나 쉽게 인지하는지)과 내부 접근성(디자이너와 개발자가 팔레트를 얼마나 쉽게 찾아 사용할 수 있는지) 측면에서 모두 필요하다.
그렇다, 디자인 시스템 모든 색상을 사용하려면 많은 것들을 고려해야 한다. 미리 정의된 브랜드 색상을 사용하고 있다면, 앞서 언급한 두 가지 방법처럼 쉽게 접근할 수 있는 방식으로 적용하는 것이 좋다.
3. 접근성
접근성은 장애를 가진 사람들이 월드 와이드 웹상의 웹사이트와 상호작용하거나 접근을 막는 장벽이 없도록 보장하는 포괄적인 관행이다. 사이트가 올바르게 디자인, 개발되어 편집될 때, 일반적으로 모든 사용자는 정보와 기능에 대해 동등한 접근 권한을 갖는다.
-위키피디아
그러나 접근성은 웹 뿐만 아니라 모든 디지털 제품에서 고려해야 하므로 디자인 시스템 전체에서 적용이 필요하다.
컬러의 접근성은 시각 장애가 있거나 색상 인식에 결함이 있는 사람들이 시각 장애가 없는 사람들과 동일하게 디지털 제품과 상호작용할 수 있게 한다.
2017년 세계보건기구(WHO)는 약 2억 1,700만 명의 사람들이 시력 장애를 가지고 살고 있다고 추정했다.
“접근성이 부족한 제품을 만들지 않는 것은 무례한 일이다. 그러므로 무례하게 굴지 말아라.”
-저스틴 레이나(Justin Reyna)
4. 충분한 대비
색맹인 사람들은 특정 색상 간의 대비를 인지할 가능성이 적다. 색상 조합의 접근성을 테스트하는 데 도움이 되는 많은 도구가 있지만, 색상과 색상이 서로 다른 비율을 계산하여 웹 콘텐츠 접근성 가이드라인(WCAG)을 충족하는지 확인하는 데 가장 도움이 되는 도구는 컬러레이블(Colorable)과 컬러 세이프(Colorsafe)다.
최소 W3C AA 등급을 충족하려면 큰 텍스트의 대비 비율은 4.5 또는 3이어야 한다. 따라서 버튼, 카드, 내비게이션 요소와 같은 것을 디자인할 때, 색상 조합의 대비 비율을 확인해라.
컬러 시스템을 만들 때, 밝은 배경과 어두운 배경의 명암비를 확인해라. 컬러 선택에 따라 밝고 어두운 인터페이스에 색상을 적용하기 위해 두 가지 색상 시스템 또는 규칙 세트를 개발해야 할 수 있다.
“브랜드 컬러는 브랜드팀의 영역이다. 그러므로 그들과 조정을 논의하고 필요하면 판단을 연기해라.”
“접근성에 대해 옹호할 기회를 포착해라. 항상 협업자의 접근성(또는 접근성 부족)에 대한 지식 여부를 탐색하고, 가능한 한 알려주고 옹호하라.”
- 네이선 커티스
5. 메인 컬러 정의
이들은 종종 브랜드에 의해 결정되며 일반적으로 어디에서나 사용되는 주요 컬러다. 이러한 컬러는 1~ 3가지 색상으로 구성되지만 더 많이 포함할 수 있다.
구글은 자사의 디자인 시스템인 머터리얼(Material)에서 주요 컬러를 다음과 같이 설명한다.
주요 컬러(Primary color)는 앱의 화면과 구성 요소에 가장 많이 표시되는 색이다.
만약 보조컬러(Secondary color)가 없는 경우, 주요 컬러를 사용하여 요소를 강조할 수 있다.
Material.io의 이 UI는 주요컬러와 2개의 주요컬러의 변형을 사용한다.Material.io의 이 UI는 주요컬러와 2개의 주요컬러의 변형을 사용한다.
“브랜드 컬러는 넓고 빠르게 퍼지기 때문에 일찍 결정하는 게 좋다.” – 네이선 커티스
6. 보조 컬러 정의
때때로 브랜드는 색상을 보조 팔레트로 확장하고 이어서 3차 컬러도 지정된다. 이 컬러들은 자주 쓰이지 않으며 악센트 컬러와 같은 역할을 한다. 보조컬러 및 3차 컬러의 팔레트는 복잡한 데이터 시각화 또는 그래프에서 자주 사용된다.
보조컬러는 선택 사항이지만 제품을 구별할 기회를 더 많이 제공한다. 예컨대 보조 컬러를 추가하면 UI를 더욱 흥미롭게 만들 수 있다.
7. 색조(Tint)와 음영(Shade), 그리고 색상의 단계
악센트 컬러는 버튼이나 진행표시줄(Progress bar)과 같은 일부 UI 요소나 정보를 강조할 때 사용된다. 악센트 컬러는 일반적으로 밝기와 채도가 높다. 이러한 시각적 특성은 UI 요소를 화면에서 튀어 보이게 함으로써 사용자와의 상호작용을 돕는다.
2014년의 머터리얼 디자인은 각 핵심 색상에서 14단계를 거쳤다. 이것이 훌륭한 선택지를 제공한다고 생각할 수도 있지만, 대신 엄청난 역설을 만들었다. 선택의 폭이 너무 넓으면 디자인 시스템에서 색상을 분할할 때 막대한 불일치를 초래한다. 색상당 최대 4가지 색조 중 3개 정도로 제한하는 편이 훨씬 효과적이다. 구글 머터리얼 디자인의 새로운 컬러 시스템 도구는 악센트 컬러를 선택할 때 색상의 단계와 팔레트를 제한하는 데 도움이 된다.
머티리얼 디자인의 2014년 컬러 스택과 새로운 컬러 툴“몇 가지의 옵션을 제공하되 지루한 종류는 피해라. 시스템 사용자에게 단일 옵션 이상의 몇 개의 의도적 선택만으로 선택권을 충분히 부여해라."
- 네이선 커티스
8. 차트
차트는 더 많은 색상 단계를 사용해야 하는 유일한 시기일 것이다. Graphiq의 사만다 장(Samantha Zhang)은 차트의 색조와 밝기가 모두 넓은 것을 제안했다. 밝기의 차이는 보편적이다. 단색의 컬러 팔레트를 선택하고 적록색맹(Proanopia), 제 2 색맹(Deuteranopia) 및 그레이스케일 모드에서 어떻게 보이는지 테스트해라. 이 팔레트가 얼마나 접근성이 좋은지 금방 알 수 있을 것이다.
구글 머터리얼 컬러에서 전체 색상, 색맹 모드 및 그레이스케일의 라이트블루9. 컬러 스텝을 다루는 두 가지 공통적인 방법
1)음영(Shade) - 불투명도로 음영을 조절한다.
단순하게 색상의 불투명도를 뒤바꾸면 음영을 변경할 수 있다. 이 방법을 사용할 때 유의할 점은, 베이스 컬러가 배경 컬러와 섞여 있다는 것이다. 음영의 생김새는 투명도로 인해 어두운 색에 비해 밝은 색에서 달라질 수 있다. 이 방법은 세심히 보지 않으면 접근성 문제를 야기할 수 있다. 이러한 문제를 해결하기 위해 색조를 변환하여 #928C76와 같은 색상 값을 지정할 수 있다. 더불어 음영은 더 밝아질수록 둔해 보이기 때문에 덜 역동적인 색조를 만드는 경향이 있다. 나의 제안은 단지 이 방법을 호버와 링크, 보더와 같은 단순한 상호 작용에서만 사용하는 것이다.
2)색조(Tint) - 밝기와 채도를 조정한다.
각 베이스 컬러에 이 방법을 사용한다. 빛과 그림자가 색에 떨어질 때 자연에서 색이 어떻게 인식되는지 모방할 것이다. 에릭 D. 케네디(Erik D. Kennedy)는 UI에서 색상을 사용하기 위한 실제 프레임 워크에서 이것이 어떻게 작동하는지 지 잘 설명한다. 어쩌면 음영으로 색상을 조정하는 것보다 약간 더 기술적이지만, 단점이 적고 컬러 스텝이 보다 더 생생해진다.
음영과 색조 “더 어두운 색의 변화는 밝기를 낮추고 채도를 높여 만들어진다. 밝은 색의 변화는 밝기를 높이고 채도를 낮추어 만들어진다.” - Erik D. Kennedy
10. 그레이 또는 중립
중립 색상은 UI 디자인에서 지원 역할을 한다. 이러한 색상은 대개 텍스트와 배경을 위해 만들어진다. 대부분의 중성자는 회색으로 표현된다.
머테리얼 디자인에선 디자인 설계에서 검정 또는 회색의 특정 코드를 정의하는 대신 검은색 불투명도를 사용하여 타이포그래피 값을 적용한다. 즉, 위에서 언급한 '그림자' 접근법을 사용한다.
11. 정보를 담은 색상
이 색상은 성공, 정보, 경고 및 위험을 나타낸다. 이러한 색상 선택은 신호의 색상 심리를 기반으로 해야 한다. 다음은 일반적인 색상이 사용에 대한 간략한 안내서이다.
빨간색: 오류, 위험, 잘못된 것
녹색: 성공, 안전, 옳은 것
노란색: 알림, 주의, 경고
파란색: 정보 제공
12. 색채명 지정
코디하우스(CodyHouse)의 사람들은 멋진 디자인 시스템 템플릿을 만들었다. Sebastiano Guerriero는 그 과정을 문서화했으며 색상은 주로 시맨틱(의미)에 관한 것이라고 언급했다. 디자인 시스템에서 색상을 사용할 때 목표로 삼아야 할 세 가지는 다음과 같다.
1. 색상 변수는 기억하기 쉬워야 한다.
2. 시스템은 쉽게 업데이트할 수 있어야 한다.
3. 시스템은 필수 색상만 포함해야 한다.
13. 의미론
색상 이름을 지정하는 방법에는 여러 가지가 있지만, 위에서 언급 한 세 가지 목표를 달성하려면 다음을 기억해라.
1)색상 이름을 지정해라. - 디자이너, 개발자 및 프로젝트 이해 관계자와 대화할 때 기억하기가 더 쉬워질 것이다.
사례)
faded-jade = #407F7F
seance = #9C27B0
san-mariano = #3D70B2
또는
green = #18BC9C
blue =#3498DB
yellow = #d4860b
red = #E74C3C
2)기능에 색상을 매핑해라. - 이 추상적 개념을 통해 테마 또는 색상 팔레트를 변경해야 하는 경우 색상을 더욱 쉽게 관리 할 수 있습니다.
사례)
brand-primary = faded-jade ( #407F7F)
brand-secondary = seance( #9C27B0)
brand-tertiary = san-mariano( #3D70B2)
또는
colour-success = green ( #18BC9C)
colour-info = blue( #3498DB)
colour-warning = yellow( #d4860b) ( )
colour-danger = red#E74C3C
3)음영(Shade)과 색조(Tint)의 개수 - 색상 목록을 부풀려 만들지 않기 위해 “brand-primary-light” 또는 “brand-primary-dark”라는 매너에서 색상의 단계 명을 정하는 게 좋을 수 있다. 그래프를 생성할 때 앞서 언급한 다른 옵션이 필요할 경우 문제가 발생할 수 있다.
네이선 커티스는 HSL의 밝기를 기반으로 0에서 100 사이의 색상 이름을 확장하자고 제안했다. 이 척도는 어두운 색에서 밝은 색까지 익숙한 범위를 반영하여 새로운 옵션을 주입할 수 있다.
사례)
gray-100 = #2e2e31
gray-60 = #7b7a7d
gray-40 = #a5a5a6
gray-30 = #bbbbbc
gray-20 = #d1d0d2
gray-10 = #e8e7e8
14.테밍(Theming)
디자인 시스템을 만들기 전에 디자인 원칙에 관해 이야기했지만, 디자인 시스템의 특정 영역을 다룰 때 하위 원칙을 도출할 수도 있다. 이것은 색상과 테마에 특정한 몇 가지 하위 원칙을 정의하기에 좋은 장소일 수 있다.
머티리얼 디자인의 색상 원칙15. 컬러 생성
Ether는 세 가지 방법으로 코드에서 색상을 생성하는 방법의 장단점에 대해 자세히 설명한다. 요약은 다음과 같다.
1)Sass/CSS 생성
-장점: 속도, 유연성, 일관성
-단점: 통제 부족; 색상 편차
2)직접 선별
-장점: 통제; 품질
-단점: 시간; 변화
3)하이브리드
-위의 방법을 조합하면 더 큰 효용을 낼 수 있다. 이것이 색상 이름을 지정하는 방법의 기본 개념이다.
다음 글은..
우리는 당신이 시작하기 전에 디자인 토큰과 원칙과 같은 개념을 이해하는 것에 대해 말해왔다. 이 글에서는 첫 번째 필수 요소인 컬러를 다루었다. 하지만 디자인 시스템의 본질은 여기에서 멈추지 않는다. 디자인 시스템 기초의 일부로 크기, 간격 및 타이포그래피를 고려해야 한다. 이 시리즈의 나머지 기사들은 다음과 같다.
컬러와 관련된 참고문헌
General
Color in Design Systems16 Tips for Setting Up a System That Endures
Design System Sprint 2: One Color Palette to Rule them All
Create your design system, part 3: Colors
Colour systems
The light and the dark side: creating a UI colour system in 3 steps
Color in UI Design: A (Practical) Framework
Finding the Right Color Palettes for Data Visualizations
Naming colours
What do you name color variables? | CSS-Tricks
Accessibility
Web Content Accessibility Guidelines (WCAG) Overview
Orange You Accessible? A Mini Case Study on Color Ratio | Bounteous
A guide to color accessibility in product design | Inside Design Blog
Orange You Accessible? A Mini Case Study on Color Ratio | Bounteous
Understanding Success Criterion 1.4.3 | Understanding WCAG 2.0
저자 : Shane P Williams
원문 링크: https://uxdesign.cc/building-a-design-system-where-to-start-part-2-colour-54fbe9b76d85
*무단 전재 및 재배포 금지(링크 공유 가능)
같은 시리즈, 다른 글
디자인 시스템 구축하기 1부: 준비
https://brunch.co.kr/@thinkaboutlove/288
해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv
