강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안

5,732 views

Published on

Published in: Technology

강의자료 차세대 웹(Html5) 플랫폼의 동향과 구축 방안

  1. 1. 차세대 웹(HTML5) 플랫폼의 동향과 구축방안2013.4Inswave Systems김욱래 (wlkim@inswave.com)
  2. 2. 목차• Mobile Trends• UI Trends• HTML5• Solution• WebSquare• About Inswave
  3. 3. Mobile Trends
  4. 4. 가트너, 2013년 10대 전략 기술 트렌드• Mobile Device Battles• Mobile Applicationsand HTML5• Personal Cloud• Enterprise App Stores• The Internet ofThingshttp://www.gartner.com/it/page.jsp?id=2209615• Hybrid IT and CloudComputing• Strategic Big Data• Actionable Analytics• In MemoryComputing• Integrated Ecosystems
  5. 5. 숫자로 보는 모바일http://smarterplanet.co.kr/2012/11/06/mobile/
  6. 6. 2016년 모바일 시장 전망http://smarterplanet.co.kr/2012/11/06/mobile/
  7. 7. 2015년 사용 예상 기기TelevisionsConnected CarsGame ConsolesFoldable ScreenGoogle Glass83.5%74.0%71.2%68.1%67.1%
  8. 8. 스마트폰 + 태블릿 vs PCDesktop PCs Notebook PCs Smartphones Tablets0 M1,000 M2,000 M3,000 M2009 2010 2011 2012E 2013E 2014E 2015ESmartphone + Tablet > PCKPCB, http://techcrunch.com/2012/11/05/mary-meeker-internet-trends/
  9. 9. 모바일 웹 트래픽 점유율http://royal.pingdom.com/2012/05/08/mobile-web-traffic-asia-tripled/ , http://gs.statcounter.com/#mobile_vs_desktop-KR-monthly-200909-201211
  10. 10. iOS vs Androidhttp://www.idc.com/getdoc.jsp?containerId=prUS23771812 , http://www.idc.com/getdoc.jsp?containerId=prUS237724122011 3Q 2012 3Q14%30%9%4%9%18%7%50%60%태블릿 시장 점유율Apple SamsungAmazon AsusOthers2011 3Q 2012 3Q10%29%75%58%15%14%스마트폰 시장 점유율iOS AndroidOthers
  11. 11. 모바일 기기별 웹 트래픽 점유율iPhone46%Galaxy17%Others37%http://venturebeat.com/2012/10/17/android-smartphones-now-have-majority-mobile-web-traffic-share/
  12. 12. 브라우저 점유율0204060801002008-072009-072010-072011-072012-07WorldwideIE Firefox Chrome Safari Opera Otherhttp://gs.statcounter.com/#browser-ww-monthly-200807-201211, http://gs.statcounter.com/#browser-KR-monthly-201001-201209204060801002010-01 2010-10 2011-07 2012-04 2013-01Korea
  13. 13. Windows 8/RT• 두가지 UX (클래식, 메트로)• 두가지 H/W (X86,ARM)• 낮은 성능의 태블릿 브라우저 (FutureMark Score :348 )• ActiveX 미지원 (메트로,ARM)• 초라한 윈도우 8 성적표, 윈도 비스타에도 못미친다http://www.macworld.co.uk/apple-business/news/?newsid=3409089&olo=rsshttp://deepers.net/archives/2623
  14. 14. Summary• 모바일 빅 트랜드는 이제 시작 단계• 모바일 기기의 중심이 iOS에서 Android로 이동 (태블릿 포함)• 윈도우 8/RT는 아직 판단하기 이름
  15. 15. UI Trends
  16. 16. UI 기술의 진화
  17. 17. 비표준 웹기술 동향스티브잡스, 아이폰서 플래시 거부- 2010.5.15 | 연합뉴스어도비, 모바일용 플래시 포기... HTML5에 집중- 2011.11.10 | ITWORLD실버라이트5 공개 임박… 후속판은 없다?- 2010.11.10 | ZDNET미래부, 웹사이트서 액티브X 걷어낸다2013.04.18 | 베타뉴스MS! "HTML5는 옳은 길이다"IE9는 HTML5 전격 지원정부 정책 동향행정안전부고시 제2010-40호(웹 호환성 준수지침, 액티브X 배제)방송통신위원회, 행정안전부 에서는 액티브X(Active X) 퇴출을 적극적으로 유도하고 있음 (공공기관 우선 적용)방통위의 액티브X 대체기술 가이드라인(웹표준 기술 사용 권고)한국정보화진흥원의 웹접근성 향상을 위한 국가표준 기술 가이드 라인 제시법제처의 장애인차별금지법 제정(웹 접근성 개선 유도, 금융기관 우선 적용)
  18. 18. OS 업그레이드 리스크2014년 윈도우 XP 지원 종료-> IE9이상은 미 지원-> 전세계 악성코드의 57%가 우리나라에서 유포MS 차세대 운영체제 윈도우 8-> 모바일 환경은 Active-X 배제윈도우8메트로 UI
  19. 19. PC 시대의 종말?http://www.gartner.com/newsroom/id/2420816http://review.chosun.com/site/data/html_dir/2013/04/12/2013041200543.htmlhttp://www.asiatoday.co.kr/news/view.asp?seq=7941642012 1Q 2013 1QWorldwide PCVendor Unit ShipmentHP Lenovo DellAcer Asus Others11.2%감소• 1분기 세계 PC 출하량10% 이상 줄어…4분기연속 감소- 조선일보 -• 1분기 PC 출하량, 2009년 2분기 이후 최저…′PC 종말′ 오나- 아시아투데이 -
  20. 20. Multi Platform 지원 요구 증가다양한 웹브라우저PC OS 모바일 OS
  21. 21. Multi Device 지원 고려IP/스마트 TVHTML5 기반 개방형TV 플랫폼 표준 제정http://www.dt.co.kr/contents.html?article_no=2013032902010231742002
  22. 22. One Source, Multi Use최소 비용최대 효과
  23. 23. HTML 5
  24. 24. HTML5http://www.w3.org/html/logo/
  25. 25. HTML5 로드맵• HTML5 Recommendation in Q4, 2014• HTML5.1 Recommendation in Q4, 2016• Modularityhttp://dev.w3.org/html5/decision-policy/html5-2014-plan.html
  26. 26. = HTML + CSS + JShttp://en.wikipedia.org/wiki/HTML5
  27. 27. HTML5 - The Technology3D, Graphics,EffectsConnectivityCSS3 StylingDevice AccessMultimediaOffline & StoragePerformance &IntegrationHTML5Semanticshttp://www.w3.org/html/logo/
  28. 28. 110 Sessions- Speakers -Google, Microsoft, Mozilla,Yahoo!, Facebook,Twitter,LinkedIn,Yammer,Adobe,Intel,YouTube,Airbnb,Disqus, Github, Enyo,Disney, PayPal, Pinterest,EventBrite, ......
  29. 29. From HTML5 DevConf• HTML5ApplicationPlatform• New Mobile OS• CSS3, SASS, SPA,BaaS, SVG, Canvas,WebSocket,NodeJS, ...
  30. 30. 브라우저 별 HTML5 지원 수준0100200300400500ChromeOperaSafariFirefoxIE10IE9IE8ChromeFirefoxMobileiOS6.0WindowsPhone8Android29732038638839042138320372378389434DESKTOP MOBILEhttp://html5test.com/results/desktop.html
  31. 31. HTML5 적용 전략• Lowest common denominator• Vertical slices• Using Polyfills - Modernizr• Using fallbacks strategieshttp://www.codeproject.com/Articles/249438/HTML5-Adoption-Strategies
  32. 32. HTML5에 대한 만족도1. Cross-developmentcapabilities (83.4%)2. Immediate updates (81.3%)1. Monetization (83.4%)2. Security (81.8%)3. Fragmentation (75.4%)4. Performance (72.4%)
  33. 33. Galaxy S2Galaxy Tab 10.1iPhone 4SGalaxy S3iPhone 5iPad 40 250 500 750 1,000951907680438356255모바일 브라우저 속도http://peacekeeper.futuremark.com/results?key=stats
  34. 34. IE 6Galaxy S2Galaxy Tab 10.1iPhone 4SIE 7Galaxy S3iPhone 5iPad 4IE 9chrome0 875 1,750 2,625 3,5003,3982,070951907680541438356255171모바일 브라우저 속도vs PC 브라우저 속도http://peacekeeper.futuremark.com/results?key=stats
  35. 35. 반응형 웹 디자인• One website for everyscreen• 화면크기, 플랫폼 및 방향에 반응하는 웹 디자인• 구성요소- A flexible/fluid grid- Responsive images- Media querieshttp://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.php, http://www.abookapart.com/products/responsive-web-design , http://opensignal.com/reports/fragmentation.php
  36. 36. 기업이 지원해야 할 모바일 OS의 개수4+ 3 2 1 012%39%25%15%9%http://www.nipa.kr/know/periodicalView.it?identifier=02-001-110531-000004&menuNo=28&code=B_ITA_01멀티 플랫폼 요건 : 50%(Forrester, July 2009)
  37. 37. 네이티브앱 vs 하이브리드앱 vs 웹앱네이티브앱- 빠른 속도- 디바이스 제어- 플랫폼 별 개발하이브리드앱- 개발 용이- 멀티플랫폼- 디바이스 제어웹앱- 개발 용이- 멀티플랫폼- 디바이스 제어불가
  38. 38. 하이브리드앱• Native App + Web Based UI• Multi Device• Device ControlMobile OS (iOS,Android,Window Phone, …)SandboxHybrid App Frameworkbrowser ApplicationNativeAPIJavaScriptAPI
  39. 39. 하이브리드앱 플랫폼 비교01002003004005002008-01 2009-01 2010-01 2011-01 2012-01Cordova PhoneGap Appcelerator Senchahttp://www.google.com/trends/explore#cat=0-5&q=phonegap%2C%20appcelerator%2C%20sencha&date=1%2F2008%2059m&cmpt=q
  40. 40. HTML5 is real, it’s now and it’s alsothe futurehttp://venturebeat.com/2013/02/26/what-developers-do-with-html5-infographic/http://venturebeat.com/2013/02/26/5000-developers-say-html5-is-real-its-now-and-yeah-its-also-the-future/
  41. 41. 멀티플랫폼 지원전략 - Facebook• Android, iOS Native앱 개발- Tooling / DeveloperAPIs- Scrolling performance- GPU/CSS3• Mobile Web 점유율은여전히 50%이상http://www.businessinsider.com/mark-zuckerberg-html5-mobile-2012-9http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0021.htmlKeeping the Dream Alive, HTML5 DevConf
  42. 42. 멀티플랫폼 지원전략 - LinkedIn• Hybrid App• 10+ OS SupportiOS AndroidMobileWeb Others80%30% 100%100%20%70%Web NativeMobile HTML5 implications on architecture, performance, process. HTML5 DevConf
  43. 43. 멀티플랫폼 지원전략 - Netflix• N-Screen• Over 400 devices• WebKit+HTML• Move from Silverlightto HTML5http://techblog.netflix.com/2011/09/netflix-webkit-based-ui-for-tv-devices.htmlhttp://www.theverge.com/2013/4/15/4228248/netflix-plans-its-move-from-microsoft-silverlight-to-html5-video
  44. 44. Solution
  45. 45. 기업용 HTML5 개발 플랫폼에 대한 요구사항• 원소스 멀티유즈 (멀티플랫폼 지원)• PC, 모바일 동시 지원• 모바일에 적합한 UI 컴포넌트 지원• 개발 생산성• 손쉬운 수정 및 반영• 네이티브 기능 지원
  46. 46. HTML5 기술 적용 시 문제점
  47. 47. 웹표준 준수와효과적인 개발과유지보수를 위해서는솔루션 도입이 필요!
  48. 48. • 보편적인 웹 접근성 확대와 특정 플랫폼에 종속적이지 않는 인터넷 환경으로 개선• 다양한 웹 브라우저 및 다양한 OS에 대한 높은 상호 호환성 확보• 스마트폰, 태블릿PC 등 웹 접근이 가능한 다양한 모바일 디바이스를 동시 지원할 수 있는 기술확보• 인터넷 익스플로러, 액티브X에 대한 기술 편향성을 벗어나 글로벌 서비스가 가능한 웹 표준으로의 빠른 이행 필요• 국제적인 웹 트렌드 수용과 차세대 웹 표준인 HTML5 활용을 위한 기반확보• 높은 확장성을 기반으로 오픈소스 연계 및 HTML5와 같은 차세대 웹표준 기술을 지원할 수 있어야 함UI 솔루션 도입시 고려사항
  49. 49. 국내 UI제품 현황구분Out Of Browser RIAOut Of Browser RIA In Browser RIA (Pure Web)In Browser RIA (Pure Web)구분Component Platform Component Platform특징- 단순 컴포넌트 라이브러리 형태로 제공(DLL 형태)- 실행환경과 개발툴을 통합해서 제공- 지난 10년간 UI시장의 주도- 단순 컴포넌트 라이브러리 형태로 제공(JS 형태)- 웹 표준 실행환경과 개발툴을통합해서 제공- 멀티 OS, 멀티 브라우저, 모바 일 웹 등을 지원제품IBsheet,WiseGrid,Rmate,Expert Grid 등GAUSE, MI/XPlatform(Runtime)TrustForm, Flash/Flex,SilverLight 등IBsheet, WiseGrid 등WebSquare, eXria,XPlatform(AJAX)등장/단점- 가격 저렴- 도구 부재로 인한 수작업개발에 의한 생산성 문제- Active-X기술을 사용하여 특정 OS와 웹브라우저에 의존적 (MSWindows, IE에 국한)- 다양한 컴포넌트 제공이 가능하고로컬 자원 접근 등 확장 기능들을 사용하기 용이하지만 재사용성 및 플랫폼 호환성이 부족함.- 가격 저렴- 플랫폼 제품을 선호하는 국내 특성상 제한적으로 쓰임- 도구 부재로 인한 수작업 개발에의한 생산성 문제- 모바일에 대한 지원이 미흡- W3C 표준이 자연스럽게 준수되고 서로 다른 기기에서 웹 브라우저 설치만으로도 호환성이 보장됨.- HTML5 표준화 작업 등이 진행되면서Out of Browser RIA의 장점을 흡수하고 있음.향후 전망- 멀티 OS, 멀티 브라우저, 모바일 환경 지원에 한계 노출- Flash는 HTML5 표준화가 진행되면서, iOS, IE 10 등 모바일 중심의 주요 브라우저 및 플랫폼에서 퇴출될 가능성 있- 차세대 운영체재인 Windows 8이후 Active-X 지원 불투명(IE10 모바일 버전에서는 Active-X 사용 불가)- 정부적인 차원에서 점차적으로 Active-X 사용을 줄이고자 하여그 씀임새가 줄어 들것으로 예상됨- 멀티 OS, 멀티 브라우저, 모바일 환경 지원에 한계 노출- Flash는 HTML5 표준화가 진행되면서, iOS, IE 10 등 모바일 중심의 주요 브라우저 및 플랫폼에서 퇴출될 가능성 있- 차세대 운영체재인 Windows 8이후 Active-X 지원 불투명(IE10 모바일 버전에서는 Active-X 사용 불가)- 정부적인 차원에서 점차적으로 Active-X 사용을 줄이고자 하여그 씀임새가 줄어 들것으로 예상됨- 컴포넌트 보다는 국내 특성상 개발도구가 포함된 플랫폼 제품이 시장을주도할 것으로 전망됨- 멀티 OS, 멀티 브라우저, 멀티 디바이스(모바일) 충족에 대한 수요가 폭발적으로 늘어나면서 웹표준 시장도 확장- 구글, MS,애플, 각 브라우저 회사, 수많은 웹 개발자들의 지원을 받고 있는 차세대 웹표준 HTML5가 주요 웹구현 기술로 자리 잡을 것임- 따라서 Pure Web시장이 커지면서 In Browser RIA제품의 수요가 늘어날 것으로 예상됨- 컴포넌트 보다는 국내 특성상 개발도구가 포함된 플랫폼 제품이 시장을주도할 것으로 전망됨- 멀티 OS, 멀티 브라우저, 멀티 디바이스(모바일) 충족에 대한 수요가 폭발적으로 늘어나면서 웹표준 시장도 확장- 구글, MS,애플, 각 브라우저 회사, 수많은 웹 개발자들의 지원을 받고 있는 차세대 웹표준 HTML5가 주요 웹구현 기술로 자리 잡을 것임- 따라서 Pure Web시장이 커지면서 In Browser RIA제품의 수요가 늘어날 것으로 예상됨
  50. 50. WebSquare
  51. 51. HTML5 개발의 단점을 보완한 웹스퀘어
  52. 52. 웹스퀘어 구성하이브리드플랫폼클라우드빌드 *모바일컴포넌트WYSIWYG개발 환경데스트탑컴포넌트웹표준실행환경웹스퀘어 하이브리드 웹스퀘어* 클라우드 빌드는 2013년 제공 예정
  53. 53. 웹스퀘어( )는국내 최초로 출시된WYSIWYG 개발 도구가 포함된HTML5 플랫폼
  54. 54. One Source, Multi Use다양한 이기종 H/W 플랫폼 지원관리문서다양한 OS 지원윈도우즈MS사윈도우즈계열OS동작지원비스타및윈도우7도지원Mac OSiOS애플사MacOS계열동작지원아이폰용OS인iOS에서동작지원리눅스오픈소스Linux계열OS에서동작지원태블릿 PC 지원아이패드 갤럭시 탭PC 지원데스크 톱 PC 노트북 PC스마트 폰 지원아이폰 계열 갤럭시 계열스마트 TV안드로이드구글사의모바일OS인안드로이드에서동작지원MultiDeviceMultiPlatform
  55. 55. 차세대 시스템 구축Port MIS 구축 차세대 시스템 구축e-TRM 시스템 구축품질관리 시스템 구축통계 DB 시스템 구축환경부 국가 온실가스 종합관리 시스템구축u-도시생활 폐기물통합관리 서비스차세대 종합정보시스템지능형 재난감시 및상황전달시스템온실가스정보 시스템통합정보시스템 구축해운 종합정보시스템RFID기반 음식물쓰레기 관리시스템글로벌통합물류무역3단계 구축장기배전설비계획시스템웹표준 RIA 인프라구축舊한국산재의료원 통합 정보시스템 구축국가 온실가스 종합관리 시스템 고도화자동차보험 과오납보험료 환급조회 통합시스템공공웹 청약시스템코러스 WINAS한국어능력시험 운영기반시스템차세대 시스템 구축 학생정보시스템 구축자동차보험 진료비전자청구시스템차세대 시스템 구축KT BIT 프로젝트(차세대 시스템 )영진대 차세대 시스템통신/교육도요타 DMS시스템구축e-catering 시스템 위기관리 시스템 홈페이지 리뉴얼아시아나항공 차세대클럽시스템이지웨어 재구축기타차세대 시스템 구축LIG GA 법인 시스템구축차세대 시스템 구축신한은행 콜센터 어플리케이션 구축알프스론 시스템(온라인 대출 시스템)전자투표 시스템 구축LIG 모바일 시스템파일럿 구축차세대 시스템 구축 대고객 웹서비스 및정보보호시스템통합정보시스템신한은행 글로벌뱅킹구축스마트 채널 인프라(직원용)프로젝트테블릿 영업지원 시스템 1차 구축테블릿 영업지원 시스템 2차 구축인터넷뱅킹(오픈뱅킹) 리뉴얼IFRS 시스템 구축사이버창구 구축중소기업 보증공제시스템 구축LIG손해보험 신사업구축한국신용평가 차세대시스템 구축금융홈페이지 및 모바일시스템 구축홈페이지 재 구축마케팅 BI 구축구축종합정보 시스템 구축 모바일 뱅킹 구축Global ProductSupport System차세대 업무 시스템구축기술평가 시스템 구축다물 식자재 관리 시스템GPSS 고도화하이닉스 HyCRM 구축태양광 시스템 구축 Klnet 전자물류사업 내부업무시스템 구축e-planning 프로젝트카드마감시스템하이브리드 앱 구축(스마트워크)기간계 시스템 구축Outbound MobileServiceGlobal ERP EP 시스템 구축실적원가시스템 구축전자지갑시스템 구축금융 솔루션 구축제조/유통포트MIS 구축광양물류고등학교
  56. 56. •웹 표준 기술•One source, Mult-use (하이브리드 앱 지원)•Cross Browsing/Cross Platform 지원•WYSWYG 통합 개발도구 (데스탑/모바일)•반응형 웹 지원•웹 접근성 지원•다국어 지원•그리드 등 다양한 UI 컴포넌트웹스퀘어로 가능한 것들
  57. 57. About Inswave
  58. 58. HTML5 기반의 RIA 플랫폼 선도 기업“ ”대표자 어 세 룡설립년도 2002년 4월 16일홈페이지 www.inswave.com(정직원 기준)인원 현황기술지원(19명)SM/SI(25명)영업 (4명)연구소 인력(20명)기타 지원(7명) 75명주소본사 서울시 구로구 구로3동 182-13 대륭포스트타워 2차 414호소데이터 센터 서울시 강남구 역삼동 708-6 LG화재 강남빌딩 2층직원수 75명 (정직원 기준)연락처 Tel. 02-2082-1400 (대표전화) Fax. 02-2082-1410BusinessPackage소프트웨어개발/판매 WebSquare (웹 표준 기반 RIA 플랫폼) ProWorks (차세대 ALM기반 통합 프레임워크) 시스템 통합 프로젝트 수행 IT Outsourcing, 데이터 센터 운영 및 시스템 관리 시스템 개발 및 유지보수 운영시스템 통합시스템 관리사업 현황 Direct* Insurer (보험 기간계 Package) Direct* Plus (컨택센터 시스템 Package) 방카슈랑스/보험중개사 패키지 등
  59. 59. 발표자 소개김욱래• (주)인스웨이브 시스템즈 SW본부 본부장• HTML5 UI 플랫폼 WebSquare 개발• 하나은행 차세대 프로젝트 J2EE 프레임워크(ProWorks) 구축 PM• wlkim@inswave.com
  60. 60. Thank you!http://www.websquare.co.kr02-2082-1400

×