brunch

버튼으로 유저 플러팅하기

사용자들의 클릭을 유도하기 위한 매력적인 '버튼' 만들기

by Wayne

오늘은 PM이라면 한 번쯤 고민했을 ‘버튼’에 대해 이야기해 보려 합니다. 사용자에게는 단순한 클릭 한 번이지만, 그 뒤에는 치열한 기획 과정이 숨어 있습니다.


어떻게 하면 사용자의 마음을 사로잡아 클릭까지 유도할 수 있을까요? 제가 생각하는 3가지 핵심 전략을 공유해 드립니다.



1. ‘클릭’의 이유를 제시하는 문구, 가치를 담아라

버튼의 문구는 단순한 행동 명령을 넘어, 사용자가 버튼을 눌렀을 때 얻게 될 가치를 명확히 제시해야 합니다. '회원가입'이라는 단어는 더 이상 매력적이지 않습니다. 대신, 사용자에게 어떤 이득이 있는지 구체적으로 알려주는 것이 중요합니다.


모바일유아이.png

예를 들어, 스포티파이의 '온보딩' 화면은 '결제'에 대한 사용자의 부담을 '무료 체험'이라는 가치로 바꿔줍니다. 사용자는 비용 부담 없이 서비스를 경험할 수 있다는 점을 강조하며 사용자들의 회원가입 또는 로그인을 유도합니다. 또한, 쿠팡'로켓와우 멤버십 무료 체험'처럼, 가입을 통해 얻을 수 있는 구체적인 혜택(빠른 배송, 추가 할인 등)을 명시하면 클릭을 유도하는 데 훨씬 효과적입니다.




2. ‘클릭’하고 싶게 만드는 시각적 요소, 눈에 띄게 만들어라

버튼은 페이지의 주인공이 되어야 합니다. 아무리 좋은 문구가 있어도 눈에 띄지 않으면 사용자의 클릭을 유도하기 어렵습니다. 시각적 요소를 통해 버튼의 존재감을 높여야 합니다.


넷플릭스.png

가장 중요한 것은 색상 대비입니다. 배경색과 확연히 구분되는 강조색을 사용해 보세요. 넷플릭스'지금 시작하기' 버튼은 검정 배경 위에서 강렬한 빨간색으로 시선을 사로잡습니다. 또한, 버튼에 그림자나 입체감을 주거나, 마우스 커서를 올렸을 때 색상이 변하는 호버(Hover) 효과를 추가하면 사용자는 '이것은 누를 수 있는 버튼이다'라는 명확한 신호를 받게 됩니다. 모바일 환경이라면 엄지손가락으로 쉽게 누를 수 있는 크기(약 44x44px)를 확보하는 것도 중요합니다.




3. ‘클릭’까지 이어지는 최적의 배치, 흐름을 설계하라

버튼은 사용자가 가장 쉽게 발견하고 자연스럽게 누를 수 있는 위치에 있어야 합니다. 아무리 멋진 버튼이라도 사용자가 찾지 못하면 소용이 없겠죠? 사용자의 행동 흐름을 예측하여 버튼을 배치하는 전략이 필요합니다.


사용자가 서비스의 홈페이지에 접속했을 때 가장 먼저 보게 되는 화면을 ‘폴드(Fold)’ 영역이라고 합니다. 이 영역에 회원가입 버튼을 배치하면 사용자는 스크롤을 내리지 않고도 버튼을 발견하고 바로 가입할 수 있습니다. 예를 들어, 에어비앤비홈페이지 하단에 '회원가입'과 '로그인' 버튼을 배치하여 사용자가 언제든 쉽게 계정을 만들거나 로그인할 수 있도록 유도합니다.

프레임투.png

하지만 모든 정보를 첫 화면에 담을 수는 없습니다. 사용자가 서비스에 대해 더 알고 싶어 스크롤을 내렸을 때, 핵심 기능을 설명하는 섹션이 끝나는 지점에 회원가입 버튼을 다시 한 번 배치하는 것도 효과적입니다. 사용자가 서비스를 탐색하며 '이 서비스가 나에게 필요하구나!'라고 생각하는 순간, 즉시 행동으로 이어질 수 있도록 돕는 겁니다.


예를 들어, 클래스101은 '듣고 싶은 클래스 다 들어보세요'와 같이 서비스의 장점을 설명하는 섹션이 끝날 때마다 '바로 시작하기(로그인&회원가입)' 버튼을 반복적으로 노출합니다. 이는 사용자가 서비스의 가치를 충분히 이해한 후 행동으로 옮길 수 있도록 자연스럽게 유도하는 좋은 예시입니다.


keyword
작가의 이전글게임 온보딩 & 튜토리얼 UX