앞으로의 배색은 인공지능에게 맡기는 시대 - Khroma
이제 바야흐로 배색은 인공지능에 맞겨야 하는 시대가 온것 같습니다. 경력 디자이너라 하더라도 배색에 뛰어난 사람, 그렇지 못한 사람이 있습니다. 훈련에 의해 적합한 배색을 조합할 수는 있겠지만 어느정도가 좋은가에 대한 기준이란 측정하기 어렵고 사람마다 판단기준이 다르기 때문에 정해진 것은 없다고 생각하지만, 인공지능이라면 어떨까요?
이서비스는 배색에 대해 고민하는 디자이너들의 걱정을 완벽하지는 않지만 일정부분 수고를 덜어줄수 있을것 같습니다. 내가 고생고생해서 시행착오를 거쳐가며 하나씩 만들어 보는것이 아니라 사용자가 고른 컬러를 기준으로 AI가 적합하다고 생각되는 배색들을 조합하여 적절한 것들을 추천해주니 그 안에서 마음에 드는 것을 고르기만 하면 됩니다. 특히 작업해야할 부분의 컬러시스템이 정의되어 있다면 좀더 사용하기 수월하진 않을까 생각됩니다.
차례
배색 생성하기
우선 첫페이지에서 스크롤을 하면서 원하는 색상을 50가지 선택합니다.
50가지 색상을 전부 선택하고 나면 우상단처럼 ”Start Trainging”의 버튼이 활성화 됩니다. 이제 기본적으로 사용할 색상들은 전부 준비된 상태입니다.
버튼을 누르고 나면 지금까지 선택한 색상을 기준으로 AI가 분석을 시작합니다.
약 3~5분 정도의 분석이 완료된 이후에 보여지는 화면으로 지금까지 선택했던 50가지 색상을 기준으로 만들어진 샘플들을 확인 하실 수 있습니다. 무한스크롤이니 차근차근 확인하시면 좋을것 같습니다.
사이트 메뉴
샘플들이 완성되면서 사용가능한 메뉴들이 활성화됩니다. 우선 메뉴를 확인해 보겠습니다.
왼쪽부터 순서대로 로고, Type, Poster, Gradient, Image, Palette, Favorites의 순서로 되어 있습니다.
첫번째로 기본으로 선택되어 있는 타입메뉴의 화면입니다. 기본적으로 사용되는 메뉴를 설명드리자면, 각각의 샘플에 마우스오버시 사용가능한 메뉴가 각 샘플들의 오른쪽 상단에 위치하고 있는 것을 확인 할 수 있습니다. 왼쪽부터 마우스 오버 상태, 반전 메뉴 선택시, 디테일 선택시의 샘플입니다. 하트모양을 선택하면 즐겨찾기에 등록이 됩니다.
포스터(2색패턴), 그라데이션, 이미지(듀오톤), 팔레트(4색패턴)의 샘플 예제
샘플 메뉴
각각의 샘플에 마우스오버시 확인 할 수 있는 메뉴는 3가지로 구분됩니다.
Poster, Pallete
가장 기본적인 메뉴형식으로 정보를 보거나 즐겨찾기에 추가시킬 수 있는 메뉴입니다
Type
기본적인 메뉴에 색상을 반전시켜서 확인 할 수 있는 메뉴가 추가되어 있습니다.
Gradient, Image
기본메뉴에 반전시키는 메뉴, 거기다 코드 복사용 메뉴가 추가되어 있습니다.
Gradient Code Sample
background: linear-gradient(rgb(199, 240, 193), rgb(254, 103, 86));Image Code Sample
//css
filter: url(#1dz0wspwuo);
-webkit-filter: url(#1dz0wspwuo);//html
<svg class="defs-only" style="visibility: hidden; position: absolute;">
<filter
color-interpolation-filters="srgb"
x="0"
y="0"
height="100%"
width="100%"
id="1dz0wspwuo"
>
<fecolormatrix
type="matrix"
values="0 0 0 0 0.81640625 0.7578125 0 0 0 0.18359375 0.69140625 0 0 0 0.1953125 0 0 0 1 0"
></fecolormatrix>
</filter>
</svg>사이트 설정
설정에서는 샘플을 보는데 필요한 옵션들이 나열되어 있습니다.
여기서는 Graditaion 메뉴의 옵션(실제로 소스에서의 차이점은 잘 모르겠습니다만..), Images 메뉴의 사진, 생성된 데이터의 json파일 다운로드등이 가능합니다.
Upload Custom Image를 사용할 경우 원하는 이미지를 적용시켜 볼 수도 있습니다. 배색에 고민이신가요? 인공지능에 맡겨보시는건 어떨까요?
