IT 콘텐츠를 스크랩하고 관리해 보세요!
성장에 도움이 되는 IT 콘텐츠를 스크랩하고 관리해 보세요!
스크랩북 시작하기
다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

챗GPT의 등장으로 서비스는 물론 업무 과정에도 많은 영향을 끼치고 있는데요. 특히 AI에게 정확한 명령을 내려 높은 품질의 결과를 얻기 위한 ‘프롬프트’가 핵심으로 떠오르고 있습니다. 오늘 소개할 ‘AI Colors’도 프롬프트와 깊은 연관이 있습니다. 컬러 구성과 관련된 프롬프트를 입력하면 다섯 가지 컬러를 생성해 주고, 생성된 컬러를 랜딩 페이지, 모바일 앱, 대시보드, 포트폴리오 등 네 가지 화면에서 확인할 수 있는 서비스입니다.

회원가입을 하면 원하는 문장을
저장 할 수 있어요!

다음

회원가입을 하면
성장에 도움이 되는 콘텐츠를
스크랩할 수 있어요!

확인

디자인

프롬프트 한 줄로 다섯 가지 컬러 만드는 ‘AI Colors’

챗GPT의 등장으로 서비스는 물론 업무 과정에도 많은 영향을 끼치고 있는데요. 특히 AI에게 정확한 명령을 내려 높은 품질의 결과를 얻기 위한 ‘프롬프트’가 핵심으로 떠오르고 있습니다. 오늘 소개할 ‘AI Colors’도 프롬프트와 깊은 연관이 있습니다. 컬러 구성과 관련된 프롬프트를 입력하면 다섯 가지 컬러를 생성해 주고, 생성된 컬러를 랜딩 페이지, 모바일 앱, 대시보드, 포트폴리오 등 네 가지 화면에서 확인할 수 있는 서비스입니다.

 

텍스트 입력으로 원하는 컬러 구성

컬러는 서비스나 문서 등을 구성할 때 신경 써야 하는 중요한 요소입니다. 저 역시 컬러 생성에 도움이 되는 여러 서비스를 즐겨찾기 해두고, 그중 몇 개의 서비스는 요즘IT를 통해 소개한 적도 있는데요. 

 

오늘 소개할 ‘AI Colors’는 이전에 소개한 서비스들과 다른 점이 있습니다. 보통의 컬러 생성 서비스는 이미 만들어진 컬러 구성을 참고해 편집하거나, 일정 개수를 기준으로 원하는 조합을 빠르게 찾을 수 있도록 도와줍니다. 하지만 AI Colors는 어떤 화면에 들어가도 상단에 프롬프트를 입력하는 공간이 있고, 이곳에 원하는 컬러를 입력하는 것만으로 색 조합을 만들 수 있습니다.

 

aicolors
<출처: aicolors>

 

먼저 ‘AI Colors’의 기본 화면 구성입니다. 왼쪽으로 주요 메뉴들이 자리 잡고 있으며, 오른쪽으로는 프롬프트를 입력할 수 있는 공간이 있습니다. 기존에 생성된 컬러 중 하나를 선택하거나, 프롬프트를 통해 만들어진 컬러를 대시보드 샘플 화면에 맞춰 확인할 수 있습니다. 

 

aicolors
<출처: aicolors>

 

가장 상단에 있는 메뉴는 ‘Top’으로 사용자들이 프롬프트로 생성한 컬러를 저장 수에 따라 리스트로 볼 수 있습니다. 재밌는 점은 ‘hacker news, ‘tiktok’과 같은 컬러 조합의 이름도 함께 확인할 수 있는데요. 컬러에 따라 어울리는 컨셉을 함께 떠올릴 수 있어 좋습니다.

 

aicolors
aicolors
<출처: aicolors>

 

두 번째 메뉴는 ‘New’입니다. 첫 번째 메뉴와 같이 컬러 구성을 이름과 함께 확인할 수 있다는 점에서는 동일하지만, 최근에 만들어진 순서에 따라 리스트를 구성하고 있습니다. 프롬프트를 통해 컬러를 확인할 수 있다는 점이 ‘AI Colors’의 특징인데, 맨 처음 어떤 내용을 입력할지 고민하는 경우도 많을 것입니다. 그래서 저는 리스트를 통해 다른 사용자들이 어떤 텍스트를 활용하고 있는지 참고했습니다. 

 

크게 두 가지로 나뉘는데, 하나는 서비스 이름 등을 직접 입력해 어떤 컬러를 쓰고 있는지 확인하는 방법이며, 또 하나는 ‘kelly green primary’와 같이 컬러 이름이나 구성 방법을 입력해 정보를 획득하는 방법입니다.

 

aicolors
<출처: aicolors>

 

위 두 가지 방법을 실제로 프롬프트로 입력해 확인해 봤습니다. 먼저 특정 서비스에 쓰인 컬러를 확인하는 방법입니다. ‘에어비앤비 컬러’라는 내용으로 입력하니 관련된 컬러를 바로 확인할 수 있었습니다. 물론 화면 구성은 다르지만 앞서 확인한 것처럼 네 가지 화면 컨셉에 따라 컬러를 확인할 수 있어 강조할 컬러와 함께 사용하면 좋은 컬러는 무엇인지 쉽게 확인할 수 있습니다.

 

