黃家칼럼

웹사이트(쇼핑몰)컬러 조합(선택)은 이렇게!

앵그리피그 2014. 2. 25. 15:12
반응형

   



웹사이트(쇼핑몰) 컬러 선택(웹사이트 컬러 조합) ?

   

   

웹사이트(쇼핑몰)에 컬러 선택(조합)을 어떻게 하시나요?

기획자 이건 디자이너이건 사실 웹사이트에 컬러를 선택하는 명확한 기준이 없는게 사실입니다

다만 자료를 찾아보면 컬러에 따라서 사람들에게 주는 인상과 느낌이 정리되어 있긴 합니다

   

붉은색

다이나믹, 로맨틱, 위험경고, 즐거움

   

노랑색

젊음, 가벼움, 창조적인

   

녹색 - 자연적인,편안한,안전한

   

파란색 - 기술적인, 깊은, 자유로운, 권위적인, 깨끗한

   

보라 - 지적인, 럭셔리한, 고급스런

   

<참고 > http://www.mariaclaudiacortes.com/colors/Colors.html 컬러에 대한 심리적 반응 및 느낌

   

<NAVER의 컬러 분포 - 녹색도 각기 다르게 많은 종류가 사용됨>

   

   

그런데 이런 보편적인 색상에 대한 사람들의 느낌 만으로 웹사이트의 컬러를 선택할 수는 없을 것 같습니다.

대형 웹사이트 구축 시 컬러 선택은 대부분 그 회사나 단체의 로고나 회사의 대표 컬러에 맞춰서 컬러조합을 맞추곤 합니다. 물론 대기업이거나 전문적인 회사의 경우는 컬러 사용에 지침이 있고 그에 따르는 것으로 알고 있습니다

다만 특별한 이벤트나 프로모션의 경우 특별히 목적에 맞춘 페이지 컬러를 사용 하기도 하는데

이 경우도 사실 어떤 데이터나 검증을 통해서 컬러를 선택 하는 것 아닌 다른 사례를 벤치마킹 하거나 참조하는 방법, 작업자(디자이너) 개인의 취향에 따라서 정해지는 것이 대다수 입니다

   

쇼핑몰 사이트의 컬러 선택은 ?

   

그런데 쇼핑몰의 경우는 일반 홈페이지와는 달리 매출을 일으켜야 하는 확실한 목적이 있습니다,

그렇다면 단순히 디자이너나 기업의 대표 색상에 맞춰 웹사이트 컬러를 선택해도 문제가 없을까요?

구글관련 세미나에서 제가 들은 사례의 경우 사이트의 버튼 색상 변경만으로 일 매출이 30% 까지 하락한 사례가 있다고 합니다

   

아래 예를 살펴볼까요

   

   

   

   

위의 배경색과 아래 배경색의 차이를 잘 못 느끼시는 분도 있겠지만

사실 배경색의 차이가 있답니다

   

위에 배경 컬러의 색상 조합

아래 배경 컬러의 색상 조합

   

   

위에 사이트는 좀더 아래보다 레드 색상이 조금 더 들어가서 보는 이에게 따뜻함과 귀여움 등의 무의식적인 감정을 느끼게 됩니다

반면 아래 색상은 무채색에 가까운 색상으로 차갑고 세련된 느낌을 주는 거 같습니다

아래 색상이 찾아보니 해외 유수 쇼핑몰  몇몇이 사용하는 색상입니다 


그렇다면 아래 두 사이트는 어떻까요?

<출처 > http://goo.gl/QhEdO

   

위에 그림에서 여러분은 좌/우 사이트 중 어떤 사이트를 클릭하고 싶은가요?

대부분의 예측결과는 녹색이 클릭률 이 높을 거라고 예상한다고 합니다

그런데 놀라운 결과….

  

실제 클릭률 에서는 붉은색 버튼이 녹색 버튼 보다 21%나 높은 클릭률을 보였다고 합니다

다른 어떤 정보나 페이지 디자인,  구성 콘텐츠가 모두 똑같고 단지 버튼 컬러만 다른 페이지를 비교

테스트한 결과이니 얼마나 웹페이지의 컬러가 전환율 특히 쇼핑몰 같은 구매전환율 목표로

하는 사이트에는 중요한지를 알수 있는 데이터입니다

   

  웹사이트에 컬러 선택에 대한 기준으로 일반적인 컬러 심리학적인 관점에서 접근 하는 방식보다는

실질적인 테스트와 데이터를 기준으로 웹사이트 컬러의 선택 하는 것이 무엇보다 중요하다는 점을

알수 있는 테스트 입니다 

   

그런데 문제는 개인이나 작은 기업들이 이런 조사를 어떻게 해서 웹사이트 컬러 선택에 적용할까요?

   

방법이 있습니다

   

위 테스트 역시 같은 방법으로 진행한 것으로 생각됩니다

구글어날리틱스www.google.com/analytics 서비스를 보면

다음과 같이 사용자의 반응을 사전에 여러가지 디자인과 색상등으로 테스트 해볼 수 있는 기능을 제공합니다 


      

이제 여러분도 웹사이트나 쇼핑몰의 컬러(색상) 선택 시 테스트를 거쳐서 그 결과를 바탕으로 사이트를 만들어 보는게 어떨까요 ?

  

<참고 자료>

   

   

   

   

https://kuler.adobe.com/

http://www.degraeve.com/color-palette/

Color Palette Generator

http://www.avivadirectory.com/color/

http://www.colorfyit.com/ - 웹사이트 컬러를 추출 분석

   

http://www.dtelepathy.com/blog/inspiration/beautiful-color-palettes-for-your-next-web-project

컬러스키마 , 칼라조합을 도와주는 서비스 들

http://speckyboy.com/2012/11/08/50-websites-with-fantastic-color-schemes/

50개의 웹사이트 컬러 조합이 멎진 사이트 들

http://www.onextrapixel.com/2013/10/25/40-stunning-website-designs-with-great-color-schemes/

40개의 컬러조합이 멎진 웹사이트

 



반응형