서버 액세스 로그를 분석하다가 apple-touch-icon-precomposed.png라는 파일에서 수백 개의 404 에러가 발생하는 것을 보고 의아해한 적이 있다면, 여러분은 웹 개발의 타임캡슐을 발견한 것입니다.
Apple Touch Icon Precomposed 완벽 설명
이 파일이 존재하는 이유를 이해하려면 초기 iPhone 시절로 거슬러 올라가야 합니다. iOS 7 이전의 Apple 디자인 언어는 스큐어모피즘(사물의 실제 질감을 모방하는 디자인)이 지배적이었습니다. 사용자가 웹사이트를 홈 화면에 저장하면, iOS는 자동으로 아이콘에 '유리 같은 광택', 둥근 모서리, 그림자 효과를 적용했습니다.
Apple은 그것이 디자인을 돋보이게 한다고 생각했지만, 디자이너들의 생각은 달랐습니다.
광택 버튼의 시대
몇 주에 걸쳐 평면적이고 미니멀한 브랜드 로고를 완성했다고 상상해 보세요. 사용자가 사이트를 홈 화면에 고정하는 순간, iOS는 그 위에 두껍고 반짝이는 젤리 같은 효과를 덮어씌워 버립니다. Stripe나 GitHub 같은 브랜드는 자신들의 시각적 정체성을 완전히 망가뜨리는 이 효과를 매우 싫어했습니다.
그래서 Apple은 우회 방법인 precomposed 태그를 도입했습니다. 파일 이름을 apple-touch-icon-precomposed.png로 지정하거나 해당 HTML 링크를 사용함으로써, iOS에 "내 아이콘에 손대지 마세요. 이미 디자인을 마쳤습니다"라고 명시적으로 알릴 수 있었습니다.
Precomposed 태그의 작동 방식
구현은 간단했습니다. 문서의 head에 특정 링크 태그를 추가하기만 하면 되었습니다.
<!-- 레거시 precomposed 방식 -->
<link rel='apple-touch-icon-precomposed' href='/apple-touch-icon-precomposed.png'>구형 iOS 기기가 사이트를 저장할 때, 먼저 precomposed 버전을 요청했습니다. 이 파일을 찾으면 아이콘은 디자인한 그대로 유지되었습니다. 만약 표준 apple-touch-icon.png만 찾았다면 광택 필터가 적용되었습니다.
2026년에 이 태그를 버려야 하는 이유
제 확고한 의견은 이렇습니다. 오늘 당장 코드베이스에서 precomposed 아이콘과 관련된 모든 참조를 완전히 삭제해야 합니다. Apple은 10년도 더 전인 iOS 7에서 광택 효과를 폐기했습니다. 최신 iOS 기기는 아이콘의 내부 스타일을 절대 변경하지 않습니다(둥근 모서리는 여전히 강제 적용되지만요).
- HTML을 비대하게 만듭니다: 단 1바이트도 중요합니다. 죽은 링크 태그를 제공하면 파싱 속도만 느려집니다.
- 404 에러를 유발합니다: 오래된 크롤러와 스크립트가 여전히 이 파일을 찾으며 로그를 어지럽힙니다. (로그 노이즈에 지쳤다면 파비콘 404 에러 수정 가이드를 확인하세요).
- 불필요한 중복입니다: 표준 Apple Touch Icon만으로도 모든 최신 기기에서 완벽하게 작동합니다.
2026년의 올바른 설정은 다음과 같아야 합니다:
<!-- 현대적이고 올바른 방식 -->
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>레거시 코드 없이 현재의 iOS 요구 사항을 충족하는 깔끔하고 현대적인 아이콘을 생성해야 한다면, Mzu favicondl을 사용하세요. 오늘날의 웹에 정확히 필요한 파일만 출력합니다. 현재 iOS 요구 사항에 대해 더 깊이 알아보려면 Apple Touch Icon 설정 가이드를 읽어보세요.
2012년의 코드를 계속 끌어안고 있지 마세요. head 태그를 정리하고, precomposed 접미사를 버리고, 한결 깨끗해진 서버 로그를 즐기시기 바랍니다.