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

들어가며

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

💡 각 항목은 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를 그대로 인용했다.

목차

1. Chrome 127

   • ⚠️ Mutation 이벤트 제거 📌
   • ⚠️ CSS 구형 사용자 지정 상태 문법 지원 중단
   • ✅ 공개 사이트에서 내부망에 하위 자원 요청 시 보안 컨텍스트 강제 📌
   • ✅ CSS font-size-adjust 추가
   • ✅ 스크롤 영역 자동 포커스
   • 🗓️ 배포 예정일

2. Chrome 128

   • ✅ 스냅 이벤트
   • ✅ document.caretPositionFromPoint() API
   • ✅ Windows OS에서 image/svg+xml 클립보드에 저장 시 UTF-8을 사용하도록 변경
   • 🗓️ 배포 예정일

3. Chrome 129

   • ⚠️ DOMParser.parseFromString()의 includeShadowRoots 옵션 지원 중단
   • ⚠️ 구형 HTML 직렬화 API 지원 중단
   • 🗓️ 배포 예정일

4. Chrome NEXT

   • ✅ [Chrome 133] 공개망에서 제공하는 사이트의 0.0.0.0 접근 제한
   • ⚠️ unload 이벤트 지원 중단 📌
   • ⚠️ DOM 요소 제거 시 blur 이벤트가 발생하지 않도록 변경 📌
   • ⚠️ 제3자 쿠키 지원 중단 📌

1. 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: 긍정적
• 웹 개발자: 의견 없음

참조

• Feature: Mutation Events (Deprecated)
• UI Events
• MDN - MutationEvent
• MDN - MutationObserver

⚠️ 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 125부터 사용할 수 있다.

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

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

참조

• Feature: Deprecate old CSS custom state syntax
• Feature: CSS custom state new :state() syntax
• [selectors] Custom state pseudo class proposal
• MDN - CustomStateSet
• CSS Extensions - Custom Selectors

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

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

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

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

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

참조

• Feature: Restrict "private network requests" for subresources from public websites to secure contexts.
• Private Network Access: Secure Context Restriction
• Private Network Access: Permission to relax mixed content
• Private Network Access

✅ CSS font-size-adjust 추가

소문자를 기준으로 폰트 크기를 보정할 수 있는 CSS font-size-adjust를 추가한다. 사이트에서 대체 폰트를 사용할 때 일관되게 콘텐츠를 보여줄 수 있는 속성으로, 알파벳 등 대소문자 구분이 있는 언어에서 특히 유용하다.

위 이미지에서 위는 font-size-adjust를 사용하지 않은 예이고, 아래는 font-size-adjust를 사용한 예이다. 아래를 보면 font-family가 변했음에도 요소의 줄바꿈이나 크기가 달라지지 않았다.

font-size-adjust에는 양수와 사전 정의된 값을 사용할 수 있다.

font-size-adjust: none;

/*
  u  =  ( m / m′ ) s
  s = 계산된 `font-size` 속성값
  m = `font-size-adjust` 속성값(0.5)
  m′ = 실제 폰트 크기
  u = 보정된 폰트 크기
*/
font-size-adjust: 0.5;
/* 제일 처음 사용한 폰트의 크기를 사용 */
font-size-adjust: from-font;
/* 소문자 "x"의 높이를 사용 */
font-size-adjust: ex-height;

font-size-adjust에는 위 예시 외에도 중문 폰트를 위한 ic-width, ic-height 등의 속성이 있다. 다만 none과 양수값을 제외한 값은 비교적 최신 속성으로, 지원하지 않는 브라우저가 있을 수 있으니 사용에 유의하자.

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

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

참조

• Feature: CSS font-size-adjust
• Feature: CSS font-size-adjust: two-value syntax
• MDN - font-size-adjust
• CSS Fonts Module Level 3 - Relative sizing: the font-size-adjust property
• CSS Fonts Module Level 5 - Relative sizing: the font-size-adjust property

✅ 스크롤 영역 자동 포커스

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

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

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

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

참조

• Feature: Keyboard-focusable scroll containers
• CSS Overflow Module Level 3 - Scrolling Overflow

🗓️ 배포 예정일

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

2. Chorme 128

✅ 스냅 이벤트

CSS의 스크롤 스냅 모듈과 함께 사용할 수 있는 scrollsnapchange, scrollsnapchanging 이벤트를 추가한다.

스크롤 스냅은 특정 요소의 스크롤을 특정 영역에 맞춰 강제할 수 있는 기능이다. 사용자의 동작 자체는 막지 않으며, 사용자 스크롤 뒤 특정 영역에 맞게 스크롤을 다시 보정하는 방식으로 동작한다.

scrollsnapchange는 스크롤이 끝날 때 scrollend 이벤트 발생 전에 발생한다.

.box {
  scroll-snap-type: both mandatory;
}

box.addEventListener('scrollsnapchange', (event) => {
  event.snapTargetBlock; // mandatory
  event.snapTargetInline; // mandatory
});

이벤트 객체에는 현재 대상의 scroll-snap-type 속성에 대한 정보가 있다. scrollsnapchanging도 이벤트 객체는 같으며, 스크롤 중에 scroll 이벤트 발생 전에 발생하는 점만 다르다. behavior: smooth 등으로 스크롤이 발생하는 경우 스냅 상태 변경을 가능한 빠르게 감지할 수 있도록 고안된 이벤트이다.

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

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

