[iOS]홈화면에 원하는 아이콘으로 북마크 만들기![iOS]홈화면에 원하는 아이콘으로 북마크 만들기!

Posted at 2012. 3. 22. 06:00 | Posted in 유용한 팁/정보/스마트시대
휴.. 안녕하세요~
근 이틀간 블로그를 놓고 있었습니다..

오늘 알려드릴 팁은 순정 아이폰 사용자들에게 유용한 팁인데..
홈화면에 원하는 북마크를 만드는데 원하는 아이콘으로 만드는 법에 대해 알아보겠습니다.

탈옥 아이폰이라면 쉽게 만들 수 있겠지만.. 순정에서는 약간의 편법을 사용하여야 합니다.

iOS 스타일의 아이콘 만들기

자.. 그럼 일단 아이콘을 만들어봅시다.

아이콘은 [아이폰 아이콘 생성기] 로 쉽게 만들 수 있는데 그림 파일을 올리고 스타일을 선택하기만 하면 자동으로 만들어줍니다.



UPLOAD를 누르고 이미지를 선택합니다.
사이즈는 제한 없으며 정사각형이 좋습니다.(256x256 등..)


아이콘 스타일, 크기 등의 세부적인 설정을 하고 CONTINUE 버튼을 누릅니다.

 


그 다음 Click here to download the icon 버튼을 눌러 생성된 아이콘을 다운로드 받습니다.

스크립트 작성하기 

이제 스크립트를 작성할 차례입니다.

우선 방금 생성한 아이콘을 블로그 등의 웹페이지에 업로드합니다.
그 다음 아래의 스크립트를 작성하면 되는데..

data:text/html;charset=US-ASCII,<html><head><title>북마크 이름</title><meta name="viewport" content="width=device-width"/><link rel="apple-touch-icon" href="아이콘 경로"/><script type="text/javascript">document.location.replace("페이지 경로");</script></head><body>북마크 이름</body></html>

북마크 이름 부분에는 사이트 제목을 넣어주시고 아이콘 경로 부분에는 업로드한 아이콘 이미지 파일의 경로를 넣어주시고 페이지 경로에는 추가하기 원하는 페이지의 경로를 입력합시다.

만약 아이콘 생성시에 이미 효과를 넣어줘서 기본 반사광 효과를 넣지 않으려면 apple-touch-icon 라고 되어 있는 부분을 apple-touch-icon-precomposed로 해주시면 됩니다.

저는 예를 들어 이렇게 작성하였습니다. 

data:text/html;charset=US-ASCII,<html><head><title>MG Note</title><meta name="viewport" content="width=device-width"/><link rel="apple-touch-icon" href="http://mgaver.co.kr/icon.png"/><script type="text/javascript">document.location.replace("http://blog.mgaver.co.kr");</script></head><body>MG Note</body></html>  

작성이 완료 되었다면 아이폰에서 입력하기 위해 메일 등으로 위 스크립트를 보냅니다.


iOS 기기에 추가하기



이제 아이폰의 사파리를 통해 메일로 들어가서 위의 스크립트를 복사 해둡니다.


다음  아이폰에서 설정 -> Safari로 들어갑니다.
그 다음 JavaScript라고 되어있는 부분을 OFF로 해줍니다.


완료되었다면 이제 아까 복사한 스크립트를 사파리 주소창에 입력합니다.


다음 홈 화면에 추가를 누릅니다.


왼쪽에 아까 제작한 아이콘이 나타나는걸 확인하실 수 있습니다.
추가를 누릅니다.


아이콘이 홈 화면에 추가되었습니다!
이제 다시 설정에서 Safari로 들어가서 자바스크립트를 켜주시고 생성된 아이콘을 눌러보시면 원하는 페이지로 이동하는걸 확인하실 수 있습니다. 
//