원문: March 2026 Baseline monthly digest — web.dev원문은 CC-BY-4.0 라이선스로 제공되며, 이 글은 한국어로 번역한 2차 저작물입니다.
Baseline 신규 사용 가능 기능
2026년 3월, 다음 기능들이 모든 핵심 브라우저 엔진에서 상호 운용 가능하게 되었습니다.
math
font family
mathfont-familymathIterator.concat()
Iterator.concat()이터레이터의 이 새로운 정적 메서드를 사용하면 개발자가 여러 이터러블(예: Array, Set 또는 사용자 지정 이터레이터)을 단일 이터레이터로 결합할 수 있습니다. 이는 중첩 루프나 중간 배열을 수동으로 생성하지 않고 연속적으로 데이터 시퀀스를 처리해야 하는 코드를 간소화합니다. MDN에서
Iterator.concat()Readable byte streams
Streams API는 이제 Readable byte streams에 대한 완전한 지원을 포함합니다. 이는 이진 데이터를 처리하도록 최적화되어 있어 개발자가 제공한 버퍼로 직접 데이터를 읽어 메모리 관리를 효율적으로 할 수 있습니다. 대용량 파일이나 네트워크 데이터를 처리하는 성능이 중요한 애플리케이션에 획기적인 기능입니다. MDN에서 Readable byte streams에 대해 자세히 알아보기
Reporting API
Reporting API는 웹 애플리케이션이 브라우저 수준의 오류 및 위반(예: Content Security Policy(CSP) 위반, 사용 중단, 충돌 보고서)에 대한 알림을 받는 일반적인 보고 메커니즘을 제공합니다. 이러한 보고서를 중앙 집중화하여 지정된 엔드포인트로 전송하여 모니터링을 용이하게 합니다. MDN에서 Reporting API에 대해 자세히 알아보기
WebTransport
WebTransportWebTransporttext-indent: each-line
선언
text-indent: each-linetext-indenteach-line<br>text-indent: each-linetext-indent: hanging
선언
text-indent: hanginghangingtext-indent: hangingBaseline 널리 사용 가능한 기능
2026년 3월, 다음 기능들이 널리 사용 가능 등급으로 이동했습니다. 이는 30개월 동안 상호 운용 가능했음을 의미하며, 폴리필 없이 대부분의 프로덕션 환경에서 사용하기에 안전합니다.
contain-intrinsic-size
CSS 속성
contain-intrinsic-sizeCSS Containment 모듈의 일부인
contain-intrinsic-sizecontain-intrinsic-size@counter-style
at-rule
@counter-style@counter-style@counter-styleDevice orientation events
이러한 이벤트는 자이로스코프 및 가속도계와 같은 장치 하드웨어의 데이터를 제공합니다. 개발자는 이 정보를 사용하여 사용자의 장치 물리적 움직임 및 방향에 응답하는 몰입형 환경을 만들 수 있습니다. MDN에서 Device orientation events에 대해 자세히 알아보기
hyphenate-character
CSS 속성
hyphenate-character이 속성을 사용하면 단어가 하이픈으로 연결될 때 줄 끝에 사용되는 문자를 정의할 수 있습니다. 표준 하이픈이 기본값이지만, 이 속성은 특정 디자인 또는 언어 요구 사항에 따라 다른 문자를 사용할 수 있는 유연성을 제공합니다. MDN에서
hyphenate-characterhyphens
CSS 속성
hyphenshyphensnonemanualautohyphensimage-set()
CSS 함수
image-set()image-set()<img>srcsetimage-set()<link rel="modulepreload">
<link rel="modulepreload">이 링크 관계는 개발자가 페이지 로드 프로세스 초기에 JavaScript 모듈(및 해당 종속성)을 가져와 처리하도록 브라우저에 알립니다. 이는 중요 경로에서 소비되는 시간을 줄이고 모듈이 많은 애플리케이션의 성능을 향상시킵니다. MDN에서
<link rel="modulepreload">Overflow media queries
overflow-blockoverflow-inlinenavigator.storage
navigator.storageStorage API는 웹 사이트의 스토리지 지속성 및 할당량을 관리하고 쿼리하는 방법을 제공합니다. 이를 통해 개발자는 사용 가능한 공간을 확인하고 스토리지가 낮을 때 데이터가 삭제되는 대신 브라우저에서 데이터를 지속적으로 유지하도록 요청할 수 있습니다. MDN에서
navigator.storageupdate
media query
updateupdateupdateCSS subgrid
CSS subgrid는 CSS Grid의 강력한 확장 기능으로, 중첩된 그리드가 상위 그리드의 트랙 정의(열 및 행)를 상속할 수 있도록 합니다. 이를 통해 DOM 트리의 다른 수준에 걸쳐 요소를 정렬하는 것이 훨씬 쉬워져 오랫동안 지속된 레이아웃 문제를 해결합니다. MDN에서 CSS subgrid에 대해 자세히 알아보기
Rachel Andrew, Web Day Out에 참석
지난달 Chrome의 Rachel Andrew가 웹 플랫폼의 미래 살펴보기를 작성했으며, 여기서 Web Day Out에서 진행한 강연을 언급했습니다. 발표는 브라우저 지원—Baseline 대상뿐만 아니라 Baseline 대상에 도달하지 못한 기능을 사용하는 방법에 대한 내용을 다루었습니다.
Baseline 대상 선택에 따라 상호 운용 가능한 기능의 가용성이 어떻게 달라지는지 이해하는 데 도움이 되는 좋은 강연입니다. 나중에 대상을 선택하면 더 많은 기능을 얻을 수 있지만 호환성이 넓어지는 데는 비용이 따릅니다. Baseline 대상을 프로젝트 출시일에 맞추는 것을 고려하는 것이 좋습니다. 이렇게 하면 첫날부터 안전하게 사용할 수 있는 기능을 놓치지 않을 수 있습니다.
Baseline 대상을 실용적으로 선택하는 것은 이야기하기 좋은 주제이며, Rachel의 의견)을 꼭 확인해 보시기 바랍니다. Baseline 대상을 특정 브라우저가 아닌 시간 지점으로 생각하면 오늘날 단순히 "안전한" 결정이 아니라, 높은 호환성 수준을 유지하면서 새로운 상호 운용 가능한 기능을 향해 진보적인 결정을 내리는 데 도움이 됩니다.
Eleventy 사이트에 Baseline 상태 추가하기
Stu Robson은 지난달 그의 Eleventy 웹 사이트에 Baseline 상태 웹 컴포넌트를 추가한 방법에 대해 작성했습니다. 이 게시물은 특정 웹 기능에 대한 일부 기사에 대해 컴포넌트가 조건부로 로드되는 방법을 포함하여 프로세스에 대한 자세한 내용을 다룹니다. 웹 사이트에 웹 기능을 문서화하고, 사용하는 방법, 그리고 해당 기능이 상호 운용 가능한지 독자에게 빠르게 알리는 방법에 관심이 있다면 훌륭한 읽을거리입니다.
물론 Baseline 상태 웹 컴포넌트는 Eleventy에 국한되지 않습니다. 오픈 소스 웹 컴포넌트이며 프레임워크나 사이트 생성기와 독립적입니다.
피드백
Baseline에 없는 기능이 기다려지거나 여기에 나열된 기능에 문제가 있다면, 트래커에서 알려주세요. 여러분의 피드백은 가장 중요한 작업을 우선순위로 정하는 데 도움이 됩니다.
