버튼 하나로 몰아주기

한 화면에서 손님에게 시키는 일을 하나로 줄이는 방법이에요. 누를 곳이 다섯 개면 손님은 고민하다 아무것도 안 누르고 나가요.

쉽게 말하면

가게 문에 안내문이 다섯 장 붙어 있어요. "전화 주세요", "카톡 주세요", "인스타 보세요", "전단지 가져가세요", "2층도 구경하세요". 손님은 다 읽고 아무것도 안 하고 지나가요. 안내문이 한 장이고 "들어오시면 시식 드려요"만 크게 적혀 있으면 문을 엽니다. 화면에서 손님에게 시키는 일이 하나면 그 하나가 눌려요. 버튼을 여럿 놓는 건 친절이 아니라 결정을 손님에게 떠넘기는 거예요.

이 하나뿐인 버튼을 CTA라고 불러요. 영어 call to action, "행동을 부르는 것"을 줄인 말이에요. 랜딩 페이지 한 장에는 CTA가 하나 있는 게 기본이고, 여러 장짜리 사이트라면 화면마다 하나씩 있어요.

버튼 다섯 개
[전화하기] [카톡 문의] [인스타] [카탈로그] [오시는 길]

무엇이 제일 중요한지 손님이 알 수 없어요. 고르는 데 힘이 들면 사람은 고르기를 미뤄요. 미룬 손님은 안 돌아와요.

버튼 하나
[상담 신청하기] 작은 글씨: 전화 상담 02-000-0000

제일 중요한 하나만 버튼이고 나머지는 글자예요. 전화도 여전히 걸 수 있는데, 눈에 먼저 들어오는 건 하나뿐이에요.

버튼이 여러 개면 왜 아무것도 안 눌리나

계산대가 다섯 개 열려 있는데 줄 길이가 다 비슷하면, 손님은 어디가 빠를지 재면서 잠깐 서 있어요. 그 몇 초가 화면에서는 뒤로 가기예요. 선택지가 늘면 고민이 늘고, 고민이 늘면 결정이 미뤄져요.

화면은 종이와 다르게 읽혀요. 손님은 읽지 않고 훑어요. 훑고 나서 머리에 남는 건 문장이 아니라 색이 진한 사각형 하나예요. 사각형이 다섯 개면 하나도 안 남아요.

그리고 버튼마다 손님이 내야 하는 각오가 달라요. "지금 결제하기"는 지갑을 여는 일이고 "상담 신청"은 이름과 번호만 적는 일이에요. 각오가 다른 버튼을 같은 크기로 나란히 놓으면, 손님은 가장 무서운 쪽을 기준으로 화면 전체를 판단해요.

화면하나로 몰아줄 행동나머지는 이렇게
랜딩 페이지상담 신청 또는 구매, 둘 중 하나만전화번호·주소는 버튼이 아니라 아래쪽 글자로
상품 상세장바구니 담기후기·배송 안내는 스크롤 아래 정보로 내려요
예약 화면이 시간으로 예약하기"다른 날짜 보기"는 작은 글씨 링크로
문의 완료 화면다음에 할 일 하나만 제안여기서 링크를 세 개 주면 아무 데도 안 가요
장바구니결제하기쿠폰 입력·계속 쇼핑은 작게, 결제 버튼보다 흐리게

표의 규칙은 하나예요. 버튼을 지우지 않아요, 무게만 뺍니다. 필요한 길은 다 열어 두고, 색이 진한 사각형만 하나로 줄이는 거예요.

눌리는 버튼의 조건 세 가지

  1. 1문구는 손님이 얻는 것으로 적어요. "제출"이 아니라 "상담 신청하기", "확인"이 아니라 "예약 확정하기". 손님은 제출하고 싶은 게 아니라 답을 듣고 싶어요. 문구 쓰는 요령은 손님에게 하는 말 쓰기에 더 있어요.
  2. 2화면에서 색이 가장 진한 사각형은 이 버튼 하나여야 해요. 다른 버튼이 같은 색이면 둘 중 하나는 테두리만 남기고 색을 빼요. 색을 빼도 여전히 눌립니다.
  3. 3첫 화면에서 스크롤 없이 한 번, 긴 페이지면 맨 아래에서 한 번 더 나와요. 이때 문구는 위아래가 똑같아야 해요. 위에서는 "상담 신청", 아래에서는 "문의하기"라고 쓰면 손님은 다른 일인 줄 알아요.

