Chrome Dev Summit 2018 — Day 1 Keynote

Published in

NAVER FE Platform

4 min readDec 24, 2018

출처: https://www.youtube.com/watch?v=zPHyxvPT0gg

Chrome Dev Summit 은항상 좋은 내용으로 선보이지만 이번에는 Chrome 10주년인 만큼 좀 더 특별한 의미가 있었을 것으로 보입니다.

이번 키노트(Keynote) 에서는 지난 10년 동안의 변화를 되돌아 보며, 앞으로 더 빠른 웹을 가능하게 하는 브라우저의 주요 요소들을 소개하고 있습니다. 브라우저는 점진적으로 앱과의 경계가 사라질 만큼의 강력한 기능들을 탑재함과 더불어 성능의 향상을 통해 웹 플랫폼으로의 입지를 더욱 공고히 하고 있는 듯 합니다.

비록 발표 후 한달이 지났지만 많은 분들에게도 도움이 될 내용이라 생각하여 정리하였습니다. 시간 상 바쁜 사람들에게 전반적인 흐름을 빠르게 훑어볼 수 있도록 주요 핵심 키워드와 재생시간(링크)를 담았습니다.

지난 10년간 웹의 변화

0:04

Huffpost (Rich, Interactive)
구글맵 (360 Photo, vector map, 3D Model, 위성 지도)
Autocad
Figma
High Quality Game

Chrome 의 변화

2:28

보안 & 안정성 강화

2008년 도입한 Process isolation 방식, 이제 업계 표준
Process Isolation 은 Site Isolation 에도 개념을 적용하여 같은 탭이라도 (iframe 처럼)도메인이 다르면 별도 프로세스로 동작
HTTPS 의 범용적인 사용 (top100 의 80% 는 https)

성능 개선

V8: JS 성능의 개선 (앞으로 더 개선될 것, React 의 hook 도 v8 에서 더 빠르게 동작)
V8 에서 WebAssembly 지원 (Unity 에서 적용 후 10배 로딩 타임 빨라졌다고 함)
AV1–다음 세대의 미디어 코덱으로 로열티 free, HEVC 대비 비트레이트 30% 감소, (2018년 Chrome 에 적용)
WebP: png, jpeg 대비 30% 절감된 이미지 포맷

미래에도 역시 속도가 가장 중요한 피쳐

7:59

속도의 중요성
그것을 가능하게 하는 웹플랫폼
속도는 브라우저와 FE 개발자 모두의 숙제
FE 개발을 위한 성능 도구들(Lighthouse, PageSpeed Insight, CrUX)
그럼에도 불구하고 더 좋은 UI 를 보여주기 위해 시간이 갈수록 점점 무거워지는 페이지
성능 예산의 수립을 하는 연습(?) — Angular, Webpack, Preact 에서는 Budget 을 정의하는 built-in support 를 갖고 이를 강제한다.
Performance Budget 성공 사례 — Pinterest, wayfair

크롬에서 제공하는 성능을 위한 2가지 Web Platform Feature

13:05

Web Packaging: 암호화, original domain 을 증명하는 키값을 이용하여 패키지를 만듬 ->이 패키지는 어디든 제공되어 브라우저에서 페이지의 original domain 으로 안전하게 보여준다.(?)
Portal: iframe 과 같은 성격의 HTML, Portal 콘텐트로의 전환을 아주 자연스럽게 해줌. 이 Portal 은 프로세스에서 새로운 top level page 가 되게 함.

위 두가지가 합쳐져서 페이지를 안전하게 preload 하고 새로운 페이지로의 전환이 빠르게 가능하게 한다.

더 빠른 응답성을 주는 웹

14:18

Squoosh : 현재 웹이 복잡한 반응형 앱을 만들 수 있다는 사례를 보여주는 앱 (WebAssembly, Web Workers, Service Worker)
Offscreen Canvas
New API for Smooth Buttery UI : Worklets, Virtual Scroller, Task Scheduler API