들어가며

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

💡 각 항목은 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 126
- ✅ CloseWatcher
- ✅ View Transition API - 같은 출처 문서 지원
- ✅ Windows에서 image/svg+xml를 클립보드에 저장 시 UTF-8을 사용하도록 변경
- 🗓️ 배포 예정일
Chrome 127
- ⚠️ Mutation 이벤트 제거 📌
- ✅ 공개 사이트에서 내부망에 하위 자원 요청 시 보안 컨텍스트 강제 📌
- ✅ 스크롤 영역 자동 초점
- 🧪 외부망에서 제공하는 사이트의 0.0.0.0 접근 제한 출처 미리 보기
- 🧪 제3자 쿠키 지원 중단 출처 미리 보기 📌
- 🧪 input과 textarea에 selectionchange 이벤트 발생 미리 보기
- 🗓️ 배포 예정일
Chrome NEXT
- ⚠️ [Chrome 129] DOMParser.parseFromString()의 includeShadowRoots 옵션 지원 중단
- ✅ [Chrome 130] 내부망 페이지 이동 시 사전 요청 발송 - 경고 모드
- ⚠️ unload 이벤트 지원 중단 📌
- ⚠️ CSS 구형 사용자 지정 상태 문법 지원 중단

1. Chrome 126

✅ CloseWatcher

사용자가 무언가를 취소하거나 닫는 동작을 했을 때 이를 감지할 수 있는 CloseWatcher를 추가한다.

CloseWatcher는 키보드의 esc 버튼을 누르거나, 모바일 기기에서 뒤로가기 제스처를 실행하는 등, 사용자가 무언가 닫는 동작을 요청했을 때 리스너에 이벤트를 전파한다.

현재는 이런 동작을 구현하기 위해 직접 keydown 이벤트에 리스너를 추가하거나, 각 플랫폼(iOS, Android 등)에 맞춘 전용 코드를 작성해야 해 번거롭다. CloseWatcher를 사용하면 이런 동작을 보다 간편하게 구현할 수 있다.

const watcher = new CloseWatcher();

watcher.addEventListener('close', () => {
  myModal.close();
});

myModalCloseButton.addEventListener('click', () => {
  watcher.destroy();
  myModal.close();
});

Chrome 팀은 내부적으로 <dialog>, popover 등의 오버레이도 해당 API를 사용하도록 변경할 예정이다.

Chrome 97 이상이라면 chrome://flags에서 Experimental Web Platform features를 켜고 해당 기능을 체험해 볼 수 있다.

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

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

참조

✅ View Transition API - 같은 출처 문서 지원

View Transitions API가 같은 출처의 문서를 지원할 예정이다.

View Transitions API는 전환 효과를 위한 API로 1단계에서는 같은 문서, 즉 SPA의 DOM 요소 전환 효과만 지원했다. 이번 업데이트는 2단계로, 같은 출처의 다른 문서 간 전환 효과 구현을 위한 API를 추가한다. 문서 A에서 B로의 페이드 전환 효과를 구현하려면 간단히 아래의 스타일을 두 문서에 적용하면 된다.

@view-transition {
  navigation: auto;
}

좀 더 복잡한 효과를 적용하려면 위 스타일에 sessionStorage 등을 이용해 데이터를 넘겨 처리할 수도 있다.

// 문서 A
globalThis.addEventListener('click', (event) => {
  sessionStorage.setItem('lastClickX', event.clientX);
  sessionStorage.setItem('lastClickY', event.clientY);
});

