2012, 대한민국 웹 표준, 그 기로에 서다

2012, 대한민국 웹 표준그 기로에 서다

Jonghong JeonETRI, SRC

Email: [email protected] Blog: http://mobile2.tistory.com

http://twitter.com/hollobit

http://www.etri.re.kr

2

수많은 변화 속에서 우리는 ?

3

Changes (스마트 모바일 시대)

Source: ARG, 2012

4


Source: http://slidesha.re/yMfSyy

5


6


q 2011년 스마트폰, 사상 처음 PC 전체 출하량 추월

http://www.bgr.com/2012/02/03/canalys-smartphone-shipments-surpassed-pc-shipments-in-2011/

7


q 82% intend to use email

q 71% expect to use a web browser

q 57% plan to watch TV or download movies

q 56% intend to use social networking

q 55% plan to play games

8


q 2013년 10억대가 넘는 HTML5 가능 단말 등장

9


q 스마트기기 출하량 예측 종합

Source: 2011, 스마트 콘텐츠 시장 조사 보고서, KOCCA

한국의 웹 현실

11

브라우저 사용 통계 (‘12.02)

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

한국 전세계

82.48

36.79

10.48

29.3

3.89

24.67

6.59

한국과 세계 브라우저별 사용 현황 비교

Other

Opera

Safari

Firefox

Chrome

IE

Source: Statcounter, http://bit.ly/xGxa5x

12

비표준 기술 사용 현황 (2010년)

q 주요 웹사이트 ActiveX 사용현황(‘10년 8월~11월, KISA)

Source: 방통위, 인터넷이용환경개선 전략, 2011

13

Global Web Trends – Web Standards

q Alexa.com 통계

14

Global Web Trends – Web Standards

15

이제 한국은 어디로 가야할까 ?

스마트 모바일 시대의 핵심은 ?

17

Our Dream ?

http://youtu.be/6Cf7IL_eZ38

18

Screen Convergence

19

Emerging N-Screen environment

q N스크린은 하나의 콘텐츠를 스마트폰, PC, TV 등 여러 단말기를통해 이용할 수 있도록 하는 서비스q N스크린은 연결성(connectivity), 이동성(portability), 통합성(integration)이라는 세

가지 특성을 갖는 미디어 이용과 콘텐츠 소비 환경

q N스크린에서 ‘N’은 어떤 수도 들어갈 수 있는 불특정 자연수(Natural Number)를 가리키며 ‘스크린’은 이를 네트워크로 연결되는 여러 대의 단말기 장치를 의미

20

Fragmentation is a big problem

Fragmentations

Device

Screen

Platform

Service

Application

Content

21

Solution ?

Fragmentations

Device

Screen

Platform

Service

Application

Content

Evolution of Web Platform Technology

23

Evolution of World Wide Web

24

Evolution of World Wide Web

q 1단계 (1989~1999) : 웹사이트의 시대, HTML과 WAP

§ HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계

q 2단계 (2000~2004) : XML과 웹서비스, 시맨틱 웹

§ XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는단계

q 3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의 성장

§ 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련

q 4단계 (2010~현재) : 웹 앱의 시대, 모바일과 N-Screen 시대

§ 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계

25

Web Platform Layer

User Interaction

Presentation

Transport

Resources

JavaScript + Web APIs

HTML 5 & CSS 3

HTTP

Web Resource URIs(Service, Content, Site)

26

HTML5 ?

q HTML5로 통칭되는 요소는 HTML5 뿐 아니라 CSS3, 웹 어플리케이션을 위한 JavaScript API 확장을 포함한 것

통칭되는 “HTML5”

HTML5콘텐츠 내용과 형식을 표현

CSS3콘텐츠 표현 방법을 정의

JavaScript각종 API를 통해

기능을 표현

문서 구조의 의미를 명확히 하여디자인과 프로그램의 독립성을 확보

서로 다른 다양한 브라우저 상에서일관된 표현 기능 제공, 효과적이고 편

리한 표현 방식의 변경

풍부한 기능과 자원을 제어할 수있는 로컬 어플리케이션

