들어가며

프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다.

💡 각 항목은 Chrome Platform Status의 Roadmap과 한 달간의 blink-dev 활동 요약을 바탕으로 정리했다.

💡 각 항목의 ⚠️는 지원 중단(Deprecated), ✅는 새로운 기능(Enabled by default), 🧪는 미리 보기(Developer Trial, Origin Trial)를 의미한다.

💡 각 항목 중 기존 서비스에 미치는 영향이 크다고 판단한 항목은 소제목 뒤에 📌 표시를 했다.

💡 지원 중단(⚠️) 외의 항목은 공유 가치가 있다고 판단한 경우에만 포함했다.

💡 미리 보기(🧪)는 chrome://flags 페이지에서 Experimental Web Platform features를 활성화하거나(Developer Trial), Origin Trial을 신청해 사용할 수 있다.

💡 각 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 Chrome Platform Status를 그대로 인용했다.

목차

Chrome 123
- ⚠️ Permissions-Policy "window-placement" 별칭 제거
- ✅ 블록 요소 align-content CSS 속성 지원
- ✅ light-dark() CSS 함수 추가
- ✅ import 속성
- ✅ NavigationActivation
- ✅ 내부망 페이지 이동 시 사전 요청 발송 - 경고 모드
- 🗓️ 배포 예정일
Chrome 124
- ✅ Compute Pressure API
- 🧪 HTMLVideoElement 전체 화면 접두사 API 지원 중단 미리 보기
- 🗓️ 배포 예정일
Chrome NEXT
- ⚠️ [Chrome 127] Mutation 이벤트 제거 📌
- ⚠️ unload 이벤트 지원 중단 📌
- ⚠️ CSS 구형 사용자 지정 상태 문법 지원 중단
- ⚠️ 제3자 쿠키 지원 중단 📌
- ✅ 내부망에 대한 하위 리소스 요청 규칙 적용

1. Chrome 123

⚠️ Permissions-Policy "window-placement" 별칭 제거

window-management는 브라우저 창을 제어하는 Window Management API를 사용하기 위한 권한이다.

처음에 이 API는 하위 창(window.open)의 위치를 제어하는 기능에만 초점을 두었다. 권한의 이름도 window-placement였으나, API가 창의 크기 등 위치 말고도 많은 기능을 지원하도록 바뀌면서 보다 넓은 의미의 window-management로 명세를 수정했다.

아직 제안 중인 API인 만큼, Chrome 팀은 따로 지원 중단 기간 없이 이번 업데이트에서 바로 window-placement를 제거할 예정이다. Chrome 111부터 window-management를 사용할 수 있으니 업데이트 전에 미리 변경하기를 권장한다.

Window Management API는 아직 비표준인 만큼 명세가 바뀔 수 있음에 주의하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 해당 없음
웹 개발자: 의견 없음

참조

Feature: Remove "window-placement" alias for permission and permission policy "window-management"
Feature: Add "window-management" as an alias for permission and permission policy "window-placement"
Window Management

✅ 블록 요소 `align-content` CSS 속성 지원

CSS의 align-content 속성은 flexbox의 교차축 또는 grid의 블록축 정렬을 지정하는 속성이다. align-items가 축의 각 줄의 정렬을 지정하는 속성이라면, align-content는 여러 줄을 감싸는 컨텐츠 영역의 정렬을 지정하는 속성이다.

좌 - align-items, 우 - align-content

현재는 블록 요소에 수직 정렬을 위한 속성이 없어 display: flex를 자주 사용한다. 하지만 업데이트 이후에는 align-content를 뿐만 아니라 블록 요소(display: block, display: list-item, display: table-cell 등)에도 사용할 수 있어 수직 정렬이 좀 더 간편해질 것으로 기대된다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 개발 중
웹 개발자: 의견 없음

참조

✅ light-dark() CSS 함수 추가

color-scheme 속성의 값에 따라 다른 색상값을 반환하는 light-dark() CSS 함수를 추가한다.

color-scheme는 특정 요소에 대해 브라우저에서 사용하는 테마를 지정하는 속성이다. 기본값은 normal으로, 이 때는 브라우저의 기본 테마를 적용하며, light는 라이트 모드를, dark는 다크 모드의 테마를 적용한다.

.textarea {
  color-scheme: light;
}

좌 - light, 우 - dark

