웹사이트에서의 컬러 디자인

"감성은 개인적이지만 이해는 일반적이다.“라는 말이 있다. 이 말을 컬러 디자인에 빗대어 풀어 보자면 색을 사용하는 방식은 개인적이지만 색이 사람에게 미치는 영향은 객관적으로 이해할 수 있다는 뜻이 된다.

 

색을 효과적으로 사용하기 위해서는 색상이 주는 보편적인 이미지와 상징성 등, 색에 대한 일반인의 객관적인 의견을 참고할 필요가 있다는 말이다. 색은 매우 중요한 정보전달 수단이며, 사람의 심리에도 영향을 미친다. 심리학에서는 선호하는 색상에 따라서 심리상태를 진단하기도 하며, 심리치료를 위해서 색상을 활용하기도 한다.

웹사이트에서도 마찬가지다. 그렇기 때문에 색에 대해서 잘 이해하지 못하거나 색이 갖는 영향력을 제대로 사용하지 못한다면 오히려 사이트에 악영향을 끼칠 수도 있다.

조사에 의하면 사용자가 웹사이트를 방문하고 받는 그 인상은 9초 이내에 형성되고 컬러는 그 비중에 있어 50-90%에 달한다고 한다. 이렇게 약속된 색상은 기호로서, 언어로서 기능하며 그것은 강력하면서도 언어와 문화의 한계를 넘어서 공통성을 발휘하는 초언어적 힘을 발휘해 사람의 심리에도 영향을 미치게 된다.

효과적인 색 사용은 사이트의 방문객에게 무의식적이지만 강력한 영향을 끼쳐 웹 사이트의 전체 톤이나 분위기를 훌륭하게 연출해 주고 사이트가 전달하려는 특정 메시지를 효과적으로 전달해 준다. 또한 코카콜라의 빨강이나 펩시의 파랑처럼 웹사이트 전체적으로 통일된 색상은 회사나 제품에 대한 브랜딩 효과까지 주게 된다.

이처럼 색상은 단순히 시각적인 차원에서 그치지 않고, 심리적 접근이나 마케팅 차원으로까지 접근된다. 앞으로 웹사이트 디자인을 하면서 사용하는 색상에 대해 좀 더 신중하고, 좀 더 객관화시킬 필요성이 있는 이유가 바로 여기에 있다.

웹사이트의 색채 설계에 있어 전체적인 느낌을 전달하는 지배 색상이나 세부적인 개별 색상 하나하나의 특성도 물론 중요하지만 전체적인 조화와 균형의 문제가 더 중요하다. 그래서 웹사이트의 여러 가지 요소들을 배치할 때 색상 간의 대비나 일관성을 염두에 두어야 한다. 지배 색상이나 배색에 의해 웹사이트의 느낌은 크게 달라진다.

배색을 많이 해보고 어울리는 배색에 대해 연구해 보는 것도 중요하지만 다른 사람들의 의견은 어떠한지 객관적인 의견을 참고하는 자세도 필요하다.

웹사이트의 색상 선택은 사이트의 성격과 중심이 되는 내용, 사이트의 주 타겟층, 웹사이트의 컨셉, 궁극적인 지향 이미지가 무엇이냐에 따라 영향을 받는다.

웹사이트가 신문, 잡지처럼 신속한 뉴스나 정보전달이 목적인지, 아니면 오락적이거나 예술적인 사이트인지, 혹은 공공기관이나 비즈니스 관련 사이트, 기업이나 단체 사이트 인지 등에 따라 중심이 되는 컬러가 달라질 수 있다.

정보전달이 주 목적이라면 컬러가 너무 튀고 화려한 것보다는 단일 색상을 사용하는 것이 좋고, 비즈니스 관련 기업홍보 사이트라면 단일, 유사 색상으로 안정감과 신뢰감을 주는 것이 좋을 것이다. 또한 10대인지, 중년층인지, 여성인지, 남성인지, 전문직인지, 일반직인지, 다국적인지, 국내사이트 인지, 특정 직업군을 위한 사이트 인지 등, 그 주요 타겟층이 누구냐에 따라 컬러의 선택도 달라진다.

