HTML5 for web app. development

1. 개발자의 관점에서 본
H TML5
1

2. Part O n e
HTML vs . HTML5
2

3. H TML vs . H TML5
H TML H TML5
오디오와 비디오는 H TML4 의 사양에 오디오와 비디오가 H TML5 사양의 필
포함되어 있지 않음 수적인 항목으로 포함되어 있음
(< au d io > 와 < vid e o > 태그 )
Ve c to r 그래픽은 VML, S ilve rlig h t, Ve c to r 그래픽의 필수 항목으로 포함되
F las h 을 설치함 으로서 사용 가능함 어 있음 (S VG 와 c an vas )
(Plu g In 설치 요망 )
정확한 위치정보를 가져오는 것이 거의 Java S c rip t 에 위치 정보 파악 API 가
불가능함 포함되어 있음
3

4. H TML vs . H TML5
H TML H TML5
임시 저장 공간에 브라우저에서 읽어 온 애플리케이션 캐시 , We b S Q L 데이터
데이터를 저장함 베이스 , 웹 저장 공간을 사용자의 저장
공간으로 상용 가능함 . JavaS c rip t 를 통
해서 접근 가능함
자체적인 We b S o c ke t 기능은 없음 We b S o c ke t 을 사용하여 서버와 양방향
통신이 가능함 . Java S c rip t 를 사용하여
서 접근 가능함
모든 버전의 브라우저에서도 동작함 최근에 배포된 브라우저만 지원함
( 예 : F ire fo x, Mo zilla, O p e ra, C h ro m e ,
S afari 등 )
JavaS c rip t 는 브라우저 인터페이스와 동 JavaS c rip t 가 백그라운드에서 실행 가능
일한 쓰레드에서 실행되어 야 함 함
4

5. Part Two
F las h & H TML5
5

6. H TML5 을 적용하기 적당한 경우
• 사용자에게 하드웨어와 소프트웨어 벤더 선택의 자유을 주고자 할 경우
• 저사양의 디바이스에서 비디오를 재생하고자 할 경우
• F las h 라이센스 비용을 아끼고자 할 경우
• Ap p le 에서 생상된 디바이스에서 재생하고자 할 경우
• 개방된 개발 환경이 중요하다고 여겨질 경우
F las h 를 적용하기 적당한 경우
• IE 6 을 지원하고자 할 경우
• 비디오 스트리밍 시에 네트워크 대역폭에 따라서 b it rate s 를 조절하고자 할 경우
• 콘텐트의 무단 복사를 막고자 할 경우
• 비디오에 광고를 동적으로 포함 시키고자 할 경우
9
6

7. Mic ro s o ft d ro p s F las h fro m IE o n Win d o ws 8
tab le ts .
- 1 6 S e p te m b e r 201 1 fro m B B C
U p c o m in g N o kia Mo b ile Ph o n e s (Lu m ia) –
F irs t Win d o ws Ph o n e (Man g o ) (with o u t
Ad o b e F las h )
- N o ve m b e r 1 1 , 201 1 fro m ad d p r.c o m
An d ro id Ic e C re am S an d wic h 4.0 to g e t Ad o b e
F las h b e fo re 201 2
- N o ve m b e r 23, 201 1 fro m te c h b lo g

8. Part Th re e
We b Ap p
8

9. We b Ap p 의 예
9

10. We b Ap p 의 장점
• 코드 재사용성이 뛰어남
• 업데이트가 용이함
• 해상도에 따른 화면 재구성이 가능함
• C S S 속도 개선
• Lo c al S to rag e , D e vic e API 이용 가능
We b Ap p 의 단점
• 콘텐트를 다운 받기 위한 시간 소요
• N ative Ap p 과 같은 수려한 U I 가 제공 안됨
• 디버그의 어려움이 있음
• Ap p 으로 패키징 하기위한 작업이 필요함
• D e vic e API 를 이용하기 위한 작업 필요
9
10

11. Web App 의 제작 과정
We b
H TML, C S S , JavaS c rip ts
C o n te n ts
UI JavaS c rip t F ram e wo rk
E ffe c ts (j u e ry, S e n c h a)
Q
Mo b ile
APIs
H TML5 Ap p Platfo rm
(Ph o n e G ap , Titan iu m )
Ap p
Pac kag e
11

12. JavaS c ript Framework
• H TML 문서 이동
• 이벤트 핸들링
• 애니메이션
• Aj 인터랙션 처리
ax
12

13. JavaS c rip t F ram e wo rk: j u e ry
Q
• 크기가 31 kb 로 경쟁사보다 작음
• j u e ryU I 라고 U I te m p late 을 제공함
Q
• 웹에서 디자인 테마를 직접 만들 수 있도록 제공함
• 시장에서 가장 많이 쓰이고 있음
아쉬운 점
• 모바일 We b 을 위한 Te m p late 를 제공하고 있지 않음
• Flas h 와 같은 에니메이션 효과 구현을 위한 To o l 의 부재
• 웹 개발자만을 위한 Fram e wo rk
13

