데이타베이스시스템연구실 Database Systems Lab. 21. HTML5 정리및하이브리드앱 충남대학교컴퓨터공학과 데이타베이스시스템연구실
HTML5 정리 데이타베이스시스템연구실 Database Systems Lab.
The Evolution of the Web http://evolutionofweb.appspot.com/
HTML5 의구성요소 HTML5 로통칭되는요소는 HTML5 뿐아니라 CSS3, 웹애플리케이션을위한 JavaScript API 확장을포함한것 통칭되는 HTML5 HTML5 (Hypertext Markup Language 5.0) 콘텐츠내용과형식을표현 문서구조의상세화 멀티미디어 폼과이벤트등 CSS3 (Cascading Style Sheet 3.0) 콘텐츠표현방법을정의 표현기능모듈화 웹폰트 JavaScript 각종 API 를통해기능을표현 Web Storage Web Worker Web Socket Geolocation API
HTML5 의특징 HTML5 기술의주요특징 Semantics: 보다구조화되고다양한기능의 HTML 태그를제공 Multimedia: 비디오, 오디오지원기능의자체지원을통한강력한멀티미디어기능제공 Offline & Storage: 네트워크가지원되지않는환경에서도웹이용을가능케하는오프라인처리기능과로컬스토리지, File 액세스처리가능 3D, Graphics & Effects: SVG, 캔버스, WebGL 등을통한다양한 2 차원 /3 차원그래픽기능의제공 Device Access: GPS, 카메라, 동작센서등디바이스의하드웨어기능을웹에서직접제어할수있도록하는기능 Performance & Integration: 비동기통신, 다중쓰레드기능등을통한웹에서의처리성능향상 Connectivity: 클라이언트와서버간의효율적인통신기능제공을통한웹기반커뮤니케이션효율대폭강화 CSS Styling Effect: 기존웹문서의변경과성능저하없이웹애플리케이션의 UI( 스타일과효과등 ) 기능을대폭강화 시사점 보다지능화되고다양한형태의풍부한웹문서표현가능 액티브 X 와플래시같은별도외부플러그필요성제거 웹의한계로여겨졌던네트워크단절시처리방법과데이터저장기능문제해결 외부플러그인없이다양한 2D/3D 그래픽처리가능 웹기반디바이스제어기능을통해본격적인웹애플리케이션개발가능 웹의가장큰문제중하나였던성능문제를대폭개선 웹에서다양한통신 ( 메시징, 응용간통신등 ) 제공을통한응용개발범위확대 UI 측면에서 N- 스크린서비스제공가능
HTML5 를바라보는 5 가지관점 차세대웹기술의총합의관점으로 HTML5 단말, 플랫폼, 스크린의경계가없도록하는 HTML5 새로운앱과 SW 환경으로서의 HTML5 모든정보, 서비스와사물을묶는관점으로 HTML5 인프라와플랫폼으로서의 HTML5
하이브리드앱 데이타베이스시스템연구실 Database Systems Lab.
모바일앱 네이티브앱 웹앱 하이브리드앱 Try it! jquery Mobile(http://jquerymobile.com), Sencha Touch(http://www.sencha.com/products/touch) Cordova(https://cordova.apache.org/) 8
웹앱 웹애플리케이션 (Web Application) 을의미 브라우저주소를통해접속하는형식은 웹앱 애플이 ios 1.0 시절아직앱스토어를오픈하지못하여앱이사용되지못했을때 웹앱 을지원하던것이현재까지도사용된것이계기 http://www.apple.com/webapps
웹앱 과 네이티브앱 의비교 기능웹앱네이티브앱 개발환경 사용언어 기존에사용하던웹개발환경, 모든운영체제가능 HTML,CSS, 자바스크립트 아이폰 ( 매킨토시필요 ) 안드로이드폰 ( 멀티플랫폼 ) 아이폰 (Object-C) 안드로이드폰 ( 자바 ) 앱개발자비용 무료 년 $99( 아이폰 ), $35( 안드로이드 ) 배포 브라우저가설치된환경 앱스토어 / 안드로이드마켓 결제시스템 독자결제구축또는광고수익 앱장터판매수익 하드웨어지원 제한적 모든기능활용 업데이트 즉시반영 검수받아야함 UI 상대적으로제한적 풍부한 UI 가능
하이브리드앱 웹앱 이면서 네이티브앱 의장점을결합한것은 하이브리드앱 웹앱 을개발한후에오픈소스크로스프레임워크를이용하여 네이티브앱 으로변화시켜배포되는앱형식을의미 오픈소스크로스프레임워크 Cordova(https://cordova.apache.org/) 를이용하면 웹앱 을 네이티브앱 으로변환할수있음 : PhoneGap 의오픈소스버전
하이브리드앱의사례 위키피디아모바일 웹상에서누구나편집할수있는무료백과사전을만드는프로젝트 콘텐츠의대부분은 HTML 로되어있음 HTML5 하이브리드의앱의특성을살려모바일에서도콘텐츠를간편하게볼수있도록함 안드로이드버전과 ios 버전이공개 위키피디아모바일 ( 구글플레이스토어 ) Try it! 위키피디아모바일 ( 앱스토어 ) Try it! 12
하이브리드앱의사례 (cont d) 헬스플래닛 Try it! 주식회사타니타헬스링크가제공하는헬스플래닛 healthplanet 은사용자의신체와건강에관한데이터를등록하고관리할수있는웹서비스헬스플래닛의앱버전임 앱을통해서사용자의체중, 체지방률, 걸음수등신체에관한다양한데이터를등록해서관리할수있음 폰갭으로개발된앱 Try it! 13
하이브리드앱의장 / 단점 장점 웹표준을지원하는플랫폼에서큰수정없이실행가능함패키징을통해다양한기기를위한앱을작성할수있음네이티브앱과유사한 UX/UI를제공할수있음 단점 플랫폼이가진모든기능을사용하지못함네이티브앱에비해낮은실행성능을가짐모든기기에서동일한수준의앱표준을지원하지않음
하이브리드앱의개발방법 필요한화면에서만웹뷰를사용 NHN, Daum 앱의경우자체웹프레임워크를사용하는경우가많음개발자가하이브리드앱을만드는데필요한기술을이해해야함 PhoneGap 과같은하이브리드앱프레임워크사용 웹앱프레임워크에서제공하는디바이스 API 와패키징기술을사용 개발자는웹기술과디바이스 API, 패키징기술만으로하이브리드앱을만들수있음 일반적인하이브리드앱제작방법
주요기술 웹표준플랫폼 브라우저기반웹뷰, 웹플랫폼런타임 HTML5, CSS3, JavaScript와관련 APIs DOM, Event 모델등 UI 프레임워크 앱과유사한형태로만들기위한프레임워크웹은문서를위한기술임앱과같은화면구성과사용자상호작용을작성하기에는적합하지않음
주요기술 (cont d) 디바이스 APIs 문서형태가아닌네이티브플랫폼에서제공하는기능을접근하기위한용도 최신웹표준에서정의되어있으나, 네이티브플랫폼에서제공하는모든기능에대해정의되어있지는않음 하이브리드앱을작성하는개발자가직접만들거나, 추가된기능을제공하는 PhoneGap 과같은하이브리드앱프레임워크를이용 Packaging of Mobile Hybrid App Framework 네이티브앱처럼보이기위한기술 Comparing The Top Frameworks For Building Hybrid Mobile Apps http://tutorialzine.com/2015/10/comparing-the-top-frameworks-for-buildinghybrid-mobile-apps/
UI 프레임워크 UI 프레임워크 jquery/jquery Mobile ExtJS, Sencha Touch Etc. 필요한이유 HTML/CSS는페이지단위의문서표현을위한기술앱과같은사용자상호작용을위한화면표현에는부적합한점이있음또한개발하기힘든부분이있음
JQUERY / JQUERY MOBILE jquery 홈페이지 : www.jquery.com jquey Mobile 홈페이지 : www.jquerymobile.com In w3schools.com Try it!
JQUERY 주요기능 엘리먼트선택자 태그 클래스 아이디 pseudo- 클래스 (css 선택자와유사개념 ) 엘리먼트변경, 속성변경 Text, html Attribute CSS 변경 이벤트다양한애니메이션효과지원 Ajax 지원 Plug-in 개념지원 다양한 UI 요소지원
JQUERY MOBILE Touch-Optimized Web UI Framework for Smartphones & Tablets HTML 마크업기반 ( 기존 HTML 마크업전문툴일부이용가능 ) Javascript를몰라도간단한화면구성가능기존사이트를쉽게모바일로변경가능멀티디바이스지원 다양한디바이스지원
JQUERY MOBILE- 예제 <!DOCTYPE html> <html> <head> <title>page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> /> </head> <body> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> <div data-role="page"> <div data-role="header"> <h1>page Title</h1> </div><!-- /header --> <div data-role="content"> <p>page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
SENCHA TOUCH / EXT JS 홈페이지 : http://www.sencha.com/products/touch 버전 : 2.4.1 주요기능 Built on HTML5 Technology Smoother Scrolling and Animations Adaptive Layouts Native Packaging AJAX DOM manipulation Feature Detection Geolocation Icons Touch events
JQUERY MOBILE VS. SENCHA TOUCH HTML5 기반의모바일프레임워크 jquery Mobile HTML 작성처럼 Line by Line 으로마크업하며작성기존 Web 개발과차이적어서익숙한개발방법많은브라우저 ( 기기 ) 를지원기존 Web의손쉬운 Mobile 전환손쉬운사용법 Sencha Touch Java의 AWT나 Swing 처럼 Panel 기반으로화면을구성 JavaScript와 Ext.JS 을배우는비용이추가로필요네이티브앱과매우유사한 UI를제공
디바이스 API 디바이스 API 네이티브플랫폼의기능을사용할수있는자바스크립트 API 디바이스 API 의종류 W3C API Try it! 3 rd -Party API: PhoneGap API User-defined API (Custom API): PhoneGap Plugin Try it!
W3C S DEVICE APIs Web Application Offline / Storage Web SQL Database Local Storage Indexed DB Application Cache Realtime / Communication Web Workers Web Socket Web Notifications File / Hardware Access Native Drag & Drop Desktop Drag-in (File API) Desktop Drag-Out File System APIs Geolocation Device Orientation Speech Input
W3C S DEVICE APIs (cont d) Device and Sensors WG Execution & Security Models Alarm, Contacts, Messaging, Telephony, Raw Sockets Bluetooth, Browser, Calendar, Device Capabilities, Idle, Media Storage, Network Interface, Secure Elements, System Settings 28
PHONEGAP APIs APIs Accelerometer Camera Capture Compass Connection Contacts Device Events File Geolocation Media Notification Storage Plugin APIs
PHONEGAP A standards-based, open-source development framework for building cross-platform mobile apps with HTML, CSS and JavaScript for iphone/ipad, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more. 홈페이지 : www.phonegap.com 오픈소스 : Apache 재단의 Cordova 프로젝트 Adobe 사제공 Nitobi 인수
PHONEGAP 의주요기능 Device API 패키징 빌드 클라우드서비스형태로제공 PHONEGAP 지원플랫폼 Try it!