[펌]모바일 웹사이트의 아이폰용 "홈 화면에 추가" 아이콘 만들기

출처 : 링크 참조
 http://www.selfup.kr/work_it/6 (18)

 

** 모바일 웹사이트의 아이용 "홈 화면에 추가" 아이콘 만들기

 

1. 먼저, 포토샵에서 아래와 같은 설정값으로 새 파일을 만듭니다.

- 사이즈 : 96 x 96 (px)

- 배경 : 원하는 색 또는 투명

 

2. 아이콘 이미지를 적절하게 만든 후 파일을 아래와 같이 저장합니다.

- 파일명 : apple-touch-icon.png

- 주의 1. 반드시 위와 같은 파일명이어야 하고, 확장자 또는 위와 같이 PNG로 저장합니다.

- 비고 1. 파일명을 apple-touch-icon-precomposed.png 로 저장할 수도 있습니다만, 이렇게 저장할 경우 아이폰 아이콘의 특징인 상하 반사 효과가 적용되지 않습니다. (아래 사진 참조)

 

3. 저장한 파일을 웹서버의 root 디렉토리에 업로드하면 끝입니다. 쉽죠??

 

이제 셀프업 사이트를 기준으로 아이폰 사용자가 모바일웹을 홈 화면에 추가하는 시나리오를 설명 드립니다.

A) 사용자가 모바일웹을 방문 후 "홈 화면에 추가"를 탭합니다.

B) "홈에 추가" 화면의 좌측에 웹서버에 저장된 apple-touch-icon.png를 불러와 보여주며, 이름을 사용자에 맞게 변경할 수 있습니다.

C) 홈 화면에 아래 그림과 같이, 일반 앱처럼 아이콘이 이쁘게 생성됩니다.

- 비고 1. 테두리는 포토샵에서 round 처리 하지 않아도 아이폰에서 자동으로 처리해 줍니다.

위 그림을 보면 검은색 배경과 하얀색 배경이 있죠?

샘플로 2가지로 만들어 본 아이콘인데,

위 1번에서 png 파일의 배경을 투명으로 저장하면 자동으로 검은색 배경이 적용됩니다.

 

이상으로 아이폰 사용자의 모바일웹 접근성을 더욱 편리하게 해주는 홈 화면 추가용 아이콘 제작법이었습니다...

(타 커뮤니티에 직접 올린 글 복사해 옵니다..모바일웹 운영자분들께 도움이 되길 바랍니다.)