RGB와 Hex Code
디스플레이는 빛의 3원색으로 구현되는 화면이며, 빛의 농도와 명암 조절을 통해 여러가지 색을 만들어낸다. (빛의 3원색: 빨강, 초록, 파랑 / 가산혼합)
빛의 3원색 첫 글자를 따서 RGB 색상이라는 네이밍이 탄생했고, 컴퓨터는 각각의 색상을 256가지의 값으로 보여 준다.
| R | G | B |
|---|---|---|
| 0~255 | 0~255 | 0~255 |
이 숫자들을 컴퓨터는 16진수(Hexadecimal)로 변환해서 읽는다.
| R | G | B | |
|---|---|---|---|
| 0~255 | 0~255 | 0~255 | |
| 16진수 | 0~FF | 0~FF | 0~FF |
이 16진수 값이 우리가 흔히 알고 사용하는 헥스코드인 것이다.
| 255 | 255 | 255 |
|---|---|---|
| FF | FF | FF |
컬러 프로파일
Hexa Code는 빛의 3원색 정보를 16진법으로 변환한 코드이다. 빛의 색상에는 절대적인 기준이 없기 때문에 디스플레이는 자기만의 기준으로 색을 해석하는데 이때 사용하는 색 기준표를 컬러 프로파일이라고 한다.
이 컬러 프로파일은 전 세계적으로 사용할 수 있어야 하기 때문에 공신력 있는 기관이나 기업에서 제작 후 배포하는 형식이다. (Adobe RGB / sRGB 등)
그렇기 때문에 컬러 프로파일마다 더 잘 표현할 수 있는 색상이 조금씩 달라진다.
이는 디스플레이 자체 뿐만 아니라 프로그램 자체에서도 컬러 프로파일이 조금씩 다르다.
컬러스타일의 개념
디자인 시스템에서 사용할 색상을 모아두는 팔레트로 색상이 어두워지고 밝아지는 규칙을 만들어야 하다. 사용할 색상을 미리 정해두고 그 안에서 사용하는 것이다.
규칙 없이 색상을 사용한다면...
팀원 간 색상 사용 규칙 공유가 어려워서 커뮤니케이션이 불편해진다.
일반적인 컬러 스타일 제작 방법
컬러스타일은 기본적으로 2~3가지 색상으로 만들어진다.
(이미지 출처: 스파르타코딩클럽)
1. 포인트 컬러 (프라이머리 컬러 / 악센트 컬러)
제품애서 가장 중요하고 핵심적인 부분에 사용하는 색상.
2. 메인 컬러 (백그라운드 컬러)
제품의 전체적인 분위기를 만드는 배경색
3. 세컨더리 컬러 (서브 컬러)
배경색에 도드라지는 부분을 설정하여 포인트 컬러를 뒷받침하는 색상
색상의 개수는 제품에 따라 달라져도 괜찮다. 또한 배경색, 포인트색 이렇게 두 가지 먼저 사용해도 된다. 디자인에 정해진 답은 없다.
10단계의 색상 설정
색상의 확장성 필요
즉, 다양한 상황에 대응할 수 있도록 유연하게 만들어 놓아야 한다는 것이다.
예를 들자면, 흰색과 검은색만 준비됐는데 덜 강조되는 텍스트를 넣기 위해선 회색이 필요할 때가 있을 것이다. 여기서 미리 회색톤의 색상을 준비해두면 필요할 때 잘 사용할 수 있다.
때문에 하나의 색을 가장 밝은 색부터 어두운 색까지 단계별로 세팅하는 것이다.
왜 10단계인가?
-
명도와 채도를 기준으로 10단계를 만들기 때문에 0%부터 100%까지 10단위로 나눠 쓸 수 있다.
-
10 단위로 떨어지기 때문에 중간에 50단위 색상을 추가하기 용이하고 색상간의 파이도 알아보기 쉬어진다.
-
그 이후에 글자 등에 기본으로 사용할 흰색 ~ 검은색의 회색조 10단계를 만든다.
1:3:6 법칙
(이미지 출처: 스파르타코딩클럽)
해당 법칙을 준수하면 전체적인 균형은 물론 유저가 집중해야할 곳이 어디인지 쉽게 알 수가 있다.
- 포인트 컬러의 비율은 화면의 10%
- 전체적인 배경의 메인 컬러 60%
- 포인트 컬러를 뒷받침 할 세컨더리 컬러가 30%
예시 모음
(이미지 출처: 스파르타코딩클럽)
컬러 스타일 만들어 보기
실무에서의 컬러 스타일 세팅 과정은 매우 복잡하다.
브랜드 및 제품에 어울리는 색상을 선택하기 위해 오랜 기간 수십 가지의 색상을 두고 테스트와 분석을 반복하며, 수학적인 계산이 들어가기도 한다.
Coolors라는 플러그인을 통해 먼저 색상을 뽑아보았다.
그런 다음 명도를 10씩 빼고 더하면서 색상을 맞춰 준다.
색상명을 설정하기 위해 사각형 10개 씩의 이름을 이렇게 변경해준다.
Styler라는 플러그인을 통해 컬러 스타일을 등록해준다.
그럼 오른쪽 스타일 패널에서 설정한 아름에 맞게 성공적으로 등록이 된 것을 볼 수가 있다.
 |  |
|---|
Auto Documentation라는 플러그인으로 등록한 컬러 스타일을 캔버스에 문서 형태로 정리해주면 끝~
