I/O Extended 2019 Seoul - What's New in Web

1. 장 한보람
Organizer, @GDG Korea WebTech
Front-End Engineer, @Actwo Technologies
What’s New in Web

2. 장 한보람
Organizer, @GDG Korea WebTech
Front-End Engineer, @Actwo Technologies
What’s New in Web
제가 오늘 여러분들께 말씀 드릴 내용은
What’s New in Web이라는 주제에서 유추할 수 있듯이,
이번 Google I/O 2019에서 Web 기술 관련해서 어떤 업데이트들이 있었는지에 대해서 입니다.

3. •GDG Korea WebTech Organizer
•Front-End Engineer @Actwo technologies

4. What’s New with Chrome and the Web WebAssembly for Web Develop
What’s New in JavaScript Build Fast and Smooth Web Apps from Feature Phone to Desktop
Building Successful Websites: Case Studies for Ma
Rendering on the Web: Performance Impl
Anatomy of a Web Media Experience Going Big: PWAs Come to Desktop and Chrome O
ecuring Web Apps with Modern Platform Features
Protecting Users from Deception
Demystifying Speed Tooling
Unlocking New Capabilities for the Web
Full Screen with Trusted Web Activities
Google Search and JavaScript Sites Speed at Scale: Web Performance Tips and Tricks
AMP for Email: Coming Soon to an inbox
AMP Stories: Visual Stories form the WebWhat’s new in Angular
Google I/O 2019가 끝난 이후, Google Developers에서 Web at I/O라는 제목으로
Web 관련 세션 비디오를 묶은 플레이리스트를 Youtube에 올려주셨어요.
지금 보시는 내용은 제가 무작위로 비디오 이름들을 배치해본 것이고요.

5. Web at Google I/O
23 Sessions
23 x 30min
= 690 min
= 11h 30min
40min
🎥 ⏳
발표를 준비하면서, 플레이리스트를 둘러보면서 총 플레이 시간을 계산해봤는데요.
11시간을 넘는 정도인데, 아시다시피 저에게 주어진 시간은 40분 남짓입니다.
그래서 내용을 어떻게 구성하는 게 좋을 지 많이 되었어요. 🤔
여기 오시는 분들이 단순하게 비디오의 내용을 그대로 전달드리는 것만을
듣기 원하지는 않으실 것 같았거든요.

6. NEW
NEXT
GENERATION
?
세션 내용은 크게 두 부분으로 나뉘는데요.
먼저, Chrome을 포함해서 Web의 전반적인 업데이트 내용에 대해서 살펴보겠습니다.
그리고 시간이 허락한다면, 현재 웹의 한계와 이 부분을 해결하기 위해서
구글이 어떤 시도들을 하고 있는지 이야기 하려고 합니다.
이런 시도들은 앞으로 구글이 Web 기술을 이끌어갈 방향으로도 볼 수 있을 거 같아서 준비해보았습니다.

7. Building a more helpful
Google
for everyone
혹시 키노트를 보셨나요?
안보셨어도 괜찮습니다.
“Building a more helpful Google for everyone”이 모든 내용을 관통하는 키워드에요.

8. Web
for everyone
그래서 저도 개발자 뿐만 아니라, 웹기술에 관심있는 모두가 들을 수 있도록 준비해보았습니다.
발표를 진행하는 동안 이점 참고해주시면 좋을 것 같아요.

9. What’s
New
with Chrome
And the Web
먼저, Chrome과 Web의 업데이트 내용에 대해서 살펴보겠습니다.

10. 업데이트 내용은 크게 세가지 특징으로 분류되어 소개됩니다.
Instant, Powerful, Safe

11. 신속성 확장성 안전성
저는 각각의 특징들을 신속성, 확장성, 안전성으로 표현하고 싶은데요.
의미를 한번 풀어볼까요?
신속성 - 사용자에게 더 빠른 사용자 경험을 제공하고,
확장성 - 사용자가 더 많은 것을 할 수 있게 하고,
마지막으로 안정성 - 동작 과정에서 사용되는 개인 정보를 보호하고,
어떻게 사용되는지 공유하면서 사용자의 신뢰를 잃지 않는 것.

12. 👤
👑
신속성 확장성 안전성
여기에서 이 특징들이 가지는 의미들이 집중하는 것은 사용자의 경험이라는 것을 알 수 있어요.
결론은 사용자가 왕이다. 라고 할 수 있겠네요.

