◆ url
◆ 내용 요약
디자인 시스템에서의 확장 가능하고 조화로운 컬러 시스템을 구축하는 방법을 소개해준다.
모든 컬러를 정리하기대부분 모든 컬러를 4개의 그룹으로 구조화 할 수 있다.
•
기본컬러 : UI 전체에서 가장 자주 사용되며 제품 고유의 정체성을 가져온다.
•
서브컬러 : 기본컬러를 강조하거나 보완해줍니다. UI 요소를 눈에 띄게 만드는데 약간만 사용. 3가지 컬러로 제한하면 인지성과 일관성이 높아진다.
•
뉴트럴 컬러 : 화이트에서 블랙까지 회색의 음영을 포함한다. 배경, 텍스트 컬러, 폼 등 UI 가장 많은 곳에 사용됨
•
시멘틱 컬러 : 이 컬러는 목적을 전달함. 상호작용에 있어서 어떤 의미를 내포하면서 메시지를 전달해줌.
확장된 팔레트 만들기다양한 케이스에 제공할 베이스 컬러의 추가 색조가 필요함.
색조, 채도, 밝기의 관점에서 일관성 있고 조화로운 컬러 팔레트를 만들어야 하는데
컬러 시스템을 만들어주는 Colorbox 프로그램 조작 원리를 짚어보며 살펴본다.
1. 주요 단계 : 팔레트 견본 수를 정의함. 10-11단계로 시작
2. 기본 컬러 잠금 : 기준이 될 컬러를 고정한다.
3. 색조 베리에이션 정의 : 색조 차이에 대한 정도 커브를 조정한다.
4. 채도 베리에이션 정의 : 채도 차이에 대한 정도 커브를 조정한다.
5. 밝기 베리에이션 정의
확장된 컬러에 대한 음영 줄이기앞단계에서 진행한 팔레트에서 실제 필요한 컬러만 남기기. 컬러 사용 케이스와 그 수를 분석하고 줄여보는것을 제안함.
네이밍 규칙을 설정하기‘메인컬러’ 같이 논리적이고 이해하기 쉬운 이름이
#1F6AE3과
같은 코드보다 직관적이다.
•
디자인 토큰 : 비주얼 디자인 속성(간격, 컬러, 타이포그래피 등)에 저장되는 정체성으로 이름지어짐. 즉 하나의 이름으로 여러 색을 상속할 수 있다(브랜드가 여러개인 경우)
[컬러라벨 - XX] 식으로 네이밍 한 예.
XX 의 예
•
기본컬러의 경우 100
•
기본컬러보다 어두운 음영: >100
•
기본컬러보다 밝은 음영 : <100
새 색상 팔레트를 확인하기제품의 주요 여정을 확립하고 그 여정대로 새롭게 생성된 컬러를 재배치하기.
접근성을 고려하기. 배경과 텍스트 요소 사이의 충분한 대조를 확인해야 함.
•
WGAG color contrast가이드라인 : 웹 접근성 지침 내 UI에 사용된 색상 조합이 시각장애인과 저시력자를 포함한 모든 사용자가 쉽게 인식할 수 있는 충분한 대비를 제공하는지 확인하기 위한 지침.
•
standard text : 4.5:1
•
Large text : 3:1
•
UI elements : 3:1
사용 가이드라인 정의하기어떤 컬러를 어떤 때 사용해야 하는지에 대해 정의하기.
이해관계자들에게 컬러팔레트와 사용가이드라인을 전달하고 검증하도록 하여 피드백 받기개발자에게 전달하기. 그들의 라이브러리 컬러와 디자인 토큰을 통합할 수 있도록 하기.◆ 느낀점
이미 존재하는 제품에 대한 컬러시스템을 정의할때 어떤 순서로 해나가야 할지 구체적 방법에 대한 팁을 얻을 수 있었다.