aicolors
<출처: aicolors>

 

이번에는 직접적으로 제가 원하는 컬러 구성을 입력했습니다. ‘white with orangered’라는 내용을 입력하니 흰색 배경에 오렌지 레드를 주요 컬러로 적용한 모습을 확인할 수 있습니다. 두 가지 방법을 적절하게 활용하면 컬러에 대한 리서치는 물론이고, 이를 바탕으로 조건에 맞는 컬러를 빠르게 찾을 수 있다는 장점이 있습니다.

 

aicolors
<출처: aicolors>

 

이렇게 입력한 프롬프트에 따라 적용된 ‘컬러’는 네 가지 화면 구성에 따라 확인할 수 있습니다. 위 이미지는 ‘모바일 앱'의 기본 화면에 따라 선택한 색을 확인하는 모습인데요. 여러 개의 색을 메인 컬러와 함께 어떻게 활용하면 좋을지에 참고할 수 있습니다. 또한 화면에 쓰인 컬러는 하단에서 팔레트 형태로 확인할 수 있으며, 내보내기 기능을 활용해 전체 컬러 값을 복사할 수 있습니다. 물론 개별 컬러에 따른 컬러 값을 확인할 수도 있고요.

 

aicolors
<출처: aicolors>

 

이번에는 ‘랜딩 페이지'에 맞춰 컬러를 확인한 모습입니다. 같은 컬러를 선택해도 각 화면의 성격에 따라, 어떻게 적용되는지 클릭 한 번으로 확인할 수 있어 편리합니다. 또한 프롬프트를 통해 적용한 컬러 중 하나를 선택해 원하는 컬러로 변경해, 바로 확인할 수 있는 점도 유용합니다. 여러 개로 구성된 컬러를 전체 변경하지 않아도 되기 때문입니다. 

 

aicolors
<출처: aicolors>

 

히스토리 메뉴에서는 우리가 지금까지 프롬프트에 입력, 확인한 컬러 조합을 언제든 다시 확인할 수 있습니다. 덕분에 프롬프트를 활용해 원하는 컬러를 마음껏 비교할 수 있습니다.

 

 

한 번은 꼭 써봐야 하는 이유

aicolors
<출처: aicolors>

 

AI Colors의 가장 큰 장점은 ‘원하는' 컬러를 찾는데 최적화된 환경을 제공한다는 점입니다. 원하는 컬러 구성을 텍스트로 직접 입력할 수 있고, 응답속도도 빨라 컬러 값을 하나씩 입력해 여러 개의 색을 조합하는 것보다 훨씬 편리합니다. 여기에 기존 컬러 관련 서비스에서 경험했던 색 조합도 당연히 가능하고요. 서비스의 색을 구성할 때 출발점으로 활용하기 좋으며, 랜딩 화면이나 모바일앱, 대시보드 등 주요 화면에 컬러를 적용해 볼 수 있습니다. 무엇보다 로그인이나 유료 구매 없이 바로 사용할 수 있으니 접근성 면에서도 훌륭합니다.

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

좋아요

댓글

공유

공유

댓글 0

지금 써보러 갑니다

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

일반 공개된 AI 디자인 툴 '마이크로소프트 디자이너' 리뷰

디자인

몇 초 만에 다양한 UI 구성하는 ‘Shaper’

디자인

태그 기반 북마크 관리 서비스 ‘Bookmarkify’

프로덕트

실제 화면에서 피드백 주고받는 ‘ruttl’

디자인

모바일 앱 누구나 쉽게 디자인할 수 있는 ‘Aaply’

디자인

웹에서 바로 편집하는 무료 이미지 에디터 ‘Edit.photo’

디자인

한글 폰트도 쉽게 적용할 수 있는 폰트 프로토타이핑 툴 ‘TypeTrials’

디자인

"겨울은 무슨 색?" 단어 검색하면 컬러값 추천하는 Picular

디자인

브랜드 로고 1,000개 레퍼런스 창고 'LOGGGOS'

디자인

차트 생성 및 디자인 툴을 무료로 제공하는 ‘MagicPattern’

디자인

디자인 영감을 직관적으로 수집할 수 있는 'SAVEE'

디자인

캡처와 동시에 이미지를 편집할 수 있는 ‘Xnapper’

디자인

몇 번의 클릭으로 디자인 패턴을 만드는 ‘more.graphics’

디자인

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

이 글을 본 사람들이 함께 스크랩한 콘텐츠를 권해드려요.

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

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

좋아요

댓글

스크랩

공유

공유

지금 회원가입하고,
요즘IT가 PICK한 뉴스레터를 받아보세요!

회원가입하기
지금 회원가입하고,
요즘IT가 PICK한 뉴스레터를 받아보세요!
회원가입하고, 뉴스레터를 받아보세요!
회원가입하기