HTML로 전화번호 링크 만들기

tel: URI를 사용하는 HTML 앵커를 만들면 웹페이지에서 전화번호를 바로 실행할 수 있습니다. 방문자는 링크를 선택해 기기에서 다이얼러나 다른 통화 핸들러를 열 수 있지만, 링크 자체가 전화를 걸지는 않습니다. 연락처 페이지에서 방문자가 업체에 전화하도록 안내할 때 유용한 방법입니다.

전화번호 링크의 작동 방식

전화번호 링크는 href 속성이 tel:로 시작하고 전화할 번호를 포함하는 앵커 요소입니다. 앵커 태그 사이의 텍스트는 화면에 표시되며 선택할 수 있는 링크 문구입니다. 연결 대상 값과 표시 문구는 서로 달라도 됩니다. 하나는 전화할 번호를 지정하고, 다른 하나는 방문자가 링크의 용도를 알아보도록 돕습니다.

클릭 가능한 전화 링크 만들기

예를 들어, 다음 인라인 HTML은 “Call customer support”라는 문구가 표시되는 링크를 만듭니다: <a href="tel:+1234567890">Call customer support</a>. +1234567890을 적절한 전화 걸기 형식의 업체 번호로 바꾸고, 방문자가 누구에게 또는 무엇에 연결되는지 알 수 있는 링크 문구를 사용하세요.

다음 독립 실행형 JavaScript 예제는 같은 앵커 구조를 문자열로 저장합니다. 코드에 HTML 값을 조립해야 하는 애플리케이션에서 유용합니다. 예제의 링크 문구 “Call customer support”는 설명을 위한 영어 문구이며, 일반 웹페이지에서는 앵커를 직접 사용할 수 있습니다.

const phoneLink = '<a href="tel:+1234567890">Call customer support</a>';
console.log(phoneLink);

<a href="tel:+1234567890">Call customer support</a>

읽기 쉽고 국제 전화에 적합한 번호 형식

href의 번호는 예상하는 발신자와 해당 번호 체계에 적합한 형식으로 지정하세요. 해외에서 전화하는 사람이 있다면 연결 대상을 명확하게 하는 데 필요한 경우 국가 발신 코드를 포함하세요. 모든 대상이나 번호 체계에 국가 코드가 필요한 것은 아닙니다.

읽기 편하도록 화면에 표시되는 문구에는 익숙한 띄어쓰기, 괄호 또는 하이픈을 사용할 수 있습니다. 예를 들어, 링크에는 (234) 567-8901을 표시하고 href 값에는 tel:+12345678901을 사용할 수 있습니다. 구분 기호는 번호를 빠르게 읽는 데 도움이 되지만, 표시 문구에 꼭 넣어야 하는 것은 아닙니다. 전화 걸기에 사용되는 값과 방문자에게 보이는 표현이 명확하고 서로 일치하도록 하세요.

방문자가 링크를 활성화하면 일어나는 일

방문자가 tel: 링크를 활성화하면 기기나 브라우저에서 바로 사용할 수 있도록 번호가 입력된 다이얼러나 다른 설정된 통화 핸들러가 열릴 수 있습니다. 일반적으로 전화를 걸지는 방문자가 결정합니다. 데스크톱에서는 통화 애플리케이션이 설정되어 있으면 해당 애플리케이션이 링크를 처리할 수 있습니다. 그렇지 않으면 브라우저와 사용할 수 있는 소프트웨어에 따라 동작이 달라집니다. 모든 기기에서 같은 화면이 열린다고 가정하지 마세요.

접근성 및 테스트 팁

연결 대상에 대한 맥락이 필요하다면 “전화”처럼 모호한 문구 대신 “고객 지원팀에 전화하기”와 같이 목적을 설명하는 링크 문구를 사용하세요. 이렇게 하면 보조 기술로 링크를 훑어보는 사람과 주변 문맥 없이 페이지를 보는 방문자도 링크를 이해하기 쉽습니다. 키보드로 링크에 접근할 수 있는지, 시각적 스타일로 링크임을 알아볼 수 있는지도 확인하세요.

방문자가 사용할 만한 기기, 브라우저, 통화 애플리케이션에서 링크를 확인하세요. 표시된 번호를 읽기 쉬운지, href에 의도한 번호가 들어 있는지, 링크를 활성화했을 때 예상한 핸들러가 제공되는지 점검하세요. 이런 확인을 거치면 방문자가 연락처 페이지를 사용하기 전에 번호 형식의 실수와 기기별 동작 차이를 발견하는 데 도움이 됩니다.

전화번호 링크에 관한 자주 묻는 질문

표시되는 번호에 괄호나 하이픈을 넣어도 되나요?

네. 번호를 읽기 쉽게 만드는 데 도움이 된다면 표시 문구에 익숙한 구분 기호를 사용하세요. tel: 대상은 전화 걸기에 적합한 형식으로 유지하고, 표시 문구가 연결 대상을 정한다고 여기지 마세요.

데스크톱 브라우저에서도 전화 링크가 작동하나요?

브라우저나 운영체제에 통화 핸들러가 설정되어 있으면 작동할 수 있습니다. 설정된 핸들러가 없으면 데스크톱에서 유용한 동작을 제공하지 못할 수 있으므로 방문자가 사용하는 환경에서 확인하세요.

링크가 작동하지 않으면 무엇을 확인해야 하나요?

앵커 태그의 철자, tel: 접두사, href의 번호를 확인하세요. 그런 다음 관련 기기에서 링크를 활성화하고 다이얼러나 통화 애플리케이션을 사용할 수 있는지 살펴보세요. 기기 설정과 소프트웨어에 따라 동작이 달라질 수 있습니다.

모든 전화 링크에 국가 발신 코드를 넣어야 하나요?

대상 발신자와 번호 체계에 필요할 때 국가 발신 코드를 사용하세요. 특히 다른 나라에서 전화할 가능성이 있다면 고려해야 합니다. 지역별 전화 걸기 규칙은 다르므로 의도한 연결 대상을 명확히 알 수 있는 형식을 선택하세요.