[번역] 워드프레스 웹디자이너를 위한 6가지 컬러 매칭 테크닉

색상의 사용의 배후에는 심리학이 존재한다. 많은 클라이언트들은 자신들이 좋아한다는 이유만으로 밝고 눈에 띄는 색상을 요청한다. 하지만 그들이 좋아하는 색상이 반드시 기대하는 효과를 주는 것은 아니다. 색은 사용자 경험(UX)에 있어서 중요한 역할을 한다. 사용자들은 그들에게 시각적으로 와닿는 대상을 스캔하고 클릭하려는 경향이 있다.  제대로 사용된 색이 예쁘면 사람들은 대체로 그 예쁜 것에 주목한다. 이것이 웹사이트에 있어서 컬러 매칭이 중요한 이유이다.

웹 디자이너로서 우리는 웹사이트를 위한 바른 색 조합을 선택할 수 있어야 한다. 여기에는 레이아웃의 모든 시각적 요소들(글꼴, 버튼, 헤더, 배경, 제목, 링크, 테두리 등등)의 색상들이 포함된다. 심지어 색은 브랜딩에도 역할을 감당한다.

이 글에서, 우리는 웹디자인에 도움이 될 몇가지 컬러 매칭 테크닉을 살펴볼 것이다.

색 이론의 이해와 사용 그리고 심리학

색상의 선택은 오랜 시간과 많은 경험을 요하는 예술이다. 그것은 또한 주관적이기도 하다. 색은 컨텍스트로 전해진다. 사이트의 주제와 분위기는 방문객들에게 가장 효과있는 색상들을 결정하는 데 도움을 준다. 모든 케이스에 대한 하나의 정답이 존재하는 것은 아니다. 어떤 방문객에게 통하는 색이 다른 사람에게는 그렇지 않을 수 있다. 어떤 방문객은 차분한 색을 선호하지만 어떤 이는 파스텔을 선호할 수도 있다.

색상 조합은 당신이 추구하는 느낌에 좌우될 것이다. 특정한 주제에는 거기에 걸맞는 색상들이 기대된다. 예를 들면 사냥꾼과 어부들은 거친 색상에 끌린다. 흰 색은 결혼과 관련해서 가장 많이 쓰인다. 색상  조합은 주제와 같이 간다. 이 경우, 당신은 하이라이트와 강조를 위해 다양한 색상을 실험해 볼 수 있겠지만 베이스로는 원색을 유지하게 될 것이다.

이것은 특정 주제에 관한 모든 웹사이트가 같은 색상이어야 한다는 뜻은 아니다. 각각의 웹사이트는 특정 목표를 지니고 있다. 색상은 이 목표를 달성하기 위해 선택되어야 한다. 우선적이고 중요한 것은 프로젝트의 요구들이다. 색상은 주로 감정과 연관되어 있다. 색은 분위기를 창조한다. 잘못된 색상은 독자로 하여금 다른 웹사이트를 찾아보라고 쫓아낼 수도 있다. 적절한 색상은 그들을 끌어들여 머물게 할 수 있다. 약간의 색상 심리를 사용하는 것은 도움이 된다..

색상 심리

여기 Vandelay Design가 설명한 색상 심리에 대한 간단한 개요가 있다

