벳칭에서 브랜딩 프로젝트를 진행하며(https://www.supernovice.org/blog/0001) 제작했던 색채 자료를 블로그 콘텐츠로 편집해봤습니다. 회사 구성원들이 단순히 디자인을 구현하는 것을 넘어서 왜 이런 컬러를 사용하게 되었는지 그리고 앞으로 우리가 어떤 방식으로 컬러를 사용할지 이해하고 공감하길 바라며 제작한 자료인데요. 이 글을 보시는 분들에게도 도움이 되었으면 합니다.
*단, 기초적인 내용들로 구성되어 있기 때문에 디자이너 혹은 전문가에겐 큰 도움이 안될 수 있습니다.
Category
4.
컬러는 브랜드의 가치를 표현하고 인지도에 영향을 줌
1-1. 컬러에서 연상되는 느낌
출처 : 유채색 연상 언어, 색채디자인 교과서 (저자 : 문은배)
컬러를 봤을 때 연상되는 이미지는 사람마다 다를 수 있지만, 통계적으로는 어느 정도 공통적인 경향이 나타납니다. 위 자료는 색채디자인 교과서(저자: 문은배)에서 발췌한 것인데요. 각 색상에 대해 사람들이 연상하는 이미지를 정리한 것입니다. 다른 색채 자료들을 찾아봐도 약간의 차이는 있지만, 대부분 이와 유사한 경향을 보입니다.
이런 연상 작용은 다양한 요소들에 영향을 받습니다. 유전적으로 각인된 본능적인 부분이 있을 수 있습니다. 피같은 붉은색에서 두려움 혹은 불길함을 느낄 수 있고, 자연적인 초록색 혹은 갈색에서 안정감을 느낄 수 있습니다.
국가, 문화권, 성별, 연령대에 따라서도 모두 다른 감각을 느낄 수도 있습니다. 국가를 예로 들어보자면 붉은 색을 봤을 때 한국인이 느끼는 감각과 중화권 사람들이 느끼는 감각은 전혀 다를 수 있습니다. 보통 한국인들은 붉은 색에서 위협, 사랑, 열정 등을 떠올리지만 중화권에선 ‘행운, 성공’ 같은 전혀 다른 단어를 연상할 수 있습니다.
여기까지 컬러의 연상에 대해서 이야기했습니다. 이 부분을 먼저 설명한 이유는 브랜드의 컬러를 결정할 때 이 지점에 대해 깊게 고려해야 하기 때문입니다.
1-2. 브랜드가 컬러를 활용하는 방법 두 가지
브랜드는 크게 두 방법으로 컬러를 활용하는데요. 첫 번째는 브랜드의 이미지와 가치를 전달하는 수단으로 컬러를 활용하는 것입니다. 예를 들어 친근함, 친환경, 지속 가능성의 이미지를 보여주고 싶은 브랜드는 초록색 계열을 컬러를 사용해서 친환경적이고 부드러운 이미지를 표현하기도 합니다. 두 번째는 고객들에게 브랜드를 인지시키는 수단으로 컬러를 활용하는 것입니다. 마켓컬리의 경우는 로고, 사이트, 광고, 인쇄물, 배송차량 등 다양한 곳에 ‘보라색’을 공통적으로 사용해서 브랜드의 인지도를 높이고 있습니다. 마켓컬리 뿐 아니라 다른 많은 브랜드들도 유사한 방법으로 고객들에게 브랜드를 인지시키고 있습니다.
위의 이미지는 실제 컬러별 브랜드 예시입니다. 브랜드의 이미지를 [열정적, 신나는, 역동적]으로 정한 기업은 레드를 주로 사용합니다. 대표적으로 레고, 코카콜라, 넷플릭스 같은 회사가 있습니다. [이성적, 신뢰, 성공]의 이미지를 원하는 기업은 주로 블루를 사용합니다. 삼성, 인텔, 그리고 신한, 토스 등 주로 금융계열의 회사들이 많이 선택합니다. [독특한, 새로운] 이미지를 원하는 기업은 퍼플을 사용하기도 합니다. 컬리, 트위치, 디스코드 같은 서비스에서 사용하고 있습니다.
컬러를 잘 활용한 브랜드의 경우, 컬러만 있어도 브랜드를 연상할 수 있습니다.
각각 어떤 브랜드인지 아시겠나요?
1-3. 브랜드 컬러를 정할 때 고려해야 하는 네 가지
브랜드의 컬러를 정할 땐 아래의 네 가지를 고려해야 합니다.
A. 우리가 고객들에게 어떤 모습으로 보여야 할지 고민해야 함
⇒ 브랜드 컬러는 고객에게 전달하고자 하는 메시지와 감정을 반영해야 하며, 회사의 비전과도 긴밀하게 연결되어야 합니다. 회사가 추구하는 비전이 무엇인지, 그리고 그 비전을 고객에게 어떻게 시각적으로 전달할 수 있을지 고민해야 합니다.
B. 내부 구성원이 어떤 모습으로 보여지고 싶은지 혹은 어떤 목표가 있는지 파악해야 함
⇒ 브랜드 컬러는 단순히 외부에 보여지는 것만이 아니라 내부 구성원들이 공감하고 자부심을 느낄 수 있는 색상이어야 합니다. 내부적으로 이루고자 하는 목표나 가치관을 반영하여 구성원들이 브랜드의 방향성과 일치된 느낌을 받을 수 있다면, 그만큼 일관성 있는 브랜드 이미지를 유지할 수 있습니다. *단, 회사의 규모에 따라 전사적으로 동일한 컬러에 대한 공감을 이끌어내는 것이 어려울 수 있습니다.
C. 고객의 경험과 일관성을 유지할 수 있는 컬러를 선택해야 함
⇒ 브랜드가 여러 채널에서 일관되게 보이도록 할 수 있는 색상을 선택하는 것도 중요합니다. 브랜드가 고객과 마주하는 채널(인쇄, 웹, 앱 등)에서 제대로 표현이 안되거나(특정 컬러는 인쇄나 웹에서 표현이 안될 수 있습니다) 활용이 어렵다면 브랜드 컬러를 고객에게 제대로 인지시킬 수 없습니다.
D. 경쟁사와 차별화될 수 있는 독창적인 컬러를 선택해야 함
⇒ 브랜드를 식별할 수 있도록 경쟁사와 차별화될 수 있는 컬러를 선택하는 것이 중요합니다. 너무 유사한 색상을 사용할 경우, 독창성이 약해지고 고객이 혼동할 수 있습니다.
1-4. 브랜드 컬러는 적절하게 사용해야 함
브랜드의 컬러가 정해졌다면 그 컬러를 어떻게 사용해야 할까요? 우리 브랜드의 이곳 저곳을 모두 브랜드 컬러로 바꿔놓으면 될까요? 아닙니다. 브랜드 컬러라고 해서 가득 사용해버리면 촌스러워지거나 오히려 역효과가 날 수 있습니다. 컬러는 보기 좋은 비율로 적절하게 사용해야 합니다.
흔히 60-30-10 혹은 70-25-5 법칙이라고 하는 컬러 사용 법칙이 있습니다. 주로 인테리어 업계에서 많이 사용하는 원칙인데요. 기본 배경이 되는 컬러를 60%, 보조가 되는 컬러를 30%, 그리고 메인(주제) 컬러를 10% 사용했을 때 시각적으로도 조화롭고 컬러를 사용자에게 각인시키는 데 효과적이라는 이론입니다.
이 법칙을 기억한 후 스타벅스의 매장이나 패키지를 확인해봅시다. 거의 해당 법칙과 유사한 비율로 컬러를 사용하고 있습니다. 그리고 디자인이 잘 된 사이트나 앱, 인테리어를 봐도 유사한 원칙을 따르고 있다는걸 알 수 있습니다.
스타벅스의 컬러 사용 예시
컬리와 토스의 컬러 사용 예시
컬러는 사용자의 행동을 유도하는 수단이 됨
2-1. UI에서 컬러의 역할
요즘 많은 앱/웹 서비스에서 UI에 컬러를 사용하는 방법입니다. 브랜드의 메인 컬러를 ‘긍정 반응’ 버튼 컬러로 사용하여 사용자를 학습시키고, 나중엔 컬러만 흘깃 보고도 사용자가 서비스를 사용할 수 있도록 만듭니다.
이를 위해선 컬러를 일관적으로 사용하는게 매우 중요합니다. 긍정의 컬러는 긍정에서 일관적으로 사용하고, 부정의 컬러는 부정에서만 일관적으로 사용되어야 합니다.
2-2. 안전색채의 활용
안전색채 표시와 사용 장소(출처 : 두산백과)
버튼이나 인터페이스의 컬러를 결정할 때 브랜드컬러 외에 참고하는 부분으로 ‘안전색채’가 있습니다. 색으로부터 연상되는 느낌이나 상징을 이용하여 표지판 등에 활용하는 컬러를 말합니다.
안전색채를 이용하면 인터페이스에서 좀 더 효과적인 정보전달이 가능합니다. 삭제같은 위험한(?) 버튼에 레드컬러를 사용해서 경고의 의미를 나타낼 수도 있고 인풋필드에서 레드컬러를 라인으로 사용해서 사용자가 입력한 정보에 오류가 있다는 점을 표현할 수도 있습니다.
하지만 안전색채를 잘못 사용할 경우 사용자를 혼란에 빠뜨릴 수 있습니다. 레드 컬러를 ‘긍정’의 버튼에 사용하거나 잘못 입력한 인풋필드에 초록색 라인으로 표시한다거나 그런식으로 반대로 사용할 경우 사용자는 혼란스러워하고 서비스에 대한 신뢰도도 떨어지게 됩니다.
그렇다면 ‘레드’가 메인 컬러인 브랜드는 인터페이스에서 컬러 사용을 어떻게 하나요?
그냥 레드를 긍정반응 버튼에 쓰는 경우도 있습니다. 하지만 대부분의 경우 레드가 메인 컬러인 브랜드는 인터페이스에서 무채색의 주로 활용하는 것으로 보여집니다.(유튜브, 넷플릭스 등) 혹은 프로그래스에 사용한다거나 스티커에 사용하는 식으로 부분적인 포인트에만 사용합니다.
정보의 가독성과 계층 구조를 만드는데 도움을 줌
출처 : 색채디자인 교과서 (저자 : 문은배)
컬러는 다양한 감각에 영향을 미칩니다. 이를 통해 디자이너는 사용자 경험을 설계할 수 있는데요. 적절한 색상 조합을 통해 정보의 계층 구조를 만들어, 중요한 정보가 우선적으로 전달되도록 할 수 있습니다. 또한, 특정 행동을 유도하기 위한 버튼이나 인터렉션 요소에 직관적인 컬러를 활용함으로써 사용자의 자연스러운 반응을 끌어낼 수도 있습니다.
대비와 채도에 대한 설명
사실 복잡한 감각 요소를 모두 고려할 필요는 없습니다. 가장 중요한 두 가지 요소만 신경 쓰면 됩니다. 대비와 채도입니다.
대비는 요소 간의 차이를 강조하여 눈에 띄게 만드는 방법입니다. 대비가 높을수록 정보는 더 명확해지고, 사용자에게 우선적으로 인식됩니다. 채도는 색상의 강도를 의미하며 채도가 높을수록 더 눈에 띕니다. 위의 이미지를 보시면 채도가 높은 파란색이 다른 글자보다 더 선명하게 보입니다. 채도를 적절히 사용하면 중요한 정보를 효과적으로 전달할 수 있습니다.
현재 플러스벳에서는 정보의 중요도에 따라 컬러를 활용해 시각적으로 구분하고 있습니다.
•
블랙: 중요한 정보나 반드시 잘 보여야 하는 항목에 사용됩니다. 사용자에게 필수적인 정보는 블랙으로 강조됩니다.
•
그레이: 상대적으로 덜 중요한 정보를 나타내며, 부가적인 내용이나 배경 정보에 활용됩니다.
•
블루: 포인트로 사용되어 중요한 버튼이나 눈에 띄어야 할 정보에 적용됩니다.
이처럼 컬러를 통해 정보의 우선순위를 구분하여 사용자가 더 직관적으로 시스템을 이해하고 사용할 수 있도록 돕고 있습니다.
마무리하며
올바른 색상을 선택하고 제대로 활용하는 것은 브랜드를 구축하는 데 중요한 요소입니다. 브랜드의 가치와 메시지를 가장 잘 표현할 수 있는 색상을 찾아 일관성 있게 적용한다면 고객에게 깊은 인상을 남길 수 있습니다. 또한, 디지털 제품에서도 색상을 적절히 활용하면 사용성을 크게 향상시킬 수 있습니다.
1.
브랜드 가치와 메시지를 잘 표현할 수 있는 색상을 찾아야 합니다.
2.
찾아낸 색상을 브랜드 전체에서 적절히 사용해야 합니다.
3.
프로덕트에 활용할 땐 사용자의 행동을 유도하기 위해 적절히 사용해야 합니다.