[Figma 활용법 (1)] 3주차 학습일지(3)

📌디자인 시스템은 규칙이 매우 중요한 개념
    
RGB와 Hex Code
디스플레이는 빛의 3원색으로 구현되는 화면
즉, 빛의 농도와 명암을 조절해 여러가지 색으로 만들어진다.
빛의 3원색의 첫글자를 따서 쓰면 RGB가 되고, 우리가 아는 RGB색상의 뜻이된다.
이 각각의 숫자를 컴퓨터는 16진수로 변환해서 읽는다.
이 16진수 값이 우리가 흔히 아는 헥스코드라고 한다.

★가장 어두운 색 900, 가장 밝은 색 50☆

Red, Green , Blue
0~255, 0~255, 0~255
=00~FF , 00~FF , 00~FF 흰색
=00, 00, 00 검은색


#컬러 스타일을 만드는 일반적인 방법

컬러 스타일은 기본적으로 2~3가지 색상으로 만든다.
우리 제품에서 정말 중요하고 핵심적인 부분에만 써야 하는 색상. 프라이머리 컬러 또는 엑센트 컬러라고도 부른다.       
우리 제품의 전체적인 분위기를 만들어 줄 배경색. 백그라운드 컬러라고도 한다.

1.포인트 컬러 : 우리 제품에서 정말 중요하고 핵심적인 부분에만 써야 하는 색상. 프라이머리 컬러 또는 엑센트 컬러라고도 부른다.(포인트 컬러를 많이 사용한다고 포인트컬러가 아님, 사람들의 시선이 주목되야 하는곳에 사용해야 한다.)
2.메인 컬러 : 우리 제품의 전체적인 분위기를 만들어 줄 배경색. 백그라운드 컬러라고도 한다.
3.세컨더리 컬러 : 배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상. 서브 컬러라고도 부른다.

📌배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상을 서브 컬러라고도 부른다.

색상의 개수는 제품에 따라 정해도 무방. 배경색과 포인트색 하나씩 정해서 먼저 2개만 써도 괜찮다.디자인에는 정해진 답이 없기 때문에
색상을 정했다면, 가장 밝은 단계부터 가장 어두운 단계까지 총 10단계로 만든다.
     
#색상의 확장성
다양한 상황에 대응할 수 있도록 유연하게 만들어둬야 한다는 뜻
만약 흰색과 검은색만 준비해 놓은 경우, 회색처럼 조금 덜 강조된 텍스트를 써야 할 때 사용할 색이 없다? 조금 더 연한 색이나 조금 더 진한 색들을 준비해 두면 더 강조하거나 덜 강조할 필요가 있을 때 사용할 수 있다.
그래서 하나의 색을 정하면 가장 밝은 색부터 가장 어두운 색으로 단계별로 만들어두는 것
 
Q. 왜 10단계인가?, 일반적으로 색상을 10단계로 만드는 이유  

1. 색상의 밝고 어두움(명도), 연하고 진함(채도)을 기준으로 10단계를 만들기 때문에, 0%에서 100%를 10단위로 나눠 쓸 수 있다.
2. 10단위로 딱 떨어지기 때문에, 중간에 50단위의 색상을 더 추가하기 쉽고 색상 간의 차이도 10단위다 보니 알아보기도 쉽다.

대부분 10단계로 만들지만, 디자이너의 재량에 따라 더 줄일 수도 늘릴 수도 있다!
그 이후엔 글자 등에 기본으로 사용할 흰색부터 검은색의 회색조 10단계를 만든다.

#1:3:6법칙
- 가장 중요한 색상, 즉 포인트 컬러의 비율을 화면의 10% 정도만 쓴다.
- 전체적인 배경인 메인 컬러가 60% 정도 차지하도록 한다.
- 포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러로 나머지 30%을 쓴다.


색조, 채도, 밝기 HSL
Primary/900~50 첫번째 컬러
Secondary/900~50 두번째 컬러
Tertiary/900~50 세번째 컬러

*Plugins - Saved Plugins -  Styler - Generate Styler 10가지 색깔을 자동으로 팔레트에 등록하는 방법