(출처: Simon-Williams-Art 1, 2, 3)



여러분은 그림 그릴 때 어떤 색을 써야 할지 고민해본 적 있으신가요? 저는 유독 색을 입히는 과정에서 어려움을 겪어왔습니다.


‘배경을 어떤 색으로 칠해야 물체가 더 돋보일까?

‘어떤 색을 써야 더 편안한 분위기를 만들 수 있을까?


늘 이런 생각을 하다가 슬로워크에 UI 디자이너로 입사하게 되었습니다. 이제 정말로 색을 잘 써야 하는 책임이 주어진 것입니다. 그래서 이번 기회에 정리해 보고 싶었습니다. 디자이너가 아니더라도 어떻게 하면 색을 효율적으로 사용할 수 있을지 고민하는 분들께 6가지의 색채 조화(Color Harmony)를 소개해 드립니다.




왜 헐크는 보라색 바지를 입을까?


디자인에서 컬러스킴(Color Scheme)은 대상에 따라 배색을 달리 설계하는 것을 말합니다. 여기서 쓰이는 배색은 색상환(Color Wheel)에서 만들어집니다.


자, 이제 맨 처음 여러분이 보았던 헐크를 떠올려보세요. 그런데 헐크는 왜 항상 보라색 바지를 입을까요?






보라색은 초록색의 반대편에 위치한 보색이기 때문입니다. 보색을 쓰면 대상이 두드러져서 헐크의 초록색 몸이 더 돋보이게 됩니다. 이렇게 우리가 미처 주목하지 못했던 곳에서도 색채 조화가 쓰이고 있습니다.




색채의 기본 : Hue, Saturation, Value




색채 조화를 알아보기 전에 색을 구성하는 세 가지 요소를 살펴봅시다.


- 색상(Hue): 색상환을 구성하는 ‘색’을 말하며, 위의 6개 색상이 일반적으로 쓰이고 있습니다.

- 채도(Saturation): 색의 선명도를 나타내며, 낮을수록 색이 탁해집니다.

- 명암(Value/Brightness): 색의 밝기와 어두움을 결정합니다.


통틀어 HSV(HSB)라 불리는 이 세 요소는 색채 조화에 중요한 역할을 합니다. 예컨대 강조하고자 하는 부분에 높은 명암대비를 주던지, 채도를 낮추어 시선을 분산시킬 수 있습니다. 하지만 과도하게 사용하면 결과물이 못생겨 보일 수 있으므로 항상 적절한 비율을 사용하는 것이 중요합니다.




당신의 작품에 숨을 불어 넣는 Color Harmony


색채 조화(Color Harmony)는 ‘색채 조화론’의 영문명칭과 통용되어 쓰이며, 이에 근거한 배색의 조화입니다. 색채 조화론은 슈브럴의 배색 조화론(Chevreul´s theory of color harmony)으로부터 시작되었는데요, 그 후 먼셀(Munsell)과 오스트발트(Ostwald) 색체계에 영향을 받아 현재의 형태로 자리 잡게 되었습니다.





1. 단색 조화(Monochromatic): 하나의 색상에서 채도와 명암을 조절하여 만들어지는 색채 조화입니다.



(출처:(좌) glacéau, (우) wikigallery)



하나의 색에서 채도와 밝기만 조정하기 때문에, 강력한 대기효과(Atmospheric effect)와 넓은 공간감을 줄 수 있습니다. 마찬가지로 하나의 주제를 표현하는데 용이하며 디테일에 더 초점을 맞출 수 있습니다.



*Key Color

이제부터는 2가지 색 이상의 조합을 살펴볼 텐데요, 색이 예쁘다고 다 쓰면 그림이 중구난방이 되겠죠? 그래서 키 컬러(Key Color)를 정해야 합니다. 키 컬러는 내 작품에서 ‘가장 중요한 색'을 말하는데요, 예를 들어 헐크라면 초록색, 인물사진에서는 살 색이 됩니다.





2. 유사색 조화(Analogous): 키 컬러의 양옆에 인접한 두 가지 색의 조화입니다.




(출처: (좌) wikimedia, (우) homedit)



왼쪽의 그림처럼 자연에서 많이 볼 수 있으며, 평화롭고 편안한 분위기를 내는 장점이 있습니다.