§ 문서구조의 상세화§ 멀티미디어§ 폼과 이벤트 등

§ 문서구조의 상세화§ 멀티미디어§ 폼과 이벤트 등

§ 표현 기능 모듈화§ 웹 폰트§ 표현 기능 모듈화§ 웹 폰트

§ Web Storage§ Web Worker§ Web Socket§ Geolocation API

§ Web Storage§ Web Worker§ Web Socket§ Geolocation API

27

HTML5 Roadmap

q Progress: Last Call milestone reached§ 25 May 2011. Published Last Call Working Draft of the HTML5 spec.§ 03 August 2011. Ended Last Call (LC1) comment round for HTML5 spec.

q Five other LCWDs published in May§ Polyglot Markup: HTML-Compatible XHTML Documents (Eliot Graff)§ Techniques for providing useful text alternatives (Steven Faulkner)§ HTML Canvas 2D Context (Ian Hickson)§ HTML+RDFa (Manu Sporny)§ HTML Microdata (Ian Hickson)

28

HTML과 Web API의 진화

29

모바일 HTML5의 가능성

1. 새로운 웹 환경 : 새로운 모바일 웹, 유무선 통합2. Multi-Screen, Multi-Device, Multi-Platform의 해결사3. HTML5 Apps : HTML5 앱의 성장4. 애플/구글 지배로부터의 탈출구5. UI/UX 부분의 보완6. Rich Web : 보다 다양한 기능 제공, 주요 웹서비스 활용7. 광고 : 마이크로사이트, 상호작용형 HTML5 광고 시장8. 위치기반서비스 : 위치 기반 서비스9. 성능 향상 : 빠르고 뛰어난 웹 서비스 제공10.UI 개선 : 보다 편리한 UI 제공11.Hybrid App : 앱과 통합되는 환경12.기타 새로운 기회들

30

N-Screen의 종결자, HTML5과 차세대 웹

문제 해결책

다중 플랫폼을 지원하는 응용 개발 Web Application

단말간 데이터 이동 및 심리스 서비스 지원 Cloud & Web Application

다중 단말의 식별과 지원 HTTP UAProf, CSS MQ

다양한 화면 사이즈를 지원하는 응용 개발 SVG, CSS, HTML5

그래픽 처리, 3D 콘텐츠 표현 HTML5 canvas, CSS, WebGL, X3D

Video 및 Audio 콘텐츠 처리 HTML5 video/Audio

Interactive한 처리 JavaScript, CSS, HTML5 webforms

멀티 터치 등의 지원 HTML5 & Web event

오프라인 기능의 지원 HTML5 (localstorage)

디바이스 제어 Device APIs

콘텐츠 표준 호환성 검사 HTML/CSS Validation, mobileOK

비동기적 처리, 쓰레드 관리, 전송 속도 개선 XHR, WebWorker, WebSocket

보다 고속처리 가능하며 판매용 앱이 필요하다면 ? Hybrid Web App

융합 서비스 지원 RESTful Web Services, LOD

2012년도 이후 전망

32

2012년은 HTML5 활성화의 원년!!

2010 2011 2012 2013

MobileWeb

GoldenAge

MobileWeb

GoldenAge

LTE

Smart devices

HTML5Apps

표준화 완료

전국 서비스

다양화

[email protected]

33

2012, 모바일 웹과 HTML5 전망

1. Mobile First2. Responsive Web & Responsive Ads3. Social + Local + Cloud + Mobile + Web 4. Web UI Framework5. Cross Platform & Hybrid Web Application 6. JavaScript Library & Web Application API Standards7. HTML5 Game & Mobile HTML5 Game 8. Web Store & Native Web App 9. HTML5 ebook & HTML5 services 10.Web Operating System & RESTful WoT(Web of Things)

34

[Trend-1] Mobile First

q 1 billion consumers will own smartphones by 2016, with U.S. users owning 257 million smartphones and 126 million tablets. By 2016, 350 million employees will use smartphones, with 200 million of them bringing their own.

q Mobile spending will reach $1.3 trillion by 2016, or 35 percent of the technology economy, with the app market generating $56 billion by 2015.

