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

들어가며

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

💡 각 항목은 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 124

   • ⚠️ Permissions-Policy "window-placement" 별칭 제거
   • ✅ 문서 렌더링 차단
   • ✅ Private Network Access 규제 완화
   • ✅ setHTMLUnsafe, parseHTMLUnsafe 추가
   • 🗓️ 배포 예정일

2. Chrome 125

   • ✅ Compute Pressure API
   • ✅ 스크롤 영역 자동 초점
   • 🧪 HTMLVideoElement 전체 화면 접두사 API 제거 미리 보기
   • 🧪 DOMParser.parseFromString()의includeShadowRoots 옵션 제거 미리 보기
   • 🗓️ 배포 예정일

3. Chrome NEXT

   • ⚠️ [Chrome 127] Mutation 이벤트 제거 📌
   • ✅ [Chrome 127] 공개 사이트에서 내부망에 하위 자원 요청 시 보안 컨텍스트 강제 📌
   • ⚠️ unload 이벤트 지원 중단 📌
   • ⚠️ CSS 구형 사용자 지정 상태 문법 지원 중단
   • ⚠️ 제3자 쿠키 지원 중단 📌

1. Chrome 124

⚠️ 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

✅ 문서 렌더링 차단

blocking은 <script>, <style>, <link>에 사용하는 속성이다. Chrome 105 이상에서 사용할 수 있으며, 브라우저는 해당 요소를 파싱하기 전까지 문서 전체의 렌더링을 막는다.

<script src="required.js" blocking="render"></script>

이 기능을 쓰면 스타일 등 하위 자원(.js, .css 등) 적용 전 미완성 문서를 사용자에게 보여주지 않을 수 있다. 다만 그만큼 FCP는 늦어져 사용자가 웹 사이트가 느려졌다고 느낄 수 있다는 게 단점이다.

이번 업데이트에서는 <link> 태그의 rel 속성에 "expect"를 추가한다. rel="expect"와 blocking="render"를 사용하면 브라우저는 해당 문서를 완전히 파싱하기 전까지 href에 지정한 요소를 렌더링하지 않아 blocking 속성을 좀 더 유연하게 적용할 수 있다.

<link rel="expect" href="#main" blocking="render" />
<!-- 해당 문서를 전부 파싱한 뒤 #main 요소를 렌더링한다. -->

해당 기능은 현재 Chrome에서만 사용할 수 있으며 표준이 아니므로 사용법이 바뀔 수 있음에 주의하자.

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

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

참조

• Feature: Document Render-Blocking
• Feature: 'blocking=rendering' attribute on scripts and style sheets
• HTML Standard - 4.6 Links
• Document Render Blocking

✅ Private Network Access 규제 완화

Private Network Access는 공개망(public internet)에서 제공하는 웹 사이트의 내부망(private internet) 접근을 제한하여 보안을 더욱 강화하는 것이 목적이다. 이미 Chrome 104와 Chrome 110에서 내부망 접근 확인이 실패했을 때 개발자 도구에 경고를 남기는 기능을 추가하여 어느 정도 동작을 미리 확인해 볼 수 있다.

Private Network Access는 내부망 접근 시 보안 컨텍스트(TLS) 사용을 강제하기에 기존 기능에 영향을 미칠 수 있다. 무엇보다 공개 도메인을 사용하지 않는 내부망은 보안 인증서를 발급 받을 수 없어 개발자들의 우려가 많았다. 이번에 추가되는 기능은 이를 완화하기 위한 옵션으로, fetch()를 호출할 때 특정 옵션을 넘겨 사용할 수 있다.

fetch('http://router.local/ping', {
  targetAddressSpace: 'private',
});

targetAddressSpace는 요청을 받는 서버의 환경을 가리킨다. 이 옵션을 사용하면 브라우저는 먼저 연결 허용 여부를 사용자에게 물어 연결 허용 시 요청을 재개하며, 거절하면 요청을 실패 처리한다.

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

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

참조

• Feature: Private Network Access permission to relax mixed content
• Private Network Access: Permission to relax mixed content
• Private Network Access

✅ setHTMLUnsafe, parseHTMLUnsafe 추가

특정 요소의 컨텐츠를 조작하는 setHTMLUnsafe(), parseHTMLUnsafe() 메서드를 추가한다. setHTMLUnsafe()는 HTML 요소 또는 ShadowRoot에 사용할 수 있으며, Document.parseHTMLUnsafe()는 정적 메서드로 DOMString을 Document로 반환한다.

document.body.setHTMLUnsafe('<div>Element에 사용</div>');
element.shadowRoot.setHTMLUnsafe('<div>ShadowRoot에 사용</div>');

const doc = Document.parseHTMLUnsafe(html); // Document

이 두 메서드는 자바스크립트만으로 ShadowRoot API를 사용하는 것이 목적이다. 아직은 따로 정제(sanitization) 과정을 거치지 않아 <script>, <style> 등을 그대로 사용하니 주의하자.

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

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

참조

• Feature: setHTMLUnsafe and parseHTMLUnsafe
• HTML Standard - 8.5 DOM parsing
• ShadowRoot

🗓️ 배포 예정일

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

2. Chrome 125

✅ 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);
          }
        }
      });
    },
    {
      sampleInterval: 2000, // 단위: 밀리초(ms)
    }
  );

  await observer.observe('cpu');

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

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

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

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

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

참조

• Feature: Compute Pressure
• Compute Pressure Level 1
• Chrome Developers - Compute Pressure API

✅ 스크롤 영역 자동 초점

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

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

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

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

참조

• Feature: Keyboard-focusable scroll containers
• Scrolling Overflow

🧪 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: 의견 없음
• 웹 개발자: 의견 없음

참조

• Feature: Remove Prefixed HTMLVideoElement Fullscreen APIs
• Fullscreen API

🧪 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()를 사용하도록 변경해야 한다. 해당 옵션의 제거는 오는 9월 배포 예정인 Chrome 129로 예정 중이니 참고하자.

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

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

참조

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

🗓️ 배포 예정일

Chrome 125는 2024년 5월 8일에 정식 배포 예정이다.

3. Chrome NEXT

⚠️ [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 이벤트 사용 시 좀 더 강력한 경고를 노출하며, 오는 7월 배포 예정인 Chrome 127에서는 해당 API를 제거할 예정이다. 만약 좀 더 MutationEvent를 사용해야만 한다면 출처 미리 보기를 신청해 Chrome 134(2025년 3월 배포 예정) 버전까지 MutationEvent를 사용할 수 있다.

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

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

참조

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

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

공개 웹 사이트에서 내부망에 하위 자원(.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

⚠️ 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
• add unload permissions-policy feature
• Window: unload event

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

참조

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

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

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

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

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

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

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

참조

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