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호” 의 내용을 한번 보실까요 ?
「전자정부서비스 호환성 준수지침」개정 고시
- 개정이유
모바일 전자정부 서비스 제공 시 국민들의 보편적 접근성 제고 등을 위하여 국가기관, 지방자치단체, 공공기관이 준수해야 할 사항을 추가로 규정- 추진경위
<생략>- 주요 개정내용
- 국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(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 들의 경우 다음과 같이 나눠 볼수 있습니다.
- Online Web Application
- 기존의 모바일 웹페이지를 포함한 웹 앱을 의미한다.
- HTML5, CSS3 등을 통하여 모바일 에서의 UI / UX 를 향상한다.
- GeoLocation API 를 이용하여 위치가 고정되지 않는 모바일의 장점을 활용한다.
- 주로 포털이나 컨텐츠를 리딩하는 형태의 앱이 많다.
- Offline Enabled Web Application
- Application Cache , LocalStorage , Web SQL Database 를 활용하여 오프라인에서도 사용이 가능한 웹 앱을 의미한다.
- 처음 접속시에 주요데이타를 캐쉬하여 재 접속시에 네트웍 트래픽을 최소화한다.
- 오프라인상태에서 행한 동작들에 대해서 온라인시 서버의 데이터와 싱크한다.
- 이메일 어플리케이션과 같은 컨텐츠 리딩 & 작성 앱에 적절하다.
* 모바일 Gmail 사이트는 이미 완벽한 오프라인 메일 앱으로 동작한다.
- Offline Web Application
- 한번 서버에 접속해서 다운받으면 계속 오프라인으로 사용 가능한 앱.
- Application Cache 와 Web SQL Database 를 활용
- 서버와의 동기화를 필요로 하지 않는 게임, 유틸리티, EBook
- 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 형태의 임베딩은 지원하지 않아서, 스마트폰으로 보시는 분들은 모바일용으로 보기
프리젠테이션에는 좀더 많은 내용과 각 Web App 들에 대한 예제사이트들도 포함되어 있으니, 한번 각 사이트들도 들어가셔서 보시면 잘 이해가 되실것 같습니다. 이 자료보다 조금 더 심화된 내용은 먼저 공개한 HTML5 로 아이폰 앱 만들기 를 참고해주세요.
또한, 책으로 제작해서 배포된 “HTML5 실전 가이드” 의 PDF 파일도 공개되었습니다. 다운받으셔서 출력해서 보시면 되구요. 전 이중에 5장에 HTML5 를 이용한 모바일 앱 만들기 실전예제 부분을 담당했고, 간단한 HTML5 웹앱 예제코드 2개를 담았습니다. 참고하시고 궁금한점은 블로그나 트위터로 질문주세요.
핑백: naradesign's me2DAY
핑백: techbug's me2DAY
핑백: 달콤 쌉싸래한 인생 » HTML5
핑백: anarch's me2DAY
핑백: kang1256's me2DAY
바로 올려주셨네요..
매번 와서 자료도 읽고 하는데 많은 도움을 받네요..
자료 너무 감사합니다..^-^
핑백: 실전 HTML5 가이드 공개 :: Channy’s Blog
항상 좋은 자료 올려주셔서 감사합니다.
* 모바일 Gmail 사이트는 이미 완벽한 오프라인 메일 앱으로 동작한다 라고 하셨는데 어떻게 확인해볼수 있나요? 항상 유익하고 깊이있는 정보 감사드리고 있습니다
아이폰/아이팟 사파리에서 gmail.com을 한번 접속하신 후에 네트웍 모두 끊고(Wifi off 또는 Airplane 모드) 다시 지메일 사이트를 들어가서 메일을 보내보시거나 인박스를 살펴 보시면 됩니다.
Html5 이야기만 많이 들었는데 자세한 내용은 몰랐는데 자세히 설명해 주셔서 감사합니다 아직도 저에게는 모르는게 더 많지만 자주와서 보고 모르는건 또 질문하겠습니다
핑백: Lovelyredsky » Web App과 Native App의 차이와 속성
안녕하세요 좋은 자료 감사합니다.
html5에서 사진을 찍거나 업로드 하는것도 가능한가요?
HTML5 자체로는 불가능합니다. 자료에 있는 Phonegap 같은 걸 이용하거나 차후에 WAC,JIL,BONDI 등이 적용되면 가능해집니다.
CSS를 이용한 웹을 모바일 브라우저에서 접속했을때는 가로, 세로 크기와 각 폰트 글자 사이즈를 어떻게 키워라,
이런 단순한 기능이 첨에 나왔다가, 개발자들이 좀 더 다양한 테크닉을 구사하기를 원해서, 애플이 결국 SDK를 오픈한거지요.
단순한 모바일 웹, 결국 접속은 사파리나 웹브라우저, 모든 기능은 웹서버에서, 이러한 개발은 제가 보기로는 모두 서버쪽 작업이라.
별 문제가 없을 듯, 궁극적으로는 Native App이 많다고 봄. 지나온 과거가 그렇게 흘러왔음, mobile web은 전혀 새로운 것이 아님.
HTML5 는 모두 서버쪽 작업이라고 보기도 어렵구요. 적절히 분배된다고 보는게 맞습니다. 전혀 새로운것이 아니라는 건 좀 공격적인 말씀이신듯 하군요.
네이티브가 전체를 차지할거라고 보긴 어렵습니다. 세상 모든 회사들이 모든 모바일 플랫폼용으로 어플리케이션을 개발한다는건 불가능하니까요.
오늘에야 자료를 다 살펴 보았네요.. 감사합니다.
지난주 세미나 참석했던 1인입니다. ^^
지난주 교육해주신 내용을 이용해서 회사 지식을 등록하려고 다시 방문해봅니다~ ㅎ 다시봐도 HTML5는 향후 매우 유용할 것 같아요 ^^ 향후 저희회사는 모바일 그룹웨어를 도입할 예정인데, HTML5를 이용하면 스마트폰의 OS를 통일하지 않아도 되니, 매우 효율적일 것 같습니다. ^^
감사합니다. 행복한 하루 되세요~ ㅎ
그룹웨어와 매우 잘 어울릴듯 합니다. 도입하신후에 꼭 알려주세요 🙂
항상 좋은 정보 감사합니다.
좋은정보 잘보고 갑니다.
세미나에 참석했던 1인입니다. 뒷자리에 앉아서 목소리가 잘안들렸다는 ㅠ
유용한 정보 감사드리며, 모바일 홈페이지 제작중 좋은 정보를 얻어서 기쁩니다. 지속적인 정보제공 부탁드립니다. 감사합니다.
앗 제가 마이크와 너무 떨어져서 얘기했나보군요 ㅠㅠ. 고맙습니다!
안녕하세요. 지난 ETNEWS에서 진행한 세미나에 참석한 1인입니다.
구루님에 좋은 교육 내용 때문에 많은 궁금증이 해결되어 너무나 감사드립니다. 지속적인 정보 부탁 드립니다 ^^
앗 고맙습니다. 궁금하신게 있으시면 언제라도 트위터/블로그/이메일로 문의주세요 🙂
핑백: HTML5 API 강좌 #1 – Web Storage 와 Application Cache | Guru's Blog
지금 웹서비스 하나 만들어서 제공중인데 모바일 버전으로 어플을 만들까 아니면 모바일웹을 만들까 고민중인데.. 많은 도움이 되고 있어요~ 감사합니다.
글 잘 봤습니다.
쉽게 개념을 알수 있었습니다.^^
근데 위의 지메일을 오프라인에서 볼수 있었다는 것은 읽기위해 받어논 페이지는 이미 다 내려받은 상태여서 모바일로 메일이 보여진것이 맞는지요?
첫페이지의 편지는 읽어졌는데 다음페이지의 편지는 온라인일때 읽지 않아서 그 페이지는 받아진 상태가 아니것이라 두번째 페이지 편지는 못읽은것이 맞지요?
그리고 티타늄을 깔아서 돌려봤는데 이 프로그램의 역할이 안드로이드에서 import할 수 있는 패키지를 만들어주는 역할인가요?
콘솔창에 많은 줄이 스크롤 되던데요…
아직 어떤건지 잘 모르겠습니다.
또 오겠습니다.
수고하십시오~
지메일은 50개 정도의 메일만 캐쉬를 하기때문에 다음 페이지는 못읽는게 맞습니다.
티타늄은 작성한 웹앱을 네이티브앱 형태로 재컴파일하는 구조라고 보시면 됩니다.
요즘 한참 모바일웹의 필요성에 공감을 하고 있느는데 구루님 글을 읽고 도움이 많이 되고 있습니다. 감사합니다.
안녕하세요? 올해 저희 회사에서 모바일 컨텐츠를 개발할 예정인데요..
사실 모바일에 대한 기초적인 개념조차 잡혀있지 않아 고민하던 차에..
저희 교수님께 이 사이트를 추천해주셨습니다.
유용한 정보가 많은 거 같은데.. 모바일 컨텐츠 개발을 위해
저 같은 초보 시스템 기획자가 참조할만한 부분 추천해주시면
도움이 많이 될 것 같습니다.
너무 질문이 방대한거라 답변이 어렵네요. 제가 블로그에 정리한 HTML5 , Mobile, Web App 글들을 참고하신후에 조금 자세하게 질문부탁드립니다. ^^;
주옥같은 말씀,자료,정리 감사합니다.
안녕하세요. 저는, 이분야에 관심이 많은 개발부의 연구소장입니다.
그동안 많은 노력으로
HTML5 + CSS3를 이용해, PC와 모바일에서 동시에 사용가능한 “메신저”를 만들었습니다.
HTML5에서 주력으로 사용한 기술로는
WebSocket, Worker, PostMessage(CrossDomain), GeoLocation 등입니다.
현재, 사용가능한 모바일 단말기는
iOS 4.2 이상 : 현재, 아이폰 시리즈 전부 + 아이패드
Android 2.3 이상 : 이전 갤럭시S등은 조만간 Android 2.3으로 업그레이드 해야함
그룹웨어랑 연동하도록 구현되어, 내부에서 사용중이며, 상용적용을 앞두고 있습니다.
HTML5의 심도 있는 부분까지 관심을 갖고 계신분들께..
궁금한점들을 알려드리고…
너무 개척하며 만들었기 때문에 궁금하신 분들께 도움이 될 수 있을
것 같아요.
각종 예외사항등….
운영자께서, 만약 그 필요성을 느끼신다면
세미나 같은 거 하실때, 시간을 만들어 주세요.
기꺼이 나가서 설명해 드리겠습니다. 010-7770-5252
구루님의 노력에 깊은 감동을 받았네요 ^^
와 멋지십니다. 고생많으셨겠어요. 혹시 다른분들 연락이 필요할것 같아서 전화번호를 지우지 않고 둡니다. 부담되신다면 따로 메일주소를 적어주셔도 좋을것 같네요.
좋은 자료 감사드려요~ 제가 지식이 없어서 문의드립니다.
모든 모바일에서 구동 가능한 모바일web을 만드려고 하는데요..Sencha Touch를 사용하려고 합니다. 그런데 Sencha Touch는 WebKit 기반 브라우저만 지원한다고 하더군요. 그러면 firefox나 IE를 사용하는 모바일이서는 안된다는 얘긴데…. 맞나요??
현재 Firefox / IE 엔진을 사용한 모바일환경이 거의 없다시피 하기 때문에 그것때문에 선택을 포기하기엔 좀 그렇습니다. Mobile IE9 가 올해 중반에 나오면 그때는 좀 달라질지도 모르겠네요. 현재로선 WebKit 브라우저가 모바일환경의 95% 이상을 커버한다고 봐야합니다.
구루님!! 해외 유저까지 고려한 100% 모바일 지원을 위해서 특정 framework을 사용하지 않고 HTML4로 개발하는 것은.. 바보같은 짓이겠죠?? ^^
100% 모바일 지원이라는건 아마 불가능할겁니다. 5억명 대상으로 하는 페이스북 조차도.. 정확한 타겟이 어느정도 이신지 모르겠네요.
좋은 글 잘 봤습니다. 감사합니다^^
좋은 내용 감사합니다. 공부에 참고가 될것 같네요^^
교수님 발표준비하다가 여기까지 왔네요^^넓고넓은 인터넷에서 검색으로 아는 분을 만날줄이야^^
😉
감사합니다.
저에 의견을 적어 본다면… ㅇ_ㅇ;;
보편적인 통신은 글자와 음성. 영상으로 가능합니다.
HTML5 는 특정한 집단만에 독점과 차별화 기술입니다.