13. Instant
for Faster User Experience
첫번째 순서로, 사용자에게 더 빠른 사용자 경험을 제공하기 위해서
어떤 업데이트들이 있는 지 알아보겠습니다.

14. 신속성
더 빠른 사용자 경험을 위해
첫번째 순서로, 사용자에게 더 빠른 사용자 경험을 제공하기 위해서
어떤 업데이트들이 있는 지 알아보겠습니다.

15. V8
우선적으로는 브라우저의 성능을 개선했습니다.
V8은 구글에서 만든 오픈 소스 자바스크립트 엔진으로,
Chrome 뿐만 아니라 Node.js와 Electron처럼 다른 곳에서도 사용 되고 있습니다.

16. 20%
2배
11배 더 빠른 async / await 처리 속도
메모리 절약
더 빠른 parsing 속도
POWER
UP
보시는 것과 같이, 각각의 수치들이 의미하는 바는
더 적은 메모리를 사용해서, 더 빠르게 기존의 작업들을 처리할 수 있게 된 것입니다.

17. [모던 웹의 문제점]
로드할 컨텐츠가 너무 많아서,
초기 렌더링할 때 느리다.
다음에 소개해 드릴 업데이트는 이 문제 해결과 밀접한 관련이 있습니다.
모던 웹에서는 특히 높은 퀄리티의 컨텐츠가 매우 많습니다.
고화질의 이미지를 포함해서 폰트, 비디오 등 많은 리소스들이 있는데요.
그중에서도, 이미지에 초점을 맞추겠습니다.

18. [모던 웹의 문제점]
로드할 고화질 이미지가
너무 많아서,
초기 렌더링할 때 느리다.
이미지 레이지 로딩으로
해결한다.
Image-lazy-loading
동시에 고화질의 이미지를 불러오는 것은 브라우저의 성능에 상당한 부담을 주는데요.
네트워크 환경이 변수가 많은 모바일 환경에서는 더욱 치명적인 사용자 경험을 제공할 가능성이 높습니다.
Image Lazy Loading 이라는 방법으로 해결할 수 있습니다.

19. 👀
이해를 돕기 위해, 붉은색으로 칠해진 부분은 사용자가 볼 수 있는 영역으로 표시했습니다.
Image Lazy Loading은 보이는 것과 같이, 사용자가 머물러있는 화면에 포함된 이미지만 로딩하는 방법입니다.
스크롤을 내리면, 또 다시 화면에 포함된 이미지만 추가적으로 로딩이 되는 것을 확인하실 수 있습니다.

20. 👀
Q. Image Lazy Loading을 하면 무엇이 좋나요?
A.보이지 않는 화면의(동시에 많은) 이미지까지 로딩하는 것은, 브라우저의 성능에 영향을 미칠뿐만 아니라,
사용자의 데이터 낭비일 수 있습니다.
데이터도 아끼고, 화면이 뜨는 속도도 개선할 수 있어요.
또, 네트워크가 상대적으로 불안정한
모바일 환경에서도 사용자에게 이전보다 더 나은 사용자 경험을 제공할 수 있습니다

21. Lazy Loading
개발자는 Image Lazy Loading 기능을 다른 라이브러리를 쓰거나 직접 구현해야 했었는데요.
img 태그에 loading attribute를 추가하고, “lazy”값을 입력하면 됩니다. 참 쉽죠?
브라우저에서 해당 attribute를 감지(detect)하면,
현재 사용자의 인터넷 연결 상태를 파악한 후, 이후 동작을 대신 해줍니다.

22. How it works
: Hands-on
Lazy Loading 간단한 Hands-on 예제가 있어, 링크를 달아두겠습니다.
크롬 카나리아에서 테스트하실 수 있습니다.
Q. 크롬 카나리아란?
크롬이 프로덕션 상태라면 크롬 카나리아는 알파, 베타 쯤 되는 상태인 거 같아요.
어떤 기술이 안정화 되어서 크롬에서 정식으로 배포 되기 전에, 크롬 카나리아에서 테스트도 하고,
개발자의 피드백을 받으면서 개선을 하기도 합니다.

23. Portal
Portal은 한마디로, “새로운 페이지 전환 효과” 입니다.
Portal은 iframe과 비슷하며 컨텐츠를 페이지에 직접 삽일할 수 있지만,
표준 iframe과는 다르게 최상위(Top-Level) 페이지로 ‘활성화’되어서 즉시 전환됩니다.

24. Portal
How it works
: Hands-On Demo
첨부한 영상만으로는 부족한 것 같아서, Portal이 동작하는 Demo를 잠깐 보여드릴께요.

