2018년 11월 26일 COEX에서 진행된 HTML5 Conference 발표 자료입니다. 실제 현장에서 발표한 자료와는 다소 차이가 있을 수 있습니다. 본 발표는 Progressive Web Apps에 대한 기술적 배경, 접근 방법, 적용 사례 등을 포함하고 있습니다. 발표는 장기효님이 진행해주셨습니다.

1. -
23/0 1
1 — ©W3C HTML5 Conference, 2018

2. ‣ PWA 소개
‣ PWA 등장 배경
‣ PWA 특징
‣ PWA 적용 사례
‣ PWA 제작 기술
‣ PWA 활용처
2 — ©W3C HTML5 Conference, 2018

3. ‣ 장기효(캡틴 판교)
‣ 구글 PWA 공식 문서 번역
‣ 패스트캠퍼스, 인프런 PWA / Vue.js 강사
‣ Do it! Vue.js 입문서 저자
3 — ©W3C HTML5 Conference, 2018

4. 4 — ©W3C HTML5 Conference, 2018

5. ‣ 모바일 앱과 같은 경험을 주는 최신 웹 앱
5 — ©W3C HTML5 Conference, 2018

6. ‣ 모바일 앱과 같은 경험을 주는 최신 웹 앱
‣ 앱 Icon, 앱 설치 Banner, 모바일 Push, Offline 경험 제공
6 — ©W3C HTML5 Conference, 2018

7. ‣ 모바일 앱과 같은 경험을 주는 최신 웹 앱
‣ 앱 Icon, 앱 설치 Banner, 모바일 Push, Offline 경험 제공
‣ 기존의 웹 기술 HTML, JS, CSS로 모바일 앱과 같은 웹 앱을 구현
7 — ©W3C HTML5 Conference, 2018

8. ‣ 모바일 앱과 같은 경험을 주는 최신 웹 앱
‣ 앱 Icon, 앱 설치 Banner, 모바일 Push, Offline 경험 제공
‣ 기존의 웹 기술 HTML, JS, CSS로 모바일 앱과 같은 웹 앱을 구현
8 — ©W3C HTML5 Conference, 2018

9. 9 — ©W3C HTML5 Conference, 2018

10. 10 — ©W3C HTML5 Conference, 2018

11. ‣ 모바일 시장의 폭발적인 성장
11 — ©W3C HTML5 Conference, 2018

12. ‣ 모바일 시장의 폭발적인 성장
‣ 모바일 웹 보다는 모바일 애플리케이션을…
12 — ©W3C HTML5 Conference, 2018

13. ‣ 모바일 시장의 폭발적인 성장
‣ 모바일 웹 보다는 모바일 애플리케이션을…
‣ 웹 기술로 모바일 앱 영역을 커버하기 위한 시도
-> Hybrid App, React Native
13 — ©W3C HTML5 Conference, 2018

14. ‣ 모바일 시장의 폭발적인 성장
‣ 모바일 웹 보다는 모바일 애플리케이션을…
‣ 웹 기술로 모바일 앱 영역을 커버하기 위한 시도
-> Hybrid App, React Native
‣ 낙후된 인프라 환경에서 Offline Web의 필요성
14 — ©W3C HTML5 Conference, 2018

15. 15 — ©W3C HTML5 Conference, 2018

16. ‣ Responsive
16 — ©W3C HTML5 Conference, 2018

17. ‣ Responsive
‣ App-like
17 — ©W3C HTML5 Conference, 2018

18. ‣ Responsive
‣ App-like
‣ Discoverable
18 — ©W3C HTML5 Conference, 2018

19. ‣ Responsive
‣ App-like
‣ Discoverable
‣ Engageable
19 — ©W3C HTML5 Conference, 2018

20. ‣ Responsive
‣ App-like
‣ Discoverable
‣ Engageable
‣ Connectivity
20 — ©W3C HTML5 Conference, 2018

21. ‣ Responsive
‣ App-like
‣ Discoverable
‣ Engageable
‣ Connectivity
‣ Safe
21 — ©W3C HTML5 Conference, 2018

22. 22 — ©W3C HTML5 Conference, 2018

23. 23 — 출처 : Web Fundamentals

24. -- &
24 — ©W3C HTML5 Conference, 2018

25. 25 — 출처 : Web Fundamentals

26. 26 — ©W3C HTML5 Conference, 2018

27. 27 — 출처 : Send Pulse

28. 28 — ©W3C HTML5 Conference, 2018

29. 29 — 출처 : Web Fundamentals

30. 30 — ©W3C HTML5 Conference, 2018

31. 31 — 출처 : PWA Roadshow

32. 32 — ©W3C HTML5 Conference, 2018

33. 33 — ©W3C HTML5 Conference, 2018

34. 34 — 출처 : PWA Roadshow

35. 35 — ©W3C HTML5 Conference, 2018

36. 36 — ©W3C HTML5 Conference, 2018

37. 37 — ©W3C HTML5 Conference, 2018

38. 38 — ©W3C HTML5 Conference, 2018

39. 39 — 출처 : PWA Roadshow

40. 40 — 출처 : PWA Roadshow

41. 41 — ©W3C HTML5 Conference, 2018

42. 42 — 출처 : 2018 Google I/O

43. 43 — 출처 : 2018 Google I/O

44. 44 — ©W3C HTML5 Conference, 2018

45. 45 — ©W3C HTML5 Conference, 2018

46. .
46 — ©W3C HTML5 Conference, 2018

47. 47 — ©W3C HTML5 Conference, 2018

48. .
48 — ©W3C HTML5 Conference, 2018

49. !
49 — ©W3C HTML5 Conference, 2018

50. .
50 — ©W3C HTML5 Conference, 2018

51. ‣ 구글 PWA 공식 사이트(링크)
‣ Google I/O 2018 정리(링크)
‣ 인프런 - PWA 온라인 강의(링크)
‣ 패스트 캠퍼스 - PWA 오프라인 강의(링크)
51 — ©W3C HTML5 Conference, 2018