태블릿 PC와 HTML5 웹 기술Tablet PC and HTML5 Web Technology

윤 석 찬㈜다음커뮤니케이션

http://channy.creation.netchanny@creation.net

http://twitter.com/channyun

태블릿 != 데스크톱 OS

모바일 OS가 주목 받는 이유

• 왜 모바일 OS인가?– 데스크톱 OS가 태블릿에서 실패했기 때문

– 모바일과 데스크톱 사이의 영역을 새롭게 정의

– 인터넷 기반의 웹 애플리케이션의 성장

– 전혀 새로운 소프트웨어 생태계 주도

• 태블릿 애플리케이션의 구도– 태블릿 OS의 네이티브 개발 환경

• iPhone OS, Android, WindowsPhone, Symbian…– 차세대 웹 표준 기반 개발 환경

• HTML5 (Audio, Video, Canvas, SVG, CSS3, WebSocket…)

무엇이 문제인가?

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

리치 웹 기술의 성장

• 과거의 유산– 웹 브라우저 전쟁 및 비표준 웹 브라우저 (IE6)

– 플러그인 양산 ActiveX, NS Plugin, Flash

• 웹 2.0과 웹 애플리케이션– 브로드밴드 환경 하에 사용자 참여 기반의 웹 플랫폼 성장

– Ajax 기반의 리치 웹 애플리케이션 성장 (구글맵, 지메일)

– 현대적 웹 브라우저의 기술 혁신 (파이어폭스, 사파리, 크롬)

• 새로운 트렌드– HTML5 기반 리치 웹 애플리케이션 제공

– 모바일 및 태블릿 OS에서 적극 이용 가능

리치 웹 기술의 현황

웹 기반 표준

바이너리플러그인

PC O모바일 X태블릿 X

PC O모바일 O태블릿 O

HTML5 표준의 역사

HTML5 Right now?

• Google.com

• Apple.com

• Mozilla.com

• html5gallery.com

And many more…

HTML5의 주요 기술 요소(1)

ActiveX기반 전자결재 에디터 모듈

미디어 플레이어플러그인

미디어 플레이어플러그인

HTML5의 주요 기술 요소(2)

배너 광고플러그인

사이트메뉴플러그인

파일첨부플러그인

브라우저별 대응 수준

Demo: Video, Canvas, WebGL

모바일에서 주요 구현 현황

√√ √√ √√ √√

√√ √√ √√ √√

√√ √√ √√

√√ √√ √√ √√

Canvas

Video/Audio

WebGL

SVG

Workers √√ √√ √√ √√

Plug-in

InternetNoSQL

CloudComputing

{"Name": "Cheeso", "Rank": 7}

Structure

Presentation

Behavior

Ajax RESTful

LocalStorage

LocalStorage

Web Storage

Web Socket

SelectorAPI

Canvas

Geolocation

Drag&Drop

diskdisk

Casandra

Hbase

Amazon AWS

MS Azure

HTML5 시대의 웹 프레임웍

CSS3

HTML5

AppCacheWebGL

온라인 기반 애플리케이션

• Canvas 이용 간단한 멀티미디어 기능 구현 가능• 광고 및 온라인 게임 등 활용

Hand of Greedhttp://brainiumstudios.com/webapp/Spin the Bottlehttp://www.idean.com/iphone/spin/

하이브리드형 애플리케이션

• 아이폰 앱 안에 웹 기반 UI 제공

• 네이티브+웹 기반 형태로 앱스토어에서 다운로드 가능

Harmonious - 웹 기반 스케치패드http://harmoniousapp.com/

오프라인 애플리케이션

• HTML5기술+로컬 저장소만 이용한 애플리케이션

• App Cache 혹은 앱스토어를 통해 배포 가능

Monocle - 웹 기반 eBook Reader http://monocle.inventivelabs.com.au/

차세대 빅뱅: Chrome OS?

• 웹 기반 차세대 태블릿 OS

• 웹 앱스토어 마켓

• 디바이스 API 지원

결론

• 차세대 태블릿 OS는 기존 PC와 다른 환경이다.– 태블릿 OS는 모바일과 데스크탑과의 중간

– 인터넷 기반 웹 애플리케이션이 차지하는 영역

• 다양한 태블릿 OS의 변화– 모바일 OS: 아이폰(아이패드), 안드로이드, 윈도우폰

– 태블릿 OS: Chrome OS vs. Windows 7

• 웹 기반 개발 플랫폼의 성장– 다양한 모바일 개발 환경에 대한 비용의 증가

– HTML5 기반 리치 웹 개발 환경의 혁신