다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

Huemint


'Huemint'는 머신러닝을 활용, 그래픽 디자인을 위한 다채로운 컬러 조합을 생성해주는 서비스입니다. 기존에도 컬러 생성 툴은 여럿 존재했지만, 컬러 간 적합성 등을 고려하는 정도에 머무른 경우가 많았는데요. 이런 경우 마음에 드는 컬러 조합을 찾는다 하더라도 실제 그래픽 디자인이나 만들고자 하는 서비스에 어떤 식으로 적용하면 좋을지에 대한 고민이 필요했습니다.

 

'Huemint'는 기존 컬러 조합 서비스가 지닌 문제를 해결하기 위해 브랜드 소개, 그라데이션, 그라데이션과 배경 활용, 일러스트레이션, 이미지 활용 등 다양한 환경을 함께 제공해 마음에 드는 컬러 조합을 어떻게 활용하면 좋을지에 대한 참고 내용을 함께 제공하고 있습니다.

 

(1) 기본 구성

컬러 조합 서비스 Huemint

'Huemint' 편집 화면 구성을 살펴볼게요. 먼저 원하는 스타일을 선택할 수 있어요. (제공되는 스타일 종류는 아래에서 다시 한번 자세히 들여다볼 예정입니다.) 스타일 구성은 대표 카테고리와 포함된 컬러 수로 구성되어 있어요. '브랜드 - 3 Colors'를 선택하면, 브랜드 스타일에 3가지 컬러로 구성된 스타일을 확인할 수 있습니다. 이 서비스는 원하는 스타일에 따른 컬러 조합을 '추천'해주는 것에 초점이 맞춰져 있어 컬러를 먼저 선택하지 않고, 자동으로 컬러를 채워 사용자에게 보여줍니다.

 

컬러 조합 서비스 Huemint

원하는 스타일을 선택했을 때 우리가 확인할 수 있는 디자인 모습이에요. 이처럼 원하는 스타일을 구체적으로 선택하는 것만으로 다양한 결과를 볼 수 있게끔 서비스가 제공됩니다. 이후 포함된 컬러를 하나씩 변경할 수 있으며, 생성 버튼을 통해 원하는 컬러 조합을 계속 찾아볼 수 있어요. 원하는 스타일이 완성되면 링크 버튼을 통해 URL을 외부로 공유할 수 있습니다. 이런 구성과 컬러로 웹사이트를 만들 예정입니다. 와 같은 목적으로 사용이 가능해요. 자동 생성 시 원하는 조건 (특정 컬러 포함, 대조는 약하게)을 설정하는 것도 가능합니다.

 

 

(2) 다양한 스타일 제공

컬러 조합 서비스 Huemint

앞서 살펴본 것처럼 'Huemint'는 출발 기준이 어떤 컬러를 쓰지? 가 아니라, 내가 원하는 스타일에 어떤 컬러를 활용하면 좋을까? 에 초점이 맞춰져 있어요. 덕분에 확인할 수 있는 선택지가 많아, 활용도가 높다는 생각이 듭니다. 

 

컬러 조합 서비스 Huemint

웹사이트 제작이 목적이라면 '웹사이트(Website)' 스타일을 선택할 수 있어요. 스타일에 따라 차이가 조금 있지만 포함된 컬러수와 구성 방법이 조금씩 달라집니다. 웹사이트는 특히 다섯 가지 레이아웃이 제공되어 컬러에 따라 살펴보는 즐거움을 함께 경험할 수 있어요. 또 하나의 페이지가 아니라 2-3개 페이지에 컬러가 어떻게 활용되고 있는지 꽤 수준 높은 디자인으로 확인할 수 있다는 점도 매력적입니다.

 

컬러 조합 서비스 Huemint

그라데이션과 배경으로 구성된 스타일은 컬러 수로 상세 구분이 되어 있어요. 확실히 컬러만 제공되는 것보다 더 넓은 시각으로 활용 방법을 확인할 수 있는 모습입니다. 

 

