Safari 고정 탭 아이콘 만드는 방법

Safari에서 탭을 고정했을 때, 멋지게 디자인한 파비콘이 왜 지루한 회색 글자로 변하는지 궁금해한 적 있으신가요? 여러분만 겪는 문제가 아닙니다. 이건 버그가 아니라, 특별한 종류의 아이콘을 요구하는 '기능'입니다.

Safari 고정 탭 아이콘은 Apple이 UI를 깔끔하고 일관성 있게 유지하기 위해 사용하는 독특한 흑백 SVG 파일입니다. 이는 일반적인 favicon.ico나 iOS 홈 화면 북마크에 사용되는 Apple Touch Icon과는 완전히 다릅니다.

여러분의 아이콘이 Safari의 특별한 고정 탭 클럽에 들어가기 위해 입어야 하는 특별한 유니폼이라고 생각하시면 됩니다. 만드는 방법을 알려드리겠습니다.

사전 준비물

시작하기 전에 두 가지가 필요합니다:

  1. 로고의 벡터 버전 (SVG, AI, 또는 EPS 형식).
  2. 웹사이트의 HTML <head> 섹션에 접근하여 코드 한 줄을 추가할 수 있는 권한.

1단계: 흑백 SVG 준비하기

Safari는 SVG 파일 안의 모든 색상을 무시합니다. 오직 모양에만 신경 씁니다. 여러분의 역할은 실루엣으로 작동할 수 있는 깨끗하고 단색인 벡터 모양을 제공하는 것입니다.

먼저 Figma, Sketch, 또는 Adobe Illustrator와 같은 벡터 편집기에서 로고를 엽니다. 텍스트, 그라데이션, 여러 색상을 모두 제거하세요. 단일하고 속이 꽉 찬 모양이 필요합니다. 로고가 복잡하다면 단순화해야 합니다. 좋은 고정 탭 아이콘은 좋은 앱 아이콘처럼 즉시 알아볼 수 있어야 합니다. 이에 대한 자세한 내용은 파비콘과 로고의 차이점에 대한 가이드를 참조하세요.

다음으로, 모양의 채우기 색상을 검은색(#000000)으로 설정합니다. Safari는 이 색상을 자체 색상이나 여러분이 지정한 테마 색상으로 덮어쓰지만, 검은색으로 설정하는 것이 확실한 관례입니다.

마지막으로, 파일을 SVG로 내보냅니다. SVG에 viewBox 속성이 있고 불필요한 메타데이터가 없는지 확인하세요. (SVGOMG와 같은 도구는 이를 정리하는 데 아주 좋습니다).

2단계: HTML 링크 태그 추가하기

이제 Safari에게 새 아이콘이 어디에 있는지 알려줘야 합니다. HTML 문서의 <head> 태그 안에 다음 코드 한 줄을 추가하세요:

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

하나씩 살펴보겠습니다:

Stripe의 구현 사례를 살펴보세요. 그들은 깔끔하고 단순한 로고 마크를 SVG로 사용하고 color 속성을 그들의 시그니처 색상인 보라색(#635bff)으로 설정했습니다. 이 작은 디테일이 어떻게 브랜딩을 강화하는지 보여주는 완벽한 예입니다.

3단계: 업로드 및 테스트

새로 만든 safari-pinned-tab.svg 파일을 href 속성에서 지정한 위치의 웹 서버에 업로드합니다. 업로드 후 Safari에서 사이트를 열고, 탭을 마우스 오른쪽 버튼으로 클릭한 다음 "탭 고정"을 선택하세요.

선명한 흑백 아이콘이 나타나야 합니다. 만약 보이지 않더라도 당황하지 마세요. 캐시가 원인인 경우가 많습니다.

흔한 문제점과 해결 방법

이 작업을 제대로 하는 것이 때로는 까다로울 수 있습니다. 개발자들이 자주 겪는 몇 가지 일반적인 문제를 소개합니다.

1. 아이콘이 흐릿한 덩어리처럼 보입니다
이는 보통 SVG가 너무 상세하다는 의미입니다. 고정 탭 아이콘은 매우 작기 때문에, 복잡한 선이나 작은 간격은 그냥 덩어리로 합쳐져 보입니다. 벡터 편집기로 돌아가 모양을 단순화하세요. 대담하고 단순하게 생각해야 합니다.

2. Safari가 여전히 이전 아이콘(또는 글자)을 보여줍니다
Safari는 파비콘 캐싱에 있어서 악명이 높습니다. 브라우저 캐시를 지우는 것만으로는 항상 해결되지 않습니다. 강제로 새로고침하려면 Safari > 설정 > 개인정보 보호 > 웹사이트 데이터 관리로 이동하여 해당 사이트를 찾아 제거해야 할 수도 있습니다. 번거롭지만 Safari가 아이콘을 다시 가져오도록 하는 가장 확실한 방법입니다.

3. 색상이 잘못되었습니다
기억하세요, Safari는 SVG 파일 자체에 정의된 모든 색상을 무시합니다. Safari가 신경 쓰는 유일한 색상은 <link> 태그의 color 속성에서 설정한 색상뿐입니다. 해당 헥스 코드를 다시 확인하세요!

Safari 고정 탭 아이콘을 설정하는 것은 작지만 의미 있는 디테일입니다. 이는 모든 플랫폼에서 사용자 경험을 중요하게 생각한다는 것을 보여주며, 전문적인 파비콘 패키지를 완성합니다. 일단 이 디테일을 보고 나면, 이를 소홀히 한 사이트들이 눈에 거슬리게 되는 그런 요소 중 하나입니다.