25. 잘 아시겠지만, lighthouse는 웹사이트의 현재 상태를 진단하고,
중요 순위에 따른 문제점과 해결 방법을 가이드합니다.
벌써 lighthouse가 소개된 지 3년이나 되었다고 해요.
웹사이트의 형식이 빠르게 변화하고 있으니, 개발자도구도 지속적으로 개발 되어야겠죠?
새롭게 추가된 기능이 있습니다.

26. Perfomance
Budget
budget.json바로, Performance Budge이라는 기능인데요.
이렇게 budget.json 파일을 작성하면 됩니다.
웹사이트에서 사용되는 리소스들의 타입별로 예산을
CI 툴과 함께 사용할 수 있고,
지금도 지원하는 기능이라고 해요.

27. Perfomance
Budget
http://www.performancebudget.io/

28. Perfomance
Budget
http://www.performancebudget.io/그런데, 처음부터 짜기 막막할 수 있잖아요?
이 사이트에서는 옵션별로 리소스 타입별로 예산을 추천해줘요.

29. Powerful
For Powerful Capabilities
다음은, 더 많은 사용자 경험을 제공하기 위해서(사용자가 더 많은 것을 할 수 있도록 하기 위해서)
어떤 업데이트들이 있는 지 알아보겠습니다.

30. 확장성
For Powerful Capabilities
다음은, 더 많은 사용자 경험을 제공하기 위해서(사용자가 더 많은 것을 할 수 있도록 하기 위해서)
어떤 업데이트들이 있는 지 알아보겠습니다.

31. Web Perception
Toolkit
1. Sensing
2. Meaning
3. Rendering
Web Perception Toolkit은 세가지 단계로 동작합니다.
첫번째는 Sensing인데요, 카메라로 QR코드 또는 바코드를 인식하는 과정입니다.
그 다음 Meaning. Sensing 결과를 전송해서 의미를 찾는 과정이죠.
마지막으로 렌더링, 그리고 그 결과를 사용자에게 보여줍니다.
Perception Toolkit 참고영상

32. Sharing API
Web
Native App
[MDN] Web Sharing API

33. Sharing API
Native App
Chrome

34. Duplex on the web
Web ➕
Google Assistant의 폭풍 성장이 궁금하다면?
Keynote 25:00
Google Assistant와 Web의 만남입니다.
Google Assistant의 폭풍 성장이 놀라웠는데요.
특히, 거의 지연시간 없이 테스크가 처리되고, 발화를 인지하는 능력도 많이 좋아졌어요.
“Ok, Google”이라고 부르지 않아도 컨텍스트가 유지되는 부분도 인상깊습니다.

35. Duplex on the web
Web ➕
Google Assistant의 폭풍 성장이 궁금하다면?
Keynote 25:00
Native app과 Google Assistant 사이의 꽤 복잡한 시나리오를 시연합니다.
Google Assistant의 폭풍성장을 키노트에서 확인하세요.

36. <<왼쪽
렌트카를 신청하는 플로우(Form 작성 과정)를
Google Assistant 로 하는 데모입니다.

37. >>오른쪽
렌트카를 신청할 때 입력해야 하는 전체 플로우
(Form 작성 과정)을 시각적으로 보여주고 있습니다.
아까, Google Assistant를 사용했을 때는 가지고
있는(이미 알고 있는) 정보를 알아서 입력해줬는데요.
상용화가 된다면 시간을 많이 절약할 수 있겠죠?

38. OK, Google
엄마집으로 안내해줘
“오케이 구글, 엄마집으로 안내해줘” 하면,
이렇게 구글맵에서 검색 후 => 가장 정확도가 높은 결과 + 가장 가까운 거리로 안내해줄 것 같잖아요?
놀랍게도, 구글 어시스턴트는 사용자의 엄마의 집으로 안내합니다.
얼마만의 방문인지도 알려주고요.
사용자의 개인정보 보안에 대해서 바로 다음 장부터 이야기하겠지만,
이런 기능들에 대한 사용자의 우려와 걱정에 대비한 정책들은 아닐까 생각했습니다.

39. Safe
For User Trust & Safety
마지막으로, 안정성에 관한 업데이트 내용은 개인 정보 보호에 중점을 두었습니다.
외부의 위협으로부터 사용자를 보호하고, 사용자와의 신뢰를 유지하기 위해 어떤 업데이트들이 있는지 알아보겠습니다.

