티스토리 뷰

작년 영국의 파이낸셜타임즈는 애플의 앱스토어의 폐쇄성과 수익 분배 이슈에 대응하기 위해서 HTML5를 활용한 웹 앱을 도입했다고 합니다. 
그래서 빠른 업데이트가 가능하고 기존의 웹사이트와 통합해서 관리할 수 있게 되었고, 
가입자도  5개월만에 1백만 접속자가 웹앱에 접속함으로 인해 성공한 사례로 회자되고 있습니다. 

실제로 아이폰으로 파이낸셜타임즈(http://app.ft.com)에 접속해 보면 "홈 화면 추가"를 통해 Web App으로 등록을 유도하도록 잘 설명되어 있습니다.
처음 등록한 후, 일반 앱처럼 실행되고 로컬 저장소도 사용하는 것을 보면서 잘 만들었다는 생각이 들기도 했습니다. 

아직 HTML5가 보편화되지는 않았지만 향후 발전 가능성에 대해서는 잘 보여준 사례라고 할 수 있을 것 같습니다.
실제로 파이낸셜타임즈는 안드로이드에서는 앱 형태로 배포하면서 애플과는 다른 형태로 서비스 하고 있습니다. 
물론 안드로이드도 외부만 앱일뿐 내부영역은 똑같이 모바일 웹으로 구성하고 있습니다.


그럼.. 아이폰 Web App이 가능하게 한 HTML5의 요소는 어떤 것일까요? 

바로 <head> 영역에 다음의 4가지 태그를 추가함으로써 가능하게 됩니다.

<link rel="apple-touch-icon" href="/image/icon.png" />

이 부분은 웹 앱으로 등록할 아이콘을 설정하는 것입니다. 
아이콘 사이즈는 기종에 따라 조금씩 다르기는 하지만 현재 아이폰 4에 맞추어 114 X 114로 저장하면 리사이징 해준다고 합니다. 

<link rel="apple-touch-startup-image" href="/image/startup.png" />

웹 앱을 실행할 때, 초기 화면을 띄울 수 있도록 지정하는 것입니다. 
마치 일반 앱처럼 로딩화면을 적용할 수 있습니다. 

<meta name="apple-mobile-web-app-capable" content="yes" />

웹 앱으로 실행할 때, 일반 앱처럼 보이도록 사파리 브라우드의 UI를 안나타게 해주는 역할을 합니다. 

<meta name-"apple-mobile-web-app-status-bar-style" content="black" /> 

기본 회색으로 되어 있는 상태바의 색상을 지정할 수 있습니다. 
이를 통해 보여줄 컨텐츠와 적절하게 맞출 수 있게 됩니다.  


'XML Developer > HTML5' 카테고리의 다른 글

아이폰용 Web App을 만들기 위한 HTML5 요소들  (0) 2012.02.23
HTML video 태그의 DOM 지원~  (0) 2012.02.07
HTML5를 활용한 블로그 BGM (?) 테스트~  (0) 2011.12.02
HTML5 audio 태그  (0) 2011.02.16
HTML5 video 태그  (2) 2011.02.02
HTML5에 추가된 요소들  (2) 2011.01.20
댓글
댓글쓰기 폼