위 이미지의 왼쪽은 color-scheme: light, 오른쪽은 color-scheme: dark를 적용한 모습이다. 테마를 적용하면 해당 요소의 배경색, 글꼴색 등 브라우저 기본 색상을 변경한다.

color-scheme는 위에서 언급한 값 밖에도 사용자의 OS 설정에 따라 테마를 정하도록 유도할 수 있다.

:root {
  color-scheme: light dark;
}

light-dark() 함수는 color-scheme 속성과 함께 사용할 때 유용한 함수이다. light-dark()는 두 개의 색상값을 인자로 받아 현재 요소의 테마에 따라 하나의 색상값을 반환한다.

.highlight {
  background-color: light-dark(white, black);
  color: light-dark(var(--light-font-color), rgb(240 240 240));
}

light-dark() 함수는 현재 테마가 없거나 light일 때는 첫 번째 색상을, dark일 때는 두 번째 색상을 반환한다. color-scheme는 Chrome 81부터 사용할 수 있으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 배포 완료
Safari: 배포 완료
웹 개발자: 의견 없음

참조

✅ import 속성

Import Attributes 모듈을 추가한다. 이전에 Import assertions라는 이름으로 제안했던 기능으로, 다른 모듈을 불러오는 import로 .js 외 다른 형식의 모듈을 불러올 때 사용할 수 있다.

import data from './foo.json' with { type: 'json' };

// 동적 import
const data = await import('./foo.json', { with: { type: 'json' } });

Import Attributes는 무엇보다 보안을 위한 기능이다. 불러온 모듈의 내용이 개발자가 기대한 것과 다를 때 의도치 않은 스크립트의 실행을 방지하기 위한 것으로, 브라우저는 type: json으로 모듈 타입 지정 시 서버의 MIME 타입이 application/json이 아닌 경우 요청을 실패 처리한다.

현재는 JSON 모듈만을 지원하며, Node.js나 Deno 최신 버전에서는 이미 지원하는 기능이니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 배포 완료
웹 개발자: 의견 없음

참조

✅ NavigationActivation

navigation 객체에 문서가 활성화된 경로를 나타내는 activation 속성을 추가한다.

activation 객체에는 문서 활성화 당시의 정보를 나타내는 entry, 이전 문서를 나타내는 from, 이동 방식을 나타내는 navigationType 속성이 있다. navigationType은 push, replace, reload, traverse 중 하나의 문자열이며, from은 이전 문서가 없거나 다른 출처인 경우 null이다.

if (navigation.activation.navigationType === 'push') {
  const { key } = navigation.activation.from;

  goBackButton.onclick = () => navigation.traverseTo(key);
}

Navigation API는 제안 중인 기능으로 아직 지원하지 않는 브라우저가 있으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 긍정적
Safari: 의견 없음
웹 개발자: 긍정적

참조

✅ 내부망 페이지 이동 시 사전 요청 발송 - 경고 모드

내부망 보안 강화를 위한 내부망 접근 규칙(Private Network Access)의 일부를 적용한다. 내부망에서 페이지 이동 시 접근 가능 여부를 먼저 확인하며, 실패 시 개발자 도구에 경고를 노출한다.

내부망에서 페이지를 이동하면 브라우저는 서버가 보안 컨텍스트를 사용하는지 확인한다. 그리고 사전 요청을 보내 서버가 내부망 접근을 허용하는지 확인한다.

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Allow-Credentials: true
Access-Control-Allow-Private-Network: true

서버가 위처럼 접근을 허용하면 요청을 그대로 진행하며, 거부하면 개발자 도구에 경고를 노출한다. Chrome은 보안 강화를 위해 점차 경고 노출 대신 요청을 실패 처리할 예정이다. Chrome 104에서 하위 리소스(.js, .css 등)에는 미리 같은 기능을 적용했으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 긍정적
Safari: 긍정적
웹 개발자: 복합적

참조

🗓️ 배포 예정일

Chrome 123은 2024년 3월 13일에 정식 배포 예정이다.

2. Chrome 124

✅ Compute Pressure API

Compute Pressure API를 추가한다. Compute Pressure API는 현재 시스템의 부하 정도에 대한 정보를 제공하는 API로, 화상 회의나 게임 등 무거운 웹 앱에서 최적화를 위해 사용할 수 있다.

