차세대 웹 환경에서의UI/UX 기술 표준화 동향

Jonghong JeonETRI, PEC

Email: hollobit@etri.re.kr Blog: http://mobile2.tistory.com

http://twitter.com/hollobit

http://www.etri.re.kr

2

UI & UX

http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal#comments

3

Web UI/UX

Web은 자원과 연결에 대한 UI/UX 기술

Past : World Wide Web

5

In The Beginning .....

World Wide Web (Tim Berners-Lee, 1989) universe of network-accessible information anyone, anywhere, anytime Client to server interactions

6

WWW & Browser(Navigator)

7

Web Browser Architecture

8

FirefoxOS Architecture

9

Web Page Loading procedure

10

Web Page Loading procedure

11

Evolution of World Wide Web

12

Evolution of World Wide Web

1단계 (1989~1999) : 웹사이트의시대, HTML과 WAP HTML, URL, HTTP 라는 세 가지 기술에 기초한 웹 기술이 제안되고, 보다

나은 인간 중심의 정보처리 및 지식공유 등을 목표로 하는 단계

2단계 (2000~2004) : XML과 웹서비스, 시맨틱웹 XML(eXtensible Markup Language)에 기반하며 인간 중심의 정보 처리뿐 아

니라 다양한 디바이스와 서비스, 멀티미디어를 연결하는 것을 목표로 하는단계

3단계 (2005~2009) : 웹 2.0, 웹 플랫폼 시대의성장 구글, 아마존, 위키피디아 등의 성공과 함께 웹 산업을 제2의 전성기로 이

끌며 다양한 신규 서비스가 등장할 수 있는 기반을 마련

4단계 (2010~현재) : 웹 앱의 시대, 모바일과 N-Screen 시대 스마트 폰 및 태블릿 등 다양한 모바일 기기들을 대상으로 HTML5와 Web

API를 통해 한 단계 진화된 웹 응용 환경을 제공하며, 위치정보 및 소셜 정보 등을 결합하는 통합 응용 플랫폼으로서 웹이 자리잡아 가는 단계

13

Evolution of World Wide Web

Now : HTML5 & Web Application

15

HTML5 & Web App Technology Timeline

CSS1

Javascript

CSS2 CSS3

DOM1 DOM2 DOM3 DOM4

2010 2011

AJAX

HTTP

Canavs Web Workers AppCache

W3C

Web App.

Specs.

XHR2

WebGLGeolocation FileAPI

WebFontAudio/Video

Web form

2012 2013

HTTP2

HTML5 Working Draft

hollobit@etri.re.kr

16

Web UI/UX의 기본 기술 요소

17

HTML5 ?

18

HTML5의 주요 특징

Offline / Storage Web SQL Database Local Storage IndexedDB Application Cache

Realtime / Communication Web Workers Web Socket Web Notifications

File / Hardware Access Native Drag & Drop Desktop Drag-In (File API) Desktop Drag-Out FileSystem APIs Geolocation Device Orientation Speech Input

Semantics & Markup Better semantic tags Markup for applications Descriptive link relations Microdata ARIA attributes

Web Form Graphics / Multimedia

<Video> / <Audio> Canvas 2D Canvas 3D (WebGL) Inline SVG

CSS3 CSS Selectors Web Fonts

Nuts & Bolts History API

19

The Web as an application platform

Standards for Web Applications on Mobile: Feb 2013 current state and roadmap http://www.w3.org/Mobile/mobile-web-app-state/

20

User Interactions

http://www.w3.org/2013/02/mobile-web-app-state/#User_interactions

21

Forms

http://www.w3.org/2013/02/mobile-web-app-state/#Forms

22

Device Adaptation

http://www.w3.org/2013/02/mobile-web-app-state/#Device_Adaptation

23

Graphics

http://www.w3.org/2013/02/mobile-web-app-state/#Graphics

24

Multimedia

http://www.w3.org/2013/02/mobile-web-app-state/#Multimedia

25

Sensors and hardware integration

26

Network

27

Communication and Discovery

Future : Web App UI / UX

29

Web UI의 변화, 현재와 미래

Sensors: Voice, Video, Sensing devices 카메라, 마이크, 터치, 가속, 자이로, 온도계, 위치, 제스처 …

M2M & Web of Things증강 브라우징, 위치기반 브라우징 …