40. 안정성
사용자의 신뢰와 안전을 위해
마지막으로, 안정성에 관한 업데이트 내용은 개인 정보 보호에 중점을 두었습니다.
외부의 위협으로부터 사용자를 보호하고, 사용자와의 신뢰를 유지하기 위해 어떤 업데이트들이 있는지 알아보겠습니다.

41. httpshttp
🔓 🔒
가끔, 크롬에서 정부기관 접속이 경고창이 뜨면서 안될 때가 있어요.
HTTPS를 지원하지 않아서 생긴 경우인데요,

42. httpshttp
🔓 🔒
Hello world He^^* W*r^d
HTTP와 HTTPS(Hypertext Transfer Protocol over Secure Socket Layer)의 차이는
S 쉴드, 방패가 하나 더 있다고 생각하시면 좋을 것 같아요.
그런데 그 방패가 어떤 역할을 하냐면, 중간에 훔쳐봐도 모르게 주고 받는 데이터를 암호화 해요.

43. Easy to use Privacy Controls
Transparency,
Choice and
Control

44. 프라이버시 제어를 더 쉽게
투명성,
선택,
제어프라이버시 설정에 대한 사용자의 접근성을 높이고, 더 쉽게 사용할 수 있도록
“투명성, 선택, 제어”라는 키워드를 중심으로 개선할 계획이라고 합니다.
“사용자의 데이터가 어떻게 사용되는지 투명하게 공개되어야 하고,
사용자가 데이터 사용 범위를 선택하고 제어할 수 있어야 한다.”

45. Same site Cookie
🍪
“sameSite: strict”
[Web.dev] Same Site Cookie 설명

46. Fingerprinting
Protection
🛡🖐
특수한 경우를 공유하지는 않았지만,
일부 회사에서 불필요하게 사용자의 생체 인식 정보를 요구하는 사례가 있다고합니다.
사용자의 선택과 결정에 사용되고 있는 만큼 생체 인식 정보에 대한 중요도는 높아지고 있습니다.
특히 지문 인식에 대해서, 사용자를 보호하기 위한 조치를 계획 중입니다.

47. 지금까지 새로운 업데이트들에 대해서 알아봤습니다.
각각의 블럭이 무엇을 의미하는 지 혹시 눈치채셨나요?
색깔은 신속성, 확장성, 안정성 세가지 특징을 표현하며, 각각의 블럭은 독립적인 기능을 의미합니다.

48. 이런 업데이트를 통해서 웹은 어떤 모습으로 변화할까요?

49. How The Web
Would Be
Changed
In the future

50. Chrome < Google < Web
혹시 여러분 중에 이 순서가 무엇을 의마하는 지, 아시는 분이 계신가요?

51. Chrome < Google < Web
차례대로 크롬은 10주년을,

52. Chrome < Google < Web
구글은 20주년을,

53. Chrome < Google < Web
네. 마지막으로 Web은 30주년을 맞이했습니다.

54. Suppose all the information stored on
computers everywhere were linked.
Suppose I could program my computer to
create a space in which everything could be
linked to everything
- Tim bearers-lee, Inventor of the World Wide
Web 1993년, Web의 아버지, 팀 버너스리께서 Web의 개념에 대해서 정의한 내용입니다.
원래의 뜻을 해치지 않기 위해서, 원문을 그대로 들고왔습니다.
이 많은 글자 중에서 사실 키워드는 두 개에요 - informaton, link

55. Information 📄
조금 더 자세히 살펴볼까요?
정보는 문서라는 틀에 담기게 됩니다.

56. 📄📄📄📄 📄
Information
…
정보가 점점 더 많아지겠죠?

57. 📄
📄
📄
📄
Link
정보와 정보를 연결하는 행위 - Link
정보가 많아지고, 연결되는 것 또한 많아질수록 => 복잡도가 높아지면서 생태계가 형성됩니다.
그게 바로 오늘날의 웹입니다.

58. 하얀 천이랑
바람만 있으면
어디든 갈 수 있어.
하얀 천
바람
한번쯤 들어보셨을 것 같은데요.
이 말을 조금 바꿔볼께요.

59. 브라우저랑
인터넷만 있으면
어디든 갈 수 있어.
브라우저
인터넷
Web의 가장 큰 장점은, 브라우저와 인터넷만 있으면 무엇이든 할 수 있는 것입니다.
Native App과는 다르게, 인터넷만 연결되어 있으면, 추가적인 설치 없이 원하는 동작을 할 수 있죠.