참조

• Feature: Snap Events
• CSS Scroll Snap Module Level 2 - Snap Events
• MDN - CSS scroll snap

✅ document.caretPositionFromPoint() API

특정 좌표의 텍스트 커서 위치 정보를 반환하는 document.caretPositionFromPoint()를 추가한다. 이 API를 활용하면 사용자가 클릭한 위치에 특정 요소를 추가하는 등 상호작용을 쉽게 구현할 수 있다. 아래는 클릭한 위치에 <br> 태그를 추가하는 예시다.

element.addEventListener('click', (event) => {
  const position = document.caretPositionFromPoint(event.clientX, event.clientY);
  const breakElement = document.createElement('br');
  const replacement = position.offsetNode.splitText(position.offset);

  position.offsetNode.insertBefore(breakElement, replacement);
});

현재 document.caretPositionFromPoint()는 Firefox에서만 사용할 수 있다. Safari와 Chrome은 해당 API의 이전 버전인 document.caretRangeFromPoint()를 구현했으나, CSS 명세 작성 당시 결정 과정을 공유 받지 못해 명세대로 구현하지 못했다고 한다.

아직 document.caretPositionFromPoint()는 정식 웹 표준이 아니나, Chrome은 우선 명세를 따른다는 입장이다.

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

• Firefox: 긍정적
• Safari: 긍정적
• 웹 개발자: 긍정적

참조

• Feature: document.caretPositionFromPoint API
• CSSOM View Module - Extensions to the Document Interface
• MDN - Document: caretPositionFromPoint() method
• MDN - Document: caretRangeFromPoint() method

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

Windows OS에서 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 on Windows.

🗓️ 배포 예정일

Chrome 128은 2024년 8월 14일에 정식 배포 예정이다.

3. Chrome 129

⚠️ DOMParser.parseFromString()의 includeShadowRoots 옵션 지원 중단

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

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를 사용해 Shadow DOM의 포함 여부를 결정했다. 하지만 논의 과정에서 명세가 바뀌어 parseHTMLUnsafe()를 쓰는 것으로 변경되었다.

만약 이 옵션을 사용한다면 업데이트 전에 Chrome 124에서 배포된 parseHTMLUnsafe()를 사용하도록 변경해야 한다.

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

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

참조

• Feature: Deprecate the includeShadowRoots argument on DOMParser
• MDN - DOMParser: parseFromString() method
• MDN - ShadowRoot

⚠️ 구형 HTML 직렬화 API 지원 중단

명세에서 특정 요소의 HTML을 가져오는 API의 이름을 getHTML()로 정해, 기존에 임시 구현했던 getInnerHTML() API를 지원 중단한다. innerHTML과 getHTML()은 기본적으로 비슷하나, innerHTML은 Shadow DOM을 포함하지 않는다는 점이 다르다.

getHTML()은 옵션을 사용하면 Shadow DOM을 포함한 결과를 반환한다.

// 하위 모든 Shadow DOM을 포함한 결과를 반환한다.
const html = rootElement.getHTML({ serializableShadowRoots: true });
// shadowRoots에 있는 Shadow DOM을 포함한 결과를 반환한다.
const html = rootElement.getHTML({ shadowRoots: [shadowRootA, shadowRootB] });

Chrome 125 이상에서 getHTML()을 사용할 수 있으니 getInnerHTML()을 사용한다면 getHTML()을 사용하도록 변경해야 한다.

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

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

참조

• Feature: Deprecation of non-standard declarative shadow DOM serialization
• Feature: Declarative shadow DOM serialization
• HTML Standard - HTML serialization methods
• MDN - Element: getHTML() method
• MDN - Element.innerHTML

🗓️ 배포 예정일

Chrome 129은 2024년 9월 11일에 정식 배포 예정이다.

4. Chrome NEXT

✅ [Chrome 133] 공개망에서 제공하는 사이트의 0.0.0.0 접근 제한

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

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

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

참조

• Feature: Deprecate 0.0.0.0 for Private Network Access
• Private Network Access

⚠️ 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: 의견 없음
• 웹 개발자: 긍정적

참조

• Feature: Deprecate unload event
• MDN - Window: unload event

⚠️ DOM 요소 제거 시 blur 이벤트가 발생하지 않도록 변경 📌

포커스된 DOM 요소 제거 시 blur 이벤트가 발생하지 않도록 변경한다. 기존 명세에는 포커스된 DOM 요소를 제거하는 경우에 대한 정의가 없어 Chromium 기반의 브라우저는 포커스된 DOM 요소 제거 시 해당 요소에 blur 이벤트를 발생시켰다. 최신 명세에서 DOM 요소를 제거하는 경우, 포커스 제거 단계(blur, change 이벤트 발생)를 수행하지 않도록 정의함에 따라 Chrome도 포커스 제거 단계를 수행하지 않도록 변경할 예정이다.

다만 정식 적용 일정은 불분명하다. Chrome은 예기치 못한 버그가 있을 수 있어 관련 사이드 이펙트를 꼼꼼히 검토 후 기능을 적용한다는 입장이다.

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

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

참조

• Feature: Stop sending blur events on element removal
• HTML Standard - DOM trees

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

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

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

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

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

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

참조

• Feature: Deprecate Third-Party Cookies
• The Chromium Projects - The Privacy Sandbox