// 문서 B
window.addEventListener('pagereveal', async (event) => {
  if (!event.viewTransition) return;

  const x = sessionStorage.getItem('lastClickX') ?? innerWidth / 2;
  const y = sessionStorage.getItem('lastClickY') ?? innerHeight / 2;

  await event.viewTransition.ready;

  document.documentElement.animate(
    [
      {
        transform: `translate(${-x}px, ${-y}px)`,
      },
      {
        transform: `translate(0px, 0px)`,
      },
    ],
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
});

::view-transition-old와 ::view-transition-new는 각각 전환 이전, 이후의 가상 요소 선택지이다. 이 API는 아직 정식 표준이 아니고, 일부 브라우저에서는 사용할 수 없으니 사용에 유의하자.

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

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

참조

✅ Windows에서 `image/svg+xml`를 클립보드에 저장 시 UTF-8을 사용하도록 변경

Windows에 image/svg+xml을 클립보드에 복사할 때 기존의 UTF-16 대신 UTF-8 인코딩을 사용하도록 변경한다.

이는 버그 해소를 위한 조치로, Windows에서 많이 사용하는 MS Word 등이 UTF-16의 SVG 데이터를 제대로 해석하지 못해 붙여넣기가 동작하지 않는 현상이 있다.

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

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

참조

Feature: Write image/svg+xml content in UTF-8 format.

🗓️ 배포 예정일

Chrome 126은 2024년 6월 5일에 정식 배포 예정이다.

2. 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>

만약 좀 더 MutationEvent를 사용해야만 한다면 출처 미리 보기를 신청해 Chrome 134(2025년 3월 배포 예정) 버전까지 MutationEvent를 사용할 수 있다.

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

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

참조

✅ 공개 사이트에서 내부망에 하위 자원 요청 시 보안 컨텍스트 강제 📌

공개 웹 사이트에서 내부망에 하위 자원(.js, .css 등) 요청 시 보안 컨텍스트(TLS)를 사용하도록 강제한다. Private Network Access 적용의 일부로, 사용자의 기기 등 내부망에 자원을 요청할 때는 반드시 보안 연결을 사용해야 한다.

브라우저는 요청을 보내기 연결이 보안 컨텍스트를 사용하는지 확인하며, 보안 연결을 사용하지 않는 경우 요청을 실패 처리한다. Chrome 124에서 해당 규칙의 완화 기능을 적용했으니 참고하자.

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

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

참조

✅ 스크롤 영역 자동 초점

스크롤 컨테이너 요소를 자동으로 초점을 맞출 수 있는(focusable) 요소로 취급한다. 브라우저는 스크롤 컨테이너 요소에 tabindex가 없어도 <input>, <button>처럼 해당 요소에 자동으로 초점을 맞추며, 사용자는 화살표 방향키로 해당 요소를 스크롤 할 수 있다.

이는 마우스가 없는 환경에서 접근성을 높이기 위한 조치이다. 하지만 실제 사이트에서 이 기능이 동작하는 경우는 찾기 어려울 것으로 보인다. 이 기능은 자손 요소 중 초점을 맞출 수 있는 요소가 없을 때만 적용되기 때문이다.

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

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

참조

🧪 외부망에서 제공하는 사이트의 0.0.0.0 접근 제한 출처 미리 보기

Private Network Access의 일부로 외부망에서 제공하는 사이트의 0.0.0.0에 접근을 제한하는 기능의 출처 미리 보기를 추가한다. 리눅스 기반의 운영체제에서 Private Network Access의 제한을 0.0.0.0으로 접근해 우회할 수 있어 구글에서 제안한 기능이다.

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

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

참조

🧪 제3자 쿠키 지원 중단 출처 미리 보기 📌

제3자 쿠키 지원 중단의 출처 미리 보기를 추가한다.

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

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

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

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

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

참조

🧪 `input`과 `textarea`에 `selectionchange` 이벤트 발생 미리 보기

selectionchange 이벤트를 input 및 textarea 요소에도 발생하도록 변경한다. 기존에는 Document 객체에만 selectionchange 이벤트가 발생했으나, 최신 Selection API에서 선택을 제공하는 요소에 selectionchange 이벤트를 발생시키도록 변경되었다.

const inputElement = document.getElementById('textbox');

inputElement.addEventListener('selectionchange', () => {
  document.getElementById('start').textContent = inputElement.selectionStart;
  document.getElementById('end').textContent = inputElement.selectionEnd;
  document.getElementById('direction').textContent = inputElement.selectionDirection;
});

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

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

참조

🗓️ 배포 예정일

Chrome 127은 2024년 7월 17일에 정식 배포 예정이다.

3. Chrome NEXT

⚠️ [Chrome 129] `DOMParser.parseFromString()`의 `includeShadowRoots` 옵션 지원 중단

DOMParser.parseFromString()의 includeShadowRoots 옵션을 지원 중단한다. DOMParser.parseFromString()은 인자로 받은 HTML을 파싱해 문서 객체를 반환하는 메서드이다.

const html = `
    <div>
      <template shadowroot="open"></template>
    </div>
  `;
const fragment = new DOMParser().parseFromString(html, 'text/html', {
  includeShadowRoots: true,
});

// output: <html>...<template>#document-fragment</template>...</html>

이 ShadowRoot API의 초안에서는 includeShadowRoots를 사용해 섀도 DOM의 포함 여부를 결정했다. 하지만 논의 과정에서 명세가 바뀌어 parseHTMLUnsafe()를 쓰는 것으로 변경했다.

이번 업데이트에서는 includeShadowRoots 옵션 제거 미리 보기를 추가한다. 만약 이 옵션을 사용한다면 업데이트 전에 Chrome 124에서 배포된 parseHTMLUnsafe()를 사용하도록 변경해야 한다.

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

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

참조

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

내부망 보안 강화를 위한 내부망 접근 규칙(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: 긍정적
웹 개발자: 복합적

참조

⚠️ unload 이벤트 지원 중단 📌

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

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

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

영향도가 큰 만큼, Chrome은 점진적으로 unload 이벤트를 제거할 계획이다. 먼저 Permissions-Policy를 추가해 사용 여부 허용을 결정할 수 있도록 하고, 나중에는 해당 권한의 기본 값을 deny로 바꿀 예정이다. Chrome 117에서 unload 이벤트의 허용 여부를 결정하는 Permissions-Policy의 미리 보기를 추가했으니 참고하자.

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

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

참조

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

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

// MyCustomElement.js
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'));
  }
}

/* styles.css */
.custom:--foo {
  color: red;
}

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

/* styles.css */
.custom:state(foo) {
  color: red;
}

현재 Chrome 90에서 구현한 구형 문법을 사용하는 사이트는 약 0.03%으로, Chrome 팀은 구형 문법을 지원 중단하기 위한 일정을 논의 중이다. Chrome 122 이상에서 미리 보기로 새 문법을 사용해 볼 수 있으니 참고하자.

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

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

참조

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

댓글