모바일 홈페이지, 전화 버튼은 어디에 둬야 문의로 이어질까요?

저는 병원·법무법인·세무법인 같은 전문직 사무소 22곳의 홈페이지 제작과 검색 마케팅을 맡아 왔습니다.

그중 '전화 버튼을 크게 넣었는데 문의가 늘지 않는다'는 연락은 거의 달마다 한 번씩 받습니다.

상담에서 GA4 클릭 이벤트를 먼저 열어 보면, 버튼은 눈에 잘 띄는 자리에 있는데 클릭 수가 한 달에 손에 꼽히는 경우가 많습니다.

화면을 직접 열어 보면 이유는 대개 간단합니다. 버튼이 첫 화면에는 있지만, 스크롤을 두세 번 내리면 사라지는 구조입니다.

실제 운영해 보면 모바일 전화 버튼은 '있다'와 '눌린다'가 완전히 다른 이야기입니다.

견적서에 '전화 버튼 삽입' 한 줄이 들어 있어도 그 한 줄이 문의까지 책임지지는 않습니다. 위치와 문구, 업종별 순서를 함께 정해야 버튼이 제 역할을 합니다.

이 글은 저희가 작업할 때 쓰는 기준을 숫자와 순서로 정리한 것입니다. 홈페이지를 휴대폰으로 열어 두고 하나씩 맞춰 보시면 됩니다.

전화 버튼이 있는데 왜 클릭으로 이어지지 않을까요?

버튼이 화면에 계속 붙어 있지 않고, 스크롤 중 사라지는 위치에 있기 때문입니다.

모바일 홈페이지제작에서 가장 흔한 실수는 전화 버튼을 첫 화면(히어로 영역)에만 넣는 것입니다.

방문자는 첫 화면을 보고 바로 전화하지 않습니다. 서비스 소개와 후기, 비용을 확인한 다음에 마음을 정합니다.

그 시점에는 버튼이 이미 화면 밖으로 밀려나 있어 다시 위로 올려야 찾을 수 있습니다. 손가락 동작이 하나 늘어날 때마다 이탈률은 눈에 띄게 올라갑니다.

PC 화면으로 디자인을 확정한 다음 모바일 버튼을 끼워 넣는 순서로 작업하면 이 문제가 특히 자주 생깁니다. 모바일부터 버튼 위치를 정하고 나머지를 채우는 순서가 맞습니다. 거꾸로 하면 레이아웃을 다시 잡느라 작업이 한 주쯤 늘어납니다.

숫자로 보면 이유가 분명해집니다. 스마트폰 표시 영역은 대체로 가로 360~430px, 세로 640~780px이라 소개·후기·비용을 다 읽으려면 스크롤이 다섯 번에서 열 번까지 늘어납니다.

즉 마음을 정하는 지점은 첫 화면이 아니라 세 번째에서 여섯 번째 스크롤 사이입니다. 버튼은 바로 그 구간에 있어야 합니다.

• 첫 화면에만 버튼이 있고 이후 화면에는 없다 — 가장 흔한 형태입니다.
• 버튼이 이미지 안에 그림으로 들어가 있어 눌러도 아무 일이 일어나지 않는다.
• 고정바가 있지만 광고 배너·쿠키 안내창에 가려 절반만 보인다.

여기까지 확인되면 다음은 버튼을 어디에 고정할지 정하는 일입니다.

전화 버튼은 화면 어디에 고정해야 할까요?

화면 하단에 항상 붙어 있는 고정바 형태가 클릭률이 가장 높습니다.

스크롤 위치와 상관없이 같은 자리에 있어야, 방문자가 마음을 정한 순간 바로 누를 수 있습니다.

엄지가 자연스럽게 닿는 하단이 상단보다 유리합니다. 한 손으로 쥐고 보는 방문자가 대다수이기 때문입니다.

정답은 하나가 아니라 조합입니다. 첫 화면과 본문 중간에도 넣되, 하단 고정바를 기본값으로 둡니다.

