사용자 인터페이스에 맞는 색상을 선택하는 것은 그래픽 디자인과 같은 프로젝트에서 필요한 것과는 다릅니다. UI 디자인에서는 다양한 컬러와 음영이 있는 종합적인 색상 세트가 필요할 뿐만 아니라, 디자이너가 사용자 경험을 위해서 어떤 컬러가 추가되어야 하는가에 대해서 진지하게 생각해보는 것이 필요합니다. 즉, 디자인 안에서 어떤 색상이 가지는 의미에 대해서 신중하게 생각해야만, 해당 브랜드에서 오랫동안 생명력을 가지는 디자인이 만들어질 수 있다는 것입니다.
이미 인터넷에서는 수많은 컬러 팔레트 생성기들이 있습니다. 하지만 이번 시간 *국내 1위 IT아웃소싱 플랫폼, 위시켓은 실력파 디자이너들이 활동하고 있는 드리블(dribble)에서 추천하는 UI 디자인에 특화된 색상 도구들을 소개하고자 합니다. 비즈니스 의도에 맞는 컬러 팔레트를 찾아 멋지고 세련된 디자인을 만들어보세요.
*잠깐, 위시켓은 2019년 09월 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다. 현재 7만개 이상의 디자인 업체와 프리랜서들이 활동하고 있으며, 2만건 이상의 프로젝트를 진행한 경험을 바탕으로 ‘견적제공, 미팅주선, 계약서 작성과 프로젝트 진행 안내’까지 체계적인 매니징 서비스를 제공합니다. 위시켓에는 무료로 프로젝트 등록이 가능하며, 더 자세히 알아보고 싶으시다면 여기를 클릭해주세요:)
컬러 팔레트 사이트 1. 액세서블 컬러 매트릭스 (Accessible Color Matrix)
https://toolness.github.io/accessible-color-matrix/
제품 디자인을 하게 된다면, 우리 모두는 접근성이라는 것을 염두에 두어야 합니다. 여러분이 만든 색 대비가 웹 콘텐츠 접근성 지침(Web Accessibility Guideline)과 일치하도록 하는 것이 접근성을 유지하는 한 가지 방법입니다. 액세서블 컬러 매트리스(Accessible Color Matrix)에서는 여러분이 염두에 두고 있는 색채 조합이 사용자 인터페이스와 잘 어울리는지를 초간단 테스트를 통해서 확인해볼 수 있습니다. 이 도구의 독특한 점은 한 번에 두 개의 색상만 비교하는 것이 아니라, 다양한 색상을 동시에 테스트해볼 수 있다는 것입니다.
컬러 팔레트 사이트 2. 에바 컬러(Eva Colors)
에바 컬러는 편리한 AI 도구이며, 브랜드의 주요 색상을 기반으로, 그에 맞는 컬러 팔레트를 만들어냅니다. 그렇게 만들어진 색상들에는 각각 성공, 정보, 경고, 위험과 같은 의미가 부여됩니다. 무엇보다도, 에바 컬러는 생성된 각각의 색상에 대해서 다양한 색조를 만들어서 아주 쉽게 내보내는 기능까지 갖추고 있습니다. 그리고 라이트 모드와 다크 모드에서 모두 간편하게 색상을 비교해볼 수 있습니다! 간편하고, 효과적이고, 직관적이라고 할 수 있죠.
컬러 팔레트 사이트 3. Palx
Palx는 자동 UI 컬러 팔레트 생성기입니다. 기본 컬러를 입력하면, 그 헥스 코드(16진수)를 기반으로 시스템에서 즉시 모든 스펙트럼을 가진 컬러 팔레트를 만들어 줍니다. 그렇게 생성된 모든 색상들은 서로 잘 어울리며, 페이지의 아래쪽으로 스크롤 해서 쉽게 내보낼 수도 있습니다.
컬러 팔레트 사이트 4. 어도비 컬러 CC(ADOBE COLOR CC)
어도비 컬러 CC는 색에 대해서 잘 모르고 색채 감각이 없다거나, 아무것도 없는 상태에서는 색채 조합을 할 수 없는 분들에게 적합한 도구입니다. 이 서비스는 컬러 휠(Color Wheel)을 이용해서 사이트, 블로그, 페이지, 그래픽 이미지, 인포그래픽 등에 사용할 수 있는 최적의 색상 4가지를 골라줍니다. 처음에 고른 한 가지 색상과 화면의 왼쪽 상단에서 여러분이 설정해놓은 규칙을 기반으로 골라주는 것이인데요. 만약 원하는 색상이 따로 없다면 상단의 ‘탐색’ 메뉴를 이용해서 다른 사용자들이 미리 만들어 놓은 색채 조합을 라이브러리에 복사하고, 편집하고, 저장할 수도 있습니다. 어도비(Adobe)에서 제공하는 이 편리한 도구의 또 다른 장점은, 여러분이 새로 만든 색채 조합을 일러스트레이터, 포토샵, 인디자인 등에서 불러들일 수 있다는 것입니다. 어도비 계정을 만들어 다양한 기능들을 편리하게 이용해보세요.
컬러 팔레트 사이트 5. 클라우드 플레어 (Cloud Flare)
https://cloudflare.design/color/
클라우드 플레어는 색상 세트를 구성하는 것뿐만 아니라 헤더, 아이콘, 버튼 등 UI의 수많은 요소들과 컬러 팔레트를 미리 비교해서 보여주는 기능도 제공하는 맞춤형 도구입니다. 가장 훌륭한 부분은 각각의 팔레트가 가진 접근성을 점수로 비교해서 확인할 수 있다는 것이며, 필요한 경우에는 해당 색상을 편집할 수도 있습니다. 컬러 팔레트 역할도 해주고, 그 색상에 잘 맞게 작업하는 것을 도와주는 시각화 도구까지 제공하고 있기 때문에, 한 번에 두 개의 기능을 갖춘 너무나도 유용한 툴이라고 할 수 있습니다.
컬러 팔레트 사이트 6. 팔렛트 (Pallettte)
팔렛트를 활용하면 서로 잘 어울리는 색상들로 이루어진 색채 조합을 만들고 테스트해볼 수 있습니다. 색상과 채도를 미세하게 조정할 수도 있고, 필요하다면 컬러 스와치(Color swatch)도 추가하면서 모든 것을 편집할 수 있죠. 이 도구의 왼쪽 맨 위에 있는 더하기 아이콘을 클릭하는 것만으로 시작할 수 있으며, 팔레트 구성이 완료되었다면 오른쪽 맨 위에 있는 내보내기 버튼을 누르시면 됩니다! 이미 컬러 팔레트를 만들어 놓은 게 있다면, 간단하게 불러와서 원하는 부분을 더 추가하고 편집할 수 있습니다.
컬러 팔레트 사이트 7. 오픈칼라(Open Color)
https://yeun.github.io/open-color/
이미 만들어져서 멋진 결과물을 만들어 낼 수 있는 UI 컬러 팔레트를 이용하고 싶다면, 오픈칼라를 확인하세요. 이 웹사이트에서는 기본적으로 유저 인터페이스에 최적화된 오픈소스 색채 조합을 제공하고 있습니다. 만약 여러분의 브랜드 컬러가 아직 확정되지 않았을 경우에도, 오픈칼라는 UI 컬러 팔레트가 가진 효과와 매력을 검증할 수 있는 아주 뛰어난 도구가 되어줍니다. UI 디자인에서 컬러를 사용하는 것이 처음이라면, 이곳에 있는 설명(instruction) 탭을 눌러 보세요. 각 색상의 용도를 지정하는 유용한 매뉴얼들을 찾으실 수 있을 겁니다.
함께 보면 좋은 글
이번 시간 IT 아웃소싱 플랫폼, 위시켓과 함께 ‘인기있는 컬러 팔레트 7선’을 알아보았습니다. 앞서 말씀드렸다시피 여러분의 비즈니스에 어울리는 컬러팔레트를 찾아 멋진 디자인을 구현해보셨으면 좋겠습니다. 다음 시간에도 위시켓은 더욱 더 유익한 디자인팁으로 찾아뵙겠습니다. 혹시, 여러분의 디자인 프로젝트를 도와줄 전문가가 필요하지는 않으신가요? 그렇다면 8만개 이상의 디자인 업체 그리고 디자이너들이 활동하고 있는 위시켓을 방문해보세요. 검증된 전문가를 구하는 일부터 계약서 작성 그리고 안전한 대금결제까지, 위시켓이 안전한 외주를 도와드립니다:)
> 이 글은 ‘7 UI tools for creating better digital color palettes’을 각색하여 작성되었습니다.
