그라데이션(그레이디언트) 자체는 우리에게 더 이상 낯선 개념이 아니지만, 서비스 단위에서 사용하기에는 쉽지 않은데요. 평면적인 하나 이상의 컬러를 우선순위 또는 화면이나 버튼 등의 성격에 따라 다르게 사용하는 개념과 달리 ‘조합’에 대해 더 깊게 생각하고 고민해야 하기 때문입니다. 그래서 직접 생성하기 보다 이미 만들어져 있거나 디자이너들이 자주 활용하는 조합을 미리 확인하는 것이 도움이 됩니다.

1.Mesh-Gradients

오늘 간략히 소개하고자 하는 서비스는 웹상에서 100여가지의 그라데이션 컬렉션을 확인, 개별로 다운로드 하거나 전체를 다운로드 받아 활용 할 수 있는 ‘Mesh-Gradients’입니다. (게다가 무료!)

원 페이지로 구성된 공간에서 각 컬러 구성과 이름 (예를 들면 Egg Sour, Snowy Mint 등)을 큼직하게 확인 할 수 있는데요. 조합에 어떤 컬러가 사용 되었는지 이름과 함께 확인 할 수 있으며, 개별 그라데이션을 Jpg 포맷으로 다운로드 받아 활용 할 수 있습니다.

100여개를 하나씩 살펴봤는데, 매력적인 조합이 많아 제 기준에서는 이 외의 조합을 더 생각 할 수 있을까? 라는 생각도 들었는데요. 이메일 주소를 입력하면 100여개를 Ai 또는 eps, jpg, png로 다운로드 받을 수 있으니 활용도가 더 높게 느껴졌습니다. (다운로드는 이 곳에서 가능해요!)

2.Webgradients

이 곳 역시 다양한 그라데이션을 기본적으로 확인 할 수 있는데요. 180여개의 그라데이션을 이름, 실제 구성 모습, 컬러 코드 등에 따라 볼 수 있습니다.

조금 다른 점이 있다면 CSS 코드를 바로 복사할 수 있다는 점, 그리고 스케치와 포토샵에서 사용 가능한 포맷으로 다운로드 받을 수 있다는 점입니다. (무료라는 점은 동일!)

두 서비스를 통해 280여개의 그라데이션 구성 확인이 가능하니! 당분간은 이 서비스들을 확인, 다운로드 받아 활용하는 것만으로도 충분히 여러 목적에 따라 이용이 가능하지 않을까 싶네요. (180여개 그라데이션 확인 하기)

그라데이션 관련 서비스 더 보기!

지금 써보러 갑니다 뉴스레터 00:00 구독 안내

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