컬러네이밍 지정하기
Definitive naming : 확실한 네이밍
Semantice naming : 시맨틱 네이밍
: 컬러의 의도를 설명하는 이름("Primary","info","Danger","Neutral")은 의미상 네이밍된 컬러이다. 많은 디자인시스템과 CSS 프레임워크는 이 규칙을 사용하여, 사용자가 원하는대로 앱을 전체적으로 테마화 할 수 있도록 한다.
⇒ 시맨틱 네이밍을 통해 사용자는 이름과 값 대신 값만을 변경할 수 있으며, 필요한 컬러 조합으로 쉽게 수정할 수 있다.
⇒ 색상의 의도를 설명해줌.
- Accent Color(=brand colors)
Primary,Secondary,Tertiary 등으로 브랜드의 정체성과 관련 있는 색상으로 화면에서 가장 강조되는 액션을 Primary 색상으로 표시한다.
- Primary Color는 눈에 띄는 버튼, 활성 상태 및 높은 표면의 색조와 같은 UI 전체의 주요 구성요소에 대한 역할로 사용됨.
- Secondary Color는 필터,칩과 같이 UI에서 덜 눈에 띄는 구성 요소에 사용되며 색상 표현의 기회를 확장시킴.
- Tertiary Color는 Primary와 Secondary와 균형을 맞추거나 관심을 높이는데 사용할 수 있어, 대비되는 악센트 역할로 사용됨.
- Neutral Color
Gray, Black 등으로 배경,구분선,텍스트 등 레이아웃을 구성하고 계층 구조를 전달하기 위하여 가장 일반적으로 다양한 방식으로 사용되는 색상이다.
- Semantic Color
Blue,Green,Yellow,Red 등과 같이 색상 자체에 의미를 포함하는 색상이며 보통 4가지로 제공된다.
- Red : 오류,금지,정지,위험,불가
- Yellow : 주의,경고,알림
- Green : 안전,진행,계속,성공
- Blue: 정보 활성화,진행 중
⇒ 웹접근성에 따르면 색상으로만 의미를 전달하기 보다는 아이콘 또는 바와 같은 형태로 상징적인 의미에 부합하는 조합으로 사용하는 것을 권장한다.
Contextual naming : 상황별 네이밍
: 컴포넌트의 특정 유형 또는 범주에 대한 색상을 정의하는 이름("color-text-brand", "color-text-default"등)은 컨텍스트 네이밍의 예시이다. 때때로 'CSS Semantic'이라 불리는 이 규칙은 프로그래머가 앱의 테마와 모드를 세밀하게 제어하기위해 자주 사용한다.
⇒ 색상 사용의 설명을 해줌.
⇒⇒ 디자이너는 시맨틱 네이밍을 개발자는 컨텍스트 네이밍을 통해 상호보완하여 사용한다.
컬러팔레트 선언하기
1. Grey Scale Colors
: 작업 전 계층 구조를 나타내기 위해 사용함. Layout Color 라고도 함.
Gray 컬러를 50부터 900까지 총 10단계로 나누어 필요에 따라 추가로 세분화,간소화 하여 사용할 수 있다.
2. Brand Colors
Primary Color
: 유저 눈에 띄어야 하는 버튼, 활성 상태 또는 높은 표면의 색조 등 UI 전체의 주요 구성 요소에 대한 역할로 사용
primary color를 결정할 때 고려할 점
1. web 접근성 기준(W3C AA등급) 에 맞는지
2. 일관된 브랜드 경험을 제공하는지
Secondary Color
: 필터, 칩과 같이 UI에서 눈에 덜 띄는 구성 요소에 사용되면서 색상 표현의 확장을 도움
Tertiary Color
: secondary와 균형을 맞추거나 요소에 대한 관심을 높일 때 사용할 수 있으며, 대비되는 악센트의 역할을 유도할 때 사용.
Primary Color 만들기
- Primary Color 지정
- 컬러 옵션 값으로 HSL을 선택함. (Hue, Saturation, Lightness)
- L값을 10단위로 가감하여 10개의 값을 만들어 줌
Secondary/Tertiary Color 만들기
-
Primary Color에서 H값 30단위로 가감하여 만들어서 선택
-
Primary와 똑같이 L값을 10단위로 가감하여 10개의 값을 만들어 줌
참고/예시 링크
디자인 시스템,컬러 네이밍 정하기
디자인 시스템 구축하기: 홀로 시작하는 디자이너에게
디자인 시스템에 적용 가능한 시멘틱 컬러를 알아보자
