컬러 멋지게 사용하는 방법
몇가지 원리로 멋진 컬러를 사용하는 방법에 대하여.
Pinterest 나 Behance 등에서 입을 다물 수 없는 수많은 멋진 레퍼런스들...
약간의 자괴감도 들면서 "어떻게 저렇게 할까"라는 생각이 들곤 합니다.
특히 저런 레퍼런스들을 보면, 컬러의 쓰임새가 참 예사롭지 않습니다.
"와.. 때깔 보소..", "컬러 멋지다!" 우리는 맘속으로 항상 이렇게 생각하죠.
단순히 감으로 사용하는 것에서부터 조금씩 원리를 이해하며 색을 사용한다면
여러분도 분명 멋진 디자이너처럼 컬러를 사용하실 수 있습니다.
우선 "유사색"과 "보색" 이 두가지의 색의 원리를 이해하며 컬러를 쓰는 방법을 아주 쉽게 알려드리겠습니다.
20 색상환위에 있는 그림 어디서 많이 본거죠? 예전에 미술시간에 본 것 같기도 하고 ...
20색상환 이라고 하는데 기초 색채수업에 많이 쓰인다고 합니다.
"먼셀(A. H Munsell / 미국의 미술교사겸 화가)"에 의해 창안되어 지금까지 색상을 교육하는 표준으로 널리 사용되고 있습니다.
유사색과 보색(반대색) 두 가지만 짚도록 할게요.
유사색이란?
유사색은 말 그대로 유사한 색상을 말합니다. 위의 색상환에서 연두를 보시면 좌우에 노랑연두, 풀색, 그 옆에 녹색, 노랑 등이 보이시죠?
이렇듯 가까운 곳에 인접한 컬러들을 유사색이라고 합니다. 이러한 유사색들을 쓰게 되면 간단히 말해, 눈에 익숙하고 안정감 있는 컬러를 느낄 수 있습니다.
그냥 이렇게 보시면 어떻게 유사색이 사용되었는지 감이 확 안 오시죠?
하지만 여기에 쓰인 컬러를 팔레트로 분류하면 아래와 같을 거예요.
콘셉트에 맞는 컬러를 몇 가지로 단순화한 다음 팔레트로 만들어 놓는 것이죠.
보시면 녹색계열의 컬러와 그에따른 여러 유사색을 볼 수 있습니다. 특이한점은, 회색계열의 컬러도 순수한 회색이 아닌 컬러가 가미된 색이라는 겁니다. 이처럼 회색 계열의 컬러도 주변따른 컬러를 가미한다면 좀더 어울리는 색감을 느끼실 수 있습니다.
포토샵 메뉴 중 Window를 보면 Swathes (스와치) 가 있습니다. 능숙한 디자이너들은 스와치에다 여러 개의 컬러칩을 저장해서 디자인에 응용하고 있습니다. 수십가지의 컬러배색을 가지고 있는 거죠. 때문에 어떠한 프로젝트에서도 컬러에대한 대안을 누구보다 신속히 제시할 수 있습니다.
순수회화처럼 즉흥적이고 감각에 의존한 방법이 아니죠.
Color SwatchesTip : 그동안 컬러를 사용할 때 그때그때 즉흥적으로 사용을 했다면 이제부터는 컬러를 팔레트 화 시켜 사용해 보세요.
컬러 팔레트는 본인이 만들 수도 있지만, 기존에 멋진 컬러 팔레트들이 오픈소스로 공유되어있기도 합니다.
그 중. 어도비컬러CC 라는곳에서 컬러사용에 대한 도움을 받을 수 있습니다.
이곳은 그래픽 작업을 하는 작업자들에게
컬러에 대해 정말 큰 도움을 줄만한 기능과 예시들이 많습니다.
우선 사이트에 접속하셔서, 두 번째 메뉴인 "탐색"을 누르시면 여러 가지 컬러 팔레트가 나옵니다.
우측 상단에 검색창에 "봄"이라는 키워드를 입력하게 되면 봄에 맞는 여러 가지 팔레트를 보여주게 되지요(영어로 검색하면 좀 더 정확한 결과물을 얻을 수 있어요.)
정말 신기하고 놀랍도록 편하겠죠?
팔레트를 사용하여 디자인을 하면, 배색의 느낌이 디자인한 작업물에도 고스란히 느껴집니다.
이 점이 바로 팔레트를 활용하는 가장 중요한 포인트 입니다.
다시 유사색 이야기로 돌아와서...
유사한 색을 쓰게 되면 안정감 있고, 차분하면서 고급스러운 느낌을 줍니다.
따라서,
고급스러운 패션 브랜드, , 활동적인 것보다는 정적이면서 신뢰감을 필요로하는 작업에 유사색을 쓰면 효과적입니다.
아래처럼요.
혹시 작업하고 있는 컨셉이 어떤 성격을 지녔는지 파악을 해본다면,
유사색 위주 인지 혹은 보색이 가미된 느낌인지 컬러의 방향성을 짐작해 볼 수 있답니다.
어떠세요. 느껴지시나요?
자세히 들여다보면, 브라운 계열의 컬러와 그 유사색들로 인해 차분하면서 안정된 색감을 보여주고 있습니다.
그럼 유사색의 반대인 보색에 대하여
알아볼까요?
보색(혹은 반대색)에 대하여
보색은, 발랄하고, 동적이며, 펑키하면서 뭔가 독특한 묘한 느낌을 줍니다. 보색은 아주 잘 계획하여 사용을 해야 합니다. 잘못 사용하면 정말 촌스러워질 수 있거든요.^^ 디자이너라면 작업에서 보색을 과감히 사용하기가 무척 어렵다는 것을 느껴보셨을 겁니다. 보색은 색상환에서 서로 마주보는 색을 말하구요. 완전히 마주보는 것은 아니지만 보색에 준하는 근접하는 색을 반대색이라고 합니다. 보색과 반대색은 비슷한 성격을 지니고 있죠.
아래 사진을 볼까요?
소위 말하는 "촌티 패션"을 보면 컬러들의 배색이 보색 위주라는 것을 알 수 있습니다. 좀 더정확히 말하자면 여러개의 보색들이 섞여 있다고 보는게 맞겠네요.
보색은 컬러의 경우의 수가 적어야 합니다.
예를 들어 블루-옐로우 보색 관계가 있다면, 블루와 옐로우 한쌍에 대한 컬러를 사용해야 하고요, 여러 쌍의 보색 관계가 첨가될수록 색상은 방향성을 잃고 난잡해집니다.
아래처럼 보색의 대비가 한쌍으로 된 컬러가 좀 더 특이하고 세련됨을 볼 수 있습니다.
아래 그림을 한번 볼게요.
보색의 경우에 수가 늘어날수록 눈이 좀 복잡해지죠? ^^
하지만 보기 그렇게 나쁘지 않습니다. 그 이유는 블루와-오렌지 컬러가 차지하는 영역이 다른 컬러들보다 상대적으로 넓기 때문에 시각적으로 여러 개의 컬러들이 섞였다는 것을 조금 덜 느껴서이지요.
TIP : 컬러를 사용함에 있어서, 사용되는 면적의 비율에 따라 컬러의 느낌이 많이 달라집니다.
위그림은 제가 그린 일러스트 입니다. 유사색과 보색을 적절히 사용하여 작업했습니다.
보색의 면적은 작게해서 색이 난잡해지지 않게 조절했습니다.
레드-바이올렛-블루 의 유사색 에 옐로우 라는 반대색계열을 첨부하여 보니, 나름 느낌적인 느낌이 되었네요.
괜찮으신가요?
보색을 사용할 때에는 여러 색이 중첩되었을 경우 그 면적을 적게 하거나 분산시키면 좋습니다. 아래처럼..
무지개 컬러가 보색 관계라 하기엔 컬러가 많이 섞여있지만, 그 면적이 상대적으로 작기 때문에 전체적인 느낌에서 복잡하거나 촌스러운 느낌을 주진 않습니다.
바로 면적의 차이 때문이지요.
꼭 보색이 아니더라도 포인트가 되는 컬러를 적재적소에 사용한다면 시각적으로 좋은 효과를 볼 수 있습니다.
느껴지시나요?
위의 웹사이트 디자인을 보면, 그레이 톤을 주조 색으로 사용하고, 레드를 강조 색으로 사용하였습니다. 자세히 보시면 그레이색의 느낌이 미묘하게 레드와 어울리게 약간 갈색느낌이 납니다.
Tip. 서브컬러로 그레이를 사용할때에는 강조색 톤을 약간 가미해주면 좋습니다.
콘텐츠에서 중요한 부분에 포인트 컬러를 적절히 사용하면 좀 더 극대화된 효과를 볼 수 있을 것입니다.
포인트 컬러는 UI/UX디자인과도 밀접한 관계가 있습니다. 컬러를 통해 간접적으로 콘텐츠의 중요성을 강조하고 사용자에게 좀 더 명확한 인지를 시켜 줄 수 있죠.
때문에 포인트 컬러는 좀 더 체계적이고 정교하게 계획되어 적용되어야 합니다.
잘 되어있는 디자인을 보면 그러한 포인트 컬러가 정말 절묘하게 들어가 있습니다.
즉흥적으로 들어간 것이 아닌 치밀한 전략에 의해 적용이 된 것이죠.
아래 사진에서도 꽃이 유독 눈에 띄네요~ 꽃이 없다고 가정했을 때, 위에 언급했던 유사색 위주의 사진이었었겠죠.
하지만 꽃을 의도적으로 배치해서 레드 컬러를 포인트로 활용해 훨씬 멋진 사진으로 거듭났습니다. 꽃이 우연히 들어갔냐고요? 포인트 컬러를 넣기 위한 작가의 치밀한 의도가 들어간 것이죠.
는 개인적으로 보색과 색상의 명도대비를 응용하여 디자인 작업을 합니다. 위에 언급한 유사색과 보색 이외에도 명도대비, 채도등등 색이 지니고있는 속성에따라 쓰임도 여러가지 입니다.
중요한 것은 색을 학문적인 관점에서 이해하기보다, 감각적으로 받아들이는 것이 더욱더 중요하다고 생각합니다. 그 다음, 트렌드와 이론을 겸비한다면 좀더 체계적이고 정교한 작업이 가능할것 입니다^^
위는 제가 작업한 제안 시안인데요. 시선의 동선을 고려하여 포인트 컬러를 적용했습니다.
기업 브랜드 컬러는 "오렌지"이지만 "레드"라는 유사색으로 컬러를 좀 더 풍성하게 하고자 했습니다.
보통 웹사이트나 애플리케이션 등에서의 컬러 전략은 논리적이고 정교해야 합니다. 메인 컬러와 서브컬러 등 목적에따라 사용됩니다. 보통 웹스타일 가이드(Web Style Guide) 포함되는 내용입니다.
앞으로 레퍼런스를 리서치 할 때 단순히 "와~" 색깔 너무 예쁘다"라고 감탄에 머물기보다.
위에서 말씀드렸던 간단한 원리에 입각하여, 보색 대비 혹은 유사색, 컬러의 면적 등을 좀 더 면밀히 분석하고 판단하여 팔레트화 시킨다면 본인에게 있어 크나큰 총알이 될 거라 믿어 의심치 않습니다.
웹디자인은 절대 감각만으로 승부할 수 없습니다. 감각만큼 끊임없는 탐구와 분석이 수반되는 분야이지요.
그리고 무엇보다 중요한 것은 그것을 본인 것으로 만들기 위해 열심히 트레이닝해야 하는 것입니다.
제가 알려드린 컬러 활용법이 여러분의 작업에 조금이나마 도움이 되길 바라며 이상 마치겠습니다.
