휴대폰에서 전화·길찾기 버튼이 잘 되게 하려면

전화 버튼: 번호를 글자가 아니라 링크로

홈페이지에 전화번호를 글자로만 적어 두면, 손님은 번호를 외우거나 길게 눌러 복사해야 합니다. 번호를 tel: 링크(누르면 전화 걸기 화면이 열리는 주소 형식)로 걸어 두면 한 번에 연결됩니다.

tel: 링크의 형식은 국제 표준 문서인 RFC 3966에 정해져 있습니다. 이 문서에서 확인한 핵심은 다음과 같습니다.

• 형식은 tel: 뒤에 번호를 붙이는 방식입니다. 예: tel:+82-2-0000-0000 (예시 번호)
• + 와 국가번호로 시작하는 전체 번호 형식을 권장합니다. 한국 번호라면 +82 뒤에 맨 앞 0을 뺀 지역번호를 씁니다.
• 읽기 쉽게 하이픈(-)이나 점을 넣어도 되고, 실제 전화를 걸 때는 무시됩니다. 다만 띄어쓰기는 쓸 수 없습니다.

길찾기 버튼: 지도 앱으로 바로 넘어가게

주소만 적어 두면 손님이 지도 앱을 열고 주소를 다시 입력해야 합니다. 버튼에는 지도 서비스의 링크를 걸어 두세요.

• 네이버 지도·카카오맵: 각 지도 서비스에서 우리 가게 장소 화면을 연 뒤 공유 기능으로 받은 링크를 쓰면 간단합니다. 가게가 지도에 정확히 등록되어 있어야 하므로, 링크를 걸기 전에 위치와 상호가 맞는지 먼저 확인하세요.
• 구글 지도: 구글이 공식으로 안내하는 링크 형식이 있어, 휴대폰에 구글 지도 앱이 있으면 앱으로, 없으면 브라우저로 열립니다. 형식은 아래 참고 상자를 제작 담당자에게 전달하시면 됩니다.

손님이 쓰는 지도 앱이 제각각이라면 버튼을 '네이버 지도로 보기', '카카오맵으로 보기'처럼 두세 개로 나누는 것도 방법입니다. 버튼마다 어느 앱으로 열리는지 글자로 적어 두면 손님이 고르기 쉽습니다.

누르기 좋은 버튼 크기와 배치

웹 접근성 국제 기준인 WCAG 2.2(W3C 발행)에는 누르는 대상의 크기에 대한 항목이 있습니다. 아래 표의 CSS 픽셀은 웹 페이지 안에서 크기를 재는 단위로, 휴대폰 화면의 실제 점(화소) 수와는 다릅니다. 화면이 촘촘한 정도가 기기마다 달라도 비슷한 크기로 보이도록 맞춘 단위라고 생각하시면 됩니다.

WCAG 2.2의 누르는 대상 크기 기준

24픽셀은 '이보다 작으면 안 된다'는 최소선입니다. 전화·길찾기처럼 손님이 꼭 눌러야 하는 버튼은 더 넉넉하게 만들고, 버튼끼리 붙여 두지 않는 편이 실수로 다른 버튼을 누르는 일을 줄입니다.

• 버튼 안에는 아이콘만 두지 말고 '전화하기', '길찾기'처럼 글자를 함께 적습니다.
• 첫 화면과 페이지 맨 아래처럼 손님이 결정하는 자리에 둡니다.
• PC에서는 tel: 링크가 아무 반응이 없거나 다른 프로그램을 열 수 있으니, 번호 글자도 함께 보여 주는 것이 좋습니다.

공개 전 테스트 목록

• 아이폰과 안드로이드 휴대폰에서 각각 전화 버튼을 눌러 전화 앱에 번호가 정확히 뜨는지
• 뜬 번호가 플레이스·명함에 적힌 번호와 같은지
• 길찾기 버튼을 눌렀을 때 지도 앱이 열리고 우리 가게 위치가 바로 나오는지
• 지도 앱이 설치되지 않은 휴대폰에서도 브라우저로 위치가 보이는지
• 카카오톡·인스타그램 안에서 홈페이지 링크를 열었을 때도 버튼이 작동하는지
• 엄지손가락으로 눌렀을 때 옆 버튼이 잘못 눌리지 않는지
• 번호를 바꾸거나 이전했을 때 홈페이지 버튼까지 함께 고쳤는지

AGENT JJUN에서 진행할 때

AGENT JJUN에 맡기시는 경우에도 검수하실 때 위 목록으로 사장님 휴대폰에서 직접 눌러 보시길 권합니다. 네이버 통합검색·플레이스 노출 관리에는 플레이스 정보 정비가 포함되어 있어 플레이스의 전화번호·위치 정보는 서비스 안에서 정리하고, 홈페이지 버튼을 어디까지 고칠지는 상담에서 정합니다.

스마트콜 번호 발급, 지도 위치 수정처럼 사장님 계정에서만 할 수 있는 일은 사장님이 직접 하시거나 관리자 권한을 나눠 주셔야 합니다.