• 검은색, 흰색, 회색 – 임팩트. 이들 색상은 배경색으로 훌륭하다. 흰색은 순결을 의미한다. 검은색과 흰색은 함께 사용하기에 좋다. 회색은 중립적이며 전통과 차분함을 위한 좋은 선택이다. 잘못 사용할 경우 에너지가 부족할 수 있다. 이 세가지 색은 진지함을 표한하기에 적합하다.
• 갈색 – 건전함. 차분하고 고급스럽다. 이 색은 전통을 보여주고자 하는 사이트의 배경으로 텍스처와 함께 사용하기에 좋다. 황갈색은 경건함을 보여준다. 진한 갈색은 신뢰성을 표현한다. 갈색은 신뢰성과 경험을 보여주고자 하는 사이트를 위해 좋은 선택이다.
• 청색 – 차분함. 이 색은 신뢰성과 의존성을 보여주고자 하는 사이트에 적합하다. 짙은 그늘은 경험과 성공을 보여준다. 밝은 그늘은 친근함을 나타낸다.
• 적색 – 흥분. 열정, 힘 그리고 분노와 연결되어 있다. 따뜻한 색은 강건함과 격려가 되고 벽돌과 같은 단단한 품질을 표현하고자 하는 사이트에 적합하다. 밝은 색상은 활기가 있어서 젊은이들을 대상으로 하는 사이트에 적합하다.
• 분홍색 – 젊은 여성스러움. 장난스럽고 순수해서 여성을 대상으로 하는 사이트에 이상적이다.
• 오렌지 – 활기있고 사람들을 끌어당기는 힘이 있다. 무브먼트와 에너지를 표현하고자 하는 사이트에 좋은 선택이다.
• 노란색 – 활력을 줌. 따뜻함과 행복과 연관되어 있다. 밝은 그늘은 어린이들에게 적합하다. 어두운 그늘은 오래된 것을 표방하여 지혜와 관련이 있다. 권위와 지성을 나타내기에 적합하다.
• 녹색 – 차분함과 젊어짐. 어두운 그늘은 금전과 관련이 있고 성장과 안정을 표현하고자 하는 사이트에 적합하다.  밝은 그늘은 봄과 관련이 있고 휴식과 정직, 도덕적 표준을 표방하는 사이트에 적합하다.
• 보라 – 고결함. 진한 보라는 부와 럭셔리를 의미한다. 밝은 그늘은 로맨틱하다.

물론 이들 색상은 미국 이외의 문화권에서는 다른 의미를 가질 수 있다. 당연한 얘기지만 대상으로 하는 고객과 연결해서 사용해야 한다.

사용 예를 살펴보기

아이디어를 얻을 수 있는 최고의 장소 중 하나는 바로 다른 성공적인 웹사이트들이다. 컬러 매칭은 정답이 없는 주제 중 하나이기는 하지만 특정한 목표를 달성하기 위한 더 나은 선택지들이 존재하는 영역이다. 많은 웹사이트들은 남다른 접근방식을 취함으로써 어떤 것들이 통하고 어떤 것들이 그렇지 않은지를 알 수 있는 아이디어를 제공한다. 대중적인 웹사이트들의 색상 조합을 살펴봄으로써 어떠한 색상 팔레트가 효과적인지를 살펴보라. 아울러 당신의 분야에 특화된 사이트들을 살펴보라. 그 사이트가 고객들에게 정보를 제공하기 위해 사용하고 있는 시각을 이해하려고 노력하라. 그들의 고객이 누구인지 평가해보고 그 고객들에게 어필하기 위해 어떤 색상 심리를 사용하고 있는지 살펴보라.

또다른 아이디어 창고는 매거진이다. 사실상 모든 분야에는 관련 잡지가 존재한다. 그들의 어떻게 브랜딩 컬러와 페이지, 헤더, 배경 등등을 만들었는지를 살펴보라. 비록 매우 다른 미디어이기는 하지만 그 대상 고객을 위한 색상은 여전히 유효하다.

구글 검색

색상 조합을 알아보는 최고의 방법 중 하나는 구글 검색을 사용하는 것이다. 검색어로는 “color combinations with”와 관심있는 색상을 입력한다. 이렇게 하면 Pinterst, ColorCombos.com 그리고 Better Homes and Gardens를 포함한 검색 결과를 보여줄 것이다. 이미지 검색을 사용해서 수많은 색상 조합의 예를 볼 수 있을 것이다. 다음에 살펴보겠지만 컬러 매칭 툴을 사용해서 이미지로부터 색상을 가져올 수도 있다.

팔레트 검색

컬러 팔레트를 검색해 볼 수도 있다. 종종 컬러 팔레트는 hex 또는 RGB 값을 제공해준다. 그렇지 않은 경우, 색상 추출 도구를 사용해서 컬러를 찾아내서 팔레트를 재구성할 수도 있다.

색상 실험하기

소수의 색상으로 시작해서 편한게 느껴지는대로 하나씩 추가하라. 함께 잘 어울리는 2개의 색으로 시작해서 세번째 색을 추가하라. 하나의 주도적인 색을 사용하고 다른 것들은 하이라이팅을 위해 사용하라. 하나의 색을 선택한 다음 그 색의 그늘 색을 사용하라. 하나의 그늘색은 배경으로 다른 그늘 색은 하이라이트로 시도해보라.

