웹사이트에서 자신만의 개성을 나타내는 방법은 다양합니다. 그 중에 하나는 파비콘1입니다. 파비콘은 Favorite Icon의 줄인 말로 IE5 부터 사용 되어온 역사와 전통을 자랑하는 요소입니다. 파비콘은 ico 파일로 구성되어 있으며, 티스토리에서는 관리자 페이지에서 이를 변경하는 것이 가능합니다.
티스토리 파비콘 관련 관리자 페이지
파비콘은 기본적으로 ico 파일을 이용하며, 16x16이라는 아주 낮은 해상도의 이미지를 사용합니다. 그래서 모바일 기기에서는 일종의 아이콘 형태로 홈화면에 위치하게 되는데, 그러기 위해서는 해상도가 턱없이 부족하게 됩니다. iOS가 처음 개발 되었을때는 잡스가 네이티브 앱 구동용 sdk2를 공개하지 않으려 했습니다. 왜냐면 웹앱이 미래라고 봤고 html기술이 발달하면 네이티브 앱을 대체할수 있었다고 믿었기에 iOS 초기 버전은 웹 클립만 포함이 된 채로 나왔습니다. 하지만 필 쉴러의 끈질긴 설득으로 결국 sdk가 나오게 되었습니다. 페이스 북도 크로스 플랫폼에 웹앱을 고수 해왔지만 제작년에 네이티브 앱으로 갈아탄 것을 보면 웹 언어의 발전과 그에 맞는 하드웨어 성능, 회선속도 등은 아직도 갈길이 멀어 보입니다.
이글루스 파비콘 관련 관리자 페이지
그러나 아직까지 티스토리에서는 웹 클립을 정식 지원하지 않고 있습니다. 옆동네 키베 콜로세움인 이글루스는 정식으로 웹 클립용 아이콘 업로드를 지원하고 있으나, 구형 기기 전용이며, 고 해상도 아이콘은 아직 지원하지 않고 있습니다.
아무튼 이 웹클립은 ico파일을 사용하는 파비콘과는 다르게 매우 고화질의 png파일을 요구합니다. 특히나 레티나 디스플레이 기기가 출현하면서 기존의 아이콘크기의 4배가 되는 초고화질 아이콘을 요구하고 있습니다. 총 만들어야 하는 아이콘은 비 레티나 아이콘, 레티나 아이콘, 패드 아이콘, 레티나 패드 아이콘, 구형 애플/안드로이드 아이콘으로 총 5가지 입니다. 웹클립은 웹 킷을 기반으로 하는 일부 브라우저에서만 지원되는 것으로, iOS와 안드로이드를 제외한 모바일 OS는 파비콘을 가져다 쓰거나 스크린샷을 캡쳐하는 등의 방법을 사용하고 있습니다.
보통 강좌들은 iOS6을 기본으로 하고 있으나, 현재 iOS7 점유율이 압도적으로 높기 때문에 iOS7 아이콘의 크기를 기준으로 합니다. 비 레티나 기기는 공식적으로 iOS7이 올라가지 않았으나, 애플의 iOS 개발자 가이드 라인에서는 비 레티나 기기용으로 60x60 아이콘 사용을 권장하고 있습니다. 레티나 기기는 120x120, 아이패드는 76x75, 레티나 패드는 152x152입니다. 구형 애플기기나 안드로이드 기기는 57x57이나, 파일을 많이 업로드하면 관리하기 귀찮으므로 저는 그냥 60x60아이콘을 가져다 쓰겠습니다.
아이콘을 한 두개도 아니고 하나하나 만드려면 아주 고통스럽기 때문에 스마트하게 파일 하나로 여러개를 만들도록 하겠습니다. 우선 포토샵으로 1024x1024 크기의 아이콘을 만들어 줍니다.
그 다음 makeappicon 으로 접속합니다. makeappicon에서는 파일 하나만 넣으면 자동으로 여러가지 크기의 아이콘을 만들어주므로 아주 유용합니다.
파일을 토스터 위에 끌어다 놓으면 자동으로 변환이 됩니다.
자신의 이 메일 주소를 입력 하면 만들어진 아이콘 파일이 메일로 전송됩니다.
파일을 받아서 iOS7 폴더를 엽니다. 안드로이드 앱 아이콘도 있는데 웹클립 용으로는 쓸 일이 없으니 패스 합니다. 이제 다음과 같은 파일을 관리자 메뉴 > 스킨 파일 업로드에 업로드 합니다.
Icon-60.png, Icon-76.png, Icon-60@2x.png, Icon-76@2x.png
이제 코드를 적을 차례입니다. 웹 클립은 css를 로드 하듯 link 태그로 작동합니다. 다만 relationship 속성 값이 apple-touch-icon으로 나타난다는게 다른 점이라고 보시면 됩니다. 그리고 hypertext reference에는 아이콘의 파일 경로를 입력하게 되어 있고요.
<link rel="apple-touch-icon" href="./images/Icon-60.png"><!-- 비 레티나 -->
<link rel="apple-touch-icon" sizes="76x76" href="./images/Icon-76.png"><!-- 아이패드 -->
<link rel="apple-touch-icon" sizes="120x120" href="./images/Icon-60@2x.png"><!-- 레티나 기기 -->
<link rel="apple-touch-icon" sizes="152x152" href="./images/Icon-76@2x.png"><!-- 레티나 패드 -->
<link rel="apple-touch-icon-precomposed" href="./images/Icon-60.png"><!-- 구형/ 안드로이드 -->
iOS 개발자 가이드를 보면 sizes를 지정하는 아이콘은 구형 iOS 기기에서는 인식을 하지 못한다고 되어 있습니다. 그래서 size지정을 하지 않은 아이콘은 자동으로 구형기기에 만 인식이 됩니다. 구형 기기용 아이콘은 60x60 입니다.
레티나 용 아이콘은 size가 120x120으로 지정이 되며, 아이패드는 76x76, 레티나 패드는 152x152 입니다.
rel 속성 중에는 apple-touch-icon-precomposed가 있습니다. iOS7 이전에 광택이 들어간 아이콘을 쓰던 시절에 광택을 씌우지 않도록 지정하는 속성이 이었습니다. 이는 여전히 구형 애플기기와 안드로이드 기기에서 사용이 가능한 속성입니다.3 사실 안드로이드 기기는 굳이 정하지 않아도 자체 브라우저에서 quirks 모드로 아이콘을 끌어오긴 하지만 지정해주는게 낫지 않나 싶어서 곁들여서 적는겁니다.
이 link 태그를 head 안에 넣어주면 끝 입니다.
이제 정상 작동 하는지 확인해보겠습니다. 제 휴대폰은 아이폰4이고, iOS7에서 구동 중입니다. 책갈피를 열고 즐겨찾기 추가를 하니
별써 아이콘이 적용된 것을 확인 할 수 있습니다. 이 방법을 이용하면 매우 고화질 이미지를 파비콘이나 스크린 샷 대신에 모바일 기기의 홈 화면에 추가할 수 있게 됩니다.
이제 자신만의 개성 있는 웹 클립 아이콘을 블로그에 적용해보세요 ^^
