아이폰에서 숫자가 파란 전화 링크로 바뀔 때, format-detection으로 막는 법
PC에서는 멀쩡한데 아이폰 사파리로 보면 사업자등록번호나 주문번호 같은 숫자가 파란 밑줄 전화 링크로 바뀌어 있는 경우가 있습니다.
사파리가 전화번호처럼 생긴 숫자를 자동으로 찾아 링크로 만들기 때문인데, format-detection 메타 태그 한 줄로 끄고 필요한 번호만 직접 링크를 걸면 깔끔하게 정리됩니다.
💡 편해 보이는데 왜 꺼야 할까요?
자동 감지는 숫자 모양만 보고 판단해서 전화번호가 아닌 것까지 링크로 만듭니다. 실제로 고객사 하단 정보 영역을 점검해 보면 사업자등록번호, 통신판매업 신고번호, 계좌번호가 눌리면 전화 앱이 뜨는 상태로 방치된 경우가 적지 않습니다. 디자인에 맞춘 글자색도 파란색으로 덮여 버려 푸터가 어수선해 보입니다.
1. head에 메타 태그 한 줄 넣기
사이트 공통 레이아웃의 <head> 안, viewport 메타 태그 근처에 아래 한 줄을 추가합니다. 사파리가 페이지 안의 숫자를 전화번호로 자동 변환하지 않게 됩니다.
<!-- 숫자 자동 전화 링크 끄기 -->
<meta name="format-detection"
content="telephone=no">빌더나 CMS를 쓰신다면 관리자 화면의 "헤더 추가 코드" 같은 입력란에 넣으면 됩니다. 레이아웃이 여러 개라면 모바일 전용 레이아웃에도 빠짐없이 들어갔는지 확인해 주세요.
2. 진짜 전화번호는 tel: 링크로 직접 걸기
자동 감지를 끄면 대표번호도 더 이상 저절로 눌리지 않습니다. 그래서 문의 전화처럼 눌려야 하는 번호는 tel: 링크로 직접 만들어 주는 게 맞습니다. 이렇게 하면 어떤 번호가 눌리는지 운영자가 정할 수 있고, 클릭 수 측정도 붙이기 쉬워집니다.
<!-- 하이픈 없이 숫자만 넣어도 됩니다 -->
<a href="tel:0212345678">02-1234-5678</a>
<!-- 사업자번호는 그냥 텍스트로 -->
<span>사업자등록번호 123-45-67890</span>3. 적용 후 이렇게 확인하세요
메타 태그는 페이지를 새로 불러와야 반영되므로, 아이폰 사파리에서 캐시를 비우거나 주소 뒤에 ?v=2를 붙여 다시 열어 봅니다. 푸터의 사업자 정보, 상품 코드, 가격처럼 숫자가 몰린 곳을 하나씩 눌러 보고, 대표번호만 전화 앱으로 연결되면 정리가 끝난 것입니다. 안드로이드 크롬은 일반적으로 웹페이지 숫자를 이렇게 자동 링크로 바꾸지 않아서, 이 문제는 대부분 아이폰에서만 보입니다.
"눌리는 곳과 눌리지 않을 곳을 정하는 것도 설계입니다."
나눔웹은 오픈 전 실제 아이폰과 안드로이드 기기로 하단 정보까지 직접 눌러 보며 점검합니다.
