전화번호 링크 넣는법

사이트 만들다 보면 꼭 나오는 요청이 하나 있다. “전화번호 누르면 바로 전화 걸리게 해주세요.” 특히 모바일에서 넘어오는 트래픽 비중이 큰 사이트일수록 이 요청이 많다. 실제로 전화번호가 그냥 텍스트로만 박혀 있으면 모바일에서 복사→전화앱→붙여넣기 이 과정을 거쳐야 하는데, 이 단계 하나 늘어날 때마다 이탈하는 사람이 생긴다. ROBOTION으로 사이트 수백 개 자동 빌드하면서 이 부분도 템플릿에 아예 박아놨는데, 그 과정에서 정리한 내용 풀어본다.

기본 원리: tel: 스킴

전화번호를 링크로 만드는 방법은 간단하다. a 태그의 href에 tel: 스킴을 쓰면 된다.

<a href="tel:01012345678">010-1234-5678</a>

이렇게만 해놔도 모바일 브라우저에서는 탭하는 순간 전화 앱이 뜨면서 번호가 자동으로 채워진다. 데스크톱에서는 브라우저 설정에 따라 다르게 반응하는데, Skype 같은 VoIP 프로그램이 깔려있으면 그쪽으로 연결 시도하고, 아무것도 없으면 그냥 무시되거나 “연결할 앱이 없습니다” 알림만 뜬다. 그래서 데스크톱 유저 입장에서 크게 손해볼 건 없고, 모바일 유저한테는 확실히 편의가 생기는 구조다.

번호 표기, 하이픈 넣어도 되나

여기서 다들 헷갈리는 부분이 하이픈(-) 표기다. 결론부터 말하면 tel: 값 안에 하이픈 넣어도 대부분 브라우저·OS에서 알아서 무시하고 처리한다.

<a href="tel:010-1234-5678">010-1234-5678</a>

실제로 iOS Safari, 안드로이드 크롬 둘 다 하이픈 있는 상태로 전화 앱에 그대로 넘겨도 문제없이 다이얼 화면에 뜬다. 그래도 여러 사이트 자동 빌드하면서 겪은 경험으로는, 일부 저가형 안드로이드 기기의 기본 전화 앱이나 구형 웹뷰 기반 앱(카카오톡 인앱 브라우저 같은 것)에서 간혹 특수문자 처리가 지저분하게 되는 경우가 있었다. 그래서 안전하게 가려면 표시(텍스트)는 하이픈 넣은 보기 좋은 형태로 두고, href 값은 숫자만 남기는 걸 원칙으로 삼는 게 낫다.

<a href="tel:01012345678">010-1234-5678</a>

즉 “사람이 보는 텍스트”와 “링크가 실제로 넘기는 값”을 분리해서 생각하면 된다. 화면에는 읽기 편하게 하이픈 넣고, href는 숫자만.

국가번호(+82) 넣어야 하나

국내 방문자만 대상으로 하는 사이트라면 굳이 국가번호 안 붙여도 된다. 다만 해외에서 접속하는 유저가 있거나, PWA/앱 형태로 배포해서 국가 구분 없이 쓰인다면 국제 표준 형식을 권장한다.

<a href="tel:+821012345678">+82 10-1234-5678</a>

맨 앞 0을 빼고 국가번호(+82)로 대체하는 게 국제 표준(E.164) 형식이다. 대표번호가 02-XXX-XXXX 같은 지역번호 형태라면 tel:+82212345678 이런 식으로 처리하면 된다. 사업자 사이트라면 그냥 국내용 tel:0212345678 형태로도 실무상 문제없다.

워드프레스에서 넣는 법

워드프레스 기준으로는 크게 두 가지 방법 쓴다.

1) 구텐베르크 에디터에서 직접