본문 중간 삽입은 스크롤 3~4번마다 하나씩, 한 페이지에 2~4개면 충분합니다. 넣을 자리는 비용 안내와 후기, 서비스 상세 설명이 끝나는 지점 바로 아래입니다.

고정바를 붙이는 작업은 쓰는 테마나 빌더에 기능이 있다면 직접 하셔도 됩니다. 다만 코드를 손대야 하거나 기존 플로팅 버튼과 겹치는 구조라면 맡기시는 편이 빠릅니다. 혼자 고치다 레이아웃이 깨지면 복구에 드는 시간이 작업 시간보다 길어집니다.

버튼 크기와 여백은 어느 정도로 잡아야 할까요?

손가락이 닿는 영역은 가로·세로 48px 이상, 하단 고정바 전체 높이는 56~64px, 버튼 안 글자는 16px 이상을 기준으로 잡습니다.

보기에 충분히 커 보이는 버튼도 실제 터치 영역이 32px 정도인 경우가 많습니다. 이러면 흔들리는 지하철 안에서는 두세 번 눌러야 들어갑니다.

버튼을 두 개 나란히 둘 때는 사이 간격을 8px 이상 둡니다. 붙어 있으면 전화를 누르려다 카카오톡이 열리고, 그 한 번의 실수로 창을 닫는 방문자가 생깁니다.

고정바는 본문 맨 아래를 가리므로, 페이지 하단에 56~80px 정도 여백을 더해 두어야 마지막 문단과 푸터 정보가 잘리지 않습니다. 저는 이 여백을 빼먹어 전화번호가 고정바에 가려진 화면을 자주 봅니다.

버튼 문구와 색은 클릭률에 얼마나 영향을 줄까요?

문구를 '전화하기'에서 행동과 이유가 함께 보이는 문장으로 바꾸는 것만으로도 클릭률이 달라집니다.

'전화 상담' 같은 일반적인 문구보다 '지금 바로 무료 상담'처럼 행동과 이유가 함께 있는 문구가 반응이 좋습니다.

색은 화려하게 꾸미기보다 페이지 전체에서 그 버튼에만 쓰는 한 가지 색을 정하는 것이 중요합니다. 다른 요소와 색이 겹치면 '버튼처럼 보이는 것'과 진짜 버튼을 구분하기 어려워집니다.

문구는 8~16자 안에서 끊습니다. 그보다 길면 작은 화면에서 두 줄로 깨지거나 글자 크기가 줄어듭니다.

문구에 넣을 정보는 네 가지 중 한두 개만 고르면 됩니다. 무료 여부, 소요 시간, 응대 시간, 담당자입니다.

• 무료 여부 — '상담은 무료입니다 · 전화 연결'
• 소요 시간 — '1분 통화로 견적 확인'
• 응대 시간 — '오늘 18시까지 상담 가능'
• 야간 대비 — '지금은 문자로 남겨 주세요 (내일 9시 회신)'

야간·주말 문의가 전체의 30%를 넘는 업종이라면, 시간대에 따라 마지막 문구로 바뀌게 해 두는 것만으로 헛클릭이 문자 문의로 남습니다.

문구는 직접 바꿔 보셔도 좋은 항목입니다. 저는 상담에서 두 가지 안을 2~3주씩 번갈아 걸어 보고, 클릭 수가 나은 쪽을 남기라고 말씀드립니다.

병원·법무법인처럼 상담이 조심스러운 업종은 버튼을 어떻게 다르게 써야 할까요?

전화를 맨 앞에 두기보다 예약이나 상담 신청을 먼저 보여주고, 전화는 그다음 선택지로 두는 편이 낫습니다.

병원이나 법무법인에 상담을 받으러 오는 사람은 아직 마음의 준비가 덜 된 경우가 많습니다. 바로 전화부터 걸라고 하면 부담을 느껴 페이지를 닫아버리기도 합니다.

이런 업종에서는 전화 상담 버튼 옆에 온라인 상담 신청이나 카카오톡 문의처럼 진입장벽이 낮은 선택지를 함께 두는 것이 효과적입니다.

