콜투액션(CTA)을 위한 버튼, 이렇게 디자인해보는건 어떨까? ‘Gradient-buttons’

 

어떤 버튼이 더 많은 클릭을 유도할 수 있을까?

CTA(Call To Action)이란 랜딩페이지와 웹사이트에 방문한 사람에게 우리가 원하는 반응을 유도하는 장치를 뜻합니다. 예를 들어 쇼핑몰이라면 위와 같이 구매하기를 기본으로 공유, 좋아요, 장바구니 담기 등 특정 행동을 방문자/사용자들이 할 수 있도록 유도하는 것이죠. 아마 모바일 커머스, 쇼핑앱에서 구매하기가 가능한 페이지에서는 해당 버튼이 하단게 고정되어 있는 모습을 자주 보셨을 것 같은데요! 이 역시 중요한 행동을 언제든 이끌어내기 위한 장치 중 하나라고 볼 수 있습니다. 

서비스와 유저 특성에 맞게 콜투액션을 설계하고 지속적인 테스트와 분석을 통해 꾸준히 업데이트를 해야겠지만! 페이지 당 CTA가 많지 않고, 목표가 명확하다면 컬러와 같은 디자인 요소의 변경을 통해서도 전환율을 높일 수 있습니다. 그래서 오늘은 CTA에 활용할 수 있는 다양한 컬러 옵션을 제공해주는 서비스를 소개드리고자 합니다.

 

그라데이션을 활용한 버튼 디자인!

오늘 지금 써보러 갑니다를 통해 소개드릴 서비스는 ‘Gradient-buttons’입니다. 위의 이미지를 통해 대략적으로 파악이 가능한 이 서비스는, 그라데이션을 활용한 버튼을 살펴볼 수 있게끔 도와줍니다. 앞서 말씀드렸던 것처럼 서비스의 특성에 맞는 컬러를 활용해야겠지만, 확실히 단색으로 이뤄진 버튼보다 강조효과가 더 좋은 것 같은데요! ‘Gradient-buttons’에서는 이렇듯 다양한 버튼을 만들어 제공하고 있습니다.

 

마음에 드는 내용이 있다면, 리스트 하단의 ‘Get CSS Code’를 선택해 코드를 바로 복사할 수 있습니다. 현재 300여개가 넘는 내용이 등록되어 있으며 복잡하게 페이지가 얽혀 있지 않아 스크롤을 내리며 손쉽게 확인이 가능했습니다.

 

‘Gradient-buttons’를 서비스 하는 곳은 이미 지금 써보러 갑니다에서 ‘컬러’와 관련된 내용으로 한 번 소개드린 적 있는 ‘Colorion’입니다. 이 곳은 ‘컬러’와 관련된 다양한 콘텐츠를 제공해주고 있는데요. 위와 같이 다섯가지 컬러로 구성된 팔레트를 제공해주는 것으로 시작이 되었습니다. 컬러 팔레트의 경우 공유, 저장 및 색상 코드를 바로 확인해 적용해보는 것이 가능하도록 되어 있죠.

 

뿐만아니라, 머티리얼 디자인에 최적화된 색조합을 제공해주기도 합니다. 머티리얼 디자인의 경우 가장 어려운 것이 컬러 조합이기에, 최적화된 색상의 추천은 정말 반가운 내용이죠!

 

머티리얼 디자인과 더불어 플랫UI(Flat UI)에 최적화된 컬러 조합도 함께 추천해줍니다. 

 

컬러 조합을 제공해주는 서비스들이 최근 눈에 많이 띄고 그 종류 역시 다양해지고 있는데요. Gradient-buttons을 포함하여 디자인의 성격에 따른 색다르고 매력적인 컬러 조합을 제공해주는 ‘Colorion’이 개인적으로는 가장 자주 찾는 곳이 되지 않을까 싶습니다. 시간이 없는 경우에는 별도의 페이지로 제공되고 있는 인기 컬러 조합만 봐도 많은 도움이 되기에 더더욱요 🙂 컬러와 관련된 더 많은 내용이 궁금하시다면, 그간 소개한 서비스는 물론 유용한 팁이 함께 정리되어 있는 이 곳(컬러에 대한 모든 것) 확인해보세요!

 

댓글 남기기