6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다. 스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다 웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.

1. 차세대 웹 환경에서의
UI/UX 기술 표준화 동향
Jonghong Jeon
ETRI, PEC
Email: hollobit@etri.re.kr
Blog: http://mobile2.tistory.com
http://twitter.com/hollobit
http://www.etri.re.kr

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

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

4. Past : World Wide Web

5. 5
In The Beginning .....
 World Wide Web (Tim Berners-Lee, 1989)
 universe of network-accessible information
 anyone, anywhere, anytime
 Client to server interactions

6. 6
WWW & Browser(Navigator)

7. 7
Web Browser Architecture

8. 8
FirefoxOS Architecture

9. 9
Web Page Loading procedure

10. 10
Web Page Loading procedure

11. 11
Evolution of World Wide Web

12. 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. 13
Evolution of World Wide Web

14. Now : HTML5 & Web Application

15. 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. 16
Web UI/UX의 기본 기술 요소

17. 17
HTML5 ?

18. 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. 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. 20
User Interactions
http://www.w3.org/2013/02/mobile-web-app-state/#User_interactions

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

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

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

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

25. 25
Sensors and hardware integration

26. 26
Network

27. 27
Communication and Discovery

28. Future : Web App UI / UX

29. 29
Web UI의 변화, 현재와 미래
 Sensors: Voice, Video, Sensing devices
 카메라, 마이크, 터치, 가속, 자이로, 온도계, 위치, 제스처 …
 M2M & Web of Things
 증강 브라우징, 위치기반 브라우징 …
Gopher
Keyboard
1차원
Link
Mosaic
Mouse
2차원
Link
PC
IE
Mouse
Event
Mobile
Touch
Sensing
1995 2000 2005 2010

30. 30
Web Platform Architecture

31. 31
Emerging Web OS & HTML5 Apps

32. 32
Native Web App
Native App
Web App
Web page
Native
Web App
Hybrid Web App
(Cross Platform)
Multi-platform support

33. 33
차세대 웹 환경은 3M Environment
Multi Screen & Multi Devices & Multi Platform

34. 34
Pattern of Multi-screens
Source: http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/

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

36. 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. 37
[2] synchronization
Amazone의 Kindle 사례와 같이 “Cloud”를 통해 이종 플랫폼 상에서 동일한 데이타에 대
한 싱크를 유지함

38. 38
[3] Screen Sharing
하나의 가상 스크린 처럼 여러 단말이 스크린을 공유

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

40. 40
Web Intent for local networks

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

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

43. 43
[추가] Bi-directional & Real-time

44. 44
Modern Web Applications
 Various JS Frameworks & JS Library
http://www.slideshare.net/infect2/web-app-201205

45. 45
UX에 영향을 주는 요소 : 성능/시간
Web Applications
HTML5 Games
Native Web AppsBasic Web Pages
JavaScript Execution Speed
DOM Interactions
Accelerated Graphics
Page Load Time
http://channel9.msdn.com/Events/Build/2012/4-000?utm_source=javascriptweekly

46. 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. 47
GPU Acceleration
IE
Chrome
Firefox

48. 48
HTML5 Game engine
http://www.youtube.com/watch?feature=player_embedded&v=XsyogXtyU9o

49. 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. 50
Conclusions

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

52. 52
JongHong Jeon (hollobit@etri.re.kr)
+82-42-860-5333
http://mobile2.tistory.com/m
http://twitter.com/hollobit