Workshop on WoO (Web of Objects) service and Technology (WWT) 2012 발표자료.

1. Web 서비스 기술
2012.10.25
동국대학교 이창환 (yich@dongguk.edu)

2. 목차
 개요
 REST
 URI
 HTTP
 하이퍼미디어 포맷
 웹의 최신 동향
Slide: https://www.slideshare.net/yich/woo-2012web
2

3. 개요

4. 웹
 웹 사이트
 유저 인터페이스로서의 웹
 HTML
 AJAX(Asynchronous JavaScript and XML)
 Comet: Push, Reverse Ajax, Ajax Push
 프로그램을 위한 API로서의 웹
 XML, JSON
 웹 서비스, 웹 API
4

5. 웹을 지탱하는 기술
 주요 기술
 HTTP: Hyper Text Transfer Protocol
 URI: Uniform Resource Identifier
 HTML: Hyper Text Markup Language
애플리케이션 컨트롤
HTTP
HTTP는 URI 조작대상을 지정 HTML은 HTTP로 통신
URI HTML
리소스 식별자 HTML의 링크는 URI를 이용 하이퍼미디어 포맷
• 하이퍼 미디어
• 분산 시스템
5

6. 웹의 표준화
 웹의 스펙
 IETF
 RFC로 정의
 HTTP, URI
 W3C
 HTML(HTML5 포함), XML, CSS, 여러 Javascript API
 WHATWG
 HTML5 작업 개시,
 REST
 로이 필링(Roy Fielding)에 의해 개념 정립
 하이퍼미디어 포맷
 HTML
 Microformat: HTML에 다양한 의미 추가를 위해 사용
 RSS, Atom: Syndication을 위해 사용
 JSON
6

7. 웹 API 관련 논의
 SOAP과 WS-*
 SOAP(Simple Object Access Protocol)
 WS-*
 WS-Security, WS-Transaction, WS-ReliableMessaging
 SOAP vs. REST
7

8. REST
 REST(Representational State Transfer)
 웹이 왜 이렇게 성공했는지, 어떻게 대규모의 시스템이 만
들어졌는지 소프트웨어 아키텍처의 관점에서 분석하고 하
나의 아키텍쳐 스타일로 정리 - 2000년 Roy Fielding
 Architectural Styles and the Design of Network-based
Software Architectures, http://j.mp/REST_roy
 HTTP 는 하이퍼텍스트를 전송하기 위한 프로토콜이지만,
실제로는 하이퍼텍스트 이외의 다양한 것을 전송하고 있
으며, 그것은 리소스 상태 ( Resource State ) 의 표현
( Presentation )
8

9. REST

10. REST
 웹 아키텍처 스타일
 예: MVC, Pipe & Filter, Event System 등
 REST는 클라이언트/서버에서 파생되었으며, 몇가지
제약을 추가한 것
추상화 레벨 웹에서의 예
아키텍처 스타일 REST
아키텍처 브라우저, 서버, 프록시, HTTP, URI, HTML
구현 Apache, Firefox, Internet Explorer
10

11. REST 개념 : Resource
 리소스 : 웹상에 존재하는 이름을 가진 모든 정보
 서울의 일기예보,
http://weather.naver.com/rgn/cityWetrCity.nhn?cityRgnCd=CT001013
 청량리역의 사진: http://www.flickr.com/photos/nala2sky/3790226694
 Roy Fielding 의 REST 논문:
http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm
 리소스는 각각 URI로 의미있는 이름을 가지며, 쉽게 접근이 가능
 1개의 리소스가 복수개의 URI 를 가질 수 있음
 http://weather.example.com/seoul/today
 http://weather.example.com/seoul/2012-01-01
 리소스는 여러 개의 형태를 가질 수 있음
 일기예보 : HTML , PDF , 이미지 등등
 리소스의 상태는 시간 등에 따라 표현이 변할 수 있음
11

12. REST 의 스타일
 클라이언트/서버: 유저인터페이스와 처리를 분리
 스테이트리스 서버: 서버측에서 애플리케이션의 상
태를 가지지 않음
 캐시: 클라이언트와 서버의 통신회수와 양을 감소시
킴
 유니폼 인터페이스: 인터페이스를 고정
 계층화 시스템: 시스템을 계층별로 분리
 코드온 디맨드: 프로그램을 클라이언트에 다운로드