60. VS
App Gap
Web
Native
App
이렇게 Web 큰 장점도 있지만, 한계도 있어요.
Native App에서는 가능하지만, Web에서는 할 수 없는 것들이 있습니다.
예를 들면, 사용자의 파일 시스템이나, 연락처에 접근을 하는 것이 있겠네요.
이를 App Gap이라고 합니다.

61. Project fugu
이런 한계를 뛰어넘기 위해서 구글에서 진행하는 프로젝트가 있는데요. 바로, Project Fugu 입니다.

62. NEW
APP GAP Badge API
앞에서 확장성에 대해서 이야기했던,
Perception Toolkit과 Sharing API도 이 프로젝트에서 진행중입니다.
제가 시간이 모자랄 것 같아서, 하나만 들고 왔는데요.
Badge를 나타내기 위해 **이렇게** 간단하게 쓸 수 있습니다.

63. 이렇게 장점이 많지만, 제가 생각했을 때 웹의 치명적인 약점은
인터넷 연결이 끊긴 상황에서는 아무런 사용자 경험(피드백)을 주지 못하는 것 같아요.

64. Progressive
Web
App
Chrome 76 >= Desktop
Progressive Web App은 기존의 Web 기술을 사용해서 Native App(app-like)같은 경험을 제공합니다.
개인적으로, 지난해 I/O 에서 보여준 미국 Starbucks 데모가 가장 인상적이었습니다.
올해는 Spotify, Twitter 그리고 Netflix 같은 컨텐츠 스트리밍 서비스 hulu가 소개되었습니다.
Chrome 76 버전부터 Desktop PWA를 지원하며,
앞으로는 Electron을 사용하지 않고도 Desktop App 제작이 가능해지겠네요.

65. 웹은 또 어떤 형태로 변화할까요?
지금까지는 디바이스 변화에 많이 의존했던 것 같아요.
스마트폰이 등장하면서 디스플레이스 사이즈가 급격히 작아지고,
나중에는 다양해지면서 반응형(Responsive)이라는 개념이 생겼어요.
이제는 디바이스 사이즈만 커버하는 것이 아니라,
단일 코드베이스에서 여러 디바이스를 대응할 수 있도록 하는 움직임도 있습니다.
네. 바로 Flutter와 PWA 입니다.

66. 더 궁금하시다면, 플레이 리스트의 비디오를 찬찬히 보시는 것을 추천드려요.

67. reference
- Keynote
- Developer Keynote
- What’s New with Chrome and the Web
- Unlocking New Capabilities for the web
제가 준비하면서 참고한 동영상 목록 입니다.

68. Recommend-1
- Keynote #Building a more helpful Google for everyone
구글이 집중하고 있는 게 뭔지, 전반적으로 궁금하시면 보시길 추천드려요.
- Going Big: PWAs Come to Desktop and Chrome OS #AppGap
#PWA
Native App과 비교했을 때 현재 Web의 한계가 무엇인지(App Gap), 그리고 어떻게 Web으로 Native App같
은 사용자 경험을 제공할 수 있는 지(PWA)에 대해서 이야기합니다.
제가 세션 끝에 인사드리면서, 말씀드렸던 내용이에요.
제 기준으로, 인상깊었던 부분과 그 비디오 목록을 정리해보았어요.

69. Recommend-2
- Unlocking New Capabilities for the web #AppGap
#WebCanDoEverything #ProjectFugu
Native App이 하는 모든 것을 Web도 다 할 수 있다. API 개발부터 배포까지의 과정이나, 어떤 API들을
개발중인지 그 상태를 확인하고 싶다면 꼭 보세요. 추천합니다.
- Web as a building block for emerging technologies #웹의미래
👆 👆 👆 Unlocking New Capabilities for the web의 10분짜리 요약본 정도로도 소개드릴 수 있
을 것 같아요.
제가 세션 끝에 인사드리면서, 말씀드렸던 내용이에요.
제 기준으로, 인상깊었던 부분과 그 비디오 목록을 정리해보았어요.

70. I/O Extended 2019 WebTech
link
2019. 7. 13
12:00 pm ~
@구글 스타트업 캠퍼스
드디어 시간표가 공개되었습니다. 👉 시간표 확인하러 가기
더 깊게 못 다루었던 APP GAP - New Capabilities for the Web 과 PWA에 대해서 이야기할 예정입니다.

71. 마무리 끝.
제가 준비한 내용은 여기까지 입니다.
발표가 처음인데, 많은 분들이 지켜봐주시고 또 첫번째 세션이라 많은 긴장을 했습니다.
부족하지만, 들어주셨던 분들께 감사드립니다.