★ html5 모바일웹 ★ HTML5 on Mobile : 왜 HTML5 가 모바일에서 중요한가

HTML5 를 이용한 많은 Web Application(웹 어플리케이션, 웹 앱)들 이 만들어 지고 있지만, 데스크탑 환경에선 아직 이슈가 남아있습니다. 현재 브라우저 점유율에서 가장 큰 위치를 차지하고 있는 Internet Explorer ( 6.0 ~ 8.0 ) 가 아직 HTML5 지원이 미진하기 때문이죠. 이 때문에 HTML5 웹 어플리케이션들은 Firefox , Chrome , Safari 같은 타 브라우저를 통해서만 확인이 가능합니다. 대다수의 국내 비 IT 유저들이 IE 를 사용하고 있기에 수많은 HTML5 데모 사이트들은 IT 유저들만 공감하는 사이트들로 보여지고 있습니다.

하지만 모바일 환경으로 오면 얘기가 달라집니다. 현재 모바일 웹 트래픽의 대부분을 차지하고 있는 것이 iPhone, Android 이고 이 두개의 플랫폼이 HTML5 를 잘 지원하고 있는 WebKit 기반의 브라우저를 사용하기 때문입니다.

왜 HTML5 가 모바일에서 중요한가 ?

현재 스마트폰 시장은 서로 다른 OS를 가진 기기들이 다투고 있습니다. 애플의 iOS , 구글의 안드로이드, 블랙베리 OS , 노키아 심비안 & Maemo, Windows Mobile 과 연말에 출시될 Windows Phone 7 까지.. 데스크탑 OS 환경과는 사뭇 다르죠. 각각의 OS 에 맞는 어플리케이션 ( Native App , 네이티브 앱 ) 을 작성하기 위해서는 전혀 다른 언어/플랫폼들을 이해해야 합니다. 대표적으로 애플 iOS 의 경우 Objective-C 와 CocoaTouch 를 , 안드로이드는 Java 와 안드로이드 프레임워크들을 배워야 하죠.

모바일 기반의 서비스를 제공해야는 회사들은 선택을 하거나, 순위를 두어야 합니다. 모든 플랫폼용 네이티브 앱을 만들기에는 투자비용이 너무 크기 때문이죠. 아이폰이 국내 출시된 후 많은 업체들이 아이폰용 앱을 앞다투어 출시했습니다만, 올해 들어서는 다양한 안드로이드 폰들이 출시되면서 안드로이드용 앱까지 한번 더 개발을 진행하고 있습니다. 자원이 충분한 회사라면 각각의 플랫폼용으로 만드는게 가능하겠지만, 그렇지 못한 스타트업 들이나, 중소기업들에서는 참 어려운 선택일수 밖에 없습니다. 국내의 경우 핸드폰 시장 점유율 1위인 SKT 가 안드로이드에만 집중하고 있으니 아이폰이 아무리 이슈라고 해도 아이폰/안드로이드는 동시에 지원해야 하는 상황인것이죠.

구글의 부사장인 Vic Gundotra 는 작년에 한 인터뷰에서 다음과 같은 말을 했습니다.

Even Google was not rich enough to support all of the different mobile platforms from Apple’s AppStore to those of the BlackBerry, Windows Mobile, Android and the many variations of the Nokia platform

- Vic Gundotra, Google Engineering VP

인터넷의 거물 구글 조차도 모든 모바일 플랫폼용으로 앱을 만들어 지원하기에는 돈이 없다! 라는 것이죠. 물론 이건 HTML5 에 집중하겠다고한 구글의 입장을 대변한, 약간 정치적인 발언이긴 합니다만 이 말은 많은 인터넷 업체들에게도 적용되는 것이라고 볼수 있습니다. 즉, 각각의 앱스토어에 대응하기보다는 HTML5 를 이용한 모바일 웹앱으로 동시에 여러가지 디바이스를 지원하는 것이 미래적인 접근방법이라는 것이죠.

2010년 6월 24일에 공지된 행정안전부 고시 “제 2010-40호” 의 내용을 한번 보실까요 ?

「전자정부서비스 호환성 준수지침」개정 고시

1. 개정이유 
   모바일 전자정부 서비스 제공 시 국민들의 보편적 접근성 제고 등을 위하여 국가기관, 지방자치단체, 공공기관이 준수해야 할 사항을 추가로 규정
2. 추진경위 
   <생략>