하여 실행.
12

13. REST의 2가지 측면
 REST와 하이퍼미디어
 REST와 분산 시스템
13

14. URI

15. URI의 스펙
 URI : Uniform Resource Identifier , RFC 3986
 리소스를 통일적으로 식별하는 ID
 웹 상에 존재하는 모든 리소스를 한결같은 방식으로 보여
줄 수 있음
 URI의 구문
 http://blog.example.com/entries/1
 URI Scheme : http
 Hostname : blog.examples.com
 Path : /entries/1
 유일한 호스트명/경로를 사용함으로써, URI가 중복되지
않음
15

16. 절대 URI와 상대 URI
 절대 URI
 http://example.com/foo/bar
 상대 URI
 /foo/bar
 Base URI
 상대 URI에서 기준이 되는 URI
 명시적으로 기술하는 방법도 있음
16

17. URI와 문자
 URI 에 쓸수 있는 문자
 알파벳 : A-Za-z
 숫자 : 0-9
 예약문자 : ";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" |
","
 비예약문자 : "-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")"
 % 인코딩
 허용하지 않는 문자들을 URI에 사용할때 인코딩 하는 방식
 http://ko.wikipedia.org/wiki/가 ➠
http://ko.wikipedia.org/wiki/%EA%B0%80
 % ➠ %25 , Space = %20 ,
 URI 길이제한
 스펙상 제한은 없으나, 구현상 제한이 존재.
17

18. URI에서 주의해야 할 점
 상대 URI의 해석
 %인코딩
 문자 인코딩
18

19. URI, URL, URN
 URI: Uniform Resource Identifier
 URL + URN
 URL: Uniform Resource Locator
 URN: Uniform Resource Name
19

20. URI의 설계
 좋은 URI는 변하지 않음
 ‘Cool URIs don’t change’, Timer Berners-Lee, 1998
 URI가 바뀔경우 다시 그 자료를 찾기가 어려워짐
 좋은 URI 는 심플한 URI를 의미 예 ) Apple 웹사이트
 변하지 않는 URI 만들기
 프로그래밍 언어 의존적인 확장자와 경로를 포함하지 않음
 http://example.com/cgi-bin/login.pl ,
http://example.com/servlet/LoginServlet
 메서드명과 세션ID를 포함하지 않음
 http://example.com/Login.do?action=showPage ,
http://example.com/home.jsp?jsessionid=12345678
 URI는 리소스를 표현하는 명사로 함
 http://example.com/sample/people/show/123 =>
http://example.com/sample/people/123
20

21. URI의 중요성
 리소스의 이름
 수명이 김
 브라우저가 어드레스 란에 표시
21

22. HTTP

23. HTTP의 버전
 HTTP 0.9 - HTTP의 탄생
 팀 버너스리가 최초에 웹을 발명했을때 사용하던 프로토콜
 현재의 HTTP와 다르게 헤더가 없으며, GET 메소드만 있음. 현재 사용되
지 않음
 HTTP 1.0 - HTTP 최초의 표준화
 IETF 에서 표준화하여 1993년에 Draft 공개후, 1996년에 최종 버전(RFC
1945) 공개
 헤더의 도입, GET 이외의 메서드 추가
 HTTP 1.1 - HTTP의 완성
 1997년 RFC 2068 에서 개정하여 1999년 RFC 2616 발행. 현재의 1.1 스
펙
 채널전송, Accept 헤더에 의한 컨텐츠 네고시에이션, 캐쉬 컨트롤,
Keep-Alive 등 추가
 HTTP 2.0
 SPDY - 좀더 빠른 웹을 위한 실험적인 프로토콜
 구글이 제안하는 HTTP 프로토콜의 개선안. SSL/헤더압축/다중스트림/요청우
선순위..
23

24. HTTP
 클라이언트/서버 구조
 클라이언트가 정보를 제공하는 서버에 접속하여 각종 요
청(Request)을 보내고 응답(Response)을 받는 구조
 동기형 프로토콜
 요청을 보낸 클라이언트는 서버의 응답이 돌아올때까지
대기
 무상태성
 서버가 클라이언트의 애플리케이션 상태를 보존하지 않음
24

