brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Dec 01. 2017

UX 디자이너를 위한 컬러 툴 A-Z

UX 디자인 배우기 #128

전민수 UX 컨설턴트 소개 

안녕하세요. 전민수 UX 컨설턴트입니다. 지난 23년간 수행했던, UX 컨설팅 경험과 강의 이력을 소개합니다. 


전민수 UX 샘의 [인프런] 인터넷 강의 안내입니다 


[클럽하우스] 전민수 UX 샘의 재능 기부 UX 공개 수업 
[UI/UX/리서치/방법론] 우리 모두 함께 공부해요~ 


클럽하우스에서 [전민수 샘의 UX 공개 수업]을 진행하고 있습니다.

매주 수요일/금요일 밤 9시-11시까지 UX/리서치/방법론 등 하루에 하나의 주제를 선정하여 깊이 있는
공개 강의를 하고 있습니다. 바로 이어서, 뒷풀이방(11시-12시)은 [UX A-Z 모든 것] 고민 상담을 하고 있으니, 혹시, 궁금하거나 고민이 있으면, 저한테 무엇이든지 물어보세요~ 가능한 제가 아는 범위에서 최대한 알려 드리겠습니다.

 
여러분 모두 화이팅!!!!!  


그리고, 아래 링크를 클릭하고, 저를 팔로우 해주시면 [공개 강의] 혹은 [비정기 강의] 열릴때마다,
여러분께 알림이 갈거에요~


UI/UX 카페 소개 (카페명: 클럽하우스 UX Book Q&A Club)
국내/해외 UI&UX 10,000개 이상 아티클 공유 및 세부 카테고리 분류

카페는 UX 자료 공유 목적으로 운영되고 있으며, 카페 가입 시 바로 승인됩니다. 




Today UX 아티클


UX 디자이너를 위한 기본 컬러 툴을 전문 번역한 글입니다.


컬러(color)는 디자이너가 가진 툴킷에서 가장 강력한 도구 중 하나입니다. 동시에 마스터하기 까다로운 개념이기도 합니다. 만들 수 있는 컬러 조합이 무한히 많기 때문에 사이트나 앱에서 사용할 색상을 결정하기가 어려울 수 있습니다. 쉽게 작업하기 위해, 컬러 팔레트(color palette)를 선택하는 데 도움이 되는 가장 좋은 툴을 모아 리스트를 만들어보았습니다. 이 리스트가 여러분의 시간을 많이 절약해줄 것이라고 확신합니다. 이 글에서는 다음과 같은 활동에 도움이 되는 툴을 소개하려 합니다.


l  영감 얻기

l  나만의 컬러스킴 만들기

l  접근성 좋은 컬러 스킴 만들기


1. 영감 얻기


자연


여러분 주변에는 이미 수많은 영감의 원천이 존재합니다. 영감을 얻고 싶다면 주변을 한 번 살펴보세요. 인쇄물 디자인, 인테리어 디자인, 패션 등등 영감을 얻을 수 있는 곳은 정말 많습니다. 그중에서도 최고의 컬러 조합은 자연에서 나옵니다. 아름다운 순간을 사진으로 찍어보기만 해도 사진에서 여러분만의 컬러 스킴을 만들 수 있습니다. 


최고의 컬러 조합은 자연에서 나옵니다. 사진을 가지고 컬러 스킴을 만들 수 있습니다.


Behance


Behance는 여러 업계의 독창적인 전문가들이 만든 최고이자 최신의 온라인 포트폴리오 작업물을 보거나 찾을 수 있습니다. 영감을 얻기에도 좋습니다. 새롭고 흥미로운 창작물을 찾고 싶다면, 간단하게 컬러로 검색하면 됩니다.


Dribbble Colors


Dribble은 유저 인터페이스와 관련한 영감을 얻기에 가장 좋은 공간 중 하나입니다. 컬러로 검색할 수 있는 기능도 있기 때문에, 다른 디자이너들이 특정 컬러를 어떻게 사용하였는지 알아보고 싶다면, dribble.com/colors로 들어가서 원하는 컬러를 선택해보세요.


컬러의 최소 비율(예: 파란색 30%)도 구체적으로 선택하여 검색할 수 있습니다. 


 컬러의 최소 비율도 구체적으로 선택


Designspiration


Designspiration은 컬러 팔레트에 대한 아이디어는 있지만, 그 조합을 사용한 여러 예시를 보고 싶을 때 활용할 수 있는 훌륭한 툴입니다. 최대 5개의 컬러를 선택하면, 컬러 조합과 매치가 되는 이미지가 검색됩니다.



Tineye Multicolr


Tineye는 컬러 조합으로 사진을 검색할 수 있는데, 심지어 각 컬러의 구체적인 비율을 정해 검색할 수도 있습니다. 이 웹사이트는 Flicker에서 제공되는 2천만 개의 크리에이티브 커먼즈(Creative Commons) 이미지를 데이터베이스로 사용합니다. 아마도 완벽한 컬러 조합으로 무료 이미지를 찾을 수 있는 가장 빠른 방법일 겁니다. 


ColorZilla


ColorZilla는 구글 크롬과 모질라 파이어폭스에서 사용할 수 있는 확장 프로그램입니다. 컬러 확인, css 그라데이션 생성, 팔레트 브라우저 등 컬러와 관련된 다양한 툴이 들어있습니다. 



Shutterstock Spectrum