반대로 이사·설비 수리처럼 상황이 급한 업종은 전화 버튼 하나만 크게 두는 것이 오히려 낫습니다. 이 차이를 무시하고 모든 업종에 같은 구성을 쓰면 문제가 생깁니다.

전문직 사무소 작업에서 저희가 다시 손본 경우는 대개 여기서 나왔습니다. 다른 업종 템플릿을 그대로 가져와 전화 버튼만 크게 넣으면, 방문자가 부담을 느껴 그대로 이탈하는 비율이 높아집니다.

온라인 상담 신청 버튼을 앞으로 옮기고 전화를 그 아래 작게 둔 다음부터 문의 폼 제출이 늘었습니다. 같은 페이지라도 버튼 순서 하나로 방문자가 느끼는 부담이 달라집니다.

두 열 중 어디에 해당하는지 애매하면, 지난 한 달 문의를 열어 전화와 폼 중 어느 쪽 비중이 큰지부터 봅니다. 이미 들어오는 경로를 더 쉽게 만드는 쪽이 먼저입니다.

▲ 업종의 상담 성격에 따라 버튼의 순서를 다르게 둡니다

어느 경우든 한 줄에 놓는 버튼은 두 개까지입니다. 네 개를 넣으면 각 버튼 폭이 90px 아래로 줄어 글자가 잘리고 어느 것도 선택받지 못합니다.

순서가 정해지면 다음은 숫자를 남기는 일입니다.

전화 버튼을 만든 후에는 무엇을 확인해야 할까요?

GA4에 클릭 이벤트를 달아 실제로 몇 번 눌렸는지 확인하는 것이 먼저입니다.

버튼을 넣어 두고 확인하지 않으면 잘 되고 있는지조차 알 수 없습니다. 클릭 이벤트 하나만 추가해도 요일별·시간대별로 언제 많이 눌리는지 보입니다.

상담에서 자주 보는 경우는 야간·주말에 클릭은 느는데 정작 그 시간에 전화를 받는 사람이 없어 놓치는 것입니다. 이럴 때는 부재중 안내나 문자 회신, 다음 날 콜백 안내를 버튼 근처에 함께 넣습니다.

설정은 보통 반나절이면 끝납니다. 전화 링크(tel:)와 카카오톡 링크에 다른 이벤트 이름을 붙이고 버튼 위치별로 값을 남기면, 고정바와 본문 중간 버튼 중 어디가 일하는지까지 갈립니다.

이 반나절을 미루면 석 달 뒤에도 '늘었는지 모르겠다'는 말만 남습니다. 비교할 기준선이 없어 그 석 달을 그냥 버리는 셈입니다.

쌓인 숫자는 다음 네 가지를 한 화면에 놓고 봅니다.

• 버튼별 클릭 수 — 고정바 / 본문 중간 / 첫 화면 중 어디가 실제로 눌리는지
• 시간대별 클릭 — 18시 이후와 주말 비중이 30%를 넘는지
• 클릭 대비 통화 연결 — 통화 기록이나 착신 전환 로그와 맞춰 봅니다
• 통화 1분 이상 비율 — 잘못 누른 클릭과 진짜 문의를 가르는 기준선입니다

이벤트 설치는 태그 매니저를 다뤄 보신 분이라면 직접 하셔도 됩니다. 계정 권한이 흩어져 있거나 설치 코드가 어디에 들어가 있는지 모르는 상태라면 맡기시는 편이 낫습니다.

클릭은 늘었는데 통화로 이어지지 않으면 어디를 봐야 할까요?

'클릭 → 통화 연결 → 상담 접수' 세 구간으로 나눠, 어느 구간에서 끊기는지를 먼저 확인합니다.

클릭은 늘었는데 통화가 늘지 않으면 대개 응대 쪽 문제입니다. 통화 대기가 15초를 넘으면 끊는 사람이 많고, 야간에 신호만 가다 끝나면 그 방문자는 다시 오지 않습니다.

통화는 됐는데 상담으로 안 넘어가면 받는 첫 30초를 점검합니다. 누가 받는지, 비용 질문에 어떻게 답하는지, 방문 예약으로 넘기는 말이 준비돼 있는지가 여기서 갈립니다.