25. HTTP 메시지의 구성요소
 스타트 라인
 요청: 요청 라인
 응답: 상태 라인(Status Line) 스타트 라인
헤더
 헤더
 헤더 구분은 CRLF
 생략 가능
빈줄
 빈줄
 헤더의 종료를 표시 바디
 바디
 텍스트, 바이너리 데이터도 가능
 생략 가능
25

26. 상태성(Stateful)과 무상태성(Stateless)
 상태성(Stateful)의 단점
 서버가 클라이언트의 상태를 기억하는 것은 클라이언트 수가
늘어날수록 어려워짐
 하나의 서버가 동시에 상대 할수 있는 클라이언트 수에는 한계가
있음
 서버가 늘어날 경우 클라이언트 별로 상대할 서버를 지정 할 수가
없으므로 상태 동기화가 필요
 무상태성(Stateless)의 이점
 클라이언트가 요청 메시지에 필요한 정보를 모두 포함시킴
 지난 대화를 기억해 두지 않더라도 현재 상태를 바로 알 수 있음
 자기 기술적 메시지(Self Descriptive Message) : 클라이언트가 자
신의 상태를 기억, 모든 요청을 상태와 함께 보냄
 서버를 늘리기만 해도 바로 확장가능. 매번 어떤 서버로 요청을 보
내도 상관없음
26

27. 상태성(Stateful)과 무상태성(Stateless)
 무상태성(Stateless)의 결점
 퍼포먼스의 저하
 매번 필요한 정보를 모두 송신하기 때문
 송신할 데이터의 양이 많아짐
 사용자 인증등 서버에 부하가 걸리는 처리를 반복
 통신 에러에 대한 대처 필요
 요청이 처리되었는지 알 수 없음
27

28. HTTP Method
 HTTP 1.1에 정의된 메소드는 단 8개
 그 중에서도 5~6개만 사용
메소드 의미
GET 리소스 취득
POST 서브 리소스의 작성, 리소스 데이터의 추가, 그 밖의
처리
PUT 리소스 갱신, 리소스 작성
DELETE 리소스 삭제
HEAD 리소스의 헤더(메타 데이터) 취득
OPTIONS 리소스가 서포트하는 메소드의 취득
TRACE 자기 앞으로 요청 메시지를 반환(루프 백) 시험
CONNECT 프록시 동작의 터널 접속으로 변경
28

29. HTTP Method와 CRUD
CRUD 의미 메소드
Create 작성, 생성 POST
Read 읽기 GET
Update 갱신 PUT
Delete 삭제 DELETE
29

30. HTTP Status Code
코드 분류 의미
1xx 처리중 처리가 계속되고 있음. 클라이언트는 요청을 계속
하거나, 서버의 지시에 따라 프로토콜 업데이트
후 재전송
2xx 성공 요청이 성공했음을 나타냄
3xx 리다이렉트 다른 리소스로의 리다이렉트. 클라이언트는 이 코
드를 받았을 때 응답메시지의 Location 헤더를 보
고 새 리소스에 접근
4xx 클라이언트 에러 클라이언트의 요청이 에러의 원인. 클라이언트쪽
에서 요청을 수정해서 재 전송해야 함
5xx 서버 에러 서버가 에러의 원인. 서버측에서 원인이 해결되면,
동일한 요청을 보내어 정상적인 결과를 얻을 가능
성이 있음
30

31. HTTP Header
 HTTP의 Header
 메시지 바디에 대한 부가적인 정보를 표현
 미디어 타입과 언어 태그
 헤더, 메소드, 상태 코드를 결합하여 HTTP의 기능 구현에
사용
 리소스에 대한 접근 권한을 설정하는 인증
 서버의 통신 회수와 양을 감소시키는 캐시 기능
 메일 메시지 스펙(RFC822)에서 헤더형식을 빌려옴
31

32. 하이퍼미디어 포맷

33. 미디어 포맷의 종류
 HTML
 HTML, CSS등을 포함
 Microformats
 ATOM
 JSON
33

34. 웹의 최신 동향

35. HTML5란?
 좁은 의미
 HTML4 표준의 다음 버전
 W3C의 HTML4 표준에 정의된 마크업 언어
 넓은 의미
 웹 플랫폼을 지칭
 HTML5 + CSS3 + Javascript (APIs)