비즈니스는 통상 브랜딩에 사용하는 하나의 주도색을 갖고 있으므로 그 색을 사용할 것을 고려해야 한다. 하지만 그와 다른 색을 가지고 실험하는 것을 두려워하지 말아야 한다. 다만 궁극적으로는 브랜딩 칼라와 충돌해서는 안된다.

이 지점에서 A/B 테스트를 사용하면 편리하다. 절반의 고객들에게는 하나의 색이 보이게 하고 다른 절반의 고객들에게는 또 다른 색이 보이게 할 수 있다. 그리고 나서 통계를 통해 어느 것이 더 효과적인지 확인할 수 있다. A/B 테스팅은 Divi 2.7에서 추가될 기능이다. 이것은 실험을 위해 뛰어난 도구가 될 것이다.

대조 실험하기

대조는 색상들이 서로 대립해서 돋보이게 한다. 흥미로운 대조를 가지고 있는 색상들을 선택하라. 만일 대조가 충분하지 않은 색을 사용하면 본문을 읽기 어렵게 만들고 독자의 눈을 피곤하게 할 것이다. 만일 너무 많은 대조, 또는 잘못된 대조를 사용할 경우에는 보기에 안좋기 때문에 독자들은 돌아설 것이다. 제대로 사용된 대조는 독자들의 주의를 이끌어 낼 수 있다. 대조는 버튼, 링크, 아이콘 등등에 사용되어야 한다. 대조는 사용자들을 Call-to-action으로 안내하는 좋은 도구이다.

컬러 매칭 테크닉을 연습하기 위한 도구들

컬러 팔레트와 색상 조합을 도와주는 많은 도구들이 있다. 당신이 하나의 색을 선택하면 이에 맞는 대조 색상과 블렌딩 색상을 알려준다. 놀랍지도 않게 많은 무료 온라인 도구들이 특별히 구글의 Material Design을 위해 만들어져있다. 또한 몇개의 훌륭한 이미지 편집 앱들도 있다. 여기에 몇개의 가장 인기있는, 그리고 약간의 프로페셔널 기능을 갖추고 있는 몇개의 무료 앱들을 소개한다.

Material Design Color Palettes

구글에서 제공하고 있는 전체 세트의 컬러 팔레트. 안드로이드, 웹 그리고 iOS를 위해 마련된 주 색상과 강조를 위한 매칭 색상들을 제공한다.

각각의 색상은 hex 값을 제공한다. 또한 샘플을 제공하기 때문에 이들이 어떻게 함께 작동하는지를 볼 수 있다. 여기에는 밝은 색, 어두운 색과 다양한 투명도를 가진 변형색상들을 포함한다. 당신은 Android를 위한 컬러 팔레트를 커스터마이즈(customize)할 수 있다. 포토샵과 일러스트레이터를 위한 컬러 스와치를 압축파일로 download 할 수도 있다.

Material Palette

Material Palette는 구글의 Material Design을 위해 만든 온라인 컬러 생성기이다. 웹사이트를 위한 색상 선택을 도와준다.

두가지의 색상을 선택하면 이들 색들과 어울리는 컬러 팔레트를 보여준다. 여기에는 다음 요소들이 포함된다.:

• Dark primary
• Primary
• Light primary
• Text/icons
• Accent
• Primary text
• Secondary text
• Divider

이것은 어떤 기능을 위해 어떤 색을 사용해야 할지를 추측하는 일을 줄여준다. 대조를 원하지 않을 경우에는 하나의 색을 꺼도 된다. 자신의 팔레트를 다운로드하고 소셜미디어에 공유할 수도 있다.

Material UI

Material UI 는 Material Design, Flat Design과 소셜 미디어을 위한 도구들의 모음이다. 각각의 목적에 맞는 색상들의 목록을 제공하고 hex 또는 RGB값을 쉽게 찾을 수 있다. 각각에 대한 간략한 설명은 다음과 같다.

Material Design Colors

Material Design Colors는 MaterialUI에서 제공하는 도구로서 당신이 색상을 선택하면 그것이 어떻게 적용되는지를 보여주는 도구이다.  색상을 선택하면 색상값을 클립보드에 복사해준다. 색상을 선택한 후에는 Palette Creator를 클릭한다.