텍스트 블록에서 전화번호 선택 → 링크 아이콘 클릭 → URL 입력창에 tel:01012345678 그대로 입력하면 끝난다. 워드프레스가 자동으로 http:// 붙이려고 시도하는 경우가 있는데, tel: 스킴은 인식해서 안 건드리니 걱정 안 해도 된다. 혹시 자동完성이 이상하게 붙는다 싶으면 코드 편집기(HTML) 모드로 바꿔서 위 예시처럼 직접 태그 넣으면 확실하다.

2) 테마/헤더에 고정 전화번호 버튼 넣기

헤더나 플로팅 버튼으로 상시 노출시키고 싶으면 header.php나 위젯 영역에 이렇게 박아넣으면 된다.

<a href="tel:01012345678" class="call-btn">
  📞 전화 상담
</a>

CSS로 버튼 모양 잡고 position: fixed로 하단 고정시키면 모바일에서 스크롤 내려도 항상 전화 버튼이 떠 있는 구조 만들 수 있다. 상담 유도가 목적인 사이트(병원, 학원, 시공업체 같은 곳)는 이 플로팅 버튼 하나로 전환율 차이가 꽤 난다.

문자(SMS) 링크도 같이 필요하면

전화 대신 문자 유도하고 싶은 경우엔 sms: 스킴을 쓴다.

<a href="sms:01012345678">문자 남기기</a>

미리 채워진 본문까지 넣고 싶으면 &body= 파라미터를 붙이는데, iOS와 안드로이드가 구분자(? 또는 &)를 다르게 요구해서 완벽하게 통일하긴 어렵다. 이 부분까지 자동화하려면 기기 구분(UA 체크) 로직이 따로 필요한데, 대부분의 사이트는 전화 링크 하나로 충분해서 여기까진 안 가도 된다.

확인할 때 주의할 점

tel: 링크 넣고 데스크톱 브라우저에서 클릭해보고 “안 되는데요?” 하는 문의를 종종 받는다. 이건 버그가 아니라 정상 동작이다. 데스크톱 PC에는 전화를 걸 수 있는 하드웨어 자체가 없으니 브라우저가 처리할 방법이 없는 거다. 확인은 반드시 실제 모바일 기기(또는 크롬 개발자도구 모바일 에뮬레이션 말고 진짜 폰)로 탭해봐야 한다. 에뮬레이션은 화면 크기만 흉내내는 거지 전화 앱 연동까지 재현하진 못한다.

또 하나, 링크 텍스트에 오타 있는 번호를 그대로 href에 옮기는 실수가 생각보다 잦다. 사이트 여러 개 관리하다 보면 대표번호 바뀌었는데 한 군데는 고치고 헤더 플로팅 버튼은 빼먹는 경우가 나온다. 전화번호 노출되는 위치(헤더, 푸터, 상담 페이지, 플로팅 버튼) 전부 grep으로 한 번에 검색해서 일괄 확인하는 습관 들이는 게 낫다.

grep -rn "tel:" ./theme-folder/

이 명령 한 줄이면 테마 폴더 안에 박혀있는 tel: 링크 전부 찾아서 번호 틀린 데 없는지 한 번에 검수 가능하다.

정리

모바일에서 원터치 전화 연결 원하면 <a href="tel:숫자만"> 이 기본형이다.
화면 표시는 하이픈 넣어 보기 좋게, href 값은 숫자만 넣는 걸 원칙으로 한다.
해외 접속 대상이면 국가번호(+82) 형식(E.164) 쓴다.
데스크톱에서 클릭 반응 없는 건 정상이니 실제 모바일 기기로 테스트한다.
문자 유도 필요하면 sms: 스킴도 같은 방식으로 넣으면 된다.

이거 하나 넣는다고 개발 시간 크게 드는 것도 아닌데, 안 해놨다가 상담 전화 놓치는 사이트 은근히 많이 봤다. 전화 유도가 핵심 전환 경로인 사이트라면 지금 바로 헤더 확인해보면 된다.

이 글은 AI(인공지능)의 도움을 받아 작성되었습니다.

[태그:] 전화번호 링크 넣는법