버튼을 늘리지 말고 문턱을 낮추세요

눌릴 확률을 올리는 가장 쉬운 방법은 버튼을 하나 더 만드는 게 아니라, 있는 버튼의 각오를 줄이는 거예요. "지금 결제하기"가 안 눌리면 "15분 상담 먼저 받기"로 바꿔 보세요. 결제는 상담 다음 화면에서 받으면 돼요. 버튼 개수는 그대로인데 눌리는 사람은 늘어요.

이럴 때는 이렇게

"하나로 몰아주기"는 원칙이고, 현실에는 버튼을 못 줄이는 사정이 있어요. 그럴 때 쓰는 우회로가 있어요.

사정버튼을 늘리는 대신
손님 종류가 정말 둘이다 (개인 / 사업자)버튼을 둘로 나누지 말고 화면을 둘로 나눠요. 링크를 두 개 만들어 광고에서 갈라 보내고, 각 화면에는 버튼 하나만 둡니다
전화 문의가 매출의 절반이다전화는 본문 버튼이 아니라 화면 맨 위 띠에 번호를 크게 붙여요. 휴대폰에서는 눌러서 바로 걸리게요. 본문 버튼은 하나로 유지
비싼 상품이라 첫 방문에 안 산다버튼 하나를 "구매"에서 "견적 받기"로 바꿔요. 구매 버튼은 견적을 보낸 다음 화면에 나옵니다
체험과 정기결제를 같이 팔고 싶다화면에는 체험 버튼 하나만. 결제 안내는 체험 안에서 해요. 두 개를 나란히 두면 손님은 비싼 쪽을 기준으로 겁을 먹어요
버튼이 다섯 개인 화면을 이미 물려받았다바로 지우지 말고 2주 동안 어느 버튼이 눌리는지 세요. 그다음 안 눌리는 것부터 글자로 내려요. 세는 방법은 숫자를 보고 바꾸기에 있어요

돈이 빠져나가는 버튼은 문구가 정확해야 해요

누르면 결제가 일어나는 버튼에 "시작하기"처럼 두루뭉술한 말을 쓰면 안 돼요. 얼마가, 언제, 몇 번 빠져나가는지 버튼 바로 옆에 적어요. 정기결제면 특히요. 잘 눌리게 만드는 것과 손님을 헷갈리게 만드는 것은 다른 일이고, 뒤쪽은 규제 대상이에요. 표현이 걸리는지는 광고 문구 규제 문서를 먼저 보고, 결제 절차와 취소 안내 기준은 공정거래위원회의 전자상거래 안내와 한국소비자원 상담 사례에서 확인하세요. 확실하지 않은 문구는 쓰지 않는 쪽이 늘 싸요.

사장님이 실제로 겪는 장면

장면 1 · 외주 개발자가 화면을 보내왔다

요청하신 기능 버튼 전부 첫 화면에 넣었습니다. 상담·전화·카톡·카탈로그 다 들어갔어요.

기능을 다 넣은 건 잘못이 아니에요. 다 같은 크기로 넣은 게 문제예요. 요청을 이렇게 바꿔 말하면 통해요. "이 화면의 목표는 상담 신청 하나입니다. 나머지는 눌러도 되지만 눈에 먼저 들어오지 않게 해 주세요." 개발하는 사람에게는 이게 "우선순위를 정해 달라"는 말로 들려요. 지우라는 말이 아니라는 게 전달돼야 다시 안 물어봐요.

장면 2 · 방문자는 늘었는데 문의는 그대로다

광고를 늘려서 하루 방문이 30명에서 200명이 됐는데, 문의는 이틀에 한 건 그대로예요.