14. JavaS c rip t F ram e wo rk: S e n c h a
• H TML5 모바일 웹 개발의 위한 프레임워크
• 보다 수려한 An im atio n s 효과를 지원함
• 웹 개발 템플릿 ( 예제 ) 가 잘 준비되어 있음
• 여러 개의 제품 군으로 이루어져 있음
아쉬운 점
• Lib rary 사이즈가 큼
• 관련 개발 문서가 상대적으로 부족함
14

15. JavaS c rip t F ram e wo rk: S e n c h a
• S e n c h a To u c h
- H TML5 기반의 모바일 앱을 개발하기 위한 프레임워크
• S e n c h a An im ato r
- C S S 3 애니메이션을 만들어 주는 데스크톱 어플리케이션
• E xt C o re
- We b U I 개발을 쉽게 구현할 수 있도록 지원하는 자바스크립트 라이브러
리임
• E xt D e s ig n e r
- D rag & D ro p 을 지원하는 데스크탑 어플리케이션
15

16. JavaS c rip t F ram e wo rk: Jin d o
• N H N 에서 제작한 JavaS c rip t Lib rary
• 네이버 뉴스 , 지도와 같은 자체 서비스 개발에 사용됨
• 주석이 한글로 되어 있음
아쉬운 점
• 개발 문서에 예제가 부족함
• 개발 툴을 제공하지 않음
16

17. H TML5 Ap p Platfo rm
• 폰 APIs
• 패키지
17

18. H TML5 Ap p Platfo rm : Ph o n e G ap
• 대부분의 모바일 Platfo rm 을 지원함
• XC o d e , E c lip s e 용 Ph o n e G ap Plu g In 을 제공
• Ph o n e G ap B u ild 서비스를 통해서 플랫폼 별 Ap p 으로 재생산에서 배포
가능 ( 유료 )
• j u e ry 가 포함되어 있음
Q
• Ad o b e D re am we ave r C S 5.5 에 Ph o n e G ap 이 포함되어 있음
개발 방법
1 . XC o d e 로 Ph o n e G ap 기반의 프로젝트 생성
2. www 폴더 아래에 We b Pag e 소스를 복사
18

19. H TML5 Ap p Platfo rm : Titan iu m
• Titan iu m Pac kag e 가 포함된 E c lip s e 기반의 ID E
• iO S , An d ro id , B lac kb e rry 지원
• j u e ry 가 포함되어 있음
Q
• D e b u g 가 용이함
• 패키지 해주는 C lo u d 서비스 제공
아쉬운 점
• 지원하는 Mo b ile Platfo rm 한정되어 있음
19

20. H TML5 Ap p Platfo rm : Ap p s p re s s o
• E c lip s e 기반의 ID E
• iO S , An d ro id 지원
• D e b u g 가 용이함
• O n - th e - fly 기능 제공
아쉬운 점
• 지원하는 Mo b ile Platfo rm 한정되어 있음
• JavaS c rip t Lib rary 가 포함되어 있지 않음
20

21. UI F ra me wo rk
jQ ue ry S e nc ha J MC
• iO S 와 An d ro id 기반의 • H TML5 기반의 Mo b ile • N H N 에서 자체적으로 제
디바이스를 지원하는 Ap p 을 위한 개발을 위 작한 F ram e wo rk
j u e ry Plu g in
Q 해 만들어진 • JMC 기반으로 N ave r
• 터치 E ve n t 최적화됨 F ram e wo rk We b Ap p 이 만들어 졌고
• 개발을 쉽게 할 수 있는 문서가 한글로 되어 있음
To o l 이 포함되어 있음
HTML 5 A p p F ra me wo rk
PhoneGap Titanium Appspresso
• 거의 모든 모바일 플랫폼 • 개발 , 테스트 , 배포를 • 국산 F ram e wo rk 임
을 지원함 동일한 환경에서 할 수 • O n th e fly 기능 제공
• 패키지 하고 배포하는 기 있는 F ram e wo rk 임 • 다양한 플랫폼을 지원하
능이 포함되어 있음 • iO S 과 안드로이드만 지 고자 계획하고 있음
• Ad o b e 에 인수됨 원함
15
21

22. We b Ap p 제작 툴
F las h
Mo b ile U I Ph o n e APIs Pac kag e
An im atio n s
j u e ry
Q
S e ncha
Jin d o
Ad o b e
(Ph o n e G ap , D re am we ave r)
Titan iu m
Ap p s p re s s o
22

23. 감사합니다 .
23