3. 주요 개정내용
   • 국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고
     – 단, ‘모바일 웹’ 방식이 기술적으로 어렵거나, 속도 및 비용이 현저하게 차이나는 경우는 ‘모바일 앱’ 방식도 허용
   • 모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련
     • 최소 3종 이상의 웹 브라우저에서 동등한 서비스 제공
     • 국제표준화기구에서 제공하는 표준 사용 의무화
     • 단말정보저장소(DDR), 미디어쿼리(Media Queries) 및 기타기술을 활용하여, 다양한 사용자 단말에 적합하도록 콘텐츠 제공 노력

국민의 세금으로 만들어지는 전자정부서비스야 말로 다양한 스마트폰 사용자들이 모두 혜택받을 수 있도록 모바일 웹 방식을 권장하는게 올바른 방향일것 같습니다.

HTML5 는 Web App을 만들어 다양한 네이티브 플랫폼들을 동시에 지원하기 위한 최적의 솔루션입니다.

Web App vs. Native App

Web App ( 웹 앱 ) 이라고 하면, 웹 기술을 이용하여 만들어진 어플리케이션을 말합니다. 즉, 컨텐츠 리딩을 위해 사용되던 단방향성이던 웹사이트와 달리 사용자와의 인터랙션을 통하여 데스크탑에서의 Application 같은 사용성을 주는 앱을 의미하며, 위젯이라는 단어도 종종 사용되는데 웹 앱은 이 위젯을 포함한 좀 더 넓은 범위로 보는게 맞습니다.

HTML5 를 이용해서 만들어진 Web App 과 iPhone / Android 환경에서의 Native App 을 비교해 보겠습니다.

Web App	Native App
모바일 디바이스에 최적화된 웹사이트	모바일 디바이스 전용 앱
HTML , CSS , Javascript	Objective-C ( iPhone ) , Java ( Android )
기존에 사용하던 웹 개발환경	XCode ( iPhone ) , Eclipse ( Android )
웹 표준 컨트롤 , iUI , JQTouch ..	Cocoa Touch (iPhone), UI Framework (Android)
꼭 Mac 이 필요하지는 않음	Mac 이 필요 ( iPhone ) Android 는 멀티플랫폼 ( Win , Mac , Linux )
App 개발자 등록 필요없음 1)	개발자등록 년 $99 (iPhone) or $35 (Android)
제한적인 디바이스 사용 – 카메라/마이크.. 2)	디바이스의 모든 기능을 활용
자체 결제시스템 구축필요 또는 광고	App Store/Market를 통한 판매/수익 & 광고
서버에서 바로바로 업데이트가능	업그레이드 할 때 마다 검수 ( iPhone )
Android / Blackberry등으로도 바로 변환가능	실행속도가 빠르다

1)     PhoneGap 등 Hybrid App Framework 사용하여 앱 만든후 등록시 필요함

2)     Phonegap , QuickConnect 를 통하여 카메라/연락처 정보등 사용가능 - 따로 진행중인 W3C DAP , OMTP BONDI , JIL 등의 스펙으로 디바이스 접근가능(차후)

Mobile Web App 의 종류

Web App 이라고 해서 기존의 Web Site 에 비해 특별한 것은 아니지만, 모바일 관점, 특히 HTML5 기술을 기반으로 하는  Web App 들의 경우 다음과 같이 나눠 볼수 있습니다.

1. Online Web Application
   
   • 기존의 모바일 웹페이지를 포함한 웹 앱을 의미한다.
   • HTML5, CSS3 등을 통하여 모바일 에서의 UI / UX 를 향상한다.
   • GeoLocation API 를 이용하여 위치가 고정되지 않는 모바일의 장점을 활용한다.
   • 주로 포털이나 컨텐츠를 리딩하는 형태의 앱이 많다.

2. Offline Enabled Web Application
   
   • Application Cache , LocalStorage , Web SQL Database 를 활용하여 오프라인에서도 사용이 가능한 웹 앱을 의미한다.
   • 처음 접속시에 주요데이타를 캐쉬하여 재 접속시에 네트웍 트래픽을 최소화한다.
   • 오프라인상태에서 행한 동작들에 대해서 온라인시 서버의 데이터와 싱크한다.
   • 이메일 어플리케이션과 같은 컨텐츠 리딩 & 작성 앱에 적절하다. 
     * 모바일 Gmail 사이트는 이미 완벽한 오프라인 메일 앱으로 동작한다.

3. Offline Web Application
   
   • 한번 서버에 접속해서 다운받으면 계속 오프라인으로 사용 가능한 앱.
   • Application Cache 와 Web SQL Database 를 활용
   • 서버와의 동기화를 필요로 하지 않는 게임, 유틸리티, EBook

4. Hybrid Web Application
   
   • Native App 과 Web App을 합친 형태의 앱.
   • 앱 스토어를 통한 다운로드 가능.
   • 모바일 디바이스로 다운로드후에는 앱 속성에 따라 서버와의 AJAX 통신도 가능
   • Native 수준의 다양한 앱 작성가능