3. 3색 조화(Triad): 키 컬러의 맞은편에 같은 거리를 두고 위치한 두 가지 색의 조화입니다.



(출처: (좌) cgsociety, (우) mediaelection)



이 조합은 다른 조합에 비해 생기 있는 분위기를 극대화할 수 있어서 만화나 초현실주의 그림에 많이 쓰입니다. 여러 가지 색의 조합은 언제나 키 컬러와의 비율이 중요하므로 주의하셔야 합니다.





4. 보색 조화(Complementary): 키 컬러의 반대편에 있는 색의 조화로, 가장 대중적으로 알려져 있습니다.



(출처: (좌) dribbble, (우) cgsociety)



보색을 쓸 때 주의할 점 또한 역시 색의 비율인데요, 키 컬러를 중심으로 반대편 색을 포인트 색으로 써야 작품이 조화로울 수 있습니다. 보색은 대상을 자연스럽게 돋보일 수 있게 하는 특징이 있습니다.





5. 분열 보색 조화(Split Complementary): 보색에서 키 컬러의 반대편에 있는 색을 제외한 양옆의 두가지 색의 조화입니다.



(출처: (좌) cgsociety, (우) apart)



이 조합은 보색 조화보다 강도가 약한 대조 효과를 줄 수 있습니다. 또 생동감과 자유로운 분위기를 만듭니다.






6. 4색 조화(Tetradic): 두 개의 보색이 엇갈려 있는 형태로 이중 보색 조화(Double Complementary) 또는 직사각형 조화(Rectangle)이라고도 합니다.



(출처: (좌) behance, (우) cgsociety)



이 조합은 가장 많은 종류의 컬러가 쓰이기 때문에 밸런스의 유지가 더욱 중요합니다. 더불어 배경과 전경 사용에서 효율적으로 사용할 수 있습니다.




마치며


“모든 조형물의 미는 그 조형물의 요소인 선과 형, 색 표면 구조 등이 어우러져 이루어지는데 그중 우선 시각적인 강한 반응을 일으키는 것은 색채로, 다양한 효과를 지닌 색채를 어느 부분에 어떻게 배치하느냐에 따라 보다 아름다운 효과를 낼 수 있다.

- 색채용어사전(박연선 지음, 예림 펴냄)



내 작품에 어울리는 색채가 무엇인지 정확히 찾고, 이를 활용하는 것은 매우 중요합니다.

색채 조화가 저와 여러분에게 유익한 가이드가 되기를 바랍니다.





참조

Blender Guru : Understanding Color (youtube)

Tiger Color

zevendesign

The Muser : Physics & Physiology of Color

wikipedia

색채용어사전(박연선 지음, 예림 펴냄)




작성: 이지은


Posted by slowalk

웹 페이지에서 "회원에게만 공개되는 내용입니다. 로그인 해주세요." 라는 창이 뜬 경험은 한번 쯤 있을 텐데요. 그럴 때 뜨는 창을 "모달윈도우(Modal Window)"라 부릅니다. 즉, 모달 창은 일반적으로 사용자의 명령을 인식하기 위해서나, 긴급 상황을 알리기 위해 많이 사용됩니다. 이 기능 사용자가 진행하던 작업의 흐름을 흐트러트리기에 버튼 기능은 더욱 중요합니다. 





버튼은 3가지 성격으로 나뉩니다. 

1. positive : 화면의 변화를 주거나 정보를 추가하는 버튼 (전송하기, 더보기) 

2. Neutral: 화면의 변화가 없는 버튼, 화면으로 되돌아가는 버튼 (예를 들면 "취소하기"버튼을 말합니다.)

3. Negative: 삭제, 리셋, 추가정보를 차단하는 버튼

그럼 3가지의 버튼마다 컬러는 어떻게 지정하는 것이 좋은지 알아봅시다. 


positive action button :  높은 명암차이를 이용해 주목성을 높이세요. 

positive 버튼은 높은 명암 차를 이용하며, 블루와 그린, 바이올렛 같은 차가운 색상을 사용합니다. 차가운 계열의 색은 시각적으로 사용자의 눈을 편안하게 합니다. 그리고 텍스트는 흰색을 사용하여 잘 읽히도록 합니다. 이때 positive 옆에 있는 neutral, negative 버튼은 배경을 채우지 않은 외곽선으로만 표현합니다. 이런 형태로 표현한다면 다른 주요 버튼보다 사용자의 주의를 끌지 않아 올바른 선택을 도와줍니다.



