UX 디자이너를 위한 컬러 툴 A-Z
UX 디자인 배우기 #128
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 웹사이트마무리
위에서 언급한 툴들은 적절한 컬러 조합을 찾는 작업을 쉽게 만들어 줄 것입니다. 훌륭한 컬러 스킴을 만드는 법을 배우는 가장 좋은 길은 연습을 많이 하는 것임을 기억하세요.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
