Google I/O 2021 웹 세션 (1) - 쿠키 SameSite 속성, 로드 후 웹의 성능

Google I/O는 매년 한 번씩 구글에서 여는 개발자 컨퍼런스입니다.

https://events.google.com/io/?lng=ko

이번에 Google I/O 2021을 처음 듣게 되었는데, 콘텐츠 및 주제별로 유익한 정보들이 정말 많았습니다. 특히, Android 12도 이번 Google I/O에서 모습을 공개하였습니다.

무엇보다도 chrome과 V8 등을 개발한, FE 개발자라면 뗄 수 없는 구글의 웹 세션을 주의 깊게 보려고 하였는데, 개인적으로 그 내용들을 주제별로 간략하게 정리해보려 합니다.

먼저 cookie의 기본 설정 정책이 변경된 것과, 로드 후의 성능이라는 파트를 간단하게 살펴보았습니다.

cookie의 기본 설정 정책 변경 (SameSite 속성)

저번 2020년 Google I/O에서는 Chrome의 쿠키 기본 정책을 변경한다고 발표한 적이 있습니다.

아무 설정이 없을 시 기존에는 기본적으로 쿠키가 웹사이트 전체(모든 도메인)에서 확인할 수 있었다면, 이제는 쿠키를 설정한 동일한(same) 도메인 간 전송만 가능하게 되는 것인데요.

이전에는 쿠키의 기본 공개 상태가 광범위했기 때문에 CSRF(Cross-Site Request Forgery, 크로스 사이트 요청 위조) 공격에 사용자를 노출시킬 수 있었습니다.

그래서 다음과 같이 쿠키의 기본값이 같은 도메인 간 전송만 가능하도록(SameSite=Lax) 변경됩니다.

SameSite를 선언하지 않은 쿠키는 default로 SameSite=Lax(Strict에서 몇 가지 항목만 제외된) 쿠키로 취급한다.
만약 필요에 의해 SameSite=None으로 설정할 경우, 반드시 Secure 속성을 같이 사용해야만 한다. (Secure 속성이 추가되면 https 프로토콜 환경에서만 쿠키를 전송한다.)

이와 관련하여 2021 Google I/O에서는 위 내용을 다시 한번 다루고 있습니다. (https://events.google.com/io/session/2118f261-1549-41d8-b2ef-e377c2c97019?lng=ko)

참고 : SameSite에 사용할 수 있는 속성

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite

해당 세션 링크 : https://events.google.com/io/session/61a0f83e-1d64-4bdc-b5d9-04360db925ec?lng=ko

이 세션에서는 웹의 성능 최적화에 대한 부분을 다루고 있습니다.

보통 웹의 성능은 로딩 성능(처음 들어오는 시점)을 이야기 하는 경우가 많았습니다. 사람들은 처음 로딩이 오래 걸리는 페이지는 떠나버릴 것이기 때문에, 그 입장에서는 첫 로딩 이후에 일어나는 일들을 최적화하는 것은 소용이 없다고 볼 수 있기 때문입니다.

블로그나 언론사 등 콘텐츠를 담은 사이트는 일반적으로 내비게이션 메뉴를 클릭할 때마다 전체 페이지 리로드를 주로 하기 때문에, 시작 시점의 load 부분을 최적화 하는 것이 일반적입니다.

하지만 예를 들어 메일앱 등은 처음에 한 번 로드하고 그 이후에는 페이지는 그대로 머물며, 로드 이후 사용자가 앱과 상호작용을 할 때 API 엔드포인트에서 데이터를 로드합니다(post-load).

로드는 맨 처음 한 번 발생하고 나머지 노란 부분은 로드 이후의 일로 간주한다.

대부분 앱들은 이 두 가지 예시 중 어느 사이에 존재하는 상황이기 때문에, 앱이 어느 상황에 위치하느냐에 따라 최적화하는 부분을 잘 결정해야 할 것입니다.

그리고 이제는 웹앱이 점점 복잡해짐에 따라, 로드 후 성능을 최적화하는 것도 매우 중요해지고 있습니다.

로드 후 성능의 기본 원칙은 필요할 때만 로드하라는 것이며, 이외에는

하는 방법 등이 있습니다.

이 세션에서는 로드 후의 성능을 어떻게 측정하는지 알아보고, 이것과 관련된 Web Vitals에 대해 소개하고 있습니다.

Web Vitals : https://developers-kr.googleblog.com/2020/05/Introducing-Web-Vitals.html