Negative action button : positive 버튼 옆은 명암차이를 낮게, neutral의 버튼 옆은 명암차이를 높게 하세요.

negative 버튼은 positive 버튼보다 낮은 명암 차를 이용해 눈에 덜 띄게 합니다. 하지만 만약 negative 버튼이 neutral 버튼 옆에 위치한다면 높은 명암 차를 이용해 표현합니다. 그리고 배경은 레드나, 오렌지, 옐로우 등 따뜻한 색상으로 채워줍니다. 따뜻한 계열의 색은 시각적으로 화면에서 전진하는 듯한 효과를 주므로 사용자가 클릭하기 전에 한번 더 생각하게 합니다.



Neutral action button : 낮은 명암 차를 이용해 다른 기능의 버튼보다 눈에 덜 띄도록 해주세요.

다소 덜 중요한 neutral 버튼은 낮은 명암 차를 주어 다른 주요 버튼과 혼동을 방지합니다. 색을 채우지 않은 배경과 외곽선만 블랙으로 표현하면 충분합니다. 여기서 주의할 점은 외곽선을 색을 옅은 그레이로 할 경우 클릭할 수 없는 비활성화 버튼처럼 보이는 단점이 있습니다. 




이처럼 색에 따라 사용자의 인지 정도의 차이가 생깁니다. 심미적으로 예뻐서 색상을 사용하는 경우도 있지만, 좀 더 색상의 성격을 이해한 UI가 사용자에게 편리함을 가져다줄 수 있습니다.  



출처: uxmovement



by 종달새발자국





Posted by slowalk


 


얼마 전 캄보디아에서 Sra Pou라는 이름의 직업학교 건물이 완공되었습니다. 겉보기에도 우리가 일반적으로 생각하는 학교 건물과는 달리 알록달록한 이 건물이 특별한 이유는, 그저 예쁜 겉모습 때문만은 아닙니다.

바로 학교가 자리잡은 지역의 자연에서 온 재료들을 이용해 지역 주민들의 손으로 만들어졌기 때문인데요, 지역 주민들이 집짓는 작업에 대한 교육을 받은 뒤 직접 손으로 지은 '핸드메이드' 학교라고 합니다.


스라 포우 Sra Pou마을은 프놈펜에서 외곽의 시골로 재배치되면서 많은 가정들이 취약한 기반시설과 안전성을 보장받지 못하는 주거환경 등으로 어려움을 겪었지만, 이렇게 특별한 학교가 생겨남으로써 이 마을에는 변화가 시작될 수 있었습니다.

이 학교를 디자인한 핀란드의 건축사무소 Arhchitects Rudanko + Kankkune의 Hilla Rudanko와 Anssi Kankkunen는 2010년 봄, 캄보디아 아달토 대학에서 수업를 받기 위해 캄보디아에 왔다가 이 학교 건물을 디자인하는 프로젝트를 진행하게 되었다고 합니다. 처음에는 수업 내의 작은 프로젝트에 불과했지만 이들이 의욕적으로 자금을 유치한 덕분에 실제 건물 완공까지 이어질 수 있었다고 하고요.


 




큰 창문이 여러개 있는 이 2층짜리 건물은 주민들이 직접 햇볓에 말려 만든 벽돌로 지어졌고, 바람도 잘 통하고 채광도 잘되게 하기 위해 벽돌 사이에 구멍이 뚫려있기도 합니다. 현관은 지역주민들의 공간으로 활용하기 위해 충분히 넓게 만들어졌고요.


 

 


사전에 직업교육을 받은 주민들의 손으로 지어진 이 건물은 이제 지역의 비영리단체가 운영하면서 주민들에게 직업교육을 시행하고 있습니다. 주민들이 함께 모여 모임을 갖고 지역공동체를 위한 회의를 할 수 있는 공간으로도 쓰이고 있습니다.


학교 건물에서 뛰어노는 아이들의 모습이 행복해보입니다 :-)

Posted by slowalk