2026년 3월 Baseline 월간 요약

웹 플랫폼에 있어 매우 바쁜 한 달이었습니다! 2026년 3월, 여러 강력한 기능들이 상호 운용성(interoperability) 임계값을 넘어 Baseline의 '새로 사용 가능(Newly available)' 상태가 되었으며, 기존의 수많은 도구들이 '널리 사용 가능(Widely available)' 이정표에 도달했습니다.

이번 달의 진전은 웹의 놀라운 추진력을 보여줍니다. 고급 레이아웃 제어 및 국제화(internationalization) 개선부터 저지연 네트워킹(low-latency networking)과 정교한 스트리밍 기능에 이르기까지, 플랫폼은 전 세계 개발자들을 위해 더욱 유능하고 견고해지고 있습니다.

Baseline 새로 사용 가능해진 기능들

다음 기능들은 2026년 3월에 모든 핵심 브라우저 엔진에서 상호 운용이 가능해졌습니다.

Math font family (수학 글꼴 패밀리)

font-family 속성의 math 값은 수학적 콘텐츠를 렌더링하기 위해 특별히 설계되었습니다. 이는 MathML 요소가 복잡한 수학 공식에 최적화된 글꼴을 사용하여 표시되도록 보장하며, 기술 문서에 대해 더 나은 간격과 문자 지원을 제공합니다. MDN에서 math font family에 대해 자세히 알아보세요.

Iterator.concat()

이 새로운 이터레이터(iterator)용 정적 메서드를 통해 개발자는 여러 개의 이터러블(iterables, 예: Array, Set 또는 사용자 정의 이터레이터)을 하나의 이터레이터로 결합할 수 있습니다. 이는 루프를 수동으로 중첩하거나 중간 배열을 생성하지 않고도 데이터 시퀀스를 연속적으로 처리해야 하는 코드를 단순화합니다. MDN에서 Iterator.concat()에 대해 자세히 알아보세요.

Readable byte streams (읽기 가능한 바이트 스트림)

Streams API가 이제 읽기 가능한 바이트 스트림(readable byte streams)에 대한 완전한 지원을 포함합니다. 이는 바이너리 데이터(binary data)를 처리하는 데 최적화되어 있으며, 개발자가 제공한 버퍼(buffer)로 데이터를 직접 읽어 들임으로써 효율적인 메모리 관리를 가능하게 합니다. 이는 대용량 파일이나 네트워크 데이터를 처리하는 성능 중심 애플리케이션에 있어 게임 체인저가 될 것입니다. MDN에서 Readable byte streams에 대해 자세히 알아보세요.

Reporting API

Reporting API

Reporting API는 웹 애플리케이션이 Content Security Policy (CSP) 위반, 지원 중단 (deprecations), 충돌 보고서 (crash reports)와 같은 브라우저 수준의 오류 및 위반 사항에 대한 알림을 받을 수 있도록 범용적인 보고 메커니즘을 제공합니다. 이러한 보고서를 중앙 집중화하여 지정된 엔드포인트로 전송함으로써 모니터링을 용이하게 합니다. Reporting API에 대한 자세한 내용은 MDN에서 확인하세요.

WebTransport

WebTransport는 저지연 (low-latency) 양방향 클라이언트-서버 통신을 제공하는 현대적인 API입니다. HTTP/3를 기반으로 구축되었으며, 신뢰할 수 있는 데이터 전송 (reliable data transmission)과 신뢰할 수 없는 데이터그램 (unreliable datagrams)을 모두 지원하여 게임 및 라이브 스트리밍과 같은 실시간 애플리케이션에 이상적입니다. WebTransport에 대한 자세한 내용은 MDN에서 확인하세요.

text-indent: each-line 선언

text-indent의 each-line 키워드는 들여쓰기 범위를 블록의 첫 번째 줄 너머로 확장합니다. 이 키워드를 사용하면 첫 번째 줄뿐만 아니라 강제 줄 바꿈 (예: <br>) 이후의 모든 줄에 들여쓰기가 적용되어, 타이포그래피 레이아웃을 더욱 세밀하게 제어할 수 있습니다. text-indent: each-line에 대한 자세한 내용은 MDN에서 확인하세요.

