작년 5월, CTA(Call To Action)을 유도할 수 있는 버튼 디자인에 필수라 할 수 있는 ‘Gradient Buttons‘를 소개드린 적 있는데요! 다양한 종류의 버튼 디자인을 큐레이션 해주고 있으며, 마음에 드는 컬러는 CSS 코드를 활용해 바로 적용해볼 수 있다는 점이 매력적인 서비스였습니다. 자칫 단조롭게 느껴질 수 있는 컬러에 ‘그라데이션’을 입히면 조금더 눈에 띄는 모습이 될 수 있는데요! 오늘은 버튼 디자인 뿐만아니라 서비스 여러 곳에 적용 가능한 ‘그라데이션’을 소개해주는 서비스를 소개드리려고 합니다. (뒤이어 컬러 관련 서비스도 소개할 예정이니 끝까지 확인해주세요!)

그 흔한 스크롤 조차 없는 이 곳은 ‘Gradients Cssgears‘입니다. 웹개발자인 ‘Solaiman Kmail‘이 제작한 웹서비스로 22개의 ‘그라데이션’이 등록되어 있습니다. 디자인 작업 시 자주 활용하는 대표 컬러를 바탕으로 이뤄져있으며, 각각의 그라데이션은 간략하게 값을 조정해 확인해볼 수 있습니다.

위의 이미지가 조금씩 값을 수정해 변경해본 내용인데요. 마음에 드는 모습이 나왔다면, 그라데이션을 구성하는 각각의 컬러값을 복사해 활용할 수 있습니다. 앞서 말씀드렸던 것처럼 그라데이션은 하나의 컬러로 이루어지지 않은만큼 아무런 정보 없이 구성하기가 조금 어려울 수 있는데요! 이처럼 기본 그라데이션을 제공해준다면 원하는 디자인 컬러에 맞춰 더 쉽고 빠르게 구성해볼 수 있지 않을까 싶습니다. ‘Gradients Cssgears’에 대한 자세한 내용은 이 곳을 통해 확인해보세요!

지금 써보러 갑니다를 오래 구독하신 분들이라면, 디자인 관련 서비스 중에서도 UX와 컬러에 대한 비중이 높다는 것을 이미 알고 계실 것 같습니다 🙂 작년 하반기에는 조금 뜸했었는데, 오늘은 오랜만에 ‘컬러’관련 디자인 서비스를 하나 추가로 소개드리려고 하는데요! Dribbble‘에서 인기 있는 디자인 작업물에 쓰인 컬러 조합들을 보기 쉽게 정리해주는 ‘Colorbook’입니다. ‘Colorbook’에서는 두 가지 방법으로 컬러 정보를 확인할 수 있는데요. 

하나는 날짜별로 디자이너들이 사용한 컬러 정보를 보는 방법이며, 또 하나는 인기도에 따라 정보를 확인하는 방법입니다. 리스트를 살펴보면 디자인 작업물, 디자이너에 대한 정보를 먼저 확인할 수 있고(클릭 시 페이지 이동 가능) 우측으로는 해당 작업에 활용된 컬러 정보를 볼 수 있습니다.

특정 컬러에 마우스를 가져가면, 위와 같이 코드값을 확인할 수 있죠. 인기 있는 디자이너들이 어떤 컬러를 활용해 작업을 했는지에 대해 쉽게 확인할 수 있다는 점이 ‘Colorbook’의 가장 큰 매력입니다. 매일 업데이트 된다는 점도 마찬가지! 전 세계 디자이너들이 주로 활용하는 컬러 정보는 이 곳에서 조금더 자세히 확인해보실 수 있습니다.

아이콘, 스플래시, 온보딩, 로그인과 회원가입, 프로필과 검색 화면까지! 이제 곧(10월 22일 오전) ‘통계 기능’ 이 발행 될 예정이에요. 아직 구독하지 않으셨다면! 구독 후, 서비스 구성 요소에 대한 다양한 사례와 에디터들의 생각을 확인해보세요! (구독하기)