[📓아티클] UI를 위한 색

 

오늘의 아티클 : 

https://brunch.co.kr/@blckschrl/41

06화 UI를 위한 색

 

---

1. 아티클 내용 요약

- 색 : 강한 자극을 주는 시각 언어. 

 

- 색 속성 3가지
색상(hue) : 고유한 색의 종류
채도(saturation) : 원색의 진하기
명도(Brightness) : 밝고 어두움을 구분하는 정도

 

- 색 공간
RGB : 빛의 삼원색인 빨강, 초록, 파랑과 투명도를 나타내는 알파를 조합해 다양한 색 표현
HSV,HSB : 색의 속성을 직관적으로 다루기 쉬움
HEX : RGB를 16진법으로 변환한 코드

 

- 주색과 보조색
주색 : 색이 필요한 곳에 가장 많이 사용하는 색
보조색 : 주색이 사용되었고 다른 요소와 구분이 필요할 때 사용하는 색
흑백 : 주로 배경과 글에 쓰이며, 가장 밝은 색과 어둥 ㄴ색

 

- 색 계층
페이지 내의 중요도에 따라 색을 사용하는 것. 기본 골격을 흑백으로, 중요한 요소는 주색과 보조색을 이용해 강조한다.

 

- 색 대비
색은 다른 색과 확연하게 구분되도록 확실한 대비감이 있어야 하므로 배경색, 다른 요소들과의 상대적인 관계를 생각하며 색을 조정한다. 색 대비는 WCAG에서 나눈 레벨을 따르며 주로 AA레벨이 표준으로 쓰인다.
A (최소) - 3:1
AA (중간) - 4.5:1
AAA (최대) - 7:1
- 대비감 체크를 위한 툴
https://colourcontrast.cc/

Colour Contrast Checker

 

- 색 조합
주색을 정한 후 단색, 유사색, 보색을 활용해 스크린을 디자인할 때 명확한 기능을 표현한다.
단색 : 중요한 정보에 주색을 사용하고, 회색 영역도 주색과 같은 계열의 톤을 사용한다.
유사색 : 비슷한 개념이지만 구분이 필요한 상황일 때 유사색을 사용한다.
보색 : 다른 요소보다 강력하게 강조할 필요가 있을 때 사용한다.

 

- 색 비율
60:30:10 비율의 법칙. 60과 30을 이용해 배경 색을 배분하고, 강조하고자 하는 요소나 글 위주의 서비스일 경우 (주로) 포인트컬러를 10%내외로 배분한다.

 

- 밝은 색과 어두운 색
1개의 주색으로 정보를 구분하기 힘들 때 밝은 색과 어두운 색을 사용한다.
색을 어둡게 할 때 : RGB 계열 색조로 움직이고 채도를 늘리고 밝기를 줄인다.
색을 밝게 할 때 : CMY 계열 색조로 움직이고 채도를 줄이고 밝기를 늘린다.
=> 왜 ?
실제 자연에서는 빛이 강해지면 물체의 채도가 약해진다. 또 색조 자체의 밝기가 있어 색이 섞일수록 흰색에 가까워지므로 원색이 가장 많이 섞인 CMY가 밝아진다.

 

- 배경과 색
색은 상대적이라 주변에 어떤 색이 있느냐에 따라 성질이 달라진다.
어두운 배경 + 밝은 영역 + 어두운 내부 요소
밝은 배경 + 어두운 영역 + 밝은 내부 요소

 

 

2. 인사이트

 

- 이론 위주 아티클인 만큼 색에 대한 여러 원리가 나온다. 여기서 배운 원리를 적용한 예제가 더 궁금해졌는데 아티클에서 예제를 보여주거나 하는 건 없어서 아쉬웠다. 직접 어플을 보면서 어떤 원리가 사용됐나 분석해보는 것도 좋을 것 같다.

 

- 가장 흥미로운 파트는 밝은 색과 어두운 색을 만드는 방법에 관한 파트이다. 이 방법에 대해 구체적으로 배워본 적은 없는데 색 조합을 하다보니 어찌저찌 옳은 색 조합을 만든 것 같다. 그때는 컬러에서 직접 골라야 했어서 번거로웠고, 내가 보기에만 자연스러운 걸까봐 걱정도 많았는데 앞으로는 이 방법을 쓰면 좋을 것 같다.

 

+ 팀원분께서 공유해주신 아티클 
https://brunch.co.kr/@chulhochoiucj0/17

모바일 UI 디자인 기본 요소 - 색채 Color

 

 

이번 과제도 그렇고 메인 컬러를 선정할 때 고민이 많이 되곤 하는데 참고가 될 것 같다.