| Tweet | 공유하기 |
사용자가 앱스토어에서 처음 접하는 매체가 앱 아이콘이니까요. 그래서 앱 아이콘 디자인에 신경을 많이 쓰게 되는데요, 아이콘 디자인 안을 PC에서 볼 때와 실제로 아이폰에 올려서 보는 것은 엄청난 차이가 납니다.
배경에 따른 영향도 있고, 주변 아이콘과의 차별성이나 색상 문제도 발생합니다.
그래서 앱 아이콘 디자인을 할 때 실제 아이폰에 넣어서 체크를 합니다.
하지만 방법을 몰라 아이폰에 아이콘을 못 넣는 경우도 있겠죠?
그래서 본 글을 통해 아이폰에 앱 아이콘을 넣는 방법을 알아보겠습니다.
방법을 한 마디로 설명하자면, '웹페이지의 북마크' 입니다.
즉, 웹페이지에 아이콘을 지정해놓고 아이폰에서 '홈 화면에 추가' 하는거죠.
이를 위해 필요한 재료는 웹호스팅, 아이콘, html 페이지 입니다.
우선 웹호스팅을 준비하겠습니다.
무려 30분간 검색 끝에 찾아낸 곳은 닷홈(https://dothome.co.kr/web/free/index.php) 입니다.
무료이고 신청 즉시 만들어집니다. 활발한 운영이 없을 시 정지되거나 하는건 아직 모르겠네요.
회원가입하시고 '공간만 신청하기' 하시면 됩니다.
다음 재료는 아이콘입니다.
앱스토어 등록 시 사용될 512x512 픽셀의 아이콘 이미지를 만듭니다. 라운드처리는 자동으로 되니 안하셔도 됩니다. 미리 라운드 처리 하시면 라운드 부분이 어색하게 될 가능성이 있습니다.
마지막 재료인 html 페이지를 만듭니다.
head 와 head 태그 사이에 메타태그로 아이콘 이미지를 지정합니다.
<link rel="apple-touch-icon" href="icon01.png">
아이콘에 광원효과를 없애시려면 아래와 같이 apple-touch-icon-precomposed 를 이용하시면 됩니다.
<link rel="apple-touch-icon-precomposed" href="icon01.png">
타이틀 태그가 이름이 됩니다.
아래는 예제 html 소스입니다.
--------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon-precomposed" href="icon01.png">
<title>아이콘01</title>
</head >
<body>
<h1>아이콘 테스트입니다.</h1>
</body>
</html>
--------------------------------------------------------
이렇게 만든 아이콘 png이미지와 html 파일을 서버에 올려준 다음, 아이폰의 Safari 브라우저에서 해당 페이지를 엽니다.
닷홈의 경우 http://아이디.dothome.co.kr/파일명 이 되겠네요.
그리고는 해당 페이지에서 '홈 화면에 추가' 버튼을 눌러주면 바탕화면에 앱과 같이 아이콘이 추가됩니다.
이런 식으로 여러 페이지와 아이콘을 업로드 해서 홈 화면에 추가하시면 아이콘들을 테스트 할 수 있습니다.
"웹+모바일" 카테고리의 다른 글
- 아이폰 앱 아이콘 디자인 테스트 방법 (2)2011/06/01
- 플래시 CS5 로 아이폰 앱 개발하기 가이드 문서 (0)2011/04/07
- 웹디자인 북마크 공유 (0)2011/02/25
- 포토샵에서 파일이 두 개 이상 안 열릴때 해결 방법 (0)2010/08/09
- 아이튠즈 설정 다른 PC로 옮기기(윈도우XP 에서 ... (1)2010/08/02
* 본 글은 양씨닷컴 블로그(http://www.yangc.com/blog)에서 작성되었습니다.
* 본 글의 저작권은 양씨닷컴(http://www.yangc.com)에 있습니다.
* 출처를 밝히지 않는 무단배포 및 수정을 금합니다.