컬러 조합 서비스 Huemint

일러스트레이션이 적용된 사례도 확인할 수 있어요. 구성 모습을 보며 상단으로 늘 포함된 컬러와 개수를 알 수 있습니다. 특정 컬러를 클릭해 원하는 값으로 변경하거나, 생성 시 특정 컬러는 '유지(Lock)'될 수 있도록 설정할 수 있어요. 이 과정을 몇 번 거치다 보면 짧은 시간 내 원하는 스타일, 컬러, 구성 방법을 찾아낼 수 있습니다.

 

 

(3) 부가 기능 제공

컬러 조합 서비스 Huemint

이미지를 업로드, 컬러를 추출할 수 있어요. 재밌는 건, 추출에서 멈추는 것이 아니라 업로드한 이미지를 다른 컬러로 변경해 확인할 수 있다는 점입니다. 앞서 살펴본 스타일에 따라 다른 컬러 조합을 확인하는 것과 같은 방법으로 이미지를 활용할 수 있습니다.

 

컬러 조합 서비스 Huemint

Bootstrap으로 제작된 대시보드에 컬러를 적용해보는 기능도 제공합니다. 앞서 스타일의 하나로 살펴본 웹사이트보다 더 다양한 구성 사례를 컬러에 따라 확인할 수 있어요. 확실히 어떤 컬러를, 어떻게 활용하면 좋을지에 대한 관점으로 사용할 수 있어 더 많은 도움을 받게 됩니다.

 

 

어떻게 활용하면 좋을까?

컬러는 서비스의 정체성을 담고 있는 대표적인 구성 요소라고 생각해요. 문제는 우리가 컬러를 선택하는 과정과, 어렵사리 선정한 컬러를 어떻게, 함께 활용할지 결정하고 고민하는 일입니다. 'Huemint'는 기본적으로 1-5개 사이 컬러 조합을 다채롭게 생성해주는 것으로 시작, 웹사이트 등 다양한 스타일에 어떻게 적용하면 좋을지 함께 확인할 수 있다는 점에서 활용도가 정말 높다고 생각합니다. 서비스에 포함될 컬러와 구성 방법을 고민하는 단계라면 더없이 좋은 선택이 될 수 있으리라 생각해요. 무엇보다 원하는 컬러로 구성된 스타일을 URL로 간편하게 공유해 함께 확인할 수 있어 좋습니다!

 

정리

  • 1-5개 사이의 컬러 조합을 자유롭게 확인하고 선택할 수 있음
  • 웹사이트, 대시보드, 이미지, 그라데이션 등 다양한 스타일에 적용된 컬러를 볼 수 있음
  • 마음에 드는 스타일, 컬러 구성을 URL로 쉽게 외부로 공유할 수 있음

참고 자료

  1. Huemint : https://huemint.com/
댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘Coolors’

디자인

배경, 효과 등을 마음대로 조합해 아이콘을 만드는 ‘Iconray’

디자인

디자인 아이디어를 구체화할 수 있는 캔버스 ‘Easel’

디자인

이미지를 중심으로 다양한 피드백을 주고받는 ‘Picflow’

디자인

스크린샷을 목업 이미지로 편집하는 서비스, ‘Pika’

디자인

2억 개 이상 조합이 가능한 3D 아바타 생성 서비스, ‘Peeps’

디자인

업무에 바쁜 당신을 위한 기본 아이콘 제공 서비스, ‘heroicons’

디자인

앱 설치율을 높이기 위한 스크린샷 제작 서비스, PWA Screenshots Generator

디자인

“특정 주제 이미지를 한 번에!”…스톡 이미지 제공 사이트 모음

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, Reverb

디자인

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, Avatarg

디자인

정적인 SVG 파일에 생동감을 더해주는, Designstripe

디자인

당신의 ‘선’ 작업을 돕는 2가지 서비스

디자인

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.