q Apple, Google and Microsoft are expected to control 91 percent of the U.S. smartphone market and 98 percent of the U.S. tablet market by 2016.

q Businesses are expected to double their spending on mobile projects by 2015.

http://gigaom.com/2012/02/13/preparing-for-a-mobile-first-world/

35

[Trend-2] Responsible Web Design

q Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

q Adjusting Screen Resolution§ PART OF THE SOLUTION: FLEXIBLE EVERYTHIN

q Flexible Images§ STOP IPHONE SIMULATOR IMAGE RESIZING

q Custom Layout Structure§ CSS3 MEDIA QUERIES§ JAVASCRIPT

q Showing or Hiding Content§ TOUCHSCREENS VS. CURSORS

q A Showcase Of Responsive Web Design

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

36

[Trend-3] HTML5 Games

q http://www.cuttherope.ie/

37

[Trend-4] The Web platform

q Standards for Web Applications on Mobile: February 2011 current state and roadmap§ http://www.w3.org/2011/02/mobile-web-app-state.html

38

[Trend-5] Web Store

DeviceClient

Server

App Store

Devices

Browser

Any Devices(PC, TV, Car, Tablet…)

Browser

NativeApppNativeAppp

FrontStoreServer

NativeApp

NativeApp

FrontWeb

Server

FrontWeb

Server

WebAppWebApp

WebApp Store

NativeApp

NativeApp

WebApp Store

WebApp Store

Cloud

대응 전략

40

HTML5 어떻게 공부하나요 ?

qHTML5 스펙 너무 어려워요! 게다가 모두 영어!§ 한글 HTML5 번역본 è http://j.mp/html5ko (clearboth.org)

q그래도 내용이 너무 많아요§ 웹 개발자를 위한 최소 스펙 è http://j.mp/html5devel

q디자이너/기획자도 알아야 하나요 ? § 많은 문서/책자들 è HTML5: Edition for Web Authors, …

q알기쉬운 튜토리얼 및 프리젠테이션은 없나요 ?§ Google의 선물 è http://www.html5rocks.com

q그 외에 꼭 추천해주실만한 것은 ?§ 실전 HTML5 가이드 (한글 PDF) è http://j.mp/html5guide_ko§ 기타 한글로 된 많은 HTML5, CSS3, JavaScript 관련 서적들

참고: http://xguru.net/635

41

JavaScript 전성 시대

q JavaScript Libraries è http://bit.ly/tVFW6Y§ Application Frameworks, Server Side Library, Testing Frameworks§ Game Engines, Animation Library, Image manipulation

• Akihabara, IMPACT, enchant.js, Unity3D

q Server-side JavaScript § Node.js : Evented Server-Side Javascript è http://nodejs.org

• Google Chrome의 Javascript Engine V8을 단독으로 사용• 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous • Thread 방식에 비해 뛰어난 성능• HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈

q Javascript로 컴파일 되는 언어들 è http://j.mp/hp2pnR§ CoffeeScript & Kaffeine : Javascript를 더 간결하게§ J2js è Java ByteCode to JS, Script# è C# to JS

42

서적들 -모바일 HTML5 Web App 관련

43

서적들 -디자이너/기획자를 위한 HTML5

44

서적 -웹 UI/UX 디자인 관련

45

2012년도 웹 전략

q 웹 표준의 숙지와 활용q CSS 표준 기반의 웹 (응용) 디자인q Mobile UI Framework 및 자바 스크립트 스킬 향상q 모바일 웹 응용 성능 개선 방안q Hybrid Web App 고려q Mobile Cloud 고려q 크로스플랫폼 및 멀티 스크린 지원q 다양한 방면의 웹 응용 개발 시도 : 광고, 쇼핑, 게임, 기업용

q 오픈 소스 커뮤니티 활동q HTML5 응용 모범 사례들의 도출과 공유q 국내외 시장분석과 글로벌 도전

46

Thank youFor more discussion :

JongHong Jeon ([email protected])+82-42-860-5333

Blog : http://mobile2.tistory.com/mhttp://twitter.com/hollobit

OR