시멘틱 컬러의 정의
Sementic, 직역하면 의미론적이란 뜻으로 색상이 아닌 사용 방법에 때라 색상 이름을 지정하는 방법이다.
기존의 Blue500 (X) / Primary color (O)
- 사용되는 목적과 UI에 따라 네이밍 및 적용하는 컬러를 말한다
- 컬러의 관리와 유지 보수가 쉬워진다
- 떄문에 다크 모드에서도 최적화된 컬러로 화면 구성이 가능하다
컬러 팔레트 선언하기
1. Gray Scale Colors
작업을 하기 전 계층 구조를 나타내기 위해 사용한다.
Gray 컬러를 50, 100, 200, 300, 400, 500, 600, 700, 800, 900까지 총 10단계로 나누어 필요에 따라 추가로 세분화 또는 간소화하여 사용한다.
가독성을 고려해야 하는 Gray Scale 컬러 특성 상 배경으로 사용될 때는 명암비를 잘 조정하는 것이 필요하다.
권장 비율
- Regular 18pt 이하 -> 배경 대비 4.5 : 1
밝은 회색 텍스트가 어두운 회색 배경에 놓였을 때
흰색 텍스트가 어두운 배경에 놓였을 때
- Bold 14pt 이상 -> 배경 대비 3 : 1
크고 굵은 텍스트가 밝은 배경에 놓였을 때
이를 테스트할 땐 디자이너의 직감을 믿는 것도 좋지만 보다 더 근거있는 디자인을 위해서는 다른 접근성 온라인 도구를 이용하는 것이 좋다.
WebAIM Contrast Checker
Adobe Color Accessibility Tools
2. Brand Colors
Primary Color는 유저 눈에 띄어야 하는 버튼, 활성 상태 또는 높은 표면의 색조 등 UI 전체의 주요 구성 요소에 대한 역할로 사용된다.
Secondary Color는 필터, 칩과 같이 UI에서 눈에 덜 띄는 구성 요소에 사용되면서 색상 표현의 확장을 돕는다.
Tertiary Color는 Secondary와 균형을 맞추거나 요소에 대한 관심을 높일 때 사용할 수 있으며, 대비되는 악센트의 역할을 유도할 때 사용한다. 또한 디자이너 재량에 따라 사용할 수 있도록 하여 제품에서 색상 표현 시 폯 넓은 지원을 하는 역할 또한 수행한다.
Primary Color 만들기
- Primary Color를 지정한다
- 컬러 옵션 값으로 HSL을 선택한다 (Hue, Saturation, Lightness)
- L값을 변경한다 (나는 밝기 차이 10을 두고자 함)
- 그렇게 총 10 개의 명도 값을 만들면 끝!
Secondary(Tertiary) Color 만들기
- Primary Color 컬러 설정 때와 비슷하게 이번엔 H 값에 30 단위로 가감을 진행한다. 맥시멈 컬러가 360이기 때문에 이 안에서 선택이 필요하다.
 |  |
|---|
- 1번에서 추출한 보조 컬러도 L 값을 변경하여 컬러의 단계를 만든다
시멘틱 컬러 선언
기본 팔레트를 기반으로 컬러 팔레트 내의 색상명이 아니라 UI 요소 및 상태에 따라 의미를 부여하는 방식을 채택해야 한다.
Elememt.State