if ('PressureObserver' in globalThis) {
  const observer = new PressureObserver(
    (records) => {
      records.forEach((record) => {
        if (record.source === 'cpu') {
          console.log(`CPU 부하 상태(time: ${record.time}): ${record.state}`); // 예시) CPU 부하 상태(time: 1708051909444): critical

          if (record.state === 'critical') {
            setResolution(360);
          } else if (record.state === 'serious') {
            setResolution(720);
          }
        }
      });
    },
    {
      sampleRate: 0.5, // 단위=Hz
    }
  );

  await observer.observe('cpu');

  buttonElement.onclick = () => {
    observer.disconnect();
  };
}

이번 업데이트에서는 CPU 상태만 지원하나, 점차 온도나 배터리 상태 등의 정보도 포함할 예정이다. 하지만 이 API가 웹 표준이 될지는 확실하지 않다. Safari가 부정적인 입장이기 때문인데, Safari는 실시간으로 변하는 부하 정보를 파악하기 어려움, 그리고 보안 위협 등을 문제 삼았다.

Chrome은 Safari의 의견을 받아들여 일단 부하 상태를 간략하게만 제공하는 것으로 명세를 수정했다. 아직 제안 중인 API인 만큼 명세가 자주 바뀔 수 있으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 부정적
웹 개발자: 긍정적

참조

🧪 HTMLVideoElement 전체 화면 접두사 API 제거 미리 보기

<video> 요소를 전체 화면으로 띄우기 위해 과거 사용했던 접두사 API 제거 미리 보기를 추가한다.

지금은 대부분의 브라우저가 Element.requestFullscreen() 메서드를 사용해 <video> 요소가 아니라도 특정 요소를 전체 화면으로 띄울 수 있다. 제거 예정인 API는 과거 <video> 요소의 전체 화면 지원을 위해 접두사(webkit)를 붙여 추가했던 속성으로, Chrome 38 버전부터 지원 중단되었다.

Chrome도 71 버전부터 Fullscreen API를 지원했으니 아직 이전 API를 사용한다면 해당 API로 전환해야 한다. 이번에 제거되는 속성은 다음과 같다.

- boolean webkitSupportsFullscreen;
- boolean webkitDisplayingFullscreen;
- void webkitEnterFullscreen();
- void webkitExitFullscreen();
- void webkitEnterFullScreen();
- void webkitExitFullScreen();

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 해당 없음
Safari: 의견 없음
웹 개발자: 의견 없음

참조

🗓️ 배포 예정일

Chrome 124는 2024년 4월 10일에 정식 배포 예정이다.

⚠️ [Chrome 127] Mutation 이벤트 제거 📌

MutationEvent는 DOM 요소에 변경이 있을 때 발생하는 이벤트로, DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved 등이 있다.

element.addEventListener(
  'DOMNodeInserted',
  (event) => {
    console.log('새로운 요소를 감지했습니다.', event.srcElement);
  },
  false
);

element.append(document.createElement('span'));

// 새로운 요소를 감지했습니다. <span></span>

이 이벤트를 사용하면 DOM 변경을 추적할 수 있으나, 설계상 결함과 치명적인 성능 문제를 이유로 2011년에 표준에서 퇴출되었다.

2012년에 더 안정적인 MutationObserver가 등장하여 현재 대부분의 브라우저에서 이 이벤트 사용 시 콘솔에 경고를 노출한다. 아직 MutationEvent를 사용한다면 MutationObserver로 전환할 것을 적극 권장한다.

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      console.log('새로운 요소를 감지했습니다.', ...mutation.addedNodes);
    }
  }
});

observer.observe(element, { childList: true });
element.append(document.createElement('span'));

// 새로운 요소를 감지했습니다. <span></span>

Chrome 115부터는 Mutation 이벤트 사용 시 좀 더 강력한 경고를 노출하며, 2024년 7월 말 배포 예정인 Chrome 127에서는 해당 API를 제거할 예정이다. 만약 MutationEvent를 좀 더 사용해야만 한다면 Origin Trial을 신청해 Chrome 134(2025년 3월 배포 예정) 버전까지 MutationEvent를 사용할 수 있다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 긍정적
Safari: 의견 없음
웹 개발자: 의견 없음

참조

⚠️ unload 이벤트 지원 중단 📌

unload 이벤트는 해당 문서를 떠나거나 하위 리소스를 메모리에서 해제할 때 발생하는 이벤트이다. 이 이벤트를 이용하면 사용자가 페이지를 종료하기 전에 특정 동작을 실행할 수 있다.

