Google IO 2021

Sean H.W. Lee
6 min readJun 13, 2021

--

Photo by Lauren Edvalson on Unsplash

What’s new for the web platform

Google io 2021 중에 What’s new for the web platform 라는 세션(?)을 보고 간단하게 정리해 본다.

(개인적인 공부 글입니다. 부정확한 정보가 있을 수 있습니다)

New privacy-preserving technologies

그 전에 샌드박스란?

샌드박스라는 단어를 들어보기는 했지만 그게 무얼 의미하는지 알지 못했는데 이번에 알게 되었다. 샌드박스란 컴퓨팅에서는 주변 환경으로부터 보호하는 것을 의미한다고 한다. 즉 최신 브라우저는 샌드박스처럼(?) 만들어졌다. 샌드박스가 벽으로 둘러쌓인 것 처럼 우리가 방문하는 각 웹사이트 역시 가상의 벽으로 둘러쌓여 있어서 우리가 방문한 웹 사이트를 시스템의 나머지 부분과 분리한다. 크롬은 초창기부터 브라우저 샌드박스 모델을 적용했고, 초창기의 이 모델은 각 웹사이트를 자체 프로세스로 분리했다. 최근에는 웹 페이지의 각 cross-site iframe 이 자체 프로세스로 분리되도록 확장되었다고 한다. (잘은 모르겠지만 찾아본 결과 CSRF 공격시에 iframe 을 이용하면 공격 코드는 서버에 있고 사용자가 해커 서버로 연결된다고 한다.) 사용자 데이터 및 추적에서도 이와 동일한 접근 방식을 사용하여 브라우저 내에서 모든 정보를 안전하게 보호하고자 하는 일종의 프라이버시 샌드박스를 구축하고, 그 결과 개인 정보를 보호할 수 있는 웹이 생성된다.

이러한 개인 보호 정책의 하나로 크롬은 쿠키 동작을 변경했다. (same-site-cookie 라고 들어는 봤지만, 그게 뭐지? 했었는데 이번에 살짝 알게되었다.) 기본적으로 웹사이트 전체에서 보이던 것에서 쿠키를 설정한 동일 웹사이트에서만 볼 수 있는 것으로 변경되었다. 이전에는 쿠키의 출처가 명확하지 않았고 브라우저는 쿠키가 어떻게 사용되는지 관찰하여 쿠키의 목적을 추정해야 했다. 또한 쿠키의 광범위한 기본 공개 상태가 쿠키의 정보를 관찰하는 third-party-cookie 에 기반하여 CSRF 에 사용자를 노출시켰기 때문에 보안 문제가 발생하기도 했다. 이제 브라우저는 이런 쿠키를 매우 간단한 방법으로 비활성화 할 수 있게 된다. 이제 이 기본정보 보호를 위한 설정은 default 가 되었고 크롬에서 엣지는 이미 적용되었으며, 파이어 폭스까지 확장 예정이다.

구글은 바뀐 쿠키 정책에 맞추어 개인 정보는 보호하면서도 웹 비지니스에 중요한 정보를 계속 수집할 수 있는 API 를 제공하고 (혹은 할 예정)있다. Attribution Reporting API 가 그 중 하나이다. 모든 웹 비지니스의 핵심 측면은 어떻게 잠재 사용 고객을 늘리느냐 이고, 이는 종종 광고를 수반한다. 예전에는 실제로 얼마나 많은 사용자가 광고를 클릭했고, 가입, 구매 등을 완료했는지를 측정하기 위해 third-party-cookie 를 사용했었다. 하지만 Attribution Reporting API 를 이용하면 사용자 식별 데이터를 공유하지 않으면서도 브라우저가 광고 전환을 추적해 준다. 즉 사이트 간 사용자를 추적하지 않으면서도 여전히 광고 효과를 추적할 수 있게 해 준다.

File System Access API

File System Access API 를 이용하면 웹 앱도 사용자의 로컬 파일 시스템을 읽고 쓸 수 있다. 때문에 사진 수정 앱처럼 개인 컴퓨터에 저장된 파일을 이용해야 하는 웹 앱들도 로컬 환경에서 작업하는 것과 같은 효과를 경험할 수 있다.

Web Assembly

이 기술은 V8 과 같은 최신 자바스크립트 엔진으로 브라우저에서 실행될 수 있는 빠르고 효율적인 형식으로 코드를 컴파일하기 위한 표준을 제공한다. 구글은 최근에 특정 클래스의 앱을 훨씬 빠르게 실행할 수 있는 SIMD 프로세서 명령에 대한 지원을 V8 에 구현함으로써 웹어셈플리의 성능을 크게 향상했다.

100% 이해는 안 되지만 Web Assembly 기술을 이용하면 웹 앱의 성능을 향상시킬 수 있다는 것으로 이해했다. 세션에서 예시로 Google meet 이 기술을 이용해서 성능 향상을 시킨 덕에 남은 자원으로 대부분의 사용자가 배경 blur 처리를 할 수 있게 되었다고 하였는데, 이건 진짜인 듯 하다. 내 구형 맥북이 zoom 에서는 가상 배경을 이용할 수 없는데, Google meet 에서는 가상 배경 적용이 되기 때문이다.

Sparkplug — V8’s new bytecode to machine code compiler

V8 은 스파크플러스라는 새로운 컴파일러를 구현했다. 또한 집중타이머 제한(Intensive timer throttling)이라는 새로운 크롬 기능을 제공한다. 이 기능은 브라우저 탭이 백그라운드에 5분이상 있을 경우 이를 감지하며 탭에서 오디오나 동영상을 재생하지 않는 한 크롬은 해당 탭에서 타이머 기준 자바스크립트 코드를 실행하는 빈도를 낮춘다. 또한 content-visibility 라는 새로운 CSS 속성에 대한 지원을 제공함으로써 이 개념을 CSS 에 적용했다. content-visibility: auto; 를 적용하면 현재 사용자의 디스플레이에 해당 요소 트리의 컨텐츠가 표시되지 않는 경우 해당 컨텐츠의 렌더링을 생략할 수 있는 브라우저 권한을 부여한다. 이를 통해 컨텐츠가 많은 사이트의 속도를 크게 향상 시킬 수 있다.

말이 좀 어려웠는데, 즉 사용자가 당장 사용하지 않고 있거나 보고 있지 않은 화면은 코드 실행을 줄임으로써 성능 향상을 일궈냈다는 것으로 이해했다. 또한 pre-rendering 기술도 개발 중인데, 이를 이용하면 사용자가 어떤 링크를 클릭하기 전에 웹페이지의 모든 리소스를 로드하고 DOM 렌더링까지 미리 해 두어서 클릭하면 즉각적으로 화면이 띄워지는 것이 가능하다고 한다.

최근에 크롬을 사용하면서 좀 놀랐던 기술중의 하나가 설치 기능이었다. 유튜브 뮤직 같은 경우 별도의 앱이 없이 브라우저로 접속해서 사용했어야 했는데, ‘설치’ 기능을 이용하니까 앱 처럼 설치가 되서 브라우저를 이용하지 않고도 바로 사용할 수 있게 된 것이 신기하고 편리했었다. 이번 세션에서 언급된 새로운 기술들을 내가 언제쯤 직접적으로 체감할 지, 혹은 이 기술들은 이용해서 직접 개발해 볼 수 있을지 모르겠지만 웹의 현재와 앞으로를 간접적으로 나마 이해할 수 있는 유익한 시간이었다.

--

--