차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안
4 likes1,114 views
웹표준 및 웹접근성을 준수하는 실무 Front-End 개발 전문가 양성과정 특강 자료
차세대 웹(Html5) 플랫폼의 동향과 기업 업무 적용 방안
- 1. 차세대 웹(HTML5) 플랫폼의 동향과 기업 업무 적용 방안 2015.8 김욱래 (kimwooglae@gmail.com)
- 2. 발표자 소개 김욱래 • W3C AC(Advisory Committee) Member • ActiveX 대체기술 개발 시범사업 책임자(KISA) • (주)인스웨이브 시스템즈 연구개발본부 본부장 • HTML5 UI 플랫폼 WebSquare 개발 • kimwooglae@gmail.com
- 3. 목차 • Mobile • UI, OS, Browser • HTML5 • Solution • About
- 4. Mobile
- 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
- 7. PCs including tablets,Worldwide, forecast of units (millions) by category, 2014 - 2018 http://www.canalys.com/chart/index.html#display-345 2014 2015 2016 2017 2018 353 326 293 253 218 264271 280 294 309 Desktop + Notebook Tablet
- 9. iOS vs Android http://www.idc.com/prodserv/smartphone-os-market-share.jsp 2013 3Q 2014 3Q 84%81% 12%13% iOS Android Microsoft Others
- 10. UI, Browser, OS
- 11. UI 기술의 진화
- 12. RIA의 종말 2008 2009 2010 2011 2012 2013 RIA Platforms was removed from Hype Cycle http://koko8829.tistory.com/1399
- 14. OS 리스크 2014년 4월 8일 윈도우 XP 짶원 종료 -> 금융기관은 2014년 4월 8일 이전 OS 업그레이드(금감원 권 고사항) -> 전세계 악성코드의 57%가 우 리나라에서 유포 MS 최신 운영체제 윈도우 8.1 -> IE11만 짶원
- 15. 액티브
- 16. X와
- 17. 같은
- 18. 낡은
- 19. 규제에
- 20. 안주한
- 21. 결과
- 22. 국내소비자의
- 23. 해외직구는
- 24. 폭발적으로
- 25. 느는데
- 26. 해외소비자의
- 27. 국내
- 28. 역
- 29. 직구는
- 30. 걸음마
- 31. 수준입니다. -
- 32. 박근혜
- 33. 대통령
- 34. 신년
- 35. 기자회견-
- 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
- 37. 브라우저 점유율 Worldwide 0 20 40 60 80 100 2008-12 2010-06 2011-12 2013-06 2014-12 IE Chrome Firefox Safari Opera Others http://gs.statcounter.com/#browser-ww-monthly-200807-201311 , http://gs.statcounter.com/#browser-KR-monthly-201001-201311 Korea 20 40 60 80 100 2009-12 2010-12 2011-12 2012-12 2013-12 2014-12
- 38. Multi Platform 짶원 요구 증가 다양한 웹브라우저PC OS 모바일 OS
- 39. Multi Device 짶원 고려 IP/스마트 TV HTML5 기반 개방형 TV 플랫폼 표준 제정 http://www.dt.co.kr/contents.html?article_no=2013032902010231742002
- 40. One Source, Multi Use 최소 비용 최대 효과
- 41. HTML5
- 42. W3C총회에서 HTML5 표준 등록 - 2014.10.28
- 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
- 45. HTML5 - The Technology 3D, Graphics, Effects Connectivity CSS3 Styling Device Access Multimedia Offline Storage Performance Integration HTML5 Semantics http://www.w3.org/html/logo/
- 46. HTML5 Roadmap •HTML5.1 Recommendation in Q4, 2016 •Application Foundation •Modularity http://dev.w3.org/html5/decision-policy/html5-2014-plan.html
- 47. What comes next?
- 49. 브라우저 별 HTML5 짶원 수준 0 120 240 360 480 600 Chrome Opera Firefox Safari IE11 IE10 IE9 IE8 Chrome Firefox Mobile Android iOS8.0 Windows Phone8.1 346 405 452456 493 33 113 297 336 396 449 497501 DESKTOP MOBILE http://html5test.com/results/desktop.html
- 50. Galaxy S2 Galaxy Tab 10.1 iPhone 4S Galaxy S3 iPhone 5 iPad 4 0 250 500 750 1,000 951 907 680 438 356 255 모바일 브라우저 속도 http://peacekeeper.futuremark.com/results?key=stats
- 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)
- 56. 평균 2.5개의 OS를 짶원 appcelerator
- 57. HTML5 vs. Hybrid vs. Native http://www.kendoui.com/surveys/html5-native-debate-is-over.aspx
- 58. Cost savings by Hybrid approach http://www.kendoui.com/surveys/html5-native-debate-is-over.aspx
- 60. Solution
- 61. HTML5 개발 플랫폼에 대한 요구사항 • 웹 페이지가 아닌 웹 애플리케이션 개발 • 원소스 롱유즈 (상위호환성) • 원소스 멀티유즈 (멀티플랫폼 짶원) • PC, 모바일 동시 짶원 • 모바일에 적합한 UI 컴포넌트 짶원 • 개발 생산성 • 손쉬운 수정 및 반영 • 네이티브 기능 짶원
- 62. HTML5 기술 적용 시 문제점
- 64. 웹표준 준수와 효과적인 개발과 유지보수를 위해서는 상용 솔루션 도입이 필요!
- 65. • 장애인 차별 금지법에 의한 웹접근성 준수 • 보편적인 웹 접근성 확대와 특정 플랫폼에 종속적이지 않는 인터넷 환경 으로 개선 • 다양한 웹 브라우저 및 다양한 OS에 대한 높은 상호 호환성 확보 • 스마트폰, 태블릿PC 등 웹 접근이 가능한 다양한 모바일 디바이스를 동 시 짶원할 수 있는 기술확보 • 인터넷 익스플로러, 액티브X에 대한 기술 편향성을 벗어나 글로벌 서비 스가 가능한 웹 표준으로의 빠른 이행 필요 • 국제적인 웹 트렌드 수용과 HTML5 활용을 위한 기반 확보 • 높은 확장성을 기반으로 오픈소스 연계 및 HTML5 기술을 짶원할 수 있 어야 함 UI 솔루션을 도입시 고려사항
- 67. About
- 68. 웹스퀘어( )는 국내 최초로 출시된 WYSIWYG 개발 도구가 포함된 HTML5 UI플랫폼
- 69. •웹 표준 기술 •One source, Multi use (하이브리드 앱 짶원) •Cross Browsing/Cross Platform 짶원 •WYSIWYG 통합 개발도구 (데스탑/모바일) •반응형/적응형 웹 짶원 •웹 접근성 짶원 •다국어 짶원 •그리드 등 다양한 UI 컴포넌트 웹스퀘어로 가능한 것들
- 70. 웹스퀘어 구성
- 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 노트북 웹스퀘어 아키텍처
- 72. WYSIWYG 개발도구
- 73. 60여종의 UI Components 짶원
- 74. 적응형/반응형 웹 짶원
- 75. 사업개요 관련화면 -국세 서비스 관련 웹사이트 통합 -웹표준, 웹호환성, 웹접근성 및 장애인차별금지 법 준수 -8개 단위 시스템을 하나로 통합 -성능에 민감한 연말정산 등 대다수의 국민이 사 용하는 시스템에 적용 -구형 브라우저를 포함한 다양한 브라우저 및 OS 짶원 -OS : Windows, Mac, Linux
- 76. -브라우저 : IE, Chrome, Safari, Opera, Firefox ▪ 사업의 목적 ▪ 사업의특징 ▪ 플랫폼짶원범위 구축사례 - 국세청 차세대 프로젝트
- 77. 사업개요 관련화면 -
- 78. 인터넷 뱅킹을 다양한 브라우저와 운영체제에 서 가능하도록 웹 접근성을 개선
- 79. -
- 80. 웹접근성
- 81. 및
- 82. 장애인 차별 금지법 대응 -
- 83. 웹접근성을 짶원하기 위해 HTML5 UI Platform 도입함
- 84. - 액티브 X를 설치하지 않고도 웹 표준 기술로만 구축하여 사용자 접근성 및 편의성을 획기적으로 향상시킴
- 85. -OS : Windows 7/8/8.1, Windows XP
- 86. -브라우저 : IE, Chrome, Safari, Opera, Firefox, Android Browser, Mobile Safari ▪ 사업의 목적 ▪ 사업의특징 ▪ 플랫폼짶원범위 구축사례 - 신한은행 홈페이지/오픈뱅킹
- 87. 사업개요 관련화면 -N-Screen 짶원 모니터링 솔루션 구축으로 현장대 응력 강화
- 88. -스마트워킹을 짶원하기 위한 HTML5 기반의 OSMU 모니터링 시스템 구축
- 89. -하나의 소스로 다양한 OS, 브라우저, 디바이스 짶원
- 90. -반응형/적응형웹 기술을 적용하여 다양한 디바이스 에 빠른 대응
- 91. -OS : Windows, Mac, iOS, Android
- 92. -디바이스 : PC, Tablet, Smart Phone
- 93. -브라우저 : IE, Chrome, Safari, Opera, Firefox, Android Browser, Mobile Safari ▪ 사업의 목적 ▪ 사업의특징 ▪ 플랫폼짶원범위 OSMU 구축사례 - LG U+ 현장체감 품질관제
- 94. 구축사례 콜 센터 화면 - 개인화 / 권한관리 포함 방송국 편성표 영 - 개인화 / 권한관리 포함 ERP UI - 개인화 / 권한관리 포함
- 95. 영업관리 시스템 보험사 웹세일즈 금융권 보안 포털시스템 전자투표 시스템 구축사례
- 96. 구축사례
- 97. Over 300 Customers 주요 고객
- 98. WebSquare PatentedTechnologies W3CMember •2007년 WebSquare •2012년 WebSquare Hybrid •2014년 WebSquare5 •한국 특허 : 8건 •미국 특허: 1건 • W3C 회원사 • Global: 394 회원사 • Korea: 14 회원사 HTML5 기반의 RIA 플랫폼 선도 기업