35

36. HTML5의 구성요소
(from HTML5 완전정복, 한국경제신문사)
36

37. HTML5의 주요 특징
 Semantics & Markup  Offline / Storage
 Better semantic tags  Web SQL Database
 Markup for applications  Local Storage
 Descriptive link relations  Indexed DB
 Microdata  Application Cache
 ARIA attributes  Realtime / Communication
 Web Form  Web Workers
 Graphics / Multimedia  Web Socket
 <video> / <audio>  Web Notifications
 Canvas 2D  File / Hardware Access
 Canvas 3D (WebGL)  Native Drag & Drop
 Inline SVG  Desktop Drag-in (File API)
 CSS3  Desktop Drag-Out
 CSS Selectors  File System APIs
 Web Fonts  Geolocation
 Device Orientation
 Speech Input
37

38. HTML5에 따른 변화
 응용 프로그램을 위한 웹 플랫폼
 문서 -> 응용 프로그램
 브라우저(웹 런타임)를 통한 다양한 기기 지원
 PC
 다양한 스마트 기기: 폰, 패드, TV 등
 셋탑 박스, 사이니지 등과 같은 기기
 카 네비게이션과 같은 융합 기기
38

39. 응용 분야
 하이브리드 앱
 게임
 웹 OS
 Node.js + Arduino
39

40. 하이브리드 앱
 하이브리드 앱
 웹 앱 + 네이티브 앱
 웹앱
 웹 기술로 작성된 앱
 브라우저에서 실행
 네이티브 앱
 기기에서 제공하는 개발 언어와 API로 작성된 앱
 기기에서 직접 실행
40

