2026년 2월 Baseline 월간 요약
요약
2026년 2월 Baseline 업데이트를 통해 웹 플랫폼의 보안, CSS, JavaScript 및 압축 기술이 주요 브라우저 엔진에서 표준화되었습니다. Interop 2026의 출시와 함께 CSS shape() 함수, Trusted Types API, Map 객체의 신규 메서드 등이 새롭게 Baseline에 포함되었습니다.
핵심 포인트
- Interop 2026 출시를 통해 브라우저 간 웹 기능 상호 운용성 강화 및 대시보드 제공
- CSS shape() 함수 도입으로 CSS 단위와 calc()를 활용한 직관적이고 반응형인 복잡한 모양 정의 가능
- Trusted Types API를 통한 DOM 기반 XSS 공격 방어 체계 강화 및 보안 정책 강제 가능
- JavaScript Map 객체에 getOrInsert() 및 getOrInsertComputed() 메서드가 추가되어 데이터 삽입 패턴 간소화
- Zstandard(zstd) 압축 방식의 HTTP 지원 확대
2월은 웹 플랫폼에 있어 또 다른 사건이 많은 달이었습니다. Trusted types를 통한 보안 강화부터 복잡한 모양을 위한 더 인체공학적인 CSS 구문까지, 우리가 사용할 수 있는 도구들은 모든 주요 브라우저 엔진 전반에 걸쳐 계속해서 성숙해 가고 있습니다.
이번 요약에서는 이번 달에 Baseline 마일스톤에 도달한 기능들을 살펴보고, 상호 운용성 (Interoperability)을 염두에 두고 더욱 견고하고 유능한 웹을 구축할 수 있도록 도와드리겠습니다.
Interop 2026 출시
지난달, 웹 기능의 상호 운용성 (Interoperability)을 높이기 위한 노력인 Interop 2026이 출시되었습니다. 이 노력에는 브라우저 렌더링 엔진에 실질적으로 기여하는 기업들의 대표자들이 참여합니다.
Interop은 새로운 웹 기능들이 우선순위화되고, 높은 우선순위의 기능들이 모든 주요 브라우저 엔진에 안착할 수 있도록 많은 노력이 투여되기 때문에 중요한 이니셔티브입니다. 지난 몇 년과 마찬가지로, 식별된 핵심 기능들에 대한 테스트 통과율을 이해하는 데 도움이 되는 대시보드가 제공됩니다.
Baseline 신규 사용 가능 기능
다음 기능들은 2026년 2월에 Baseline의 일부가 되었으며, 이는 이제 모든 주요 브라우저 엔진에서 새롭게 지원됨을 의미합니다.
CSS shape() 함수
shape() 함수는 <basic-shape> 데이터 타입에 새롭게 추가된 기능으로, clip-path 및 offset-path 속성을 위한 복잡한 경로를 정의하는 더 직관적인 방법을 제공합니다. SVG와 유사한 명령어로 구성된 단일 문자열을 요구하는 path() 함수와 달리, shape()는 표준 CSS 구문을 사용합니다. 이를 통해 모양 정의 내에서 CSS 단위(rem, em, % 등), calc()와 같은 수학 함수, 그리고 CSS 변수까지 사용할 수 있습니다. 이는 SVG 경로 문자열보다 CSS에 더 익숙한 개발자들이 반응형의 동적인 모양을 만드는 것을 훨씬 쉽게 만들어 줍니다.
MDN에서 CSS shape() 함수에 대해 더 자세히 알아보세요.
Trusted types
Trusted Types API의 Baseline 도입으로 DOM 기반 교차 사이트 스크립팅 (XSS) 공격으로부터 웹 애플리케이션을 보호하는 기능이 크게 강화되었습니다. 이 API는 개발자가 데이터를 Element.innerHTML이나 eval()과 같이 코드를 실행하거나 HTML을 렌더링할 수 있는 위험한 "싱크 (sinks)"로 전달하기 전에 반드시 "정책 (policies)"를 통해 처리하도록 요구합니다. 콘텐츠 보안 정책 (CSP)을 통해 이러한 정책을 강제함으로써, 인젝션 취약점으로 이어질 수 있는 방식으로 오직 정화(sanitized)되었거나 "신뢰할 수 있는 (trusted)" 데이터만 사용되도록 보장할 수 있으며, 보안 검사를 수동 검토 프로세스에서 플랫폼이 강제하는 보증 체계로 전환할 수 있습니다.
MDN에서 Trusted Types API에 대한 문서를 읽어보세요.
Map getOrInsert() 및 getOrInsertComputed()
JavaScript Map 객체는 getOrInsert()와 getOrInsertComputed()의 추가로 더욱 사용하기 편리해졌습니다. 이 메서드들은 맵에 키가 존재하는지 확인하고, 존재하지 않는 경우 기본값을 삽입한 뒤 이를 반환하는 일반적인 패턴을 간소화합니다. getOrInsert()는 기본적인 기본값을 사용하는 데 유용하며, getOrInsertComputed()는 콜백 함수를 인자로 받습니다. 콜백은 키가 없을 때만 실행되므로, 기본값을 생성하는 데 계산 비용이 많이 드는 경우에 이상적입니다.
MDN에서 Map getOrInsert()를 확인해 보세요.
Zstandard 압축
Zstandard (또는 zstd)가 이제 HTTP Content-Encoding의 Baseline Newly available 옵션이 되었습니다. 높은 압축률과 매우 빠른 압축 해제 속도로 알려진 Zstandard는 Gzip 및 Brotli에 대한 현대적인 대안을 제공합니다. 이는 광범위한 데이터 유형에 대해 특히 효과적이며, 개발자가 압축 해제 과정에서 사용자의 CPU에 부담을 주지 않으면서도 네트워크를 통해 전송되는 데이터 양을 줄이고 페이지 로드 시간을 개선할 수 있도록 돕습니다.
MDN에서 Content-Encoding 헤더와 Zstandard를 살펴보세요.
Baseline Widely available 기능
이번 달에는 국제화(internationalization) 도구가 Baseline Widely available이 되었습니다.
dirname HTML 속성
dirname 속성도 이제 Baseline Widely available 상태입니다. 이 속성은 <input> 및 <textarea> 요소에 추가되어 사용자가 입력한 텍스트의 방향성(왼쪽에서 오른쪽으로 읽는 ltr 또는 오른쪽에서 왼쪽으로 읽는 rtl)을 자동으로 캡처할 수 있습니다. 양식이 제출될 때, 브라우저는 dirname 속성의 값으로 명명된 추가 필드를 생성하여 해당 방향성 정보를 전송합니다. 이는 다국어 사용자를 지원하는 애플리케이션에 필수적인 기능으로, 서버가 텍스트를 의도된 방향에 따라 올바르게 표시하거나 처리하는 데 필요한 컨텍스트를 수신할 수 있도록 보장합니다.
dirname HTML 속성에 대한 자세한 내용은 MDN에서 확인하세요.
마치며
평소와 마찬가지로, Baseline 관련 내용 중 저희가 놓친 부분이 있다면 알려주세요. 다음 호에서 반드시 다루도록 하겠습니다! Baseline에 대한 질문이 있거나 피드백을 주고 싶다면, 저희의 이슈 트래커(issue tracker)에 이슈를 등록해 주세요.
AI 자동 생성 콘텐츠
본 콘텐츠는 Web.dev (Google)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기