[웹 디자인]GUI 디자이너를 위한 색상 참고 사이트

출처 - http://www.kimdirector.co.kr/bbs/view.php?id=favorites&no=133

---

컬러는 GUI 분야 뿐만 아니라 다양한 분야의 모든 디자이너들에게 중요한 디자인의 필수요소입니다. 컬러의 범위는 매우 넓고, 광범위하며 무궁무진한데요. 하늘 아래 같은 색은 없다는 얘기가 있을 만큼 세상엔 다양한 컬러가 존재합니다. 특히 시각적인 매개체를 다루는 디자이너들에게 컬러는 가장 중요한 요소인 동시에 어렵기도 한 문제이기도 합니다. 컨셉에 따라 밝은 컬러와 어두운 컬러, 난색과 한색, 유사과 대비색 등 컬러 선택에 따라 디자인의 분위기와 전체 톤이 달라지기 때문에 디자인 작업 시 많은 고민이 되기 마련이지요.

 

이번 포스팅에서는 GUI 디자이너들에게 꼭 필요한 컬러 레퍼런스 사이트 목록을 공유하고자 합니다. 그럼 디자인 작업 시 컬러 선택에 도움을 주는 사이트들을 함께 알아보기로 하겠습니다.

 

 

1. Adobe Color CC (http://color.adobe.com/ko/create/color-wheel)

디자이너들이 가장 대중적으로 쓰는 어도비(Adobe)社에서 제공하는 Adobe Color CC입니다.

 

 

첫 화면에서의 컬러 팔레트와 컨트롤러입니다. 컨트롤러를 이용하여 컬러 값을 조정하거나, 팔레트에서 컬러를 클릭하면 그에 어울리는 컬러들이 함께 매치되어 보여집니다.

 

 

원형 컬러 팔레트에서 사용하고자 하는 컬러를 선택하고, 좌측 상단 매뉴얼의 ‘단색’을 선택해보았습니다. 선택된 컬러의 단색, 즉 같은 계열의 컬러들이 매치되어 보여집니다. 심플하거나 계열색을 주로 사용하는 디자인에 사용하기 좋습니다. ‘만들기’ 메뉴에서는 컬러를 다양하게 유동적으로 직접 매치해보고 만들기에 적합합니다.

 

 

상단의 ‘탐색’ 메뉴에 들어가보면, Adobe Color CC에서 제공하는 다양한 컬러 팔레트가 나열되어 표시됩니다.인기도순, 사용횟수 순 등으로 분류하여 볼 수 있으며, 컨셉 또는 테마의 키워드로 검색하여 디자인 작업 시 원하는 테마의 컬러 팔레트만 따로 선택하여 볼 수 있도록 제공합니다.

 

 

 

상세하게 보고자 하는 컬러 팔레트를 선택하여 들어가면, 마우스오버를 하여 해당 컬러코드를 알 수 있습니다. 즐겨찾기, 공유, 다운로드 등 다양한 기능이 있습니다. 디자인 작업 시 메인 컬러, 서브 컬러 등에 대해 고민할 때 좋은 가장 기본적인 컬러 팔레트 사이트입니다.

 

 

2. colourlovers (http://www.colourlovers.com/)

테마, 패턴 등 다양한 분류의 컬러 팔레트를 볼 수 있고, 실제 전세계의 colourlovers 사용자들이 직접 제작한 컬러 팔레트를 제공합니다.

 

 

첫 화면에서 웨딩, 패션, 웹, 인쇄 등 다양한 테마 카테고리를 기본적으로 제공합니다. 기존의 컬러 매치 사이트들과 차별화된 부분은, 컬러 뿐만 아니라 해당 테마에 어울리는 패턴, 이미지, 그래픽 등 더 큰 범위의 자료들이 있다는 점입니다.

 

 

또한, 다양한 테마의 트렌드에 맞게 응용된 사례들을 볼 수 있습니다. 사례와 함께 해당 이미지에서 추출해낸 컬러 팔레트도 제공하며, 디자인 업무를 제외한 패션 트렌드 컬러, 인테리어 컬러 등 실생활에서 컬러가 고민될 때 참고하기에 좋은 사이트입니다.

 

 

 

3. prettycolors (http://prettycolors.tumblr.com/add)

 

 

심플한 UI가 돋보이는 컬러 매치 사이트입니다. 첫 진입 화면에서 컬러가 전체 화면을 꽉 채웁니다.

이 커다란 화면이 컬러 팔레트가 되어, 마우스의 움직임에 따라 컬러가 바뀝니다. 마우스를 빨리 이동할 수 록 컬러 변화의 폭이 넓어지며, 천천히 이동할수록 부드러운 폭이 좁아지며 부드럽게 변화합니다.

 

 

마음에 드는 컬러일 때 마우스 클릭을 하면, “Is this color pretty?” 라는 말과 함께 팝업이 뜹니다. 작은 부분이지만 사용자에게 흥미를 유발하는 재미요소를 주었습니다.

 

 

팝업창의 ‘Yes’를 선택하면, 컬러코드가 제공되며, 아래로 스크롤하면 해당 컬러와 어울리는 다양한 컬러 팔레트를 볼 수 있습니다. 이미 짜여진 컬러 팔레트가 아닌, 직접 흐름을 만져보며 계열색, 컬러 플로우에 대한 감을 잡기에 좋은 사이트입니다.

 

 

 

 

4. design-seeds (http://design-seeds.com/)

 

 

사진을 기반으로 추출한 컬러를 조합하여 제공하는 사이트입니다. 감성적인 어감의 사이트 이름에 걸맞게, 주로 자연이나 색감이 아름다운 사진들이 기반이 되어, 자연스러운 neutral 컬러 팔레트가 대다수입니다. 차분하고 여성스러운 컨셉의 디자인에 도움이 많이 됩니다.

 

 

또한, 상단의 ‘Palette Search’에서 RGB 컨트롤러를 이용하여 원하는 컬러를 선택한 후 ‘Go get it’를 클릭하면 해당 컬러가 들어있는 컬러 팔레트가 제공됩니다.

 

 

5. designspiration (http://designspiration.net/colors/E0A2C5,C73E87,271F90/)

 

 

전 세계의 디자이너들의 작품이 올려지는 디자인 포트폴리오 사이트입니다. 단순한 디자인 작품 제공 뿐만 아니라 Color search를 통해 원하는 컬러값의 작품들을 분류하여 볼 수 있습니다.

 

 

상단의 Color Search에 들어가, 컬러 팔레트에서 원하는 컬러를 선택합니다.

 

 

Red 컬러를 선택했을 때 나오는 화면입니다.

 

 

2개 이상의 컬러를 선택하여 검색하면, 선택 컬러들이 조합되어있는 작품들이 분류되어 제공됩니다.

정확한 컬러 값보단 디자인 작업 시 컬러 컨셉에 맞는 다양한 작품들을 보며 영감을 얻기에 유용합니다. 사용하고자 했던 컬러 조합을 세계의 디자이너들은 어떤 방법으로 배색을 하였는지 알 수 있어 좋습니다.

 

 

6. colorcombos (http://www.colorcombos.com)

 

 

첫 화면에서 기본적으로 제공되는 컬러 팔레트입니다. 가장 흔하게 볼 수 있는 팔레트입니다.

 

 

Color Tags에 들어가보면 A-Z의 수많은 태그 목록이 나옵니다. 다양한 형용사, 테마 키워드부터 요리 재료까지 태그가 되어있어, 디자인 컨셉 아이디에이션에 도움이 많이 됩니다.

 

 

Color Tools에서는 Color Tester, Color Maker, Grab Color 기능이 있습니다. 위의 툴은 Color Tester로, 컬러 블록을 직접 만들고 컬러, 순서 등을 지정하며 쉽게 컬러 배치를 해볼 수 있습니다. 이 툴을 사용함으로써 화면에서 각각 다른 컬러들이 어떻게 조합이 되는지 볼 수 있습니다. 포토샵이나 일반 디자인 툴을 다루기 어려운 일반인에게 유용합니다.

 

 

 

Grab Color Tool은 디자이너들이 벤치마킹 시 매우 유용합니다. 컬러 배색이 매력적이라 생각되는 웹사이트의 주소를 입력하면, 해당 웹사이트의 주요 매치 컬러들을 뽑아 컬러 팔레트를 제공합니다. 웹사이트를 보고전체적인 색감은 마음에 드나, 직접 컬러를 뽑아내기에 어려울 때 사용하면 좋습니다.

 

 

7. Paletton (http://paletton.com/)

 

 

심플한 구조의 컬러 사이트입니다. 좌측에 Color Picker, 우측에 해당 컬러의 유사컬러들이 제공됩니다. 우측 유사색 팔레트에서 마우스 오버를 하면 컬러 코드를 알 수 있습니다.

 

 

Color Picker에서 원하는 컬러를 마음대로 선택하여 볼 수 있습니다. Yellow Green 컬러를 선택해보았습니다.

 

 

Color Picker 중앙의 컨트롤러를 위 사진과 같이 대각선으로 길게 늘어트려주면 우측의 유사색들의 채도와 대비가 높아집니다.

 

 

다시 컨트롤러를 대각선방향으로 짧게 움직이면 우측의 컬러 팔레트 채도와 대비가 낮아집니다. 우측의 컬러 팔레트 형태는 원형, 텍스트, 그래프 형, 컬러 차트+텍스트 등 다양한 형태로 제공됩니다.

 

 

컬러 팔레트에서 유사색만 제공된다는 점이 아쉬우나, 채도와 대비 설정이 자유롭게 가능하며 다양한 형태로 배치해볼 수 있어서 컬러에 대한 감을 잡기에 매우 유용합니다.

 

 

지금까지 총 7개의 대표적인 컬러 사이트들에 대해 알아보았는데요. 개인적인 의견으로는 디자인 실무 작업 시 컬러 배색엔 Adobe Color CC, Designsinspiration, Paletton, Colorcombos 등이 더 유용하구요. 그 외 일상생활이나 다양한 상황에서 컬러 감을 익히기엔 Colorlovers, Prettycolors, Design-seed 등이 더 유용할 듯 싶습니다. ^^
 

디자인 작업 시 위의 사이트들을 상황에 따라 잘 참고하시면, 시간 단축을 물론 컬러의 감을 익히기에 도움이 많이 될 수 있습니다. 저는 평소에 위의 사이트들을 보며 조합이 아름다운 디자인이나, 실제 GUI 작업 시 응용할만한 팔레트들을 캡쳐해 컬러별로 모아놓고는 합니다. 그렇게 해놓으면 후에 원하는 컬러에 따라 레퍼런스도 풍부해지고 훨씬 더 빨리 작업을 시작할 수 있게 된답니다. 시간 날 때마다 가볍게 둘러보시고, 디자인 컬러 선택에 도움이 되었으면 좋겠네요.