Gopher

Keyboard

1차원Link

Mosaic

Mouse

2차원Link

PCIE

Mouse

Event

Mobile

Touch

Sensing

1995 2000 2005 2010

30

Web Platform Architecture

31

Emerging Web OS & HTML5 Apps

32

Native Web App

Native App

Web App

Web page

NativeWeb App

Hybrid Web App(Cross Platform)

Multi-platform support

33

차세대 웹 환경은 3M EnvironmentMulti Screen & Multi Devices & Multi Platform

34

Pattern of Multi-screens

Source: http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/

35

[1] Coherence

the unique contexts across a multi-device ecosystem and adapt elements and features accordingly.User Interface의 일관성을 유지하되 단말의 속성과 유저 시나리오에 맞게 기능들이최적화되어야 함

36

Responsive Images

W3C Responsive Image Community Group Picture Elements

http://picture.responsiveimages.org/ http://bit.ly/Uyu05L (W3C)

Goals Respond to different screen pixel width/height Respond to different screen pixel densities Respond to user zoom on image resource. ….

36

37

[2] synchronization

Amazone의 Kindle 사례와 같이 “Cloud”를 통해 이종 플랫폼 상에서 동일한 데이타에 대한 싱크를 유지함

38

[3] Screen Sharing

하나의 가상 스크린 처럼 여러 단말이 스크린을 공유

39

[4] Device Shifting

Apple의 AirPlay나 DLNA처럼 유저가 상황에 따라 모바일에서 TV로 단말을 옮겨가면서 컨텐트를 이용

40

Web Intent for local networks

41

[5] Complementarity

여러명이 모바일에서 하나의 태블릿 상에서 동작하는 게임을 제어하거나 모바일단말로 TV를 제어하는 등 단말간 상호관련성

42

[6] Simultaneity

TV에서 스포츠 생중계를 보면서 게임의 결과를 예측하거나 시청자들간 실시간 커뮤니케이션을 지원하는 등 같은 컨텐츠에 두가지 단말을 동시에 사용함으로써 새로운 Experience를 만들어 낼 수 있음.

43

[추가] Bi-directional & Real-time

44

Modern Web Applications

Various JS Frameworks & JS Library

http://www.slideshare.net/infect2/web-app-201205

45

UX에 영향을 주는 요소 : 성능/시간

Web ApplicationsHTML5 Games

Native Web AppsBasic Web Pages

JavaScript Execution SpeedDOM Interactions

Accelerated Graphics

Page Load Time

http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly

46

JS 성능 개선을 위한 노력들

Developer Level Programming Best Practices & Tips

Engine Level Javascript Engine Race Javascript Interpreting mechanism Enhancement

Device Level Hardware Acceleration

• Web CL• GPU Acceleration

Performance Measuring & Benchmark

47

GPU Acceleration

IE

Chrome

Firefox

48

HTML5 Game engine

http://www.youtube.com/watch?feature=player_embedded&v=XsyogXtyU9o

49

Conclusions

Web은 자원(Resource)과 연결(Link)에 대한 UI/UX 기술기본 기술 요소

HTML(구조), CSS(표현), JS(동작)

Web 기술의 진화 유형과 방향 다양한 인터랙션 기술 : 터치, 음성, 제스처, 알림, 접근성 입력과 처리 : web form Adaptation & Responsive Web : 그래픽스 기술 : 2D, 3D, Vector, Animation, Fonts, Orientation, Layout, GPU Acceleration 멀티미디어 : Video/Audio Play, Gallery Access, Capturing, Analysis & Modification Sensing & Capturing: Geolocation, Battery, Proximity, Ambient Light, Humidity, NFC,

Camera/Microphone Device Access : Task Schedule, Calendar, Contacts, System Setting, Telephony, Messaging Network/Protocol : Network API, Server-push, P2P data connection, Web Socket, Raw Socket

Web App UI/UX로 진화 Javascript 의 중요성, App Design 의 중요성 Performance와 Interoperability

50

Conclusions

Web은디바이스, 플랫폼, 스크린에종속되지 않는유일한 기술

Web UI/UX의 미래 또한디바이스, 플랫폼, 스크린에종속되지 않으며다양한 UI/UX을 제공하는 것

52

JongHong Jeon (hollobit@etri.re.kr) +82-42-860-5333

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