2011 mobile & web technologies

42
웹 & 모바일 기술 전망 2011 권정혁 ( @xguru )

Upload: -

Post on 10-Jun-2015

524 views

Category:

Technology


7 download

DESCRIPTION

2011.02.25 WebApps FutureCon 에서 발표한 "2011년 웹 & 모바일 개발자가 주목해야할 기술들" 자료입니다. HTML5,CSS3,Javascript,Responsive Web Design,Device API,Hybrid App,Hybrid Framework 등에 대해서 설명합니다.

TRANSCRIPT

Page 1: 2011 Mobile & Web technologies

웹����������� ������������������  &����������� ������������������  모바일기술����������� ������������������  전망

2011권정혁 ( @xguru )

Page 2: 2011 Mobile & Web technologies

소개•권����������� ������������������  정����������� ������������������  혁

➡ K����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  기술전략팀장����������� ������������������  

- SW Architect

- Developer Evangelist

➡ 블로그����������� ������������������  -����������� ������������������  http://xguru.net

➡ 트위터����������� ������������������  -����������� ������������������  @xguru

➡ 이메일����������� ������������������  -����������� ������������������  guru����������� ������������������  @����������� ������������������  xguru.net

Page 3: 2011 Mobile & Web technologies

2010 wasyear of

HTML5ReadWriteWeb - “Top Trends of 2010 : HTML5”

Page 4: 2011 Mobile & Web technologies

HTML5 ?

HTML5 ~= HTML CSS JS API+ +

Web 에서 Desktop 수준의 App 구현 ➠

Web App

Page 5: 2011 Mobile & Web technologies

Web App ?

•����������� ������������������  웹����������� ������������������  브라우저에서����������� ������������������  실행

•����������� ������������������  Reading����������� ������������������  ➠����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Interaction����������� ������������������  with����������� ������������������  Audio/Video/Animation

•����������� ������������������  데스크탑����������� ������������������  소프트웨어����������� ������������������  수준의����������� ������������������  사용자����������� ������������������  경험����������� ������������������  (UX)

•����������� ������������������  서버에서����������� ������������������  제공되므로����������� ������������������  신속한����������� ������������������  업데이트����������� ������������������  *

•����������� ������������������  다양한����������� ������������������  디바이스����������� ������������������  동시����������� ������������������  지원����������� ������������������  ➠����������� ������������������  모바일

Page 6: 2011 Mobile & Web technologies

회사들이����������� ������������������  각����������� ������������������  모바일����������� ������������������  플랫폼용����������� ������������������  

네이티브����������� ������������������  앱을����������� ������������������  모두����������� ������������������  만들기는����������� ������������������  어렵다.

왜����������� ������������������  HTML5가����������� ������������������  모바일에����������� ������������������  중요한가����������� ������������������  ?

iOS, Android, WP7, BlackBerry, Symbian, Bada ..

“머리����������� ������������������  아프다.����������� ������������������  페이스북에����������� ������������������  새����������� ������������������  기능을����������� ������������������  추가하면����������� ������������������  동시에����������� ������������������  7개의����������� ������������������  플랫폼을����������� ������������������  작업해야한다.����������� ������������������  

HTML5가����������� ������������������  미래의����������� ������������������  플랫폼이다.����������� ������������������  ”����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  -����������� ������������������  Facebook����������� ������������������  CTO����������� ������������������  Bret����������� ������������������  Taylor

“구글조차도����������� ������������������  모든����������� ������������������  플랫폼을����������� ������������������  네이티브로����������� ������������������  지원하기엔����������� ������������������  예산이����������� ������������������  모자르다.”����������� ������������������  

-����������� ������������������  Google����������� ������������������  VP����������� ������������������  Vic����������� ������������������  Gundotra

Page 7: 2011 Mobile & Web technologies

정부 , 지자체 모바일 앱 현황기관 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

Page 8: 2011 Mobile & Web technologies

Devices 2011

iOS & Android

BB & PlayBook HP WebOS

CR-48 MS WP7with

Nokia

Page 9: 2011 Mobile & Web technologies

Web Tech2011

Page 10: 2011 Mobile & Web technologies

HTML5����������� ������������������  ,����������� ������������������  CSS3

Javascript����������� ������������������  !!!

Responsive����������� ������������������  Web����������� ������������������  Design

Web����������� ������������������  App����������� ������������������  Stores

Device����������� ������������������  API

Hybrid����������� ������������������  App����������� ������������������  &����������� ������������������  Cross����������� ������������������  Platform

Page 11: 2011 Mobile & Web technologies

HTML(5)

Semantics Offline &Storage

DeviceAccess Multi Media Connectivity 3D , 2D

Graphics & EffectsPerformance &

Integration CSS3

Page 12: 2011 Mobile & Web technologies

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

Page 13: 2011 Mobile & Web technologies

HTML5 와 웹 브라우저

6 7 8 9 3+ 6+ 4+ 10+

iOS 3+ Android2.0+

2011 3Q RIM OS6+

webOS1.4+

Page 14: 2011 Mobile & Web technologies

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

