사파리에서 전화번호가 파란색으로 바뀌나요? 고치는 방법

모바일 사파리용으로 디자인하다 보면 전화번호가 어느새 파란색에 밑줄이 그어진 것을 발견할 수 있습니다. 혼자만 겪는 일은 아닙니다. 사파리는 기본적으로 전화번호를 자동 감지해 클릭 가능한 링크로 바꾸며, 그 과정에서 CSS 스타일을 덮어쓰는 경우가 많습니다.

문제점

사파리의 전화번호 자동 감지는 경우에 따라 유용하지만, 디자이너와 개발자에게는 의도한 레이아웃이나 브랜드 일관성을 깨뜨릴 수 있습니다. 특히 사용자 정의 글꼴이나 색 구성을 쓸 때 더 그렇습니다.

다행히 이 동작은 <head> 태그 안에 코드 한 줄만 넣으면 끌 수 있습니다:

<meta name="format-detection" content="telephone=no">

이렇게 하면 사파리가 전화번호를 자동으로 감지하고 서식을 적용하지 않으므로, 사이트에 숫자가 어떻게 보일지 직접 결정할 수 있습니다.

번호는 클릭 가능하게 두되 스타일만 직접 정하고 싶다면, <a href=”tel:1234567890″> 태그로 감싼 뒤 원하는 CSS를 적용하면 됩니다:

<a href="tel:1234567890" class="phone">(123) 456-7890</a>

그다음 원하는 대로 스타일을 입히세요:

.phone {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

사파리의 자동 감지는 사용자에게는 도움이 될 수 있지만, 디자이너에게는 문제가 되기도 합니다. 간단한 메타 태그이나 통제된 스타일만으로도 원치 않는 디자인 변경을 막고, 모든 브라우저에서 UI를 일정하게 유지할 수 있습니다.

이런 짧은 개발 팁을 더 보고 싶다면 identitydesign.us를 다시 찾아주세요