text-indent: hanging 선언

hanging 키워드는 기본 들여쓰기 동작을 반전시킵니다. 블록의 첫 번째 줄은 줄의 시작 부분에 그대로 두고, 이후의 모든 줄을 들여쓰기합니다. 이는 참고 문헌 목록이나 특정 편집 스타일에서 흔히 요구되는 방식입니다. text-indent: hanging에 대한 자세한 내용은 MDN에서 확인하세요.

Baseline Widely available features (널리 사용 가능한 기능)

2026년 3월, 다음 기능들이 Widely available 등급으로 이동했습니다. 이는 해당 기능들이 30개월 동안 상호 운용성 (interoperable)을 확보했음을 의미하며, 폴리필 (polyfills) 없이도 대부분의 프로덕션 환경에서 안전하게 사용할 수 있음을 뜻합니다.

contain-intrinsic-size CSS 속성

CSS Containment 모듈의 일부인 contain-intrinsic-size는 개발자가 크기 컨테인먼트 (size containment)가 적용되는 요소에 대해 플레이스홀더 크기 (placeholder size)를 지정할 수 있게 해줍니다. 이를 통해 콘텐츠가 지연 로딩 (lazily loaded)되거나 숨겨질 때 발생하는 레이아웃 이동 (layout shifts)을 방지할 수 있습니다. contain-intrinsic-size에 대한 자세한 내용은 MDN에서 확인하세요.

@counter-style at-rule

@counter-style

@counter-style 규칙을 사용하면 개발자가 목록(list)을 위한 사용자 정의 번호 매기기 또는 글머리 기호 스타일을 정의할 수 있습니다. 이는 표준 십진수(decimal) 또는 원형(disc) 스타일을 훨씬 뛰어넘어, 복잡하거나 지역화된, 또는 순수하게 장식적인 목록 마커를 허용합니다. @counter-style에 대한 자세한 내용은 MDN에서 확인하세요.

Device orientation events (기기 방향 이벤트)

이 이벤트들은 자이로스코프(gyroscope) 및 가속도계(accelerometer)와 같은 기기 하드웨어로부터 데이터를 제공합니다. 개발자는 이 정보를 사용하여 사용자의 기기 물리적 움직임과 방향에 반응하는 몰입형 경험을 만들 수 있습니다. Device orientation events에 대한 자세한 내용은 MDN에서 확인하세요.

hyphenate-character

CSS 속성 (CSS property)

이 속성을 사용하면 단어가 하이픈 연결(hyphenated)될 때 줄 끝에 사용되는 문자를 정의할 수 있습니다. 표준 하이픈이 기본값이지만, 이 속성은 특정 디자인이나 언어 요구 사항에 따라 다른 문자를 사용할 수 있는 유연성을 제공합니다. hyphenate-character에 대한 자세한 내용은 MDN에서 확인하세요.

hyphens

CSS 속성 (CSS property)

hyphens 속성은 텍스트가 줄 바꿈될 때 브라우저가 하이픈 연결(hyphenation)을 처리하는 방식을 제어합니다. none, manual (소프트 하이픈 사용), 또는 auto (브라우저가 자체 하이픈 연결 사전을 사용하도록 허용)로 설정할 수 있습니다. hyphens CSS 속성에 대한 자세한 내용은 MDN에서 확인하세요.

image-set()

CSS 함수 (CSS function)

image-set() 함수를 사용하면 화면 해상도와 같은 사용자의 기기 성능에 따라 CSS가 가장 적절한 이미지를 제공할 수 있습니다. 이는 <img> 태그의 srcset 속성과 유사하게 작동하며, 대역폭을 낭비하지 않으면서 고품질의 비주얼을 보장합니다. image-set() CSS 함수에 대한 자세한 내용은 MDN에서 확인하세요.

<link rel="modulepreload">

