애플에서 만든 아이폰에 운영체제인 IOS는 웹앱기능을 가지고 있으니 편리하게 사용해 보자.
모바일 웹(Web)을 앱(App)처럼 보이게 만들것이다.
우선 프로그래머가 html에 작업을 해주어야 하는것이 있다
꼭 안해도 되지만 하면 보기에 아주 좋아진다.
아래 4개가 그것이다.
1. 애플터치아이콘을 만들어준다. (앱과 같은 아이콘 자동으로 모서리를 둥글게 처리한다. 72x72 사이즈 png 파일)
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
이미지 크기는 아이폰 57x57, 아이폰4 72x72, 아이패드 114x114
자동으로 모서리를 둥글게 처리하지 않을경우 "apple-touch-icon-precomposed" 옵션 사용
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon.png" />
2. 애플터치시작이미지를 만들어준다. (url 요청페이지를 불러오기전 보여주고 있을 이미지다 640x920 사이즈 png 파일)
<link rel="apple-touch-startup-image" href="/images/startup.png" />
이미지 크기는 아이폰 320x468 , 아이폰4 640x920, 아이패드 768x1004
3. url입력란을 보이지 않게 처리한다. (yes = 안보임, no = 보임) 안보이게 해야 어플같다.
<meta name="apple-mobile-web-app-capable" content="yes" />
4. 상태바를 설정한다. (default = 회색, black = 검정, black-translucent = 반투명) 안하는것이 깔끔한것 같다.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
이제 설정이 끝났으면, 혹은 설정하지 않아도 상관없다
자동으로 화면을 캡처해서 아이콘을 만들어주기 때문에...
아이폰에 사파리로 들어가자~
웹앱으로 하고 싶은 웹페이지에서 하단에 중앙(이미지에 붉은배경으로표시) 아이콘을 클릭
"홈 화면에 추가" 클릭
준비된 아이콘이 있으면 그게 보이고 아니면 캡처된 화면이 아이콘으로 보이게 된다.
이름을 지정하고 추가 클릭
다음과 같은 웹앱이 만들어진다. 이제 아이콘을 클릭해보자!
위에 소스에서 말한 애플터치시작이미지(startup.png)가 먼저 보여진다.
이건 허접하게 만들었지만 보통 분위기 있게 만든다. ㅎㅎㅎ
url입력란이 없어서 앱처럼 느껴진다.
설정에 따라 입력란이 보일수도 있고, 상단 상태바도 블랙,반투명으로 변경이 된다.
내가 알기론 이런건 하이브리드앱이라고 하는것 같던데 ㅋㅋㅋ
IOS가 좋긴 좋구나~