모바일 웹사이트의 아이폰용 "홈 화면에 추가" 아이콘 만들기 > 그누4 팁자료실

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

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

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

본문

안녕하세요.
스티브닷입니다. ^^
 
모바일 웹사이트를 운영하는 개인/기업이 점차 늘고 있는데요.
셀프업도 m.selfup.kr이라는 주소로 모바일웹을 서비스하고 있습니다.
 
그런데 모바일웹의 경우 앱과 다르게
홈 화면에서 바로 실행하기 어렵다는 단점이 있는데요.
아이폰의 사파리에서는 이런 불편한 점을 해소하기 위해
모바일 웹사이트를 하나의 앱처럼 홈 화면에 아이콘으로 생성하게 해줍니다.
 
일반 모바일 웹사이트를 아이폰 사파리에서 "홈 화면에 추가"를 통해 아이콘으로 생성하면
아이콘의 그림이 모바일 웹사이트의 캡쳐 화면으로 자동 생성되기 때문에
아이콘만 봤을 때 바로 식별하기가 어렵습니다.
 
그래서 아래와 같은 방법으로 아이콘을 제작한 후 웹서버에 등록해 두면
모바일웹 사용자가 홈화면에 추가했을 때 일반 앱처럼 원하는 아이콘을 표시하도록 설정할 수 있게 됩니다.
 
** 모바일 웹사이트의 아이용 "홈 화면에 추가" 아이콘 만들기
 
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 파일의 배경을 투명으로 저장하면 자동으로 검은색 배경이 적용됩니다.
 
이상으로 아이폰 사용자의 모바일웹 접근성을 더욱 편리하게 해주는 홈 화면 추가용 아이콘 제작법이었습니다...
추천
7
  • 복사

댓글 15개

신비나라 자기소개 아이디로 검색 전체게시물 회원게시물 11.09.14 04:56:04
스티브닷님 좋은 자료 대단히 감사한데요. 지금 첨부이미지가 다 깨졌습니다. 출처링크는 안열리고요^^ 다시 부탁드릴게요. 감사합니다.
느낌좋은날 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 11.09.14 15:58:01
유용하게 써먹을 수 있는 팁이군요 ^^
혹시 안드로이드 기반 폰도 적용할 수 있는 팁이 있다면 알려주세요
카마지존 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 12.04.22 01:10:13
조금 유사한 형태로...

아이폰3g, 아이폰3gs
 <link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/iOS-57.png" />
 
아이패드
 <link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/iOS-72.png" />
 
아이폰4
 <link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/iOS-114.png" />
 

이렇게도 가능합니다. ㅋ
카마지존 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 12.04.22 02:18:26
<link rel="apple-touch-icon" href="/favicon.png" /> //사이즈는 72x72

추가로...

방금 적용해보면서 계속해서 안되길래. 끙끙되다가 문제를 찾았습니다.

.htaccess 를 이용해서 외부링크 차단시키게 설정해놓으면
http://www.test.com/apple-touch-icon.png
위에 주소를 불러오질 못해서 아이콘이 적용이 안되더군요;;;으~

외부링크 차단내용중에 png 파일은 외부링크가 가능하도록 해두면....ㅋㅋ
티알아 자기소개 아이디로 검색 전체게시물 회원게시물 12.09.25 11:32:58
// 접속 핸드폰 정보
 var userAgent = navigator.userAgent.toLowerCase();
 // 모바일 홈페이지 바로가기 링크 생성
 if(userAgent.match('iphone')) {
    document.write('<link rel="apple-touch-icon" href="/mobile/image/apple-touch-icon.png" />')
} else if(userAgent.match('ipad')) {
    document.write('<link rel="apple-touch-icon" sizes="72*72" href="/mobile/image/apple-touch-icon-ipad.png" />')
 } else if(userAgent.match('ipod')) {
    document.write('<link rel="apple-touch-icon" href="/mobile/image/apple-touch-icon.png" />') 
 } else if(userAgent.match('android')) {
    document.write('<link rel="shortcut icon" href="/mobile/image/favicon.ico" />')
} else {
    document.write('<link rel="shortcut icon" href="/mobile/image/favicon.ico" />')
}

// 아이폰은 57×57 , 아이패드는 72×72, 아이폰4는 114×114
// 114×114 이미지로 만들어두면 아이폰에서 자동으로 크기 리사이즈
// precomposed 아이콘 이미지는 안드로이드의 Add to Home Screen 지원
// 사이즈는 48×48
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로