이것은 당신의 컬러 팔레트가 모바일 기기에서 어떻게 보여질지를 보여준다. 컬러 팔레트 상의 색상을 변경하면 이것들이 함께 어떻게 보여질 것인지를 보여준다. 주된 색상과 강조 색상을 보여주고 hex 또는  RGB 값을 제공하므로 Material Design을 사용하지 않더라도 해당 색상들을 사용할 수 있다. 원하면 색상 팔레트를 소셜 미디어에 공유할 수도 있다.

Flat UI Colors

MaterialUI에서 제공하는 도구로서 Flat Design에 사용할 색상 리스트를 제공한다. 관심있는 색상을 선택하면 hex 또는 RGB 값이 클립보드에 복사된다. 색상들이 어떻게 서로 작용하고 대조를 이루는지 볼 수 있다.

Social Colors

MaterialUI 에서 제공하는 Social Colors는 Flat UI Colors와 같은 방식으로 작동한다. 원하는 색상을 선택하면 hex값이나 RGB값을 클립보드에 복사해준다. 색상은 그것들이 사용되는 소셜 네트워크의 이름들이 레이블링되어 있다. 이 레이아웃은 이들 색상들이 어떻게 사용되는지를 보여주는 좋은 지침을 제공한다.

ColorBlender

ColorBlender 는 RGB 슬라이더를 사용해 컬러 팔레트를 생성하게 해준다. 미리 준비된 팔레트를 사용할 수도 있고 원하는 대로 수정하여 사용할 수도 있다. Auto match 모드가 있어서 주 색상을 변경하면 이에 따라 자동으로 강조 색상을 조정해준다. Direct mode에서는 색상을 독자적으로 변경할 수 있다. 일단 색상이 마음에 들면 블렌드를 다운로드하여 포토샵, 일러스트레이터용으로 다운로드 할 수도 있고 단순히 HTML과 RGB값을 사용할 수도 있다. 이메일로 보낼 수도 있다. 블렌드 내의 특정 색상이 마음에 들면 그 색을 주 색상으로 사용할 수 있는데 나머지는 거기에 맞춰 매치된다. 또한 Pantone match를 제안해주기도 한다. 블렌드는 저장해 두었다가 나중에 불러올 수도 있다.

Paletton

Paletton 은 흥미로운 컬러 휠을 제공하는데 여러 가지 방법을 통해 색상을 선택할 수 있게 해준다. 주 색상을 선택하면 강조 색상과 2차 색상을 포함한 색상 패밀리를 보여준다. 마우스를 위에 올리면 hex 값을 보여준다.

컬러 팔레트를 프리뷰하고 선택한 색상이 적용된 웹사이트 예를 볼 수도 있다. 밝은 색과 어두운 색, 긍정적인 색과 부정적인 색을 선택할 수 있다. 애니메이션과 아트워크를 보여주기도 한다. 각각의 선택은 복수 선택이 가능하다. 이것은 직접 테마를 수정하지 않고도 워드프레스 테마 안에서 색상들이 어떻게 보여질 것인지를 볼 수 있게 해주는 뛰어난 도구이다.

Adobe Color CC

Adobe Color CC 는 주 색상을 변경하는 데에 따라 강조 색상의 값을 변경시켜주는 인터랙티브 컬러 휠이다. 주 색상을 그대로 두면서 강조 색상을 변경할 수도 있다. 다른 모든 값들은 매칭값에 따라 자동적으로 변경된다. 7개의 서로 다른 매칭 룰을 선택할 수 있다. 여기에는 각각의 색을 독립적으로 변경시킬 수 있는 커스텀 모드도 포함된다. 각각의 색상에 대해서 hex 또는 RGB 값이 제공된다. 선택한 색상을 저장했다가 나중에 사용할 수도 있다.

탐색 도구(Explore tool)가 제공되어 미리 만들어진 컬러 팔레트들을 보고 비교하고 편집하고 저장할 수 있다.

Pick Color from Image

