이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹의 새로운 소식

Rachel Andrew

게시일: 2025년 5월 20일

Google I/O 2025의 웹의 새로운 기능 키노트에서는 모든 Baseline 발표와 함께 올해 Baseline에 포함된 일부 기능을 살펴봤습니다. 웹과 Baseline에 있어 놀라운 한 해였습니다. 이 게시물에서는 언급된 모든 내용을 요약하고 자세한 내용을 확인할 수 있는 모든 링크를 제공합니다.

웹 플랫폼 대시보드 및 웹 기능

2024년에 Google은 웹 기능 데이터 세트를 사용하는 웹 플랫폼 대시보드의 초기 출시를 발표했습니다. 이 대시보드를 사용하면 Baseline에 포함된 모든 기능을 살펴볼 수 있습니다.

이제 플랫폼의 모든 기능이 매핑되어 웹 기능 데이터가 완료되었습니다. 매달 새로운 기능이 Baseline에 추가되면 데이터가 업데이트되고 이 모든 것이 대시보드에 표시됩니다.

기준 목표를 파악하는 데 도움이 되는 도구

영국 기관 Clearleft와 같이 널리 사용 가능한 기준의 변동 목표를 기반으로 브라우저 지원 정책을 정할 수도 있지만, 기준 연도를 기반으로 고정된 목표를 채택할 수도 있습니다. 이제 웹 기능 데이터와 함께 자체 사용자 데이터를 사용하여 나에게 가장 적합한 타겟을 파악할 수 있습니다.

작년 I/O에서 RUMvision이 제품에 Baseline을 구현할 것이라고 발표했으며, 이 통합이 현재 적용되었습니다.

RUM 데이터를 사용하므로 전역 평균이 아닌 해당 데이터를 기반으로 채택할 기준 연도를 식별하는 데 도움이 됩니다. 또한 Baseline Widely available이 적합한지 확인하는 데도 도움이 됩니다.

Google 애널리틱스 데이터를 사용하여 새로운 Google 애널리틱스 기준 검사기로 각 기준 목표를 지원하는 사용자 비율을 명확하게 확인할 수도 있습니다.

지원 비율이 포함된 기준 연도 목록입니다. — Google 애널리틱스 기준선 검사기의 출력입니다.

이는 실제 사용자 데이터를 기준에 매핑하는 데 도움이 되는 도구 모음 중 두 가지에 불과합니다.

Web DX 커뮤니티 그룹에서는 최근 다양한 Baseline 연도와 사이트에서 널리 사용되는 기능을 지원하는 Netlify 확장 프로그램을 출시하여 빌드 도구에서 타겟팅할 항목을 결정하는 데 도움을 주고 있습니다. Cloudflare의 Observatory RUM 제품 및 Contentsquare와의 통합이 곧 제공될 예정입니다.

자체 도구와 데이터 통합

웹 기능 데이터는 공개되어 있으며 자체 통합에 사용할 수 있습니다. Google은 이러한 작업을 더 쉽게 할 수 있도록 노력하고 있습니다.

Web Platform Dashboard API를 사용하거나 npm 패키지에서 직접 웹 기능 데이터를 사용합니다.

이제 W3C WebDX 커뮤니티 그룹의 baseline-browser-mapping 모듈을 사용하여 브라우저 버전을 기준선 타겟에 매핑할 수 있습니다. 이 모듈은 서버 측 JavaScript 환경에서 사용하거나 저장소에서 매일 새로고침되는 JSON 또는 CSV 파일을 다운로드하여 사용할 수 있습니다.

이 데이터에는 핵심 Baseline 브라우저 세트뿐만 아니라 Samsung Internet, Opera, UC Browser, Android WebView와 같은 다운스트림 브라우저의 매핑도 포함됩니다.

기준선 타겟에서 기능을 지원하는지 알아보기