특정 컬러 스킴이 괜찮을지 확인하는 가장 좋은 방법은 스톡 이미지(stock image) 목록을 통해 확인하는 겁니다. 모든 주요 스톡 이미지 서비스에서 이런 툴을 제공하고 있지만 Shutterstock Spectrum은 특히나 미리보기 이미지가 크게 제공되는 좋은 인터페이스를 가지고 있습니다. 워터마크가 박힌 미리보기 이미지만으로도 충분히 팔레트를 만들 수 있기 때문에 유료 가입을 할 필요도 없습니다. 


2. 나만의 컬러 스킴 만들기


Material Design Color Tool


Material Design Color Tool을 사용하면 컬러 팔레트를 생성하거나 공유할 수 있고, 여러분이 디자인 한 UI에 적용해볼 수도 있으며, 모든 컬러 조합의 접근성 수준을 측정해볼 수 도 있습니다. 



Coolors.co


Coolors는 여러 컬러를 조합한 컬러 스킴을 만드는 작업에 강력한 툴입니다. 선택한 컬러는 고정해두고 스페이스바를 누르면 새로운 팔레트가 생성됩니다. 이 툴의 멋진 점은 결과물이 하나만 나오는 것이 아니라는 점입니다. 레퍼런스 포인트만 조절하면 몇 가지 컬러 스킴을 얻을 수 있습니다.


이 툴을 이용하면, 이미지를 업로드하여 그 이미지에서 컬러 팔레트를 뽑을 수도 있습니다. 


Coolors를 활용하면 이미지에서 컬러 팔레트를 뽑을 수 있습니다.


Adobe Color CC


이 툴은 본래 Kuler라는 이름으로 오랫동안 사용되었던 툴입니다. 웹 버전과 데스크톱 버전 모두 이용 가능합니다. 웹 버전을 이용하면 컬러 휠을 사용하여 컬러 스킴을 만들 수 있습니다. 

https://color.adobe.com/ko/create/color-wheel/


 Color CC로 5개의 컬러로 구성된 다양한 컬러 스킴을 생성하고 저장할 수 있습니다.


기존 이미지로 컬러 스킴을 만들 수도 있습니다.


기존 이미지로 컬러 스킴 만들기

또는 Kuler 커뮤니티에서 ‘Explore’ 섹션을 통해 수 천 가지 컬러 조합을 볼 수도 있습니다.



데스크톱 버전을 이용하면 컬러 스킴을 추출하여 포토샵, 일러스트레이터, 인디자인에서 바로 사용할 수 있습니다. 


Paletton


Paletton은 Adobe Color CC와 유사한 툴입니다. 차이점은 5개의 톤만 사용 가능하다는 제약이 없어 색상을 추가할 수 있습니다. 


3. 컬러의 접근성


시력 문제는 우리가 일반적으로 생각하는 것보다 훨씬 흔한 문제입니다. 전 세계적으로 2억 8천5백만 명 이상이 시각 장애를 가지고 있습니다. 많은 사람들이 약하거나 중간 수준의 시각 장애를 가지고 있습니다. 여러분이 선택한 컬러 스킴이 시각 장애를 가지고 있는 유저에게도 접근성이 좋은지 반드시 확인해야 합니다. 


WebAIM ColorContrast Checker


어떤 컬러는 서로 잘 어울리는 반면, 어떤 컬러는 서로 충돌하기도 합니다. 얼마나 많은 사이트가 AA테스트를 통과하지 못하는지 알면 깜짝 놀라실 겁니다. 그중 하나가 되지 맙시다! 특히 텍스트에 사용된 UI컬러의 컬러 명도 대비 접근성을 확인하는 것은 필수입니다. WebAIM Color Contrast Checker를 사용하여 컬러 조합을 체크해보세요.



WebAIM Color Contrast Checker는 브라우저 기반의 툴로, 헥사 코드(hex code)로 컬러를 테스트해볼 수 있습니다.


Coolors


Coolors를 사용하면 색맹을 위한 컬러 스킴 테스트를 할 수 있습니다. 인터페이스에서 컬러를 선택하기만 하면 됩니다. 


컬러 스킴에 들어간 컬러를 선택한다

모드를 ‘Normal’에서 테스트하고자 하는 대상으로 전환합니다. 


색맹 유형을 선택한다

그러면 해당 시각장애를 가진 사람이 컬러 스킴을 어떻게 보는지 확인할 수 있습니다. 

적색약인 사람인 본 컬러 스킴


NoCoffee Vision Simulator for Chrome


NoCoffee Vision Simulator는 크롬 브라우저에서 볼 수 있는 모든 페이지를 색약, 색맹 혹은 저시력인 유저의 입장에서 시뮬레이션해볼 수 있습니다. 예를 들어, “Color Deficiency(색약, 색맹)”으로 설정하고 “achromatopsia(색맹)”을 선택하면, 그레이 스케일로 웹사이트가 보입니다. 


제2색맹인 사람이 보게 될 CNN 웹사이트


마무리


위에서 언급한 툴들은 적절한 컬러 조합을 찾는 작업을 쉽게 만들어 줄 것입니다. 훌륭한 컬러 스킴을 만드는 법을 배우는 가장 좋은 길은 연습을 많이 하는 것임을 기억하세요.



매거진의 이전글 웹디자인의 타이포그래피 10가지 팁

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
브런치 시작하기

카카오계정으로 간편하게 가입하고
좋은 글과 작가를 만나보세요

카카오계정으로 시작하기
페이스북·트위터로 가입했다면