모바일 전화 버튼 만들기 — tel: 링크 · 누르는 크기 · 하단 고정 · 클릭 측정

모바일 전화 버튼은 번호를 글자나 그림으로 적어 두는 것이 아니라, 번호를 tel: 링크로 감싼 버튼이어야 손님이 한 번 눌러 바로 전화를 걸 수 있습니다. 여기에 손가락으로 누르기 넉넉한 크기, 화면 아래 고정할 때 내용을 가리지 않는 배치, 몇 번 눌렸는지 세는 설정까지 네 가지를 갖추면 됩니다. 이 글은 MDN · W3C · Google 공식 문서에서 확인한 내용만으로 순서를 정리했습니다.

1전화번호를 적어 두기만 하면 왜 안 걸리나요?

홈페이지에 '대표번호'와 번호를 글자로만 써 두면 손님은 번호를 길게 눌러 복사하거나 외워서 전화 앱에 다시 입력해야 합니다. 번호를 그림(이미지)으로 넣었다면 복사조차 안 됩니다. 한 번에 걸리게 하려면 번호를 tel: 링크로 감쌉니다.

MDN(모질라 개발자 문서)의 a 요소 설명은 tel: 링크의 동작이 기기마다 다르다고 적습니다. 휴대폰(셀룰러 기기)은 번호로 바로 전화를 걸고, 컴퓨터에서는 Skype · FaceTime 같은 통화 프로그램이 열리거나 연락처에 저장하기, 다른 기기로 번호 보내기 같은 동작이 일어날 수 있습니다. 그래서 PC 화면에서는 버튼 옆에 번호를 글자로도 함께 보여 주는 편이 좋습니다.

2손가락으로 누르기 좋은 버튼 크기는 몇 픽셀인가요?

국제 웹 접근성 기준인 WCAG 2.2는 성공 기준 2.5.8(대상 크기 · 최소, AA 등급)에서 포인터로 누르는 대상이 최소 24×24 CSS 픽셀이어야 한다고 정합니다. 다만 주변 대상과 충분히 떨어져 있는 경우, 같은 기능을 하는 다른 큰 버튼이 있는 경우, 문장 속 글자 링크인 경우 등은 예외입니다. 더 엄격한 2.5.5(대상 크기 · 강화, AAA 등급)는 44×44 CSS 픽셀입니다. W3C 해설은 중요한 링크나 버튼이라면 강화 기준을 목표로 삼아 보라고 권합니다.

Lighthouse 탭 타깃 점검과 글자 크기 이야기는 모바일 홈페이지 점검 글에 정리해 두었습니다. 여기서는 전화 버튼 하나만 놓고 보면 됩니다. 버튼 높이를 48px 안팎으로 잡고, 옆의 문자 · 길찾기 버튼과 붙지 않게 사이를 띄우면 세 기준을 모두 넘깁니다.

3화면 아래 고정 버튼은 어떻게 두어야 내용을 가리지 않나요?

스크롤해도 늘 보이는 하단 고정 버튼은 전화가 주된 문의 창구인 식당 · 미용실 · 병원에서 많이 씁니다. 편하지만 잘못 두면 페이지 맨 아래 주소 · 사업자 정보를 덮거나, 아이폰의 홈 표시줄과 겹쳐 눌리지 않습니다.

1. 아래쪽 안전 영역을 비웁니다. MDN의 env() 설명은 화면 모양이나 시스템 표시줄 때문에 가려질 수 있는 여백을 safe-area-inset-bottom 값으로 알려 주며, 하단 고정 영역의 아래 여백에 calc(1em + env(safe-area-inset-bottom))처럼 더하는 예를 듭니다.
2. 고정 막대 높이만큼 페이지 맨 아래에 여백을 줍니다. 그래야 마지막 줄의 주소 · 영업시간이 버튼 밑에 숨지 않습니다.
3. 입력 칸이나 링크로 이동할 때 막대가 그것을 완전히 덮지 않게 합니다. WCAG 2.2의 2.4.11(초점 가림 방지 · 최소, AA)은 하단 고정 영역이 초점 받은 요소를 통째로 가리면 안 된다고 정하고, 스크롤 여백(scroll-padding)으로 피하는 방법을 예로 듭니다.
4. 고정 막대 안 버튼은 2~3개로 줄입니다. 네 개 이상이면 버튼 하나가 좁아져 2장의 크기 기준을 맞추기 어렵습니다.

4전화 · 길찾기 · 문의, 어떤 버튼을 나란히 둘까요?

버튼 순서는 손님이 가장 자주 하는 행동 순입니다(일반 요령). 아래 표는 업종별로 흔히 쓰는 조합입니다. 버튼마다 아이콘만 두지 말고 '전화 걸기', '길찾기'처럼 동사를 적어야 처음 온 손님도 헷갈리지 않습니다.

길찾기 버튼은 가게의 지도 장소 페이지로 연결하는 것이 가장 간단합니다. 지도 앱의 가게 정보가 틀려 있으면 버튼이 오히려 손님을 헤매게 하므로, 먼저 카카오맵 장소 정보 정리 글처럼 지도 쪽 주소 · 영업시간을 맞춰 둡니다.

5전화 버튼이 몇 번 눌렸는지 어떻게 세나요?

GA4 '향상된 측정'의 외부 연결 링크 클릭(click 이벤트)은 Google 도움말 기준으로 '현재 도메인에서 나와 다른 웹사이트로 연결되는 링크'를 셉니다. tel: 링크가 여기에 잡히는지는 도움말에 나와 있지 않으므로, 전화 버튼은 따로 이벤트를 보내는 편이 확실합니다.

1. Google 태그(gtag.js) 코드 아래쪽 자바스크립트에서, 전화 버튼을 누를 때 gtag('event', 'phone_click', { … }) 처럼 이벤트를 보냅니다. Google 개발자 문서는 이벤트 코드를 태그 스니펫 아래에 두어야 처리된다고 안내합니다.
2. 버튼이 여러 곳에 있으면 '하단 고정', '본문'처럼 위치를 매개변수로 함께 보내 어느 버튼이 많이 눌리는지 나눠 봅니다.
3. 이벤트가 수집된 뒤 GA4 관리 → 데이터 표시 → 이벤트에서 이벤트 이름 옆 별표를 눌러 '주요 이벤트'로 표시합니다. 이 설정에는 속성 수준의 마케터 이상 권한이 필요합니다.
4. 한 달에 한 번 주요 이벤트 수와 실제 걸려 온 전화 수를 나란히 적어 봅니다.

6고친 뒤 휴대폰으로 무엇을 눌러 보나요?

• 아이폰 · 안드로이드 휴대폰 각각에서 전화 버튼을 눌러 전화 앱에 맞는 번호가 뜨는지 확인합니다.
• 페이지 맨 아래까지 내려 주소 · 사업자 정보가 고정 버튼에 가리지 않는지 봅니다.
• 문의 폼 입력 칸을 눌러 키보드가 올라올 때 칸이 버튼 뒤에 숨지 않는지 봅니다.
• PC에서 전화 버튼 옆에 번호가 글자로 보이는지 확인합니다.
• GA4 실시간 보고서에서 방금 누른 phone_click 이벤트가 들어오는지 봅니다.

점검 결과를 혼자 해석하기 어렵다면 무료 SEO 점검에 주소를 남겨 주세요. 버튼 위치와 크기를 새로 잡아야 한다면 제작 문의로 현재 화면 캡처를 보내 주시면 됩니다. 큰길브리지는 전국 비대면으로 진행합니다.

자주 묻는 질문