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