모바일 웹 앱이 이렇게 4가지로 명확하게 분리되는 것은 아니지만, 이를 통해 모바일에서 어떤 종류의 웹 앱이 만들어 질 수 있는지를 알 수 있습니다.

HTML5 Key Elements for Mobile

모바일에서 HTML5 가 특별히 다른 태그를 활용하는 것은 아닙니다. 다만 몇몇 Javascript API 와 Video/Audio/Canvas 태그등 몇 개가 모바일 환경에서 아주 유용하게 쓰일수 있습니다.

• Offline 지원 : LocalStorage , Web Database , App Cache
• 미디어 처리 : Video , Audio , Canvas
• 입력 지원 : Advanced Forms
• 위치 정보 : GeoLocation ( 연계표준 )

Offline 지원의 경우 항상 인터넷에 연결되어 있는 데스크탑과 달리 모바일 환경은 꼭 3G 와 같은 네트웍에 항시 연결되어있지 않은 WIFI 전용 기기 ( iPod Touch , iPad ) 들도 있으며, 3G 환경이라 할지라도 네트웍 트래픽을 최소화 하는 것이 아주 중요합니다.

또한 HTML5 의 중요 스펙중 몇 가지는 아직 주요 브라우저에서도 지원되지 않습니다. ( iOS 4 , Android  ) 이건 현재 HTML5 가 Draft 상태이기도 하고, 아직은 HTML5 를 이용한 Web App 의 초기단계이기 때문입니다. 점점 사용자가 많아지면 추가될 것이라고 생각됩니다.

• WebSocket
• FileReader
• IndexedDB
• Web Workers

현재로선 모바일에서의 HTML5 사용은 주로 Offline 지원을 통한 Local App 으로서의 동작 및 트래픽 최적화, Geo Location 을 통한 위치정보 연동이 가장 많이 쓰이고 있습니다.

HTML5 on Mobile

모바일에서의 HTML5 사용은 점점 확대될 것입니다. Native App 을 대체하지는 못하겠지만, Web App은 멀티 플랫폼에 대응할수 있는 하나의 중요한 대안입니다. 향후에 출시되는 모든 Mobile 기기들은 HTML5 대응이 필수가 될 것이고, 각 웹사이트들은 모바일기기에 맞게 화면만 작게만든 초기의 모바일 페이지에서 벗어나, 더욱 App 스러운 형태로 바뀌게 될 것입니다.

지금까지 모바일 환경에서 약간 동떨어져 있던 웹 개발자들도 모바일 시장의 한 주류가 될것이므로, 계속적으로 공부하고 공유하면서 기술을 발전시켜야 합니다.  이건 단지 클라이언트단의 모바일 환경만이 아니라, 서버측도 모바일 & 실시간 웹에 맞게 발전해야 할것입니다.

제가 블로그를 개편하면서 블로그에 붙인 소제목이 “Beyond Web – HTML5 and Mobile” 입니다. 개인적으로 이 블로그에서 앞으로 Mobile 과 HTML5 분야에 대해서 다양하게 글을 쓰겠다는 저의 작은 결심 입니다 

Slide & Book

이 글은 7월2일날 열린 HTML5 오픈 컨퍼런스 에서 제가 발표했던 내용을 간략히 정리한 것이구요. 발표자료는 아래 공개합니다. 아직 Slideshare 가 HTML5 형태의 임베딩은 지원하지 않아서, 스마트폰으로 보시는 분들은 모바일용으로 보기

HTML5 on mobile

구루가 만든 슬라이드 더 보기.

프리젠테이션에는 좀더 많은 내용과 각 Web App 들에 대한 예제사이트들도 포함되어 있으니, 한번 각 사이트들도 들어가셔서 보시면 잘 이해가 되실것 같습니다. 이 자료보다 조금 더 심화된 내용은 먼저 공개한 HTML5 로 아이폰 앱 만들기 를 참고해주세요.

또한, 책으로 제작해서 배포된 “HTML5 실전 가이드” 의 PDF 파일도 공개되었습니다. 다운받으셔서 출력해서 보시면 되구요. 전 이중에 5장에 HTML5 를 이용한 모바일 앱 만들기 실전예제 부분을 담당했고, 간단한 HTML5 웹앱 예제코드 2개를 담았습니다. 참고하시고 궁금한점은 블로그나 트위터로 질문주세요.

<script src="http://b.scorecardresearch.com/beacon.js?c1=7&c2=7400849&c3=1&c4=&c5=&c6="></script>