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

디자인

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

 

서비스를 운영하면서 우리가 특정한 몇 개의 컬러와 잘 어울리는 색을 찾는 건 어려운 일입니다. 그나마 서비스 주요 컬러가 정해졌으면, 해당 컬러를 바탕으로 하나씩 조합해 어울리는 대상을 찾을 수 있습니다. 하지만 아무것도 정해지지 않은 상황이라면 과정이 더 까다롭게 느껴집니다.

 

저는 이럴 때 주로 컬러 조합을 쉽게 생성할 수 있는 서비스를 활용하고 있는데, 오늘 살펴볼 ‘Reverb’ 서비스도 앞선 어려움을 조금이나마 줄여주는 컬러 조합 서비스입니다. ‘Reverb’가 매력적인 이유는, 컬러는 물론 그라데이션 생성에도 도움을 받을 수 있으며 이미지를 통한 컬러 추출과 특정 컬러를 검색한 뒤 어울리는 색을 찾을 수 있는 환경을 제공하기 때문입니다. 이번 글에서 자세한 기능을 알아보겠습니다.

 

다섯 가지 컬러로 원하는 조합을 쉽게 생성하는 서비스

컬러 Reverb
<출처: Reverb 홈페이지>

 

컬러 조합 서비스 ‘Reverb’의 첫 화면입니다. 첫 화면은 ‘컬러 조합'에 초점이 맞춰져 있으며 왼쪽에는 다섯 가지 컬러 모습과 간략한 정보를, 오른쪽에서는 그라데이션 생성 버튼 및 우리가 저장한 컬러를 개별 또는 묶음 단위로 확인할 수 있습니다. 스플릿 UI를 차용하고 있어, 한쪽에서는 계속해서 컬러를 탐색하고 다른 한쪽에서는 저장한 컬러를 확인할 수 있습니다. 보통 이 둘을 분리하는 경우가 많기에 개인적으로 더 편리하게 느껴졌습니다.

 

컬러 조합
<출처: Reverb 홈페이지>

 

컬러 탐색은 스페이스바를 통해 가능합니다. 스페이스바 버튼을 누르면 다섯 가지 컬러가 랜덤하게 생성되는 모습을 확인할 수 있습니다. 이 과정은 원하거나 아직 정해지지 않은 컬러가 없는 경우에 유용하게 사용할 수 있으며, 다양한 조합의 컬러 조합을 참고하는 데 도움이 됩니다. 다섯 가지 컬러를 직접 하나씩 찾아보는 건 생각보다 꽤 많은 시간이 소요되기 때문입니다.

 

컬러 탐색
<출처: Reverb 홈페이지>

 

탐색 과정에서 우리가 사용할 수 있는 도구가 여럿 존재합니다. 먼저, 다섯 가지 컬러 조합을 기준으로 ① 전체 컬러를 저장하거나, 컬러 톤을 직접 변경할 수 있습니다. 또 현재 보고 있는 컬러 중 일부가 인터페이스에 적용되면 어떤 모습인지 확인할 기회도 제공합니다. 접근성에 대한 고려를 할 수 있도록 컬러를 각 접근성 조건에 따라 변경할 수 있는 기능도 있습니다. 기본 다섯 가지로 제공되는 컬러에 개별 컬러를 추가할 수도 있습니다.

 

② 개별 컬러를 기준으로 한 도구도 제공합니다. 개별 컬러를 저장할 수 있고, 컬러값을 복사할 수 있으며 탐색 과정에서 특정 컬러를 잠금 상태로 유지하는 기능도 있습니다. 다섯 가지 중 하나의 컬러를 선택해 잠그면, 스페이스바를 통한 추가 탐색 시 네 가지 컬러만 변경되는 방법입니다. 또 선택한 컬러와 유사한 톤의 색을 확인할 수 있으며 컬러에 대한 상세 정보도 제공하는 모습입니다.

 

컬러 상세 정보
<출처: Reverb 홈페이지>

 

다섯 가지 컬러를 기준으로 랜덤하게 조합을 확인하다 보면, 하나씩 마음에 드는 컬러가 생깁니다. 이때 앞서 살펴본 도구 중 ‘좋아요(저장하기)’를 적극 활용할 수 있습니다. 팔레트 저장하기는 전체 컬러를 저장하는 기능이며, 컬러 저장하기는 개별 컬러를 저장하는 데 사용하게 됩니다. 여러 도구 중, 컬러 조합을 찾아가는 과정에서 가장 많이 사용하게 되는 기능이기도 합니다. ‘좋아요’와 ‘잠금’을 적절히 활용하면 탐색 과정을 더 빠르게 완료하는 데 도움이 됩니다.

 

