디자인 보는 눈 레벨업, 컬러 조합 공식
망하지 않는 컬러 공식 2탄
제가 쓴 브런치 칼럼 중에서 가장 많은 반응을 불러온 글이 '망하지 않는 컬러 고르는 공식'이었습니다. 이전 글이 컬러를 고르는 방법에 집중해서 이야기했다면 이번 글에서는 컬러를 조합하는 방법에 대해 이야기를 해 보려고 합니다.
미학을 절대적 관점과 상대적 관점으로 분류해서 바라보았을 때, 컬러는 대체로 상대적인 관점, 다시 말해 컨셉과 취향의 영역이라고 여기시는 분들이 많은 것 같습니다. 그래서인지 파란색은 청량하고 신뢰를 주는 색, 보라색은 신비로움, 노란색은 친근함 등등 컬러 픽의 기본 레퍼토리는 감성에 의한 선택법이 대다수입니다.
물론 컨셉도 중요합니다. 그러나 컨셉보다 더 기본이 되는 절대적 관점 -비율, 조화, 본능적인 아름다움- 에서 컬러 사용 공식을 익힌다면 세상이 다르게 보이기 시작할 것입니다. 프레임 안의 사물이나 공간이 어떤 비율로, 어떤 컬러(혹은 소재)가 사용되었는지 눈에 트이면서 시야가 달라지게 되는 것이죠.
이런 눈, 갖고 싶지 않나요? 보이지 않던 게 보이는 관찰의 눈 키우기! 미학의 절대성, 비율에 의한 컬러 공식을 소개할게요.
색의 기본 구조
색은 색상과 채도, 명도로 이루어져 있습니다. 색상은 빨주노초파남보, 채도는 진하기와 옅기의 농도, 명도는 밝음과 어둠이죠. 예를 들어 인디핑크라는 색은 빨간 색상의 옅은 채도와 밝은 명도를 가진 색이라고 말할 수 있습니다. 인디고는 파란 색상의 진한 채도와 어두운 명도를 가진 색이라 할 수 있고요.
컬러픽커에서 보면 왼쪽으로 갈수록 채도가 옅어지고, 아래쪽으로 갈수록 명도가 어두워집니다. 오른쪽은 색상을 조절하는 바입니다. 색상을 정하는 것보다 채도와 명도를 먼저 결정하는 것이 전체적인 tone&manner를 잡는데 좋다고 지난 글에서 설명한 적이 있어요! (안 보셨다면 보고 오시는 거 추천!)
사실 면적이 더
중요합니다
분명, 비슷한 채도와 명도를 사용해서 컬러를 조합하면 망할 일은 없습니다. 그러나 여기서 더 나아가 색을 자유자재로 컨트롤하고 싶다면, 명도를 사용하는 면적을 봐야 해요. 그렇습니다. 이번 글의 주인공은 명도입니다.
와이어프레임편집 디자인의 기본이자 ui/ux 디자인에서 활발하게 사용하는 와이어프레임은 구성의 기본 설계도 역할을 합니다. 그러나 와이어프레임을 그릴 때 어떤 영역에 spot light를 비출지 생각해 보신 적이 있나요? 듣기 좋은 리듬에 강약이 있듯, 시각적 구성도 리듬이 있어야 보기 좋습니다.
면적에 적용되는 명도는 spot-light를 비춰주는 결정적인 역할을 하게 됩니다. 다시, 위의 와이어프레임을 자세히 들여다보시면 어두운 상자와 밝은 상자로 구획이 구분되어 있는 것을 보실 수 있을 거예요. 명도가 어두운 짙은 상자에 시선이 쏠리는 것은 당연한 이치겠지요. 반면, 전체가 어둡고 일부가 밝으면 밝음에 집중이 될 것이고요.
밝음과 어두움으로
시선을 집중을 의도한다
이를 negative (어두움) - positive (밝음)라고 표현하기도 합니다.
1. 네거티브와 포지티브의 대비
2. 하나는 크고, 하나는 적은 면적으로 spot-light 효과 주기
따라서 프레임 안의 이미지를 볼 때 어떤 색이 사용되었는지 보다 그 색이 어떤 명도의 비율로 쓰였는지를 잘 들여다봐야 해요. 위 이미지를 예로 들면, 배경으로 고명도 컬러들을 통일성 있게 사용하였고 포인트 컬러로 상대적으로 어두운 명도가 사용되었습니다. 백그라운드가 포지티브 - 포인트가 네거티브가 된 예시입니다.
이 이미지에서도 전체적으로 고명도, 저채도 컬러를 백그라운드로 사용하였고 포인트가 네거티브가 되었습니다. 만약 포인트도 동일하게 포지티브를 사용하였다면 무게감이 없었을 것이고 시선을 끌기는 어려웠겠죠. 이미지의 색감과 백그라운드 색감을 연계하는 것도 퀄리티를 높이는 요소입니다.
전체를 그리기
명도가 전체적인 밸런스를 잡는데 대단히 큰 역할을 한다는 사실을 이해하셨다면 이를 근거로 디자인의 큰 그림을 그릴 수 있습니다.
컬러 컨셉을 정할 때 명도계를 어떤 비율로 가져갈지 먼저 결정합니다. 아래 예시는 70%를 네거티브 하게 하고 30%는 포지티브 하게 하겠다는 계획입니다.
여기에 더해, 어떤 이미지들을 사용할지, 이미지 무드와 텍스쳐도 계획합니다.
한 장씩 디테일을 그리면서도 전체를 계속 확인합니다. 이 방법이 제가 tone & manner를 잡는 방식입니다. 페이지 내에서 명도 구분이 있지만 전체 페이지의 흐름에서도 강약을 매우 중요하게 생각하고 있습니다. ppt 디자인, 회사 소개서, ir자료를 만들 때도 매우 중요한 지점입니다. 물론, 콘텐츠의 강약도 함께 가야겠죠.
이쯤 되니 제 글은 강약 이야기밖에 없는 것 같네요. ㅋㅁㅋ
다른 프로젝트 예시입니다. 여기서도 명도의 무드를 먼저 정해줍니다. 포지티브를 백그라운드로, 네거티브를 포인트 컬러로 계획했습니다.
화이트가 메인이긴 하지만 네거티브 컬러도 50:50으로 사용할 계획입니다. 유채색의 point 컬러는 10% 이하로 사용한다, 전반적인 계획을 잡고 브랜딩을 진행합니다.
컬러 구성 계획을 잡은 후 컬러칩을 늘어놓습니다. 컬러칩만 있어서는 전체적인 무드가 어떻게 진행될지 감이 오지 않아요. 디자이너가 여럿이고 브랜드 가이드북이 필수적인 상황이라면 더욱더 컬러 구성 시스템이 필요합니다.
가이드를 기반으로 아래처럼 응용 디자인할 수 있습니다.
컬러 구성 계획은 작업하면서 방향이 엇나가지 않도록 하는 최소한의 가이드가 되기도 합니다. 디자인은 진짜. 정말. 매우 많이. 어려워요. 특히 혼자 하는 디자인은 피드백을 받을 수도 없기 때문에 보고 또 보고 정신이 중요합니다. 하나를 보고, 전체를 보고, 지향하는 퀄리티의 다른 작업물을 계속 보면서 업데이트를 해 나갑니다.
무엇을 집중해서 볼 것이냐. 이 글을 끝까지 읽어주셨다면 세상을 명도계를 통해 바라보도록 해 보세요. 밝음과 어두움, 강조와 소거, 의도의 집중- 지금까지 보이지 않았던 새로운 세상이 보이게 될 것입니다. 저는 공간 디자인을 볼 때 특히 신경 써서 보고 있습니다. 이 공간의 디자인 의도는 무엇일까, 어떤 명도계로 디자인되어 있나. 천장이 어두운가 바닥이 어두운가, 빛이 어디서 들어오나 등등.
인테리어 특집 써야 하는데. 언젠가 또.......