이 링크 관계(link relation)를 사용하면 개발자가 브라우저에 페이지 로드 프로세스 초기 단계에서 JavaScript 모듈(및 그 종속성)을 가져오고 처리하도록 지시할 수 있습니다. 이는 크리티컬 패스(critical path)에 소요되는 시간을 줄이고 모듈 중심 애플리케이션의 성능을 향상시킵니다. <link rel="modulepreload">에 대한 자세한 내용은 MDN에서 확인하세요.

Overflow media queries (오버플로 미디어 쿼리)

overflow-block 및 overflow-inline

미디어 기능 (media features)을 사용하면 디바이스가 초기 뷰포트 (viewport)를 벗어나는 콘텐츠를 어떻게 처리하는지 쿼리할 수 있습니다. 이는 페이지 매체 (paged media, 예: 프린터)와 연속 스크롤 화면 (continuous scrolling screens)과 같이 서로 다른 유형의 디스플레이 디바이스에 맞춰 스타일을 조정하는 데 특히 유용합니다. MDN에서 오버플로 미디어 쿼리 (overflow media queries)에 대해 더 자세히 알아보세요.

navigator.storage

저장소 API (Storage API)는 웹사이트의 저장소 지속성 (storage persistence) 및 할당량 (quota)을 관리하고 쿼리할 수 있는 방법을 제공합니다. 이를 통해 개발자는 사용 가능한 공간이 얼마나 되는지 확인할 수 있으며, 저장 공간이 부족할 때 브라우저가 데이터를 삭제하는 대신 지속적으로 유지하도록 요청할 수 있습니다. MDN에서 navigator.storage에 대해 더 자세히 알아보세요.

update 미디어 쿼리 (media query)

update 미디어 기능 (media feature)을 사용하면 출력 디바이스가 콘텐츠의 외형을 얼마나 자주 수정할 수 있는지 감지할 수 있습니다. 이는 고속 재생 화면 (fast-refresh screens, 예: 스마트폰)과 저속 재생 또는 정적 디스플레이 (slow-refresh or static displays, 예: e-ink 리더기)를 구분하는 데 도움이 됩니다. MDN에서 update 미디어 쿼리에 대해 더 자세히 알아보세요.

CSS 서브그리드 (CSS subgrid)

CSS 서브그리드 (CSS subgrid)는 CSS 그리드 (CSS Grid)의 강력한 확장 기능으로, 중첩된 그리드가 부모 그리드의 트랙 정의 (track definitions, 열 및 행)를 상속받을 수 있도록 합니다. 이를 통해 DOM 트리 (DOM tree)의 서로 다른 수준에 있는 요소들을 정렬하는 것이 훨씬 쉬워지며, 오랫동안 지속된 레이아웃 문제를 해결합니다. MDN에서 CSS 서브그리드에 대해 더 자세히 알아보세요.

Rachel Andrew의 Web Day Out 참석

지난달, Chrome의 Rachel Andrew는 그녀가 Web Day Out에서 진행한 강연을 언급하며 '웹 플랫폼의 미래를 살펴보자 (Look into the future of the web platform)'라는 글을 작성했습니다. 해당 발표에서는 브라우저 지원에 대해 다루었으며, 단순히 Baseline 대상뿐만 아니라 Baseline 대상을 충족하지 않는 기능을 어떻게 사용할지 결정하는 방법에 대해서도 설명했습니다.

선택한 Baseline 대상에 따라 상호 운용 가능한 기능(interoperable features)의 가용성이 어떻게 변하는지 이해하는 데 도움이 되는 좋은 강연입니다. 더 나중의 대상을 선택하면 더 많은 기능을 얻을 수 있지만, 광범위한 호환성(compatibility)을 희생해야 합니다. 프로젝트의 출시일에 맞춰 Baseline 대상을 설정하는 것을 고려해 보는 것이 합리적일 수 있는데, 이를 통해 출시 첫날에 안전하게 사용할 수 있는 기능을 놓치지 않을 수 있습니다.

실용적으로 Baseline 대상을 선택하는 것은 논의할 가치가 있는 주제이며, 이에 대한 Rachel의 견해를 확인해 보시기를 분명히 권장합니다. Baseline 대상을 특정 브라우저가 아닌 특정 시점으로 생각하면, 단순히 오늘날