![[DS Meetup] iPad로 가벼운 분석환경 구축해보기](https://cdn.slidesharecdn.com/ss_thumbnails/dsmeetupanalysisenvusingipad190723-190723160209-thumbnail.jpg?width=560&fit=bounds)
![[Td 2015]프로그래밍 언어의 f1머신 c++을 타고 windows 10 uwp 앱 개발의 세계로~(유영천)](https://cdn.slidesharecdn.com/ss_thumbnails/td2015f1cwindows10uwp-151104053044-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
![[NDC17] Protocol:hyperspace Diver 개발 포스트모템](https://cdn.slidesharecdn.com/ss_thumbnails/ndc17phdivertechpostmortempubslideshare-170511112448-thumbnail.jpg?width=560&fit=bounds)
![[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템](https://cdn.slidesharecdn.com/ss_thumbnails/igc2017nfptv2s-170905074654-thumbnail.jpg?width=560&fit=bounds)
![[IGC2017] Protocol:hyperspace Diver 개발 포스트모템](https://cdn.slidesharecdn.com/ss_thumbnails/igc2017nfptpublicslides-170831135138-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to HTML5 for web app. development (20)
More from SangJin Kang (11)
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
Editor's Notes
- #4: HTML5
- #22: UI Framework HTML5 문서를 사용자가 읽을 때 사용자 Interaction 이 Native App 와 유사하게 느낄수 있게 하기 위해서 , 예를 들어서 페이지 이용 시 보여지는 애니메이션 효과 , 내부 콘텐트의 애니메이션 효과 , Touch 와 Flick 과 같은 Event 를 처리하는 부분 등을 지원할 필요가 있는데 위와 같은 기능을 지원하는 Library, Framework 에는 jQuery, jQTouch, Sencha, JMC 등이 있다 . HTML5 App Framework 사용자의 개인정보에 접근하고 HTML5 에서 지원하지 않는 기능 지원하기 위해서 예를 들어서 주소록 접근 , 디바이스에 포함된 하드웨어 자원 (Camera, NFC, MemoryCard) 을 사용하기 위해서는 디바이스내의 API 을 사용해야 하는 필요성이 있기에 HTML5 Web 과 디바이스 API 사이의 중간자 역할을 담당하는 Framework 가 필요하며 현재 가장 많이 쓰이고 있는 Framework 로서는 PhoneGap, Titanium 이 있고 국산 Framework 로서는 KTH 에서 개발한 Appspresso 가 있다 .