콜투액션(CTA)을 위한 버튼, 이렇게 디자인해보는건 어떨까? ‘GRADIENT-BUTTONS’
웹사이트 배경을 구성하는 방법에는 여러가지가 있겠지만, 그라데이션을 활용한 방법은 그 중에서도 꾸준히 사랑받는 방법 중 하나가 아닐까 싶습니다. 하나의 컬러를 활용했을 때의 단조로움을 벗어날 수 있으며 이를 통해 웹사이트에서 전하고자 하는 메시지를 더 구체적으로 내보낼 수 있기 때문입니다.
#Instagram branding guidelines
최근에는 그라데이션을 웹상에서 쉽게 구성할 수 있는 툴들이 많이 나와있기에, 더 쉽게 적용이 가능한데요! 그래서 오늘은 웹상에서 원하는 컬러 및 구성에 따라 그라데이션 값을 만들고 CSS 형태로 복사해 바로 활용할 수 있도록 도와주는 서비스를 소개드리려고 합니다.
‘CSS Gradient’는 쉽게 사용 가능하지만 투자한 시간 대비 좋은 결과물을 얻을 수 있는 대표적인 서비스인데요! 이곳에서는 크게 두 가지 형태의 그라데이션을 구성해볼 수 있습니다. ‘Linear’, ‘Radial’ 두 가지죠. 이 중 하나를 선택한 후 세가지 컬러를 선택해 구성을 바로 시작해볼 수 있습니다.
선택한 컬러에 따라 달라지는 구성은 바로 확인이 가능하며, 원하는 컬러의 위치, 컬러값 수정, 이미지 업로드 등 UI가 상당히 직관적으로 구성되어 있어 처음이라 하더라도 별 어려움 없이 사용이 가능했습니다.
앞서 언급했던 것처럼 CSS 값으로 내용을 복사해 실제 웹상에서 바로 테스트, 적용을 해볼 수 있습니다.
또 하나 이곳이 매력적으로 다가온 이유는 대표 사례, 형태에 따른 가이드 등 직접 제작한 콘텐츠를 제공하고 있다는 점인데요! 이미지를 활용하는 경우, 텍스트를 활용하는 경우 등 초보자는 물론 그라데이션을 활용하기 위해 이곳을 찾은 사람들에게 유용한 자료들이 잘 정리되어 있었습니다.
위의 이미지는 ‘CSS-Gradient’에서 제공하고 있는 사례 중 하나로, 저 역시 사례들의 도움을 많이 받을 수 있었습니다.
별도의 툴을 사용하지 않고도, 원하는 형태에 따른 그라데이션을 구성하고 바로 활용해볼 수 있는 ‘CSS-Gradient’.자세한 내용을 이 곳을 참고해주세요!
한성규님의 ‘지금 써보러 갑니다‘에 게재된 글을 모비인사이드가 한번 더 소개합니다.