Pick Color from Image & Matching PMS Colors 는 흥미로운 도구이다. 로고를 업로드하면 Pantone 컬러를 얻을 수 있다. 가장 근접한 PMS 컬러를 제공해주기도 하므로 Pantone 컬러에 대한 변형을 볼 수 있다. 추가적으로 컬러 휠에서 색상을 선택하여 가장 근접한 PMS 컬러를 얻을 수도 있다. 당신이 Photoshop이나 Illustrator를 가지고 있지 않다면 로고 이미지를 업로드하는 것은 컬러 값을 얻을 수 있는 유용한 방법이다. 드로퍼 기능을 제공하는 어도비에 대한 대안은 몇 가지 있다.

Paint.NET

Paint.NET 은 몇몇 고급 기능을 갖춘 PC용 무료 이미지 편집 앱이다. 원하는 색상이 있는데 RGB 또는 hex 값을 모른다면 간단히 이미지를 복사해서 Paint.NET에 붙여넣고 color-picker를 선택한 후 원하는 색상 부분을 클릭하면 된다. 그 색상은 주 색상이 되고 RGB와 hex 값이 제공될 것이다. 2차 색상도 선택하고 나중에 사용할 수 있도록 컬러 팔레트를 저장할 수도 있다.

Gimp

Gimp는 윈도우, OS X, 리눅스와 그외의 운영체제를 위한 무료 앱으로서 컬러 픽커, 팔레트 빌딩툴과 같은 고급 기능을 갖추고 있다. 컬러를 얻고자 하는 이미지를 붙여넣기 한 다음 컬러 픽커를 선택하고 해당 컬러를 선택하면 된다. 컬러 팔레트를 만들고 재사용할 수도 있다.

Photoshop

Adobe’s Photoshop 은 시각 디자인 도구의 표준이다. 윈도우와 맥에서 사용할 수 있으며 사실상 상상할 수 있는 모든 컬러 매칭과 조정 기능을 갖추고 있다. 사용자 정의 인덱스 테이블과 아이드로퍼, 자신만의 팔레트, 스와치 등등을 만들 수 있다. 샘플링한 색상을 전경 위에서 미리보기 할 수 있다. RGB, hex, HSB, Lab, 그리고 CMYK 방식으로 색상을 선택할 수 있다. 컬러 피커는 어느 시스템에서도 사용할 수 있는 216 색상을 제공하는 web-safe 기능을 제공한다. 가장 비용이 많이 드는 옵션이지만 이것으로 할 수 없는 것을 상상히기 어려운 프로페셔널 도구이다.

Sketch

Sketch 는 고급 디자인 기능을 많이 갖춘 맥용 디자이너 도구이다. 확대가능한 벡터를 만들고 재사용 가능한 UI 요소를 만들기에 완벽하다. 내장 컬러 피커가 있어서 어느 사진으로부터든 자신만의 팔레트를 만들 수 있다. 수많은 서드파티 엑스텐션이 사용가능하며 이중 어떤 것은 컬러 팔레트를 저장하고 재사용하게 해준다.

Sketch Palettes 라고 불리우는 익스텐션은 컬러 피커 안에 팔레트를 저장하고 불러오기할 수 있게 해준다.

결론

색상의 사용은 과학이면서 또한 예술이다. 색상은 방문자의 분위기를 형성하는데 도움을 줄수 있다. 그들의 관심사를 자극하거나, 안전한 느낌을 주거나 웹사이트에 권위를 주거나 놀고 싶게 만들거나 다시 오고 싶게 만들거나 등등 많은 일을 도와준다. 제대로 된 색상의 조합은 call-to-action 반응을 향상시키고 공유 비율을 높여줄 수 있다. 제대로 된 색상의 선택은 방문객을 붙잡아 사이트에 머물게 할 수 있다. 몇개의 컬러 매칭 테크닉과 사용 가능한 도구들를 통해 색상 심리를 당신의 필요에 따라 활용할 수 있다. 궁극적으로 이것은 많은 연습과 경험이 필요하다. 그러나 시간을 투자할 가치가 있는 연습이다. 대단한 첫인상을 남길 기회가 생길 뿐이다.

당신의 차례다! 추가할 컬러 매칭 테크닉이 있는가? 당신이 좋아하는 컬러 도구가 있는가? 아래 코멘트를 통해 남겨주기 바란다.

Article thumbnail via karawan / shutterstock.com