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