3.3Colors
컬러 선정과 피그마에서의 컬러 작업
TL;DR
Color Schemes
프로젝트에 쓰일 색들의 집합인 Color Palette에는 자주 쓰여온 패턴들이 있다.
-
Monochromatic : 하나의 메인 컬러를 가지고 해당 컬러의 shade와 tint를 쓴다.
-
Analogous : Color Wheel에서 연속적으로 붙어있는 세 개의 색을 사용한다.
-
Complimentary : Color Wheel 반대쪽에 있는 색을 활용한다.
-
Split-Complimentary : Color Wheel에서 삼각형을 그릴 수 있는 구도로 서로 떨어진 색들을 사용한다.
-
Triadic : Split-Complimentary보다 더욱 정확하게 삼각형을 그릴 수 있도록 똑같은 간격을 띄고 있는 색들을 사용한다.
색을 사용할 때 해야할 중요한 질문들
우선, 어떤 문제를 풀려고 하는지를 생각해야 한다. 색은 브랜드의 성격을 강화하는데 큰 영향을 미친다.
또, 디자인의 소비자가 누군지를 생각해야 한다. 어떤 문화권에 속해있는지, 연령대는 어느 정도인지 등이다.
Color Palette를 고를 때의 팁들
- Coolors에는 컬러 팔레트를 만들기 좋은 아이디어들이 많다.
- 컬러들이 다양한 shade, tint가 있어 변형을 추가하기 쉬워야한다.
- **항상*8 gray와 black에 약간의 색조를 더해야한다.
- 색들의 대조가 접근성을 높이고 위계질서를 만든다.
- Colorable에 색 조합을 넣으면 대조가 충분한지 확인할 수 있다.
피그마에서의 색깔 작업
피그마에선 i로 Color Picker를 활용해 스크린샷이나 작업한 이미지 파일 등에서 원하는 색깔을 가져와서 쓰는 일이 많다. 물론, 직접 색을 fill로 저장할 수도 있고, stroke에 저장할 수도 있고, 단일 색 뿐 아니라 gradient도 넣을 수 있고 이미지를 넣을 수도 있다. 또는, 이들을 조합해 이미지를 배경에 넣고 그 위에 gradient로 효과를 줄 수도 있다.
Color Palette 작업
우선은 Base Color를 정하고, 직사각형의 frame을 만들어 그 안에 fill로 컬러를 채운다. 이 기본 프레임을 복사하며 opacity나 color를 조절해 tint를 만든다.
컬러 역시 Color Style을 지정해 파일 내에서 반복적으로 사용하는 식으로 사용한다. 폰트처럼 Style Manager 플러그인으로 다른 파일에 export해서 사용하는 것도 가능하다.
🧑💻 개인 탐구
컬러에 관한 이론이 더 있을 것 같아 검색해보았다.
60-30-10 룰
인테리어의 룰 중 하나로, 주요 색상 60%, 보조 색상 30%, 강조 색상 10% 비율은 균형감을 만들고 눈이 핵심 포인트에서 그 다음으로 편안하게 움직이게 해준다고 한다.
그레이스케일부터 써보기
디자인 초반에 컬러를 선정하느라 시간을 많이 보내고 하는데, 사실 그것보다 중요한 것은 요소의 간격과 배치이다. 그레이스케일에서 밋밋해보이는 부분들을 톤을 조절해 멋지게 보이게 하고 나면, 이후에 색을 입히기 보다 쉽다.
