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

디자인

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

컬러는 디자인을 구성하는 가장 중요한 요소 중 하나입니다. 사용한 컬러에 따라 서비스 분위기가 전혀 달라질 수 있기 때문입니다. 중요한 건, 메인 컬러로 사용될 색과 어울리는 조합을 찾는 것입니다. 이 과정은 몇 번의 경험이 쌓여도 여전히 어렵게 느껴집니다. 오늘은 메인으로 사용되는 컬러를 중심으로 상황에 따라 6가지 조합을 쉽게 생성할 수 있는 서비스 ‘Atmos’를 소개하고자 합니다.

 

서비스 기본 구성

Atmos 회원가입

 

‘Atmos’는 기본적으로 회원 가입 및 로그인을 해야 사용할 수 있습니다. 무료로 사용 가능하며, 소셜 로그인을 지원해 회원가입 과정이 까다롭게 느껴지진 않습니다. 가입 후, 사용법 확인과 동시에 개인 프로젝트 리스트로 이동하게 되는데요. 이 공간에서 이제 ‘컬러 찾기'를 시작할 수 있습니다. 각 프로젝트는 하나의 컬러 조합을 뜻하며, 각 프로젝트는 사용자가 원하는 조합에 따라 구분할 수 있어 유용하게 사용할 수 있습니다.

 

Atmos 컬러 찾기

 

컬러 찾기를 선택하면 편집 화면으로 이동하는데, 편집 시 필요한 기본 기능을 먼저 살펴보겠습니다. 컬러는 사용자에게 다양한 피드백을 제공할 때, 기본 정보를 제공할 때 등 상황별로 총 6가지를 제공하고 있습니다. 원하는 조건에 따라 자동 생성이 가능합니다.

 

스페이스 바 버튼이나 생성 버튼을 클릭하면 6개 컬러가 자동으로 변경되는데, 변경 조건을 사용자가 원하는 것으로 채울 수 있습니다. ① 랜덤 선택 시 별다른 조건 없이 컬러를 생성할 수 있습니다. ② Meaning을 선택하면 감정과 서비스 ‘분야'를 선택해 컬러를 생성할 수 있습니다. ③ Color Family를 선택하면 특정 컬러를 중심으로 연관 색을 생성할 수 있습니다. 조건은 하나의 필터처럼 적용되며 동시 적용은 불가능합니다.

 

④ 생성한 컬러는 총 6개로 확인할 수 있으며, 메인 컬러를 가장 크게 볼 수 있습니다. ⑤ 나머지 5가지 컬러는 메인 컬러 왼쪽에서 동일한 크기로 확인할 수 있습니다. 컬러 코드와 함께 어떤 역할을 하는지에 대한 정보를 알 수 있습니다. 이 정보가 중요한 이유는, 우리가 컬러 조합을 찾는 과정에서 각각의 컬러를 나의 팔레트에 추가하거나, 갱신하는 과정에서 ‘잠금' 상태로 변경할 수 있기 때문입니다.

 

감정 산업 분야

 

Meaning과 Color Family 메뉴를 조금 더 자세히 살펴보겠습니다. 먼저 Meaning은 ‘감정'과 ‘산업 분야'로 나뉘며 각각을 드롭다운, 리스트를 통해 확인 및 선택할 수 있습니다. 각 키워드를 대표하는 컬러를 리스트 내 함께 확인할 수 있어 상대적으로 쉽게 선택할 수 있습니다. 특정 서비스를 위한 컬러 조합을 찾는 상황이라면 우리 서비스가 속한 산업을 선택해 어울리는 대상을 찾을 수 있습니다. 같은 방법으로 서비스를 사용하는 사용자의 ‘감정 상태(예를 들면 명상 서비스는 차분한 조합이 더 적합한 것처럼)’를 출발점 삼아 컬러 조합을 찾는 것도 가능합니다.

 

Color Family는 감정 상태나 서비스 산업 분야와 별개로 특정 컬러를 선택해 시작하는 방법입니다. 레드, 오렌지, 블루, 바이올렛, 옐로 등 제공되는 컬러 중 하나를 선택할 수 있습니다. 특정 컬러 군으로 시작해 어울리는 조합을 찾고자 할 때 적합한 방법이라고 할 수 있습니다.

 

컬러 생성

 

조건을 선택했다면, 이제 색을 생성할 차례입니다. 그전에 ‘Atmos’가 매력적인 이유를 하나 더 살펴보고자 합니다. ① 바로 ‘Color vision simulator’ 기능입니다. 이는 저시력, 색맹 등 유저의 입장에서 살펴볼 수 있는 기능으로 한 가지 상황이 아니라 제공되는 색맹 유형을 선택해 컬러를 볼 수 있습니다. 접근성의 관점에서 함께 활용하기 좋은 기능이라고 생각합니다.

 

컬러 찾기 세부 기능

 