들어오는 사람은 늘렸는데 계산대가 안 보이는 상태예요. 광고비를 더 쓰기 전에 화면에서 색이 진한 사각형이 몇 개인지 세 보세요. 이건 전환율 문제라서 방문자를 늘려서는 안 고쳐져요. 어느 단계에서 새는지는 깔때기(어디서 새는지) 쪽이 자세해요.

장면 3 · 휴대폰에서만 안 눌린다

제 컴퓨터에서는 버튼이 잘 보이는데, 손님들은 어디서 신청하는지 모르겠다고 해요.

컴퓨터 화면에서는 첫 화면에 버튼이 들어오지만, 휴대폰에서는 큰 사진과 긴 제목에 밀려 저 아래로 내려간 경우예요. 손님 대부분은 휴대폰으로 봐요. 사장님 휴대폰으로 열어서 스크롤을 하지 않은 상태에서 버튼이 보이는지 확인하세요. 안 보이면 사진 높이를 줄이는 게 버튼 색을 바꾸는 것보다 효과가 큽니다. 화면 크기별로 달라지는 원리는 반응형에 있어요.

자주 묻는 것

Q. 버튼을 여러 개 두면 선택권을 주는 거니까 친절한 게 아닌가요?
가게에서는 친절이지만 화면에서는 아니에요. 가게에서는 손님이 물어보면 사장님이 골라 주지만, 화면에는 물어볼 사람이 없어요. 골라 주는 사람이 없을 때 선택지가 많으면 그건 친절이 아니라 숙제예요.
Q. 그럼 전화번호나 카톡은 아예 빼야 하나요?
빼지 마세요. 버튼에서 글자로 내리는 것이 답이에요. 전화 걸 손님은 작은 글씨여도 찾아서 걸어요. 정작 놓치는 쪽은 아직 마음을 못 정한 손님이고, 그 사람들을 위해 버튼 하나를 비워 두는 거예요.
Q. 버튼 문구를 뭐라고 쓸지 감이 안 와요. 정답이 있나요?
정답은 없지만 요령은 있어요. 손님이 누른 직후에 무슨 일이 일어나는지를 그대로 적으면 대개 맞아요. 눌러도 결제가 안 되면 "구매"라고 쓰지 않고, 사람이 연락할 거면 "상담 신청하기"라고 쓰는 거예요. 기대와 다른 일이 일어나면 손님은 그다음 화면에서 나갑니다.
Q. 버튼을 크고 빨갛게 하면 더 눌리나요?
어느 선까지는 그래요. 하지만 화면 전체가 빨간 사각형으로 가득하면 다시 아무것도 안 눌려요. 눌리는 이유는 버튼이 크기 때문이 아니라 주변이 조용하기 때문이에요. 버튼을 키우기 전에 옆에 있는 것들을 흐리게 하는 편이 값이 싸요.
Q. 어느 문구가 더 나은지 어떻게 확인해요?
바꾸기 전 2주와 바꾼 뒤 2주의 신청 건수를 같은 기준으로 비교해요. 요일마다 손님 수가 다르니 짧게 재면 착각합니다. 하루 방문이 수십 명 수준이면 숫자로 우열을 가리기 어려워서, 이럴 때는 손님 다섯 명에게 직접 물어보는 게 더 정확해요.
Q. 이미 산 손님에게 보여주는 화면도 버튼 하나인가요?
네, 원칙은 같고 목표만 달라요. 구매 완료 화면의 목표는 보통 재방문이나 후기예요. 그러면 그 하나만 버튼으로 두세요. 여기서 링크 네 개를 주는 화면이 많은데, 정작 후기가 안 쌓이는 이유가 그것이에요.

헷갈리기 쉬운 것

버튼 하나 = 링크 하나? 아니에요. 화면 안에 링크는 여러 개 있어도 돼요. 하나로 몰아주는 대상은 눈에 가장 먼저 들어오는 무게예요. 메뉴·연락처·안내는 그대로 두고 강조만 하나로 줄입니다.