예를 들어 10~20대가 대상이라면 유행을 많이 타고 활동적이며, 개성있는 컬러를 선호할 것이며, 중년층이 주 대상이라면 유행 색상보다는 차분하고 편하고 여유를 느낄 수 있는 컬러를 선호할 것이다. 웹사이트의 컨셉을 어떻게 정할 것인가에 따라서도 컬러 선택이 달라진다. 캐주얼한 톤을 원한다면 유쾌하고 즐거운 선명한 젊음의 이미지를 강조할 필요가 있다.

자연스러운 톤을 원한다면 편안하고 소박한 여유의 이미지를, 모던한 느낌을 원한다면 현대적이고 도시적인 이미지를 부각시킬 필요가 있다. 이와 같이 전체적인 사이트의 컨셉에 따라 중심 컬러와 배색이 달라질 것이다. 웹사이트를 통해서 비즈니스 관련 기업이나 상품의 느낌이 달라지고 이미지가 제고된다.

따라서 궁극적으로 지향하고 있는 이미지가 무엇이냐에 따라 주제가 되는 색, 조합을 정할 필요가 있고 이를 기업의 로고에서부터 배경, 버튼, 링크 색깔 등, 해당 웹사이트의 모든 그래픽 요소에 적용하여 통일된 느낌을 줄 필요가 있다.

 

Photo by Paweł Czerwiński on Unsplash

 

1) 다소 보수적이면서 점잖은 듯한 색 설계를 하라

보수적인 색 설계라는 것은 화려하지 않고 편안하고 무난한 색을 사용하는 것을 의미한다. 다소 평범해 보이거나 너무 두드러지지 않는 것이 아닌가 하고 생각될 수도 있겠지만, 지나치게 화려하거나 유행에 민감한 색 설계는 시각적 피로도를 가중시킨다.

보는 사람들에 따라서 선호하는 사람과 그렇지 않은 사람이 극명하게 분리될 수 있다. 그리고 보는 사람들로 하여금 불안하거나 혼란스러운 느낌을 줄 수도 있다. 따라서 동일 화면에서 너무 많은 색을 사용하는 것은 지양해야 한다. 대개 한 화면당 4-7개 정도가 적당한 수준이라고 할 수 있다.

무조건 화려한 것이 세련되고 감각적이며, 이런 것이 젊은 네티즌에게는 효과적이고 강렬한 메시지를 줄 것으로 생각하는 것은 오산이다. 웹디자인에서의 색상은 콘텐츠를 담는 그릇이지 그것이 콘텐츠를 잡아 먹어서는 안 될 것이다.

 

2) 상식적인 수준에 따르는 것이 좋다

색상마다 가지는 일반적인 느낌이나 연상되는 이미지가 있다. 그것은 이미 모든 사람들에게 보편타당하게 인식되고 있는 상식에 해당한다. 따라서 이런 상식에 어긋나는 색 설계는 곤란하다. 여름의 시원한 바다를 빨간색으로 그려놓는다면 사람들이 그것을 원래 의도대로 인식하지 못하고, 다른 이미지를 연상할 수도 있다.

적조 피해를 본 바다, 전쟁이나 살육에 의해 피로 물든 바다 라거나 해가 지는 바다 등의 시원한 바다와는 전혀 다른 효과를 나타내게 된다. 따라서 상식 수준에서 색상을 설계하는 것이 아주 중요하다. 색상 설계에서 상식을 외면하면 사용자들로부터 왕따 당하기 십상이다.

 

3) 보색 사용을 주의해야 한다

보색 관계에 있는 색상을 동시에 사용하게 되면 시각적인 피로도를 가중시킴과 동시에 문자의 가독성을 떨어뜨린다. 웹디자인이 콘텐츠를 위해 존재하는 역할 임을 인식한다면 콘텐츠(텍스트)의 가독성을 낮추는 색 설계는 지양해야 한다. 물론 신호등처럼 아주 강한 메시지를 요구하는 곳이라면 보색 사용이 효과적일 수 있다. 하지만 웹사이트에서는 보색 사용을 주의하는 것이 좋다.

 

4) 색상 결정 순서는 지배 색상에서부터 시작하는 것이 좋다

