개요
픽블엽을 운영하던 중 이미지와 같은 에러가 났다는 제보를 받았다.
에러 메시지를 보니 apple-touch-icon.png라는 정적 리소스를 찾지 못했다는 의미였다.
사실 픽블엽을 만들 때 사실 모바일 최적화는 아직 신경 쓰지 않았던 터라... 이 제보를 받고 잠깐 멘붕이 왔다😅
Apple Touch Icon
Apple Touch Icon은 iOS 기기에서 웹사이트를 홈 화면에 추가할 때 표시되는 아이콘이다.
iOS기기(특히 Safari)는 자동으로 사이트 루트(/)에서 /apple-touch-icon.png를 요청하며 이 파일이 존재하지 않으면, 자동으로 404 요청이 발생하게 된다.
즉, 유저 입장에선 직접 보이진 않지만 iOS 기기가 항상 찾으려는 기본 이미지다.
권장 크기
| 사이즈(px) | 용도 |
|---|---|
| 180x180 | 최신 iPhone (Retina) |
| 167x167 | iPad Pro |
| 152x152 | iPad Retina |
| 120x120 | iPhone Retina (iPhone 4 이후) |
| 76x76 | 구형 iPad |
| 72x72 | 구형 iPad |
| 60x60 | 구형 iPhone |
| 57x57 | iPhone 3 및 이전 모델 |
대응
간단 대응
가장 기본적인 방식은 static 폴더 또는 루트에 apple-touch-icon.png 파일을 두고, HTML <head>에 다음 한 줄을 추가하는 것이다.
<link rel="apple-touch-icon" href="/apple-touch-icon.png">해당 한 줄로 Safari나 iOS에서 발생하는 404 요청을 막을 수 있다.
확장 대응
좀 더 세밀하게 대응하고 싶다면, 각 디바이스에 맞는 아이콘을 사이즈별로 준비하고 아래와 같이 명시해줄 수 있다:
<head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
</head>이렇게 하면 사용자의 디바이스에 맞는 해상도의 아이콘이 자동으로 적용된다.
웹앱으로 홈 화면에 추가했을 때 훨씬 자연스럽고 깔끔한 UX를 제공할 수 있다.
결론
이번 경험을 통해 모바일 환경의 기본적인 대응도 중요하다는 걸 체감했다.
사실 처음 개인 프로젝트를 운영해보는 입장이라 이 부분은 신경 쓰지 못했는데, 왜 개발자들이 "자기만의 서비스를 꼭 한번 운영해보라"는 얘기를 하는지 몸소 느꼈다.
다행이 픽블엽은 꽤 많은 유저들이 이용해주는 서비스다보니 이런 제보도 받을 수 있게 됐다고 생각한다.
이런 고마운 유저들에게 좀 더 UX적으로 쾌적한 서비스를 제공하는 노력이 필요할 것 같다.
