5. 가트너, 2015년 10대 전략 기술 트렌드
• Computing Everywhere
• The Internet of Things
• 3D Printing
• Advanced, Pervasive and
Invisible Analytics
• Context-Rich Systems
http://www.gartner.com/newsroom/id/2603623
• Smart Machines
• Cloud/Client Computing
• Software-Defined
Applications and
Infrastructure
• Web-Scale IT
• Risk-Based Security and
Self-Protection
36. 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020
MS 버전업 주기
IE6
IE7
IE8
IE9
IE10
IE11
XP
Vista
7
8
8.1
Edge
10
XP EOS
Vista EOS
7 EOS
43. HTML5 Features
• Video and audio without plugins;
• Support for a bitmap canvas;
• New capabilities for interactive forms;
• Native support for scalable vector graphics (SVG) and math
(MathML);
• Support for features used in East Asian typography (Ruby);
• Support for accessibility of rich applications (including WAI-ARIA);
• Ways to include structured data in content;
• Facilities for building advanced applications (e.g. template element);
• Facilities for creating rich user interactions;
• Facilities for managing session history and navigation;
• Standardized parsing, valuable for interoperability.
http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
44. = HTML + CSS + JS
http://en.wikipedia.org/wiki/HTML5
51. IE 6
Galaxy S2
Galaxy Tab 10.1
iPhone 4S
IE 7
Galaxy S3
iPhone 5
iPad 4
IE 9
chrome
0 875 1,750 2,625 3,500
3,398
2,070
951
907
680
541
438
356
255
171
모바일 브라우저 속도
vs PC 브라우저 속도
http://peacekeeper.futuremark.com/results?key=stats
52. 반응형 웹 디자인
• One website for every screen
• 화면크기, 플랫폼 및 방향에 반응하는
웹 디자인
• 구성요소
- A flexible/fluid grid
- Responsive images
- Media queries
http://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.php, http://www.abookapart.com/products/responsive-web-design , http://opensignal.com/reports/fragmentation.php
53. Developers actively using HTML5
http://tipsbuilder.com/how-to-blogg/top-10-developer-statistics-and-trends-on-html5/
54. Types of apps built by HTML5
http://tipsbuilder.com/how-to-blogg/top-10-developer-statistics-and-trends-on-html5/
55. 기업이 지원해야 할 모바일 OS의 개수
4+ 3 2 1 0
12%
39%
25%
15%
9%
http://www.nipa.kr/know/periodicalView.it?identifier=02-001-110531-000004menuNo=28code=B_ITA_01
멀티 플랫폼 요건 : 50%
(Forrester, July 2009)
61. HTML5 개발 플랫폼에 대한 요구사항
• 웹 페이지가 아닌 웹 애플리케이션 개발
• 원소스 롱유즈 (상위호환성)
• 원소스 멀티유즈 (멀티플랫폼 지원)
• PC, 모바일 동시 지원
• 모바일에 적합한 UI 컴포넌트 지원
• 개발 생산성
• 손쉬운 수정 및 반영
• 네이티브 기능 지원
65. • 장애인 차별 금지법에 의한 웹접근성 준수
• 보편적인 웹 접근성 확대와 특정 플랫폼에 종속적이지 않는 인터넷 환경
으로 개선
• 다양한 웹 브라우저 및 다양한 OS에 대한 높은 상호 호환성 확보
• 스마트폰, 태블릿PC 등 웹 접근이 가능한 다양한 모바일 디바이스를 동
시 지원할 수 있는 기술확보
• 인터넷 익스플로러, 액티브X에 대한 기술 편향성을 벗어나 글로벌 서비
스가 가능한 웹 표준으로의 빠른 이행 필요
• 국제적인 웹 트렌드 수용과 HTML5 활용을 위한 기반 확보
• 높은 확장성을 기반으로 오픈소스 연계 및 HTML5 기술을 지원할 수 있
어야 함
UI 솔루션을 도입시 고려사항
69. •웹 표준 기술
•One source, Multi use (하이브리드 앱 지원)
•Cross Browsing/Cross Platform 지원
•WYSIWYG 통합 개발도구 (데스탑/모바일)
•반응형/적응형 웹 지원
•웹 접근성 지원
•다국어 지원
•그리드 등 다양한 UI 컴포넌트
웹스퀘어로 가능한 것들
71. 업무화면
웹스퀘어 클라이언트
아키텍처
UDC, Inherit
UI
Engine
Promise, SPA
DataCollection
Logging
Debugging
통신
HTTP/JSON/REST/XML
서버 아키텍처
WAS
OS
Presentation
XML
JSP
이미지
HTML
웹스퀘어 파일
UI 컴포넌트
Adaptor
Back End
Framework
Application
DB I/O
Data
JEUS
Jboss
DB DB
개발도구
WebSquare Studio
Design View
Code Editor
Preview
Client
스마트 기기
모바일 지원
스마트 폰
태블릿 PC
PC
OS
HTTP
XML
Deploy
노트북
웹스퀘어 아키텍처
75. 사업개요 관련화면
-국세 서비스 관련 웹사이트 통합
-웹표준, 웹호환성, 웹접근성 및 장애인차별금지
법 준수
-8개 단위 시스템을 하나로 통합
-성능에 민감한 연말정산 등 대다수의 국민이 사
용하는 시스템에 적용
-구형 브라우저를 포함한 다양한 브라우저 및 OS
지원
-OS : Windows, Mac, Linux
76.
-브라우저 : IE, Chrome, Safari, Opera,
Firefox
▪ 사업의 목적
▪ 사업의특징
▪ 플랫폼지원범위
구축사례 - 국세청 차세대 프로젝트