웹 사이트의 분위기나 목적에 적합한 지배적인 색상을 먼저 결정하고 나서 2차 색상을 선택하도록 한다. 지배 색상이란 웹사이트 메인페이지의 주요한 색상을 의미하는 것으로, 웹사이트 자체의 컬러 이미지를 좌우하는 요소이다. 지배 색상을 먼저 결정하고 나면, 그 다음의 2차적인 색상의 선택은 좀 더 쉬워진다. 그리고 지배 색상을 기준점으로 두고 나머지 색상을 정하면 전체적인 색상이 조화와 연관성을 가지는데 유리하다.

 

5) 배경색과 배경무늬는 심플한 것이 좋다

배경색과 배경무늬는 단순하고, 단조롭게 꾸미는 것이 좋다. 너무 혼란스러운 배경무늬나 시각적인 부담을 주는 강렬한 배경색은 웹사이트를 보는 사용자들을 피곤하게 만들고, 금방 싫증 나게 만들 수 있다. 이는 집안의 벽지가 너무 화려하고 혼란스럽다면 집에서 보내는 휴식이 그리 편하지 않음과 동일한 이치이다.

배경색과 배경무늬는 콘텐츠를 위해 존재하는 것이고 배경색 자체가 목적이 아니다. 그리고 가장 많이 사용하는 배경색은 흰색이고, 그것이 가장 효율적임을 간과해서는 안된다.

 

 

6) 원색보다는 파스텔톤의 색상을 사용하는 것이 좋다

오래 지켜봐도 좋을만한 색상을 선택하는 것이 좋다고 생각한다. 화려한 색상은 보는 순간에는 각인되겠지만, 오래 지켜보면 질릴 수 있다. 웹사이트는 한번 보고 마는 것이 아니다. 주기적으로 웹사이트에 들어와서 정보를 보고 웹사이트를 활용해야 하는 것이다. 그러기 위해서는 은은하고 부드러운 색상이 자극을 덜 주면서 편안한 분위기를 조성한다. 그래서 정보 중심의 웹사이트에서는 주로 원색보다는 파스텔톤으로 색상을 제공하고 있다.

 

 

7) 바탕은 흰색, 글자는 검은색이 좋다

텍스트 콘텐츠의 경우에는 화면의 바탕색은 흰색으로 처리하고, 글자는 검은색으로 처리하는 것이 가장 일반적인 경우이다. 이는 사람들이 그동안 콘텐츠를 접하던 문화가 책(인쇄물)에서 비롯되었고, 종이는 흰색, 활자는 검은색이란 상식적 기준을 수천 년 동안 적응해 왔기 때문이다. 그리고 흰색과 검은색을 통한 접근은 시각적인 피로도를 줄일 뿐만 아니라, 콘텐츠에 대한 신뢰도나 편안함을 가지는 것에도 기여한다고 한다.

 

8) 색상 설계는 구조설계 이후에 하는 것이 좋다

웹사이트의 색상은 웹사이트가 가지는 페이지 구조나 정보구조, 그리고 인터페이스와 내비게이션 등을 설계한 이후에 정하는 것이 좋다. 따라서 처음에는 색에 대한 특별한 규정 없이 구조를 만들어 나가도록 한다.

자칫 처음부터 특정색을 염두에 두고 작업을 진행하다 보면 전체적인 정보구조나 인터페이스와 어긋난 색상 설계가 이뤄질 가능성이 있다. 색상 선택에서 중요한 기준점은 정보구조나 인터페이스에 있다. 색상이 중요한 것은 디자인 요소라기보다 심리적 요소이자 콘텐츠에 대한 접근성을 높이는 차원임을 명심해야 한다.

 

9) 일관성 있는 색상 적용을 해야 한다

흔히 말하는 웹디자인의 일관성이라는 것에서 가장 눈에 잘 띄는 것이 색상의 일관성과 페이지 구조의 일관성이다. 동일한 수준의 콘텐츠는 같은 색상으로 처리하여 각각의 정보에 대한 수위를 한 눈에 파악할 수 있게 한다.

메인 메뉴에서 사용한 색상이 하위 메뉴로 가면서 동일 계열 내에서 일관되게 적용되는 것도 필요하고, 상위 메뉴는 상위 메뉴끼리, 하위 메뉴는 하위 메뉴끼리 유사 색상으로 그룹핑하는 것도 좋다. 색상의 일관성을 통해 정보에 대한 내비게이션을 원활하게 하는 것도 가능하다는 것을 인지해야 한다.