번호가 원인인 경우도 있습니다. 070이나 안심번호만 노출돼 있으면 스팸으로 의심해 누르지 않으므로, 지역 번호나 대표번호를 함께 보여 주는 편이 안전합니다.

지금 바로 점검할 체크리스트는 무엇인가요?

휴대폰으로 자기 홈페이지를 열어 스크롤을 세 번 내린 뒤에도 전화 버튼이 화면에 남아 있는지 보는 것이 첫 항목입니다. 아래 열 가지는 5~10분이면 끝납니다.

• 스크롤을 세 번 내린 뒤에도 버튼이 화면에 남아 있는지
• 터치 영역이 48px 이상이고 한 손 엄지로 닿는지
• 버튼을 누르면 전화 연결 화면이 바로 뜨는지(이미지가 아닌 tel: 링크인지)
• 문구가 8~16자이고 한 줄로 보이는지
• 버튼 색이 페이지 안에서 그 버튼에만 쓰이는지
• 한 줄에 놓인 버튼이 두 개 이하이고 간격이 8px 이상인지
• 고정바에 가려 마지막 문단이나 푸터가 잘리지 않는지
• 업종 성격에 맞게 전화와 상담 신청의 순서가 잡혀 있는지
• 야간·주말 응대 안내 문구가 버튼 근처에 있는지
• GA4에 클릭 이벤트가 붙어 있고 최근 7일 숫자가 보이는지

작업 범위도 미리 가늠해 두면 판단이 쉬워집니다. 고정바를 새로 붙이는 정도는 보통 2~5일·20만~80만원, 문구와 업종별 순서·문의 폼·클릭 이벤트까지 함께 손보면 1~3주·100만~400만원 범위에서 진행됩니다.

다만 홈페이지가 오래돼 코드 수정이 어려운 구조라면, 부분 수정을 반복하기보다 리뉴얼을 검토하는 편이 결과적으로 싸게 끝나는 경우도 있습니다. 저는 작은 수정 견적이 세 번 넘게 쌓이면 그 이야기를 먼저 꺼냅니다.

바꾼 뒤 판단은 방문 300~500회 또는 2~4주가 쌓인 다음에 합니다. 하루 방문이 20~30회인 홈페이지에서 3일 치 숫자로 결론을 내리면 요일 차이를 효과로 잘못 읽게 됩니다.

전화 버튼 위치만 바꾸면 문의가 확실히 늘어날까요?

버튼은 전환 흐름의 마지막 단계일 뿐이라, 그것만으로 문의가 늘어난다고 단정할 수는 없습니다.

버튼이 아무리 잘 배치돼 있어도, 그 앞 단계인 로딩 속도나 신뢰 요소가 부족하면 방문자는 버튼 앞까지 오지도 못하고 이탈합니다.

전환을 만드는 요소들은 따로 떨어져 있는 것이 아니라 하나의 흐름으로 연결돼 있습니다. 버튼 위치는 그 흐름의 마지막 조각이라고 보는 것이 맞습니다.

그래서 저는 전화 버튼 하나만 손보고 끝내기보다, 페이지 전체의 로딩 속도와 문의 폼, 신뢰 요소를 함께 점검하라고 권합니다.

병원마케팅이든 법무법인마케팅이든 이 순서는 다르지 않습니다. 모바일 전화 버튼의 위치와 문구를 손보는 작업은 항상 전체 점검의 한 부분으로 넣어야 효과가 오래갑니다.

정리하면 전화 버튼은 '넣었는지'가 아니라 '결정하는 순간에 화면에 있었는지'로 평가하는 항목입니다. 지금 휴대폰으로 홈페이지를 열어 스크롤을 세 번 내려 보는 것이 가장 빠른 점검이고, 거기서 버튼이 보이지 않는다면 광고 예산을 올리기 전에 먼저 손볼 곳이 분명해집니다. 이어서 모바일 화면 전체 점검과 로딩 속도, 문의 폼 항목 수까지 같은 순서로 확인해 보시기 바랍니다.