컬러 저장하기
<출처: Reverb 홈페이지>

 

저장한 컬러는 오른쪽 화면을 통해 별도로 확인할 수 있습니다. 다만, 무료 버전에서는 온라인 상에 저장하는 것이 불가능합니다. 그래서 무료 버전을 통해 컬러 탐색 및 생성 과정을 한 번 거친 뒤 필요할 경우 유료(프리미엄) 버전 사용을 고려해보시는 것이 좋습니다. 물론 무료 버전으로도 컬러 및 그라데이션 생성과 확인에는 큰 무리가 없습니다.

 

컬러 기본 탐색
<출처: Reverb 홈페이지>

 

컬러 조합(팔레트) 단위로 컬러 분위기를 변경할 수 있습니다. 기본 탐색은 스페이스바를 통한 전체 변경이지만 다크/라이트 모드, 각 컬러 값 범위를 직접 조절해 활용할 수 있습니다. 이 도구는 다섯 가지 컬러를 기준으로 어느 정도 만족스러운 조합을 찾았을 때, 유사톤을 확인하는 데 유용하게 쓰입니다. 무엇보다 다크/라이트 모드가 적용되었을 때의 모습을 미리 볼 수 있는 점이 좋습니다.

 

컬러 분위기 변경
<출처: Reverb 홈페이지>

 

상세한 모습은 아니지만, 기본적인 인터페이스 내 선택한 컬러가 어떤 식으로 적용되는지 살펴보는 기능도 있습니다. 주요 버튼이나, 완료 안내 등의 시각적 요소에 특정 컬러가 적용되면 어떨지 참고하기 좋습니다. 컬러를 선택했다 하더라도, 실제 화면에 적용하면 생각과 다른 모습으로 느껴질 때가 있기 때문입니다.

 

컬러 실제 화면 적용
<출처: Reverb 홈페이지>

 

접근성에 관한 정보 역시 유용합니다. 빨간색, 녹색, 파란색 등 특정 컬러값을 제거해 미리 볼 수 있는 환경을 제공합니다. 접근성 관점에서 컬러는 매우 중요한 역할을 하기에 서비스 성격에 따라 선택한 컬러가 특정 환경에서 어떻게 보이는지 확인할 수 있다는 점에서 자주 쓰는 기능 중 하나입니다. 직접 추가하거나 적용하기에 더 많은 시간을 투입해야 하는 과정을 줄여주는 기능이라고 생각합니다

 

 

한 번은 꼭 써봐야 하는 이유

그라데이션 생성
<출처: Reverb 홈페이지>

 

컬러 구성만큼 쉽지 않은 것이 그라데이션 생성인데, 같은 공간에서 함께 진행할 수 있습니다. 컬러와 같이 스페이스바를 통해 그라데이션을 생성할 수 있으며 적용된 컬러를 변경하거나 접근성 관점에서의 정보 확인도 동일하게 가능합니다. 보통 컬러 조합과 그라데이션은 별개의 서비스로 제공되는 경우가 많았는데, ‘Reeverb’는 이 둘을 한 곳에서 제공하는 점이 가장 큰 매력이라고 생각합니다.

 

이곳을 꾸준히 쓰고 있는 또 하나의 이유는 컬러를 ‘확정'하기 직전 단계에 필요한 대부분의 도구와 기능을 제공하기 때문입니다. 랜덤 컬러를 생성해주는 것에서 끝나지 않고, 조금씩 조건을 바꿔가며 컬러 탐색 및 확인할 수 있는 환경을 계속 제공합니다. 또한 원하는 이미지나 컬러값으로 출발할 수 있는 기능도 꾸준히 쓰게 하는 이유입니다. 컬러를 어떻게 구성해야 할지 잘 모르겠거나 레퍼런스로 찾은 이미지로 컬러를 찾고 싶나요? 몇 가지 후보는 있는데 연관 컬러를 확인하기 어렵나요? 이럴 때 특히 유용하게 사용할 수 있는 서비스라고 생각합니다.

 

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

지금 써보러 갑니다

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

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

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

디자인

구글 폰트보다 더 빠르고 쾌적하게, 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 이야기를 전달해드려요.

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

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

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