티스토리 뷰
작년 영국의 파이낸셜타임즈는 애플의 앱스토어의 폐쇄성과 수익 분배 이슈에 대응하기 위해서 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" />
기본 회색으로 되어 있는 상태바의 색상을 지정할 수 있습니다.
이를 통해 보여줄 컨텐츠와 적절하게 맞출 수 있게 됩니다.
그래서 빠른 업데이트가 가능하고 기존의 웹사이트와 통합해서 관리할 수 있게 되었고,
가입자도 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' 카테고리의 다른 글
| 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 |
댓글