반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

iOS 웹클립에 관한 팁

2012. 6. 25. 05:51 | Posted by 솔웅


매니저인 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 , 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 EdwardsCampaign 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 으로 내용을 보내 주세요. (아주 훌륭하고 이전에 알려지지 않은 팁이라면 상품을 드립니다.)



반응형

Comment