비유는 여기까지 맞아요. 가게 안내문과 화면 버튼은 "하나만 크게"라는 점에서 같지만, 다른 점이 하나 있어요. 화면은 누가 눌렀는지 셀 수 있어요. 종이 안내문은 몇 명이 읽었는지 알 수 없지만, 버튼은 몇 명이 봤고 몇 명이 눌렀는지 남아요. 그래서 화면에서는 감이 아니라 숫자로 고칠 수 있어요. 이 차이가 숫자를 보고 바꾸기가 하는 일이에요.

"버튼을 줄였는데 문의가 안 늘어요." 버튼 개수는 마지막 한 걸음이에요. 그 앞에 손님이 무엇을 파는 곳인지 알 수 있는지, 값이 적혀 있는지, 믿을 만한지가 먼저예요. 앞이 비어 있으면 버튼을 하나로 줄여도 누를 이유가 없어요.

확인해 보세요

첫 화면에 [구매하기] [상담 신청] [전화하기] [카톡 문의] 네 개가 같은 크기로 있어요. 가장 먼저 할 일은?

하나 더

"지금 결제하기" 버튼이 거의 안 눌려요. 상품값이 80만 원이에요. 무엇을 먼저 해 볼까요?

직접 해보기

내 화면에서 색이 진한 사각형을 세어 보세요

만든 화면을 열고 눈을 반쯤 감은 채로 보세요. 흐릿하게 봤을 때 눈에 남는 사각형이 두 개 이상이면 하나로 줄일 자리가 있는 거예요. 휴대폰 폭으로 좁혀서 한 번 더 보면 더 잘 보여요.

스튜디오에서 내 화면 열기

더 깊이 (안 읽어도 괜찮아요)

왜 두 번째 버튼은 첫 번째의 힘을 빼앗나 · 손님은 버튼을 하나씩 판단하지 않고 화면 전체를 한 장의 그림으로 봐요. 강조가 하나면 그 그림에 방향이 생기고, 강조가 둘이면 방향이 사라져요. 그래서 두 번째 버튼은 절반을 가져가는 게 아니라, 첫 번째까지 같이 흐리게 만들어요. 이게 "버튼을 하나 뺐더니 양쪽 다 늘었다"는 결과가 나오는 이유예요.

긴 페이지에서 버튼을 몇 번 반복할까 · 손님이 읽다가 마음을 정하는 지점은 사람마다 달라요. 그래서 긴 페이지는 첫 화면·중간 설명 뒤·맨 아래에 같은 버튼을 놓는 게 보통이에요. 중요한 건 개수가 아니라 문구와 색이 전부 같아야 한다는 점이에요. 세 개가 다 같으면 손님 눈에는 하나로 보이고, 문구가 다르면 세 가지 일로 보여요.

화면을 나눌 때와 버튼을 나눌 때 · 손님 종류가 둘이면 버튼을 나누기 전에 광고를 나눌 수 있는지 보세요. 개인 손님과 사업자 손님을 각각 다른 링크로 보낼 수 있으면 화면 두 장을 만들면 되고, 각 화면은 버튼 하나로 깔끔해져요. 반대로 어디서 오는지 갈라낼 수 없다면 첫 화면에서 종류를 묻는 화면을 한 장 끼우는 방법이 있어요. 다만 화면을 하나 더 지나야 하니 그만큼 사람이 줄어요. 어느 쪽이 나은지는 깔때기(어디서 새는지) 방식으로 세어 보면 답이 나와요.

이것만 기억하세요

  • ·한 화면에 강조된 버튼은 하나. 나머지는 지우지 않고 글자로 내려요
  • ·버튼 문구는 누른 직후에 벌어지는 일을 그대로 적어요
  • ·안 눌리면 버튼을 늘리지 말고 손님이 내야 하는 각오를 줄여요
  • ·결제가 걸린 버튼은 얼마·언제·몇 번을 옆에 적고, 표현은 규제 안내에서 확인해요
  • ·휴대폰에서 스크롤 없이 버튼이 보이는지 꼭 직접 확인해요
VibeCampus新規ビルド