투명 배경의 PNG 파일을 Apple Touch Icon으로 업로드했다고 가정해보자. 데스크탑에서는 깔끔하게 보인다. 그런데 아이폰에서 사파리로 확인해보면 로고 주변에 하얀 사각형이 나타난다. 마치 흰 종이 위에 스티커를 붙인 것처럼 보인다.

나도 겪어본 일이다. 모든 걸 제대로 했다고 생각했는데도 이런 현상이 발생하니 정말 답답하다. 하지만 해결 방법은 생각보다 간단하며, 아이콘을 다시 디자인할 필요도 없다.

빠른 해결책: 올바른 HTML 태그 추가하기

Apple Touch Icon 투명 배경이 하얀 사각형으로 표시되는 가장 흔한 이유는 iOS 사파리가 기본 아이콘으로 대체(fallback)하기 때문이다. 아마도 rel='apple-touch-icon' 태그가 누락되었거나, 잘못된 크기를 사용하고 있을 가능성이 높다.

필요한 정확한 HTML은 다음과 같다:

<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon-180x180.png'>

한 줄이면 끝이다. sizes='180x180' 속성은 iOS에게 이 특정 파일을 사용하라고 지시한다. 이 속성이 없으면 사파리가 아이콘을 무시하고 흰색 플레이스홀더를 렌더링할 수 있다.

왜 180x180인가?

Apple은 최신 아이폰(iPhone 6s 이상)에 180x180 픽셀을 권장한다. 구형 기기에서는 문제없이 대체된다. 여러 크기를 생성해야 한다면 Apple Touch Icon 크기 가이드를 참고하라. 하지만 솔직히 180x180만으로도 거의 모든 상황을 커버할 수 있다.

근본 원인: 투명도가 깨지는 이유

올바른 HTML을 사용했음에도 여전히 흰색 배경이 보일 수 있다. 실제 원인은 다음 세 가지다:

PNG 투명도 확인 방법

브라우저에서 아이콘을 열어보자. 체커보드 패턴이 보이면 투명도가 정상이다. 단색 흰색 또는 회색 배경이 보이면 PNG에 문제가 있는 것이다. 디자인 도구에서 '투명도' 옵션을 체크하고 다시 내보내라.

예방 팁: 흰색 사각형을 영원히 없애는 방법

한 번 수정한 후에 다시 깨지지 않게 하려면, 내가 검증한 접근 방식을 따르라:

Apple Touch Icon에 SVG 사용하기 (가능하다)

iOS 14 이상은 Apple Touch Icon에 SVG를 지원한다. SVG는 투명도를 기본적으로 처리하므로 흰색 사각형이나 알파 채널 문제가 없다. 태그는 다음과 같다:

<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.svg' type='image/svg+xml'>

나는 개인 사이트에서 6개월 전에 SVG로 전환했다. 문제가 전혀 없었다. 유일한 단점은 구형 iOS 버전(iOS 13 이하)이 SVG를 무시한다는 점이다. PNG 대체 파일을 유지하라.

캐시 무효화: 파일 이름 변경하기

아이콘을 업데이트할 때마다 파일 이름을 변경하라. apple-touch-icon.png 대신 apple-touch-icon-v2.png를 사용하라. 이렇게 하면 iOS가 캐시된 흰색 배경 버전 대신 새 파일을 다운로드하도록 강제한다.

실제 기기에서 테스트하기

시뮬레이터를 믿지 마라. 사이트를 아이폰 홈 화면에 추가하고 아이콘을 확인하라. 흰색 사각형이 보이면 즉시 알 수 있다. 전체 체크리스트는 Apple Touch Icon 완전 설정 가이드를 참고하라.

'precomposed' 속성은?

오래된 튜토리얼에서 rel='apple-touch-icon-precomposed'를 추천하는 것을 볼 수 있다. 이는 iOS 6 이하에서 아이콘에 광택 효과를 추가하기 위한 것이었다. 최신 iOS는 이를 무시한다. 사용하지 마라 — 쓸모없는 코드일 뿐이다.

흰색 사각형 문제는 거의 항상 태그 누락, 캐시된 이전 아이콘, 또는 투명하지 않은 PNG 때문이다. 이 세 가지를 수정하면 아이콘이 모든 아이폰에서 네이티브처럼 보일 것이다.