Page 15: 2011 Mobile & Web technologies

HTML5 Initializer

• http://initializr.com/

• HTML5 Boilerplate 에 기반

• jQuery

• Modernizer / HTML5shiv

• 서버 설정 파일

Page 16: 2011 Mobile & Web technologies

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)

Page 17: 2011 Mobile & Web technologies

Javascript !!!

• 자바스크립트의 재발견

• Javascript Library for Mobile

• UI Frameworks

• Application Frameworks

• Server-side JavaScript

• Languages that Compiles to JS

Page 18: 2011 Mobile & Web technologies

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(){ ... });

Page 19: 2011 Mobile & Web technologies

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 와 친화적이지 않음

Page 20: 2011 Mobile & Web technologies

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

Page 21: 2011 Mobile & Web technologies

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 .. 등등

Page 22: 2011 Mobile & Web technologies

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

Page 23: 2011 Mobile & Web technologies

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;

})();

Page 24: 2011 Mobile & Web technologies

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

Page 25: 2011 Mobile & Web technologies

http://MediaQueri.esa collection of responsive web designs

Page 26: 2011 Mobile & Web technologies

Chrome����������� ������������������  Web����������� ������������������  Store

Page 27: 2011 Mobile & Web technologies

Mozilla����������� ������������������  Web����������� ������������������  App����������� ������������������  Store

Page 28: 2011 Mobile & Web technologies

GetJar

Page 29: 2011 Mobile & Web technologies

iPadification����������� ������������������  of����������� ������������������  the����������� ������������������  Web

Page 30: 2011 Mobile & Web technologies

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

Page 31: 2011 Mobile & Web technologies

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

Page 32: 2011 Mobile & Web technologies

Native

Web

Hybrid

Vs.

Vs.

Page 33: 2011 Mobile & Web technologies

Native App

•뛰어난����������� ������������������  성능����������� ������������������  /����������� ������������������  게임

•훌륭한����������� ������������������  UX

•디바이스����������� ������������������  모든����������� ������������������  기능����������� ������������������  활용

•수익모델����������� ������������������  (����������� ������������������  판매/광고����������� ������������������  )

•개발이����������� ������������������  어렵다����������� ������������������  /����������� ������������������  비싸다����������� ������������������  

•크로스����������� ������������������  플랫폼?

Page 34: 2011 Mobile & Web technologies

Web App

•HTML5����������� ������������������  ,����������� ������������������  CSS����������� ������������������  ,����������� ������������������  JS����������� ������������������  

•서버기반����������� ������������������  &����������� ������������������  Offline

•Multi����������� ������������������  Device

•속도?����������� ������������������  

•디바이스����������� ������������������  기능����������� ������������������  활용?

•판매?

Page 35: 2011 Mobile & Web technologies

Hybrid App• Native + Web

• Multi Device

• 서버기반 개발가능

• Device 기능 활용

• 수익모델

• Web 부분의 속도

• 표준화?

Device OSNative App /

Hybrid framework

Web Browser

Web Application css/js/html

Web Server

Web Application

Page 36: 2011 Mobile & Web technologies

Hybrid App 의 범위

Native 내에서 WebView 활용

WebHybridNative

서버 접속해서 웹앱 실행Hybrid Frameworks

Appspresso / Phonegap

Titanium

Page 37: 2011 Mobile & Web technologies

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 형태 )

Page 38: 2011 Mobile & Web technologies

Hybrid Web App

• Native App + Web App하나의 웹소스로 모든 디바이스 동시지원

Web 으로는 불가능한 Device 기능 지원

앱 스토어를 통한 앱 판매 가능

• Hybrid FrameworksPhonegap

Appspresso

Titanium Mobile

Device OSHybrid framework

Web Browser

Web Application css/js/html

Page 39: 2011 Mobile & Web technologies

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

Page 40: 2011 Mobile & Web technologies

Appspresso Write OnceSell Anywhere

Android / iOS App 으로 Build

jQueryMobile Jo����������� ������������������  App

Sencha

Sencha

Sencha����������� ������������������  Touch����������� ������������������  프레임워크를����������� ������������������  UI����������� ������������������  로����������� ������������������  사용하는����������� ������������������  템플릿����������� ������������������  프로젝트를����������� ������������������  생성합니다.

http://sencha.com

Win/Mac 에서 개발가능Touch UI Framework 지원

Page 41: 2011 Mobile & Web technologies

Web Tech 2011 • HTML5 관련 기술의 사용이 증대

• Device 가 더욱 세분화 ➠ Web App 의 필요성 증가

• Javascript 관련 기술이 Hot !

• Responsive Web Design

• 다양한 Web App Store 의 등장 및 성장

• Device API 적용 디바이스의 출현

• Hybrid 방식 개발 수요 증가

• Hybrid Web App 개발툴의 성장

Page 42: 2011 Mobile & Web technologies

고맙습니다!e-mail����������� ������������������  :����������� ������������������  guru����������� ������������������  @����������� ������������������  xguru.net����������� ������������������  twitter:����������� ������������������  @xguru

권정혁����������� ������������������  /����������� ������������������  구루