window.addEventListener('unload', (event) => {
  navigator.sendBeacon('/api/log', 'unload!');
});

하지만 unload 이벤트는 beforeunload 이벤트와 달리 기본 동작을 취소(event.preventDefault())할 수 없어 이벤트가 아예 발생하지 않기도 한다. W3C의 통계에 따르면 unload 이벤트가 제대로 발생하는 경우가 Chrome 데스크탑에서는 95%, 모바일에서는 57% ~ 68% 정도로, 이는 모바일 환경의 특성상 브라우저가 아닌 다른 앱을 보다가 브라우저 자체를 종료하는 경우가 빈번하기 때문이다.

Chrome은 점진적으로 unload 이벤트를 제거한다는 계획으로, 먼저 Permission-Policy를 추가하고, 기본값을 deny로 바꿀 예정이다. Chrome 117에서 unload 이벤트의 허용 여부를 결정하는 Permission-Policy의 미리 보기를 추가했으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 의견 없음
웹 개발자: 긍정적

참조

⚠️ CSS 구형 사용자 지정 상태 문법 지원 중단

CSS의 사용자 지정 상태 문법은 사용자가 직접 요소의 상태를 지정해 가상 선택자 등으로 사용할 수 있는 기능으로, 현재 초안이다.

class MyCustomElement extends HTMLElement {
  set checked(flag) {
    if (flag) {
      this._internals.states.add('--foo');
    } else {
      this._internals.states.delete('--foo');
    }

    console.log(this._internals.states.has('--foo'));
  }
}

.custom:--foo {
  color: red;
}

기존에는 예시처럼 --foo와 같은 문법을 사용했으나, 이 문법이 현재 제안 중인 @custom-selectors 문법과 겹쳐 :state(foo)로 문법을 변경하였다.

.custom:state(foo) {
  color: red;
}

현재 Chrome 90에서 구현한 구형 문법을 사용하는 사이트는 약 0.03%로 Chrome 팀은 먼저 구형 문법을 지원 중단하기 위한 일정을 논의 중이다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 의견 없음
Safari: 의견 없음
웹 개발자: 의견 없음

참조

⚠️ 제3자 쿠키 지원 중단 📌

제3자 쿠키(Third-Party Cookies)는 현재 도메인과 다른 도메인에서 발행한 쿠키를 말한다. 제3자 쿠키를 활용하면 사용자의 취향, 활동 정보 등을 파악할 수 있어 광고 마케팅 분야에서 자주 사용했으나, 원하지 않는 개인정보까지 유출될 수 있다는 큰 단점이 있다.

크롬은 이미 관련 법 준수를 위해 2020년 1월부터 제3자 쿠키의 중단을 예고했다. 그동안 영향이 큰 점을 고려해 지원 중단을 계속 미뤄왔으나, 2024년부터는 점진적으로 제3자 쿠키를 지원 중단할 예정이다.

구글이 대안으로 사용자의 개인정보는 보호하되, 기존의 제3자 쿠키가 하던 역할을 대체할 수 있는 Privacy Sandbox를 개발 중이니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

Firefox: 배포 완료
Safari: 배포 완료
웹 개발자: 복합적

참조

✅ 내부망에 대한 요청 규칙 적용

내부망 접근 규칙(Private Network Access) 적용의 일부로 내부망(사설 IP, localhost) 요청에 대한 접근 제한을 검토 중이다. 정식 적용 일정은 불투명하나, 미리 보기로 일부 기능을 체험할 수 있다.

공개 웹 사이트의 내부망 하위 리소스 접근 제한

공개 웹 사이트(공개 IP로 접근 가능한 사이트)에서 내부망에 하위 리소스(.js, .css 등) 요청 시 반드시 보안 컨텍스트(HTTPS)를 사용하도록 제한한다. 내부망의 하위 리소스에 접근하려면 보안 컨텍스트를 사용하도록 변경해야 한다.

Chrome 86 이상에서 실험적 웹 기능을 활성화해 접근 제한을 미리 체험할 수 있다.

내부망에 요청 시 사전 요청 발송

내부망 요청 시 보안 컨텍스트를 사용하는지 확인하고, 사전 요청을 보내 연결 허용 여부를 먼저 묻는다. 현재는 확인 실패 시 개발자 콘솔에 경고만 노출한다.

참조

월간 크롬 이슈 리포트 2024년 2월호

댓글