앞서 원하는 컬러를 찾는 과정에서 각 컬러에 따른 세부 기능을 활용할 수 있다는 내용을 말씀드렸습니다. 조건에 따라 컬러를 생성, 각 컬러 위로 마우스를 가져다 대면 플러스, 잠금, 설정, 휴지통 버튼을 확인할 수 있습니다. ① 플러스 버튼은 해당 컬러를 내 팔레트에 추가하는 역할을 합니다. ② 잠금 버튼은, 해당 컬러를 잠금 상태로 유지 나머지 컬러만 계속 갱신하도록 하는 역할을 합니다. ③ 설정 버튼은, 해당 컬러의 밝기, 채도 등을 변경할 수 있도록 도와줍니다. ④ 마지막으로 휴지통 버튼은, 해당 컬러를 더 이상 보지 않게 하는 역할을 합니다.

 

원하는 컬러 찾기

 

네 가지 기능은 원하는 컬러를 찾는 과정에서 핵심적인 역할을 하게 되는데, 보통 6가지 컬러를 한 번에 팔레트에 저장하는 일이 흔하지 않기 때문입니다. 보통 메인 컬러를 하나 찾았다면 잠금 상태로 두고, 나머지 5가지 컬러를 계속 갱신하거나, 나의 팔레트에 추가하는 방법을 거치기 때문에 이를 고려한 방법이라고 예상됩니다. 위 이미지를 보면 2가지 컬러를 잠근 상태로 다른 컬러를 갱신하는 모습을 확인할 수 있습니다.

 

팔레트 컬러 추가

 

내 팔레트는 화면 가장 왼쪽에 자리 잡고 있습니다. 팔레트에 추가한 컬러 역시 수정할 수 있는데, 컬러 이름을 지정하거나 컬러 값을 변경하거나, 최초 값으로 되돌리는 기능 등을 포함하고 있습니다. 개인적으로 팔레트에 추가한 후에도 컬러 밝기 등을 조절할 수 있었으면 하는 아쉬움은 있습니다. 팔레트에 담은 후에도 조금씩 각 컬러에 맞게 변경할 가능성이 존재하기 때문입니다.

 

팔레트 컬러 역할

 

팔레트에 담은 컬러는 ‘역할'에 따른 정보를 확인할 수 있습니다. Info, Danger, Success, Primary 등 어떤 역할을 하는지 알 수 있어 팔레트에 담긴 컬러 간 구분을 명확하게 할 수 있습니다. 팔레트 아래 ‘패밀리 컬러 추가' 버튼을 클릭하면, 컬러 값을 기준으로 원하는 색을 직접 추가할 수 있습니다. 이미 정해진 몇 가지 컬러가 있다면 직접 추가해 팔레트를 완성하는 과정으로 활용할 수 있다는 장점이 있습니다.

 

팔레트 컬러 편집

 

앞서 제가, 팔레트 내 편집 기능이 강화되었으면 좋겠다는 말을 남겼습니다. 이런 아쉬움을 팔레트에 담긴 컬러를 한눈에 보기 좋게 편집할 수 있는 기능을 별도로 제공합니다. ‘Atmos’를 제가 추천하며, 계속 써야겠다는 생각을 하게 해 준 기능이기도 합니다. 함께 쓰고 싶어 선택한 여러 컬러를 하나씩 수정하다 보면 미세하게 다른 지점이 발생하게 됩니다. 이런 불편을 줄이기 위해 ① 밝기 ② 채도 ③ 색조 등을 다른 컬러와 비교하며 수정할 수 있습니다.

 

완성된 컬러 조합

 

완성된 컬러 조합은 SVG, CSS, JavaScript 등으로 확인 후 내려받을 수 있습니다. CSS, JavaScript 등은 클립보드에 복사하는 기능을 지원해 별다른 저장 과정 없이 프로젝트에 바로 적용할 수 있습니다.

 

 

어떻게 활용하면 좋을까?

‘Atmos’의 가장 큰 장점은, 다양한 ‘출발점’과 ‘기준'을 제공한다는 점입니다. 산업 분야, 감정 상태, 특정 컬러를 중심으로 조합을 찾을 수 있기에 저처럼 컬러에 대한 ‘개념’이 잘 잡히지 않아 고생하던 분들에게 큰 도움이 될 수 있을 거라 생각합니다. 또 메인 등의 구분 없이 컬러 6개를 제공하는 것이 아니라, 역할에 따른 컬러를 찾아보고 저장할 수 있다는 점도 좋습니다. 서비스의 특정 영역과 역할에 따라 어울리는 조합을 ‘빠르게' 찾는 과정에 큰 도움이 되기 때문입니다. 앞으로 Atmos를 통해 조금이나마 서비스에 어울리는 컬러를 쉽게 찾을 수 있기를 바랍니다.

 

<참고자료>

Atmos

 

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

댓글 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’

디자인

웹 페이지 구성 도우미 ‘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 이야기를 전달해드려요.

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