2015년 HTML5 기반 모바일 웹 어플리케이션 기술 개발 동향 정리 및 2016년 기술 변화 예측합니다. Ionic/Angularjs 기반 상용 앱 개발 사례도 상세하게 소개 합니다. 본 자료를 통해서 HTML5 기반 모바일 어플리케이션을 개발시 활용가능한 Framework 및 최적화 분야에 대해서 이해할수 있습니다.
6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.
스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다
웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
2015년 HTML5 기반 모바일 웹 어플리케이션 기술 개발 동향 정리 및 2016년 기술 변화 예측합니다. Ionic/Angularjs 기반 상용 앱 개발 사례도 상세하게 소개 합니다. 본 자료를 통해서 HTML5 기반 모바일 어플리케이션을 개발시 활용가능한 Framework 및 최적화 분야에 대해서 이해할수 있습니다.
6월14일 COEX에서 열린 정보처리학회의 IT 21 Conference에서 발표한 내용입니다.
스마트 기기의 확산과 함께 웹 기술의 진화는 빠르게 이루어지고 있다. 오늘날 웹 기술은 HTML5와 단말 API 등을 통해 단말의 HW을 제어하고 비동기적으로 원격 데이터베이스를 연동하며 다양한 응용 로직을 처리할 뿐아니라 웹 운영체제(OS)로까지 진화하고 있다. 그러나 웹 기술을 활용한 응용과 서비스가 많아짐에 따라 시스템의 복잡도가 높아지고 새로운 사용자 인터페이스에 대한 요구들도 높아지고 있다. 더불어 PC뿐 아니라 모바일, TV 등 다양한 단말 환경에서 웹 응용이 활용됨에 따라 단말과 플랫폼에 상관없이 보편적 서비스 환경으로 웹 UI/UX에 대한 관심들이 높아지고 있다. 이에 본 발표에서는 이처럼 변화되는 서비스 환경을 중심으로 보다 나은 웹 사용성을 제공하기 위해 진행되고 있는 다양한 모바일/멀티디바이스 웹 UI/UX 관련 이슈 및 기술 표준 동향에 대해 살피고, 향후 웹 사용자 편의와 사용자 경험 개선 극대화를 위해 나아갈 방향들에 대해 고찰해보고자 한다
웹 UI/UX에 관심 있는 분들은 참고해보시길 바랍니다.
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
from : http://w3labs.kr/?p=5389
시중에 나와있는 웹소켓 솔루션은 정말 많은 종류가 있습니다.
하지만, 웹소켓을 지원하지 않는 IE6+ , Android2.1+ 버전까지 지원하는 웹소켓 솔루션은
Kaazing 과 Socket.IO 뿐이 없는 실정입니다.
Kaazing 과 Socket.IO 에서는 시뮬레이션모드 라는 것으로 웹소켓 미지원 브라우저에서도 동작 하는데요.
이 시뮬레이션 모드에서 기술의 차이가 발생 합니다.
Socket.IO 는 Long-Polling(Comet) 방식으로 시뮬레이션을 하고 있습니다.
결국 웹소켓이 나오기 이전 기술, 그러니까 결국 Legacy 기술을 이용하는 것으로 웹소켓과는 거리가 멀지요.
웹소켓의 장점인 Full-Duplex 방식이 아닌 Half-Duplex 방식으로 응답(Latency)가 느리고 가비지 트래픽이 발생하게 되지요.
Kaazing 의 경우는 유료 솔루션 답게 시뮬레이션을 자체 기술로 해결 했는데요.
Ajax 통신 2개를 열어 놓고, 하나는 Send를, 하나는 Receive를 담당하게 합니다.
웹소켓과 동일한 Full-Duplex 방식으로 빠른 응답속도와 적은 트래픽을 유발하게 되지요.
또한, 이러한 시뮬레이션 모드가 어떠한 구성환경에서도 완벽하게 동작 하는데요.
* Single Sign-On (SSO) 연동
* VPN 2중화 환경
* DDMZ 환경
* Proxy Server 에서 패킷을 감청 할 수 있는 환경(보안 유지)
* Active-Active Load Balancing
* Binary Data의 WebSocket 지원원
* 병렬적 서버 확장
* 국내 기술지원
이러한 엔터프라이즈 환경의 Needs 를 모두 충족시켜 주고 있습니다.
Kaazing을 도입한 회사들을 보면 솔루션의 완성도를 보실 수 있습니다.
금융권
* JP모건
* HSBC 은행
* 골드만삭스 외 4개사
Software & Service
* 오라클
* 인텔
* 시스코
* 에릭슨
* 구글
* 퀄컴
* 맥아피 외 8개사
Media & Entertainment
* Skybet
* AOL
* The Daily
* CNN Money 외 5개사
기타
* Southwest Airlines 외 4개사
더 자세한 내용은 아래 슬라이드를 참조 하시기 바라며,
문의 사항은 연락 주시기 바랍니다. (contact@w3labs.kr)
* URL : http://w3labs.kr/?p=5389
감사합니다.
2012년 1월13일 알펜시아 리조트에서 열렸던 HCI2012 행사의 일환이었던 "모바일 웹 UI/UX 현재와 미래" 패널 토의에서 제가 기조 발제로 발표했던 자료입니다.
W3C에서 표준화 진행중인 HTML5와 Web API를 중심으로 새로운 UI/UX의 가능성들과 모바일 UI/UX에 대한 가능성들을 살펴보았습니다.
7. Connected Life & N-Screen
§ 멀티 디바이스의 시대 사람들이 원하는 것
§ 끊김없는 인터넷 경험을 지속시키고 싶은 것
(Seamless internet experience)
§ 이것이 N-Screen 대응이 대두된 본질
§ 사용자 경험에서 부터 출발해야 한다
M
e
n
u
Close Tab
Page 7
8. N-Screen 환경에서 대응되야 하는 요소들
• Text, Image, Information
Data
• Video, Music
Multimedia Contents
• Resolution, Screen Size independent
GUI
Page 8
9. N-Screen 대응 : Data
§ Web은 처음부터 원격지간의 정보 교환을 위해 탄생된 것
§ 물리적 저장매체를 통한 데이터 이동의 불편
§ Cloud 서비스로의 급격한 전환
http://blog.softheme.com/cloud-services-convenient-for-small-business/
Page 9
10. N-Screen 대응 : Multimedia Contents
§ Video, Music
Page 10
11. N-Screen 대응 : Multimedia Contents
§ HTML5 Video
§ Video rendering playback by browser
§ Browser has software codec
<video src="movie.ogg" width="320" height="240"
controls="controls">
</video>
Page 11
12. N-Screen 대응 : Multimedia Contents
§ HTML5 Video N-Screen Demo
Page 12
13. Web UI technology for N-Screen
§ HTML5 Canvas
§ CSS
§ CSS3 Media Query
§ Responsive Web Design
§ SVG
§ JavaScript UI Library
§ Javascript Mobile UI Framework
Page 13
14. HTML5 Canvas
§ HTML5 Canvas : 2D Bitmap 이미지 브라우저가 동적으로 그려냄
§ User Agent 분석을 통해 디바이스별로 다른 크기의 이미지를 그려낼수 있음
§ Canvas 를 통해 그려낼 수 있는 것들
Line, Rectangle, Circle, Arc, Curve, Image, Text
<canvas id="myCanvas"
width="200"height="100">
</canvas>
Page 14
34. 정리
§ 스마트폰 시대와 더불에 멀티스크린 멀티 디바이스 시대로의 전환
§ 다야한 스크린 사이즈에 대응한 서비스 구현 문제 대두
§ 대안기술로서 웹기술이 각광을 받음
§ UI 기술로서 웹기술은 모바일을 넘어 TV와 자동차와 같은 가전 영역으로 확대
Page 34