UI를 디자인 할 때 사용하는 색이란 요소는 무엇인가?
우리는 UI를 디자인을 할 때, 여러 요소들을 마주하면서 사용자들에게 더 나은 서비스를 제공하려고 한다.
그 중 우리는 색이란 요소와 필연적으로 마주치게 되는데,
이 색이란 것은 강한 자극과 메세지를 주는 시각적 언어이며,
우리는 사용자들에게 더 나은 서비스를 제공하기 위하여 이 색이란 요소를 이용해야 한다.
그렇기 때문에 오늘은 색에 대해 알아보는 시간을 가져보려고 한다.1. 색의 속성
색은 3가지 속성을 가지고 있다.
- 색상 ( Hue ) : 고유한 색의 종류
- 채도 ( Saturation ) : 원색에서 진하기의 구분
- 명도 ( Brightness ) : 밝기와 어둠의 구분
2. 색의 공간
색의 공간은 디지털 디바이스에서 다양한 색을 표시하기 위한 규격이다.
디지털 프로덕트에서 색은 주로 RGB, HSL, HSB 등이 있고, 작업 시에는 HEX와 RGB를 사용한다.- RGBA ( Red, Green, Blue, Alpha ) : 빛의 삼원색인 RGB와 투명도를 나타내는 Alpha로 이루어져있다.
- HSV, HSB ( Hue, Saturation, Value or Brightness ) : 직관적인 색의 속성
- HEX : RGB를 16진법으로 변환한 코드
3. 주색과 보조색
서비스에서 사용되는 색은 주로 3가지가 있다.
- 주색 ( Primary Color ) : 가장 많이 사용하는 색
- 보조색 ( Secondary Color ) : 주색이 사용되고 다른 요소와 구분이 필요할 때 사용하는 색
- 흑백 ( Black & White ) : 주로 배경과 글에 사용
4. 색의 계층
페이지 내의 중요도에 따라 사용.
- 기본 골격은 흑백
- 기능 혹은, 중요한 정보일 시에는 주색과 보조색으로 강조
5. 색의 대비
색은 다른 색들과 확연하게 구분되어한다.
색의 대비는 WCAG에서 나눈 레벨을 사용하며, AA 레벨이 주로 사용된다.- A ( 최소 ) = 3 : 1
- AA ( 중간 ) = 4.5 : 1
- AAA ( 최대 ) = 7 : 1
Contrast Checker
6. 색 조합
주색을 정한 뒤, 색상환을 기준으로 사용할 색을 정한다.
- 단색 ( Monochromatic ) : 중요한 정보, 회색 영역 또한 같은 계열의 색 사용
- 유사색 ( Analogous ) : 구분이 필요할 때 사용
- 보색 ( Complemntary ) : 강력하게 강조할 때
7. 색의 비율
60-30-10 법칙을 사용.
60%와 30%를 이용하여 배갱색을 배분하고, 강조하거나 글 위주의 서비스일 경우 10%로만 사용한다 
8. 밝은 색과 어두운 색
하나의 주색으로 구분이 어려울 경우 밝기와 어둠을 사용한다.
- 어두운 색 : RGB 계열 색조를 움직인 뒤, 채도를 늘리고 밝기는 줄인다.
- 밝은 색 : CMY 계열 색조를 움직인 뒤, 채도를 줄이고 밝기는 늘린다.
9. 배경과 색
색은 상대적이기에, 다크 모드를 디자인 할 때 본래 색을 사용하지 않고 다른 색을 사용.
- 어두운 배경 + 밝은 영역 + 어두운 내부 요소
- 밝음 배경 + 어두운 영역 + 밝은 내부 요소
ㅇ
이 글을 읽으면서 좋았던 점 : 각 문단별로 예시를 들어주어서 이해가 쉬웠다.
이 글을 읽으면서 아쉬웠던 점 : 예시를 들어 줄 때, 부가 설명이 많지 않아서 직접 추가적으로 찾아봐야하는 어려움이 있다.