iOS 웹클립에 관한 팁

매니저인 Patrick이 휴가 가면서 웹사이트 링크를 메일로 보내주고 같습니다.
거기에는 iOS에서 사용되는 WebClip 에 대한 소개글이 있더라구요.

imore.com이라는 사이트인데 여러가지 개발 관련 팁 정보가 많이 있는 곳 같아요.

WebClip에 대한 내용은 이미 알고 있었지만 이렇게 따로 정리 해 두면 나중에 좀 더 도움이 될 수 있을 것 같아서 정리해 두기로 했어요.

그리고 외국 동료들이 알려주는 웹 싸이트는 네이버등 한국 검색엔진을 통해서 얻어지는 정보 이외에 추가적으로 정보를 얻을 수 있는 source가 될 수 있더라구요.

좀 더 풍부한 정보 소스를 확보 할 수 있는 잇점이 있어요.

(이 글을 읽는 분들에게도 도움이 되시길 바래요)

============== o ======= o =========

Ninja tip: How to create a custom iPhone/iPad home screen icon for your website

By Georgia, Friday, Nov 26, 2010 at 2:54 pm

Add to Homescreen 을 눌렀을 때 iPhone, iPod touch, iPad 에 웹사이트의 아이콘이 만들어서 보여지는데 관심 있으세요? 방문자들이 당신의 웹 사이트의 WebClip을 그들의 홈 스크린에 추가해서 볼 수가 있습니다. 그들은 그것을 친구들한테 보여 주겠죠? 그 친구들도 홈스크린에 웹 클릭을 추가할거고 여러분의 웹사이트는 구글 Page ranks에서 보여질 겁니다.

올해에 애플이 아이패드와 새로운 Retina Display 해상도를 선보였죠? 그러면 여러분은 더 큰 사이즈의 아이콘을 준비하셔야 할 겁니다.

• 120X120 사이즈의 아이콘이 iPad와 아이폰 4에 알맞는 아이콘 이미지 크기 입니다. 이 크기의 아이콘을 만드세요.
• 테두리에 둥근 처리 하는 것은 걱정하지 마세요. 애플이 자동적으로 해 줄겁니다. 그리고 손톱 모양의 shiny 효과도 자동적으로 해 줄거구요.

아이콘은 아래처럼 될 겁니다.

•  근사한 아이콘을 만들고 난 후 이것의 이름을 apple-touch-icon.png 로 명명하세요.
•  이제 이것을 여러분 웹사이트의 root 디렉토리에 업로드 하세요. 아마 아래와 같이 경로가 되겠죠.
http://www.yoursite.com/apple-touch-icon.png

이제 됐습니다. 아주 쉽죠?

이제 방문자가 아이폰이나 아이팟 터치 혹은 아이패드로 여러분의 사이트를 보다가 action 버튼(iOS 4.2 이하의 버전에서는  the "+" button 임)을 누르고 Add to Home Screen을 선택하게 될 겁니다. 그러면 방문자의 앱 목록에 여러분 사이트의 웹클립이 생성되겠죠. 이제 그 웹클립 아이콘만 누르면 한번에 여러분 사이트를 방문할 수 있습니다. 그러면 여러분 사이트는 더 많은 방문자를 기록하겠죠. 이 간단하고 소박한 기능을 절대 평가 절하하지 마세요. 

Bonus tip : 여러분 사이트에 custom icon을 생성하지 않으면 애플은 그 사이트의 페이지에 대한 screenshot으로 아이콘을 만들겁니다. 그 페이지는 Add to Home Screen을 할 때 오픈했던 페이지가 될겁니다.

UPDATE: Update : Marc Edwards는 Campaign Monitor 에서 Jesse Dodd's article의 아티클에대해 다음단계로 웹 아이콘을 어떻게 생성하는지에 대해 알려 주었습니다.

나는 각 iOS 기계들의 해상도에 맞게 3개의 아이콘 이미지를 만들었습니다. iPhone 3G/3GS 에 대해서는 163dip를 iPad에 대해서는 132dpi를 그리고 iPhone4에 대해서는 326dpi 이미지를 만들었습니다.

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/link/to/iOS-57px.png" />
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/link/to/iOS-72px.png" />
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/link/to/iOS-114px.png" />

위의 코드를 보시면 제가 apple-touch-icon-precomposed를 사용하신 것을 보실 수 있으실 거예요. -precomposed를 붙이면 iOS에서 자동적으로 만들어 지는 손톱모양의 shiny 효과와 코너 round 효과를 보여주지 않도록 할 겁니다. 만약 이 효과를 적용하고 싶으시면 이 부분을 빼면 됩니다. 그러면 여러분은 그냥 평면 이미지만 제공해도 iOS에서 자동적으로 처리를 해 주겠죠. 여러분이 직접 효과를 넣어서 더 예쁘게 하고 싶으시면 -precomposed 부분을 넣으시면 되구요.

더 자세한 것을 알고 싶으시면 전체 아티클을 읽어 보세요.

이제 방법을 아셨나요? 질문이 있으시면 댓글로 남겨 주세요. 만약 여러분 사이트에 훌륭한 새 아이콘이 생겼다면 저희에게 알려 주세요. 저희도 체크해 보게요.

Tips of the day 코너는 초보자부터 숙련자까지의 개발자들에게 도움이 되는 내용을 전해 드립니다. 이 팁을 이미 알고 계셨더면 다른 친구들에게 도움이 될 수 있도록 링크를 알려 주세요. 만약에 여러분만의 팁이 있으시다면 댓글로 알려주시거나 dailytips@tipb.com 으로 내용을 보내 주세요. (아주 훌륭하고 이전에 알려지지 않은 팁이라면 상품을 드립니다.)