이제 기준 정보는 대부분의 MDN 및 Can I Use 페이지에 있으며, Web Platform Dashboard와 web.dev 및 CSS Tricks의 도움말에서도 확인할 수 있습니다. 하지만 이 모든 작업을 하려면 지원을 찾아야 합니다. 코딩할 때 IDE에 기준 정보가 표시되고 사용하는 다른 모든 도구의 일부로 표시되면 훨씬 유용합니다.

이제 많은 주요 도구에 Baseline 지원이 내장되어 있거나 쉽게 통합할 수 있다는 소식을 전해드립니다.

`browserslist-config-baseline`

Babel, PostCSS와 같은 많은 도구는 browserslist를 사용하여 지원할 브라우저를 결정합니다.

Chrome팀은 WebDX CG 및 커뮤니티 회원과 함께 browserslist-config-baseline이라는 새로운 도구를 출시했습니다. 이렇게 하면 널리 사용 가능하거나 기준 연도와 같은 기준 용어로 브라우저 목록 타겟을 구성할 수 있습니다.

이제 browserslist 타겟을 사용하는 모든 도구를 Baseline을 기준으로 표현할 수 있습니다.

자세한 내용은 브라우저 목록과 함께 Baseline 사용을 참고하세요.

린터의 기준선 - ESLint 및 Stylelint

최근 린터 공간에서 몇 가지 새로운 도구를 사용하여 기준선을 사용할 수 있게 되었습니다. 그중 하나가 CSS용 ESLint입니다.

기준 ESLint에는 use-baseline 규칙이 있습니다. 이 값을 원하는 기준선 타겟으로 설정하면 타겟보다 최신 기능을 사용할 때 경고가 표시됩니다. 원시 요소로 해당 기능을 대체하거나 린터 경고를 억제하여 이러한 경고를 해결할 수 있습니다. 최신 기능을 안전하게 사용하고 있는 경우(예: 점진적 개선인 경우) 린터 경고를 억제하는 것이 완벽하게 유효한 해결책입니다.

기본적으로 ESLint는 지원되지 않는 브라우저에서 어차피 평가되지 않으므로 @supports 블록 내에서 최신 기능을 사용하는 경우 경고하지 않습니다.

HTML 린팅이 필요한 경우 html-eslint라는 커뮤니티 플러그인도 있습니다.

Stylelint는 stylelint-plugin-use-baseline라는 플러그인을 공식적으로 지원합니다. 이 규칙은 CSS용 ESLint 규칙과 동일하게 작동하지만 Stylelint에서 실행됩니다.

많은 린터에는 IDE 플러그인도 있으므로 물결선 밑줄을 통해 코딩하는 동안 기준 상태에 관한 즉각적인 의견을 받을 수 있습니다.

기준선 타겟 외 기능에 밑줄이 표시된 VSCode에서 사용되는 ESLint 플러그인 — VSCode에서 사용되는 ESLint 플러그인입니다.

VS Code 및 JetBrains WebStorm의 기준선

많은 IDE는 편집기에서 기능 위로 마우스를 가져가 지원되는 브라우저 버전 목록을 볼 수 있는 방법을 오랫동안 지원해 왔습니다.

하지만 해당 기능을 실제로 사용해도 안전한지 이해하기는 꽤 어려울 수 있습니다. 목록에서 누락된 주요 브라우저가 있는지, 브라우저 버전이 얼마나 새로운지 정신적으로 파악해야 하기 때문입니다.

이 문제를 해결하기 위해 Google은 수백만 명의 웹 개발자가 사용하는 가장 인기 있는 IDE인 VS Code와 파트너십을 맺고 기준 데이터가 이러한 마우스 오버 카드에 직접 통합되도록 했습니다.

이제 기능 위로 마우스를 가져가면 해당 기능이 Baseline으로 간주되는지 여부와 기간, 아직 완전히 구현하지 않은 주요 브라우저가 있는지 여부를 확인할 수 있습니다.

기준 상태를 보여주는 VSCode의 호버 카드 — VSCode 마우스 오버 카드 통합

