Upload
-
View
524
Download
7
Embed Size (px)
DESCRIPTION
2011.02.25 WebApps FutureCon 에서 발표한 "2011년 웹 & 모바일 개발자가 주목해야할 기술들" 자료입니다. HTML5,CSS3,Javascript,Responsive Web Design,Device API,Hybrid App,Hybrid Framework 등에 대해서 설명합니다.
Citation preview
웹����������� ������������������ &����������� ������������������ 모바일기술����������� ������������������ 전망
2011권정혁 ( @xguru )
소개•권����������� ������������������ 정����������� ������������������ 혁
➡ K����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 기술전략팀장����������� ������������������
- SW Architect
- Developer Evangelist
➡ 블로그����������� ������������������ -����������� ������������������ http://xguru.net
➡ 트위터����������� ������������������ -����������� ������������������ @xguru
➡ 이메일����������� ������������������ -����������� ������������������ guru����������� ������������������ @����������� ������������������ xguru.net
2010 wasyear of
HTML5ReadWriteWeb - “Top Trends of 2010 : HTML5”
HTML5 ?
HTML5 ~= HTML CSS JS API+ +
Web 에서 Desktop 수준의 App 구현 ➠
Web App
Web App ?
•����������� ������������������ 웹����������� ������������������ 브라우저에서����������� ������������������ 실행
•����������� ������������������ Reading����������� ������������������ ➠����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ Interaction����������� ������������������ with����������� ������������������ Audio/Video/Animation
•����������� ������������������ 데스크탑����������� ������������������ 소프트웨어����������� ������������������ 수준의����������� ������������������ 사용자����������� ������������������ 경험����������� ������������������ (UX)
•����������� ������������������ 서버에서����������� ������������������ 제공되므로����������� ������������������ 신속한����������� ������������������ 업데이트����������� ������������������ *
•����������� ������������������ 다양한����������� ������������������ 디바이스����������� ������������������ 동시����������� ������������������ 지원����������� ������������������ ➠����������� ������������������ 모바일
회사들이����������� ������������������ 각����������� ������������������ 모바일����������� ������������������ 플랫폼용����������� ������������������
네이티브����������� ������������������ 앱을����������� ������������������ 모두����������� ������������������ 만들기는����������� ������������������ 어렵다.
왜����������� ������������������ HTML5가����������� ������������������ 모바일에����������� ������������������ 중요한가����������� ������������������ ?
iOS, Android, WP7, BlackBerry, Symbian, Bada ..
“머리����������� ������������������ 아프다.����������� ������������������ 페이스북에����������� ������������������ 새����������� ������������������ 기능을����������� ������������������ 추가하면����������� ������������������ 동시에����������� ������������������ 7개의����������� ������������������ 플랫폼을����������� ������������������ 작업해야한다.����������� ������������������
HTML5가����������� ������������������ 미래의����������� ������������������ 플랫폼이다.����������� ������������������ ”����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ -����������� ������������������ Facebook����������� ������������������ CTO����������� ������������������ Bret����������� ������������������ Taylor
“구글조차도����������� ������������������ 모든����������� ������������������ 플랫폼을����������� ������������������ 네이티브로����������� ������������������ 지원하기엔����������� ������������������ 예산이����������� ������������������ 모자르다.”����������� ������������������
-����������� ������������������ Google����������� ������������������ VP����������� ������������������ Vic����������� ������������������ Gundotra
정부 , 지자체 모바일 앱 현황기관 App 제작비용 다운로드
방송통신위 방송통신위 3500만원 4670건
법무부 법아����������� ������������������ 놀자 8140만원 160000건
행안부 민원����������� ������������������ 24시 2억원 미집계
문화부 touch����������� ������������������ korea 1900만원 68건
고용노동부 잡영 2억1600만원 4784건
보건복지부 숙녀다이어리 3000만원 112905건
조달청 나라장터알림 9200만원 7181건
특허청 특허정보검색 2억6600만원 833건
통계청 수명계산기 2310만원 331129건
서울시 I-tour 3억1400만원 184094건
서울시 서울종합방재센터 2500만원 10건
경기도 경기산책로 4천만원 5100건
전라남도 U남도����������� ������������������ 여행길잡이 3억원 6600건
연합뉴스 : 정부의 앱 개발비 현황 http://j.mp/korgovapp
Devices 2011
iOS & Android
BB & PlayBook HP WebOS
CR-48 MS WP7with
Nokia
Web Tech2011
HTML5����������� ������������������ ,����������� ������������������ CSS3
Javascript����������� ������������������ !!!
Responsive����������� ������������������ Web����������� ������������������ Design
Web����������� ������������������ App����������� ������������������ Stores
Device����������� ������������������ API
Hybrid����������� ������������������ App����������� ������������������ &����������� ������������������ Cross����������� ������������������ Platform
HTML(5)
Semantics Offline &Storage
DeviceAccess Multi Media Connectivity 3D , 2D
Graphics & EffectsPerformance &
Integration CSS3
HTML5����������� ������������������ 어떻게����������� ������������������ 공부하나요����������� ������������������ ?
•HTML5����������� ������������������ 스펙����������� ������������������ 너무����������� ������������������ 어려워요!����������� ������������������ 게다가����������� ������������������ 영어!
✓����������� ������������������ 한글����������� ������������������ HTML5����������� ������������������ 스펙����������� ������������������ ����������� ������������������ ➠����������� ������������������ ����������� ������������������ http://j.mp/html5ko by ClearBoth.org
•그래도����������� ������������������ 내용이����������� ������������������ 너무����������� ������������������ 많은����������� ������������������ 데요����������� ������������������ ?
✓����������� ������������������ 웹����������� ������������������ 개발자를����������� ������������������ 위한����������� ������������������ 최소스펙����������� ������������������ ➠����������� ������������������ ����������� ������������������ http://j.mp/html5devel
•튜토리얼����������� ������������������ &����������� ������������������ 프리젠테이션����������� ������������������ 은����������� ������������������ 없나요����������� ������������������ ?
✓����������� ������������������ Google����������� ������������������ 의����������� ������������������ 선물����������� ������������������ ➠����������� ������������������ ����������� ������������������ http://www.html5rocks.com/
•그����������� ������������������ 외에����������� ������������������ 꼭����������� ������������������ 추천해주실����������� ������������������ 사이트는����������� ������������������ ?
✓실전����������� ������������������ HTML5����������� ������������������ 가이드����������� ������������������ (����������� ������������������ 한글����������� ������������������ PDF����������� ������������������ ) ➠����������� ������������������ ����������� ������������������ http://j.mp/html5guide_ko
HTML5 와 웹 브라우저
6 7 8 9 3+ 6+ 4+ 10+
iOS 3+ Android2.0+
2011 3Q RIM OS6+
webOS1.4+
HTML5 적용 지금부터!• HTML5shiv : HTML5 IE Enabling Script - by Remy Sharp
<!--[if����������� ������������������ lt����������� ������������������ IE����������� ������������������ 9]><script����������� ������������������ src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
✓ John Resig 의 제안 : http://ejohn.org/blog/html5-shiv/ , IE 6 까지 지원
• Mordernizr - http://www.modernizr.com/✓ HTML5Shiv 기능을 포함하여 CSS3 (조건분기) 까지 더 폭넓은 지원✓ Modernizr 객체를 생성하여 HTML5, CSS3 기능이 지원되는지 검사if����������� ������������������ (Modernizr.canvas)����������� ������������������ {����������� ������������������ var����������� ������������������ c����������� ������������������ =����������� ������������������ document.createElement('canvas');����������� ������������������ var����������� ������������������ context����������� ������������������ =����������� ������������������ c.getContext('2d');����������� ������������������ //����������� ������������������ 캔버스����������� ������������������ 사용����������� ������������������ document.getElementById('canvasContainer').appendChild(c);}
• HTML5 Boilerplate - http://html5boilerplate.com/✓ 즉시 사용 가능한 HTML5 기본양식✓ Boilerplate 에서 참고할만한 Snippet 20가지 - http://j.mp/hDExIw
HTML5 Initializer
• http://initializr.com/
• HTML5 Boilerplate 에 기반
• jQuery
• Modernizer / HTML5shiv
• 서버 설정 파일
HTML5 Video & Audio• 20종의 HTML5 Video Player - http://j.mp/dfxNMQ
✓ Video JS , JW Player , Mediaelement.js , Projekktor ..
✓ Flash Fallback 을 이용해서 IE 까지 지원
• VideoJS
✓ http://videojs.com/ - Free & OpenSource , Skin , Full Screen 지원
• Audio.js
✓ http://kolber.github.com/audiojs/ , OpenSource(MIT)
Javascript !!!
• 자바스크립트의 재발견
• Javascript Library for Mobile
• UI Frameworks
• Application Frameworks
• Server-side JavaScript
• Languages that Compiles to JS
Javascript for Mobile• - http://zeptojs.com
✓ Mobile 만을 위한 자바스크립트 라이브러리 ( Mobile WebKit 최적화 )
✓ jQuery 와 유사한 문법 제공 but jQuery ( 26.7 K ) , Zepto.js ( 2.3K )
✓ 오픈소스 ( MIT License )
✓ $('p').html('test').css('color:red');
✓ get,each,index,first,find,closest,next,prev,remove,html,show,hide,offset,height,width,attr,css,addClass..
✓ AJAX : $.post , $.getJSON
✓ Touch Event-‐ $('some selector').tap(function(){ ... });
-‐ $('some selector').doubleTap(function(){ ... });
-‐ $('some selector').swipe(function(){ ... });
UI Library for Touch Devices
• jQTouch - http://jqtouch.com
• jQueryMobile - http://jquerymobile.com
• Sencha Touch - http://sencha.com
• DHTMLX Touch - http://dhtmlx.com/touch/
• jo - http://joapp.com
• wink - http://winktoolkit.org
• Cross����������� ������������������ Platform����������� ������������������ 지원����������� ������������������ 프레임웍들����������� ������������������ 증가• GUI����������� ������������������ Designer����������� ������������������ :����������� ������������������ DHTMLX����������� ������������������ (Alpha)����������� ������������������ ,����������� ������������������ Sencha����������� ������������������ (2011����������� ������������������ Q2����������� ������������������ )
Web UI는 Touch 와 친화적이지 않음
Javascript Application Frameworks
•데스크탑����������� ������������������ 수준의����������� ������������������ Web����������� ������������������ Application����������� ������������������ 작성
✓ Sproutcore����������� ������������������ :����������� ������������������ Cocoa����������� ������������������ for����������� ������������������ Web����������� ������������������ -����������� ������������������ http://sproutcore.com
✓ Cappuccino����������� ������������������ ����������� ������������������ (����������� ������������������ Objective-J����������� ������������������ )-����������� ������������������ http://cappuccino.org
✓ Qooxdoo����������� ������������������ -����������� ������������������ http://qooxdoo.org/
•Javascript����������� ������������������ 기반����������� ������������������ Web����������� ������������������ Framework
✓ JavascriptMVC����������� ������������������ -����������� ������������������ http://www.javascriptmvc.com/
✓ Rails-Like����������� ������������������ Framework����������� ������������������ for����������� ������������������ Mobile����������� ������������������ App����������� ������������������ -����������� ������������������ 37����������� ������������������ Signals����������� ������������������
✓ JJ����������� ������������������ -����������� ������������������ Javascript����������� ������������������ App����������� ������������������ Framework
Server-side Javascript• Netscape Livewire를 시작으로 다양한 접근 http://j.mp/eNt2Ay
• Node.JS : Evented Server-Side Javascript http://nodejs.org/
✓ Google Chrome 의 Javascript Engine V8 을 단독으로 사용
✓ 모든 Network I/O 는 NonBlocking , File I/O 는 Asynchronous
✓ Thread 방식에 비해 뛰어난 성능, 다양한 모듈 개발중 (S3,MySQL.. )
✓ HTTPd , FTPd , IMAP, WebDAV 등 다양한 서버 모듈 개발 완료
• CommonJS : Ecosystem for Javascript Outside the Browser , http://commonjs.org/
✓ 브라우저가 아닌 서버/데스크탑 어플을 작성하기 위한 스펙들
✓ Server-Side , Command Line , Desktop GUI , Hybrid ( Titanium .. )
✓ 모듈 시스템 , 파일시스템 , 유닛테스팅 , 콘솔 , Promise .. 등등
Javascript����������� ������������������ 로����������� ������������������ 컴파일����������� ������������������ 되는����������� ������������������ 언어들
• List of Languages that compile to JS : http://j.mp/hp2pnR
• CoffeeScript & Kaffeine : Javascript 를 더 간결하게
• Optimizer : Google Closure , UglifyJS
• Ruby , Python , Lisp & Scheme
• j2js : Java ByteCode to JS / Script# : C# to JS
CoffeeScript• Javascript 로 컴파일 되는 간단한 언어 : coffee -c hello.coffee ➠ hello.js
• ; 과 { 가 없는 영어같은 문법, 들여쓰기 기반 , Inspired by Python & Ruby
http://coffeescript.com
number = 42opposite = truenumber = -42 if oppositeignore = yes unless name is ‘xguru’square = (x) -> x * xmath = root: Math.sqrt square: square cube: (x) -> x * square x
cubes = (Math.cube num for num in list )
number = 42 ;opposite = true ;if (opposite) { number = -42 ; } if ( name !== ‘xguru’ ) { ignore = true ; } square = function(x) { return x * x; };math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); }};cubes = (function() {
var _i, _len, _results; results = [];for (_i = 0,_len = list.length,_i<_len,_i++) { num=list[_i]; _results.push(Math.cube(num));} return _results;
})();
Responsive Web Design• http://www.alistapart.com/articles/responsive-web-design/
• Screen Size / Platform / Orientation 에 반응
• CSS3 Media Query , Flexible Grid & Layout
• Guideline for R-W-D : http://j.mp/eWEYIJ
Phone Tablet Netbook / Tablet Desktop
http://MediaQueri.esa collection of responsive web designs
Chrome����������� ������������������ Web����������� ������������������ Store
Mozilla����������� ������������������ Web����������� ������������������ App����������� ������������������ Store
GetJar
iPadification����������� ������������������ of����������� ������������������ the����������� ������������������ Web
Device APIs
• WAC (Wholesale Application Community)
• 40개 이상의 통신사/제조사 협의체 : BONDI + JIL ~= Waikiki Beta
• W3C DAP ( Device API )
Web AppDeveloper
WebBrowser
DeviceAPI
Javascript
Hybrid
Camera
Contacts
Calendar
Gallery
Filesystem
Messaging
Tasks
DeviceStatus
Acclerometer
DeviceOrientation
Geolocation
DeviceInteraction
WAC Schedule 201120112010
11WAC API Beta
07WAC 법인
02WAC Demo
@MWC
05WAC 2.0
Enabled Device
12K-WAC 재단설립
05K-WAC
Enabled Device
• WAC Enabled Device 의 증가✓ Galaxy S 2 , Bada 2 ..
• Device 기능을 활용한 Web App 들 증가
09WAC 3.0
Network APIs
Native
Web
Hybrid
Vs.
Vs.
Native App
•뛰어난����������� ������������������ 성능����������� ������������������ /����������� ������������������ 게임
•훌륭한����������� ������������������ UX
•디바이스����������� ������������������ 모든����������� ������������������ 기능����������� ������������������ 활용
•수익모델����������� ������������������ (����������� ������������������ 판매/광고����������� ������������������ )
•개발이����������� ������������������ 어렵다����������� ������������������ /����������� ������������������ 비싸다����������� ������������������
•크로스����������� ������������������ 플랫폼?
Web App
•HTML5����������� ������������������ ,����������� ������������������ CSS����������� ������������������ ,����������� ������������������ JS����������� ������������������
•서버기반����������� ������������������ &����������� ������������������ Offline
•Multi����������� ������������������ Device
•속도?����������� ������������������
•디바이스����������� ������������������ 기능����������� ������������������ 활용?
•판매?
Hybrid App• Native + Web
• Multi Device
• 서버기반 개발가능
• Device 기능 활용
• 수익모델
• Web 부분의 속도
• 표준화?
Device OSNative App /
Hybrid framework
Web Browser
Web Application css/js/html
Web Server
Web Application
Hybrid App 의 범위
Native 내에서 WebView 활용
WebHybridNative
서버 접속해서 웹앱 실행Hybrid Frameworks
Appspresso / Phonegap
Titanium
Hybrid 개발 방법• Native + WebView : Native 로 개발하고 특정 부분만 WebView 를 이용
★ iPhone
✓ Javascript 에서 Objective-C 호출 : Custom URL Scheme ( gap:// )
✓ WebView 에 Javascript Injectin : stringByEvaluatingJavascriptFromString()
✓ 모든 Click 을 Hooking : shouldStartLoadWithRequest()
★ Android✓ WebView 에 자바코드 연결 인터페이스 삽입 : addJavascriptInterface
• Appspresso / Phonegap★ Web App 을 Native App 으로 패키징
★ Device 기능을 Framework 에서 Javascript 로 확장
• Titanium ( Appcelerator )★ Web 기술로 작성후 Native App 으로 변환★ Device 기능을 자체적으로 제공 ( 외관상은 Javascript 형태 )
Hybrid Web App
• Native App + Web App하나의 웹소스로 모든 디바이스 동시지원
Web 으로는 불가능한 Device 기능 지원
앱 스토어를 통한 앱 판매 가능
• Hybrid FrameworksPhonegap
Appspresso
Titanium Mobile
Device OSHybrid framework
Web Browser
Web Application css/js/html
Appspresso• Mobile App Builder by
Hybrid Web App 개발 플랫폼 : iOS , Android ..
Device API : WAC API ( Waikiki ) 지원
원 클릭으로 iOS & Android 앱 빌드
Native Plugin 추가 가능 : Plugin Development Kit
• HTML5 Web App
Touch UI : Sencha , jQueryMobile , JoApp 연동
JJ - 내장 Javascript MVC Framework ( Ruby On Rails 와 유사 )
Powered By
Appspresso Write OnceSell Anywhere
Android / iOS App 으로 Build
jQueryMobile Jo����������� ������������������ App
Sencha
Sencha
Sencha����������� ������������������ Touch����������� ������������������ 프레임워크를����������� ������������������ UI����������� ������������������ 로����������� ������������������ 사용하는����������� ������������������ 템플릿����������� ������������������ 프로젝트를����������� ������������������ 생성합니다.
http://sencha.com
Win/Mac 에서 개발가능Touch UI Framework 지원
Web Tech 2011 • HTML5 관련 기술의 사용이 증대
• Device 가 더욱 세분화 ➠ Web App 의 필요성 증가
• Javascript 관련 기술이 Hot !
• Responsive Web Design
• 다양한 Web App Store 의 등장 및 성장
• Device API 적용 디바이스의 출현
• Hybrid 방식 개발 수요 증가
• Hybrid Web App 개발툴의 성장
고맙습니다!e-mail����������� ������������������ :����������� ������������������ guru����������� ������������������ @����������� ������������������ xguru.net����������� ������������������ twitter:����������� ������������������ @xguru
권정혁����������� ������������������ /����������� ������������������ 구루