41. 하이브리드 앱
 모바일 앱
 네이티브 앱
 웹앱
 하이브리드 앱
 PhoneGap(http://phonegap.com), 앱스프레소
(http://appspresso.com)
 jQuery Mobile(http://jquerymobile.com/), Sencha
Touch(http://www.sencha.com/products/touch)
41

42. '웹앱'과 '네이티브 앱'의 비교
기능 웹앱 네이티브 앱
기존에 사용하던 웹 개발환경, 아이폰(매킨토시 필요)
개발환경
모든 운영체제 가능 안드로이드폰(멀티 플랫폼)
아이폰(Object-C)
사용 언어 HTML,CSS,자바스크립트
안드로이드폰(자바)
년 $99(아이폰), $35(안드로
앱 개발자 비용 무료
이드)
배포 브라우저가 설치된 환경 앱 스토어/안드로이드 마켓
결제 시스템 독자 결제 구축 또는 광고수익 앱 장터 판매 수익
하드웨어 지원 제한적 모든 기능 활용
업데이트 즉시 반영 검수 받아야 함
UI 제한적 풍부한 UI 가능
42

43. 웹앱
 '웹 애플리케이션(Web Application)'을 의미
 브라우저의 주소를 통해 접속하는 형식은 '웹앱'
 애플이 iOS 1.0 시절 아직 앱스토어를 오픈하지 못하여
앱이 사용되지 못했을 때 '웹앱'을 지원하던 것이 현재까
지도 사용된 것이 계기
애플 사이트에서 지원하는 '웹앱'의 내용입니다.
www.apple.com/webapps
43

44. 하이브리드 앱
 ‘웹앱’ 이면서 ‘네이티브 앱’의 장점을 결합한 것은 ‘하
이브리드 앱’
 '웹앱'을 개발한 후에 오픈소스 크로스 프레임워크를 이용
하여 '네이티브 앱'으로 변환시켜 배포되는 앱 형식을 의
미
 오픈소스 크로스 프레임워크
 '폰갭(PhoneGap)' 오픈소스(http://www.phonegap.com)
를 이용하면 '웹앱'을 '네이티브 앱'으로 변환할 수 있음
44

45. 주요 기술
 웹 표준 플랫폼
 브라우저 기반 웹 뷰, 웹 플랫폼 런타임
 HTML5, CSS3, Javascript와 관련 APIs
 DOM, Event 모델 등
 UI 프레임워크
 앱과 유사한 형태로 만들기 위한 프레임워크
 웹은 문서를 위한 기술임
 앱과 같은 화면 구성과 사용자 상호작용을 작성하기에는 적합하지 않음
 디바이스 APIs
 문서 형태가 아닌 네이티브 플랫폼에서 제공하는 기능을 접근하기 위한 용도
 최신 웹 표준에서 정의되어 있으나, 네이티브 플랫폼에서 제공하는 모든 기능에 대해 정의되어 있지는
않음
 하이브리드 앱을 작성하는 개발자가 직접 만들거나, 추가된 기능을 제공하는 PhoneGap과 같은 하이
브리드 앱 프레임워크를 이용
 패키징
 네이티브 앱처럼 보이기 위한 기술
 W3C에서 유사한 기술인 위젯 패키징 기술은 있으나, 하이브리드 앱을 위해서는 사용하지 못함
 각 네이티브 플랫폼별로 다른 기술을 사용
45

46. 하이브리드 앱의 개발방법
 필요한 화면에서만 웹 뷰를 사용
 NHN, Daum 앱의 경우
 자체 웹 프레임워크를 사용하는 경우가 많음
 개발자가 하이브리드 앱을 만드는데 필요한 기술을 이해해야 함
 PhoneGap, Appsresso와 같은 하이브리드 앱 프레임워크 사용
 웹 앱 프레임워크에서 제공하는 디바이스 API와 패키징 기술을 사용
 개발자는 웹 기술과 디바이스 API, 패키징 기술만으로 하이브리드 앱을 만들 수 있음
 일반적인 하이브리드 앱 제작 방법
 웹 런타임/웹 뷰를 개발 후 사용
 Chrome이나 FireFox의 웹 브라우저 소스를 활용
 자체 웹 런타임 개발
 자바스크립트 API를 직접 개발
 Titanium과 같은 앱 제작 도구 사용
 웹 기술로 앱 작성.
 네이티브 환경의 기계어 코드 형태의 결과물을 생성
 네이티브 앱과 비슷한 실행 성능을 가짐.
 제작도구에서 제공하지 않는 기능을 사용하기 힘듬
 웹 기술의 일부만 제공.
46

47. 하이브리드 앱의 장/단점
 장점
 웹 표준을 지원하는 플랫폼에서 큰 수정없이 실행 가능함
 패키징을 통해 다양한 기기를 위한 앱을 작성할 수 있음
 네이티브 앱과 유사한 UX/UI를 제공할 수 있음
 단점
 플랫폼이 가진 모든 기능을 사용하지 못함
 네이티브 앱에 비해 낮은 실행 성능을 가짐
 모든 기기에서 동일한 수준의 앱 표준을 지원하지 않음
47

48. 하이브리드 앱의 주요 응용분야
 알맞은 분야
 정보 제공 목적의 앱
 인터렉티브 이북 앱
 상대적으로 단순한 UI를 가지고 다양한 기기를 지원해야
하는 앱
 알맞지 않은 분야
 높은 실행 성능을 요구하는 앱: 게임, 멀티미디어 응용
 웹 표준에서 지원하지 않는 기능을 사용하는 앱
 복잡한 UI를 가지고 있으면, 특정 기기만을 지원하는 앱
48

49. 유사 기술
 웹 OS
 크롬OS, FireFox OS, webOS
 WAC
 위젯
 데스크탑 OS를 위한 하이브리드 앱
 Windows 8: HTML5, CSS, Javascript를 이용하여 메트
로 UI 앱을 만들 수 있음
 Mac OS X
49

50. 웹 기술
 HTML5
 CSS3
 Javascript와 API
50

51. UI 프레임워크
 UI 프레임워크
 jQuery/jQuery Mobile
 ExtJS, Sencha Touch
 Etc.
 필요한 이유
 HTML/CSS는 페이지 단위의 문서 표현을 위한 기술
 앱과 같은 사용자 상호작용을 위한 화면 표현에는 부적합
한 점이 있음
 또한 개발하기 힘든 부분이 있음
51

52. 52

53. jQuery/jQuery Mobile
 jQuery
 홈페이지: www.jquery.com
 버전: 1.7.2
 jQuey Mobile
 홈페이지: querymobile.com
 버전: 1.1.1
53

54. jQuery
 주요 기능
 엘리먼트 선택자
 태그
 클래스
 아이디
 pseudo-클래스(css 선택자와 유사 개념)
 엘리먼트 변경, 속성 변경
 Text, html
 Attribute
 Css 변경
 이벤트
 다양한 애니메이션 효과 지원
 Ajax 지원
 Plug-in 개념 지원
 다양한 UI 요소 지원
54

55. jQuery Mobile
 Touch-Optimized Web UI Framework for
Smartphones & Tablets
 HTML 마크업 기반 (기존 HTML 마크업 전문 툴 일부
이용 가능)
 Javascript를 몰라도 간단한 화면 구성 가능
 기존 사이트를 쉽게 모바일로 변경 가능
 멀티 디바이스 지원
 다양한 디바이스 지원
55

56. jQuery Mobile-예제
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<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>
56
</html>

57. Sencha Touch/Ext js
 홈페이지:
http://www.sencha.com/products/
touch
 버전: 2.0
 주요 기능
 Built on HTML5 Technology
 Smoother Scrolling and Animations
 Adaptive Layouts
 Native Packaging
 AJAX
 DOM manipulation
 Feature Detection
 Geolocation
 Icons
 Touch events
57

58. 58

59. 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를 제공
59

60. 디바이스 API
 디바이스 api
 네이티브 플랫폼의 기능를 사용할 수 있는 자바스크립트
API
 디바이스 api의 종류
 W3C API
 3rd-Party API: PhoneGap API, Appsresso
 User-defined API (Custom API): PhoneGap Plugin
60

61. W3C’s Device Apis
 Web Application  System Application WG
 Offline / Storage  Execution & Security Models
 Web SQL Database  Alarm, Contacts, Messaging,
 Local Storage Telephony, Raw Sockets
 Indexed DB  Bluetooth, Browser, Calendar,
 Application Cache Device Capabilites, Idle,
 Realtime / Communication Media Storage, Network
Interface, Secure Elements,
 Web Workers System Settings
 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
61

62. PhoneGAP apis
 APIs  Plugin APIs
 Accelerometer
 Camera
 Capture
 Compass
 Connection
 Contacts
 Device
 Events
 File
 Geolocation
 Media
 Notification
 Storage
62

63. 패키징
 웹: 위젯 패키징
 3rd-party: PhoenGap, etc.
63

64. 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.
 버전: 2.0
 홈페이지: www.phonegap.com
 오픈 소스: Apache 재단의
Cordova 프로젝트
 Adobe사 제공
 Nitobi 인수
64

65. PhoneGap 지원 플랫폼
65

66. PhoneGap의 주요 기능
 Device API
 패키징
 빌드
 서비스 형태로 제공
66

67. 게임
 2D 게임
 Angry Birds
 Cut The Rope
 BrowserQuest
(http://browserquest.m
ozilla.org/)
 3D 게임
 Quake II
67

68. HTML5:게임
68

69. Web OS
 HP의 webOS
 Mozilla의 Boot2Gecko
(https://wiki.mozilla.org/B2G)
 Google의 ChromeOS
69

70. Node.js + Arduino
 Node.js
 Event-driven I/O server-
side JavaScript
environment based on
V8
 Homepage:
http://nodejs.org
 Arduino
 open-source electronics
prototyping platform
based on flexible, easy-
to-use hardware and http://www.twilio.com/blog/2012/06/
software build-a-phone-controlled-robot-using-node-js-arduino
-rn-xv-wifly-arduinoand-twilio.html
70

71. 질의 응답

72. 질의응답
72

73. 참고문헌

74. 참고문헌
 웹을 지탱하는 기술, 야마모토 요헤이 저, 김성훈 역, 권정혁
감수, 멘토르, 2011
 대규모 서비스를 지탱하는 기술, 이토 나오야, 다나카 신지, 진
명조 역, 제이펍, 2011
 Top 10 Questions about HTML5,
http://www.slideshare.net/hollobit/top-10-questions-
about-html5
 HTML5 를 이용한 하이브리드앱 제작,
http://www.slideshare.net/zanylove/html5-6608906
 HTML5 웹 표준과 모바일 개발,
http://www.slideshare.net/zanylove/html5-6860663
 쉽게 배우는 웹앱 & 하이브리드 앱, 김응석, 이지스 퍼블리싱
 HTML5 Asia Day
 CSS3의 특징과 사용 방법,
http://html5.firejune.com/css3.html#slide1
74