지원되는 기능에는 CSS 속성, HTML 요소, HTML 속성이 포함됩니다. 자세한 내용은 이제 Visual Studio Code에서 Baseline 지원을 참고하세요.

이 통합을 통해 VS Code 기반 IDE도 이러한 마우스 오버 카드의 이점을 누릴 수 있습니다.

또한 JetBrains에서 WebStorm JavaScript 및 TypeScript IDE에 호버 카드를 구현하고 있다는 소식도 전해드립니다.

웹이 그 어느 때보다 빠르게 개선되고 있습니다.

Baseline을 통해 상호 운용 가능한 웹이 그 어느 때보다 빠르게 개선되고 있다는 사실을 활용할 수 있기를 바랍니다.

웹 플랫폼 대시보드를 사용하여 Google I/O 2024 이후 지난 12개월 동안 새로 Baseline으로 제공된 모든 기능을 확인할 수 있습니다.

Interop 2025 프로젝트에 포함되어 있어 곧 기준선에서 새로 제공될 것으로 확신할 수 있는 기능도 많이 있습니다. 포함된 모든 기능은 Interop2025: 또 한 해의 웹 플랫폼 개선사항에서 확인할 수 있습니다.

가로 쓰기 모드

Browser Support

CSS writing-mode 속성의 sideways-rl 및 sideways-lr 값이 Baseline Newly available이 된 기능을 이미 확인했습니다. 레이아웃 목적으로만 세로 쓰기 모드를 사용하는 경우 옆으로 값이 적합할 수 있습니다.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

앵커 위치 지정

Browser Support

Source

앵커 포지셔닝은 Chrome 125에서 제공됩니다. 버튼으로 도움말을 여는 등 요소의 위치를 앵커에 연결하는 방법을 제공합니다.

이제 Interop 2025에 포함되었으므로 올해 Baseline에 포함될 것으로 예상됩니다.

Core Web Vitals: LCP 및 INP

LCP API

Browser Support

Source

이벤트 타이밍 API (INP용)

Browser Support

Source

웹 바이탈을 사용하면 사이트의 실험 환경을 수치화하고 개선 기회를 파악할 수 있습니다. 웹 바이탈 이니셔티브는 환경을 간소화하고 사이트가 가장 중요한 측정항목인 코어 웹 바이탈에 집중할 수 있도록 지원하는 것을 목표로 합니다.

Interop 2025에는 브라우저 전반에서 LargestContentfulPaint API와 이벤트 타이밍 API를 구현하여 최대 콘텐츠 렌더링 시간 (LCP) 및 다음 페인트에 대한 상호작용 (INP) 측정항목이 포함됩니다.

`<details>` 요소 개선사항

<details> 요소 자체는 이미 기준선에서 널리 제공됩니다. <details>를 사용한 공개 위젯을 더 유용하게 만드는 여러 기능이 있으므로 Interop 2025에 포함되었습니다.

<details> 요소에는 <details> 요소가 축소될 때 페이지에 표시되는 부분인 <summary> 요소가 포함되어 있습니다. <summary> 외부에는 <details> 요소의 콘텐츠가 있으며, 이는 사용자가 요약을 클릭할 때까지 숨겨집니다.

Interop 2025에서 상호 운용 가능하게 만드는 것 중 하나는 display 대신 content-visibility를 사용하여 콘텐츠를 숨기는 것입니다. 즉, 확장되지 않으면 콘텐츠가 전혀 렌더링되지 않습니다.

Interop 2025 작업의 일부는 ::marker 의사 요소입니다. ::marker 가상 요소를 사용하면 <summary> 요소의 공개 삼각형에 스타일을 지정할 수 있습니다.

Browser Support

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

그런 다음 또 다른 가상 요소인 ::details-content가 있습니다.

Browser Support

Source

::details-content는 콘텐츠를 나타냅니다. 즉, 펼치고 접을 수 있는 세부정보 요소의 부분으로, 스타일을 지정할 수 있습니다.

[open]::details-content {
  border: 5px dashed hotpink;
}

페이지 내 검색 일치 항목으로 <details> 요소를 자동 확장하고 HTML hidden 속성의 until-found 값을 새로 제공되는 Baseline으로 가져오는 등 유용한 개선사항도 있습니다. 이렇게 하면 브라우저의 페이지 내 검색을 사용하여 요소를 찾거나 URL 프래그먼트를 따라 직접 이동할 때까지 요소가 숨겨집니다.

CSS `@scope`

Browser Support

Source

CSS @scope 규칙을 사용하면 선택자의 도달범위를 제한할 수 있습니다. @scope로 범위 지정 루트를 설정하면 at-rule 내에 중첩된 스타일 규칙이 해당 DOM 트리에만 적용됩니다.

예를 들어 .card 클래스가 있는 요소 내의 <img> 요소만 타겟팅하려면 .card이 범위 지정 루트가 됩니다.

@scope (.card) {
    img {
        border-color: green;
    }
}

자세한 내용은 CSS @scope 규칙으로 선택자의 범위를 제한하세요를 참고하세요.

`scrollend`

Browser Support

Source

복잡성을 줄이고 스크롤 인터페이스를 개선하는 또 다른 기능은 scrollend입니다. scrollend 이벤트가 없으면 스크롤이 완료되었음을 안정적으로 감지할 방법이 없습니다.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

scrollend 이벤트를 사용하면 브라우저가 이 모든 어려운 평가를 대신해 줍니다.

document.onscrollend = event => {…}

자세한 내용은 Scrollend, a new JavaScript event(Scrollend, 새로운 JavaScript 이벤트)를 참고하세요.

동일 문서 보기 전환

Browser Support

Source

마지막으로 뷰 전환은 Interop 2025에 포함됩니다. 작업에는 동일한 문서 뷰 전환이 포함되므로 싱글 페이지 앱용 및 뷰 전환 클래스도 포함됩니다.

Interop 2025 대시보드에서 연말까지 프로젝트가 어떻게 진행되는지 확인하세요.

Interop 2025에 포함된 기능이 올해 Baseline에 포함되는 유일한 기능은 아니지만, 이러한 기능이 프로젝트에 포함된다는 것은 우선순위가 높고 곧 출시될 예정이라는 좋은 신호입니다.

실험을 시작한 지 얼마 되지 않았습니다.

올해는 Baseline에 있어 매우 흥미로운 한 해였으며, 작년 발표 이후로 많은 발전이 있었습니다. 이제 웹 기능 데이터 백필이 완료되었습니다. 이로 인해 개발자 도구를 만들 수 있게 되었습니다. 이 데이터가 포함되면 유용한 제품이나 오픈소스 도구가 있다면 알려주세요.

web.dev를 계속 확인하세요. 웹에서 제공하는 모든 기능을 활용할 수 있도록 새로운 도구에 관한 공지사항과 튜토리얼을 계속 게시할 예정입니다.

웹의 새로운 소식 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

웹 플랫폼 대시보드 및 웹 기능

기준 목표를 파악하는 데 도움이 되는 도구

자체 도구와 데이터 통합

기준선 타겟에서 기능을 지원하는지 알아보기

browserslist-config-baseline

린터의 기준선 - ESLint 및 Stylelint

VS Code 및 JetBrains WebStorm의 기준선

웹이 그 어느 때보다 빠르게 개선되고 있습니다.

가로 쓰기 모드

앵커 위치 지정

Core Web Vitals: LCP 및 INP

LCP API

이벤트 타이밍 API (INP용)

<details> 요소 개선사항

CSS @scope

scrollend

동일 문서 보기 전환

실험을 시작한 지 얼마 되지 않았습니다.

웹의 새로운 소식

`browserslist-config-baseline`

`<details>` 요소 개선사항

CSS `@scope`

`scrollend`