게시일: 2026년 3월 2일
2026년 1월 Baseline 요약에 오신 것을 환영합니다. 매달 Google에서는 기준에서 새로운 단계에 도달한 웹 플랫폼 기능을 강조 표시하여 오늘 프로젝트에서 사용할 수 있는 도구를 파악할 수 있도록 지원합니다.
1월은 여러 중요한 API와 CSS 단위가 새로 제공됨 카테고리로 이동하고 주요 레이아웃 개선사항이 널리 제공됨으로 이동하면서 흥미로운 한 해의 시작을 알렸습니다.
새로 제공되는 기준 기능
다음 웹 기능은 2026년 1월에 새로 출시된 Baseline이 되었습니다.
Active View 전환
이제 :active-view-transition CSS 의사 클래스를 Baseline Newly available로 사용할 수 있습니다. 이 선택기를 사용하면 개발자가 뷰 전환이 진행되는 동안 문서의 루트 요소를 구체적으로 타겟팅하고 스타일을 지정할 수 있습니다. 이는 전환 오버레이의 배경색을 변경하거나 특정 레이어의 z-index를 조정하여 원활한 시각적 흐름을 보장하는 등 전환 기간에만 존재해야 하는 전역 스타일이나 조정을 적용하는 데 특히 유용합니다.
서비스 워커의 JavaScript 모듈
이제 모든 주요 브라우저 엔진에서 서비스 워커가 JavaScript 모듈을 지원합니다. navigator.serviceWorker.register()를 호출할 때 type: 'module' 옵션을 설정하면 서비스 워커 스크립트 내에서 표준 import 및 export 문을 사용할 수 있습니다. 이렇게 하면 서비스 워커가 최신 JavaScript 개발 관행에 부합하게 되어 코드 구성이 개선되고, 종속 항목 관리가 더 쉬워지며, 기본 스레드와 백그라운드 워커 간에 코드를 공유할 수 있습니다.
Navigation API
Navigation API는 기존 History API를 대체하는 최신 API로, 싱글 페이지 애플리케이션 (SPA)의 요구사항을 위해 특별히 설계되었습니다. 브라우저의 뒤로 및 앞으로 버튼으로 트리거되는 작업을 비롯한 모든 유형의 탐색 작업을 중앙에서 시작, 가로채기, 관리하는 방법을 제공합니다. Maps와 같은 이벤트를 사용하면 개발자가 상용구 코드를 적게 사용하여 더 원활한 클라이언트 측 라우팅을 구현할 수 있습니다. 이로 인해 웹 빌드 방식이 어떻게 달라지는지 자세히 알아보려면 최신 클라이언트 측 라우팅: Navigation API에 관한 전용 블로그 게시물을 참고하세요.
rcap CSS 단위
rcap 단위는 루트 요소의 글꼴의 '캡 높이' (대문자의 명목상 높이)와 동일한 루트 글꼴 상대 길이 단위입니다. 이를 통해 글꼴 크기뿐만 아니라 사이트에서 사용되는 기본 서체에 상대적으로 크기가 조정되는 정확한 서체 레이아웃을 사용할 수 있습니다.
rch CSS 단위
ch 단위와 유사하지만 루트 요소를 기준으로 하는 rch 단위는 루트 요소의 글꼴에 있는 '0'(영) 글리프의 너비(더 구체적으로는 어드밴스 측정)를 나타냅니다. 루트 글꼴의 특정 문자 수에 정확하게 맞아야 하는 컨테이너와 같이 문자 너비에 따라 달라지는 레이아웃을 만드는 데 적합합니다.
rex CSS 단위
rex 단위는 루트 요소의 글꼴 x-높이와 동일한 ex의 루트 상대 버전입니다. 이 단위는 문서의 기본 서체에서 소문자의 높이를 기준으로 요소를 세로로 정렬하고 크기를 조정하는 데 특히 유용합니다.
ric CSS 단위
ric 단위는 ic 단위의 루트 상대 단위입니다. 루트 요소의 글꼴의 '표의 문자' 전진 측정값 (일반적으로 CJK 표의 문자의 너비 또는 높이)과 같습니다. 이는 국제화된 레이아웃을 빌드하는 개발자, 특히 중국어, 일본어 또는 한국어 스크립트를 사용하는 개발자에게 중요한 도구입니다.
널리 사용되는 기준 기능
다음 웹 기능은 2026년 1월에 Baseline Widely available이 되었습니다.
두 값 CSS display 속성
이제 display 속성의 다중 키워드 구문이 Baseline Widely available로 제공됩니다. 이번 업데이트를 통해 상자의 '외부' 및 '내부' 디스플레이 유형을 모두 명시적으로 정의할 수 있습니다. 예를 들어 사전 구성된 inline-flex 대신 display: inline flex를 사용할 수 있습니다. 이를 통해 요소가 블록 또는 인라인 흐름 (외부 유형)에 참여하는지, 하위 요소가 어떻게 배치되는지 (내부 유형, 예: flex 또는 grid) 명확하게 알 수 있습니다. 이 변경사항으로 개발자에게 CSS 레이아웃 엔진이 더 논리적이고 일관성 있게 됩니다.
animation-composition CSS 속성
animation-composition 속성은 여러 애니메이션이 동일한 속성에 동시에 영향을 미칠 때 상호작용하는 방식을 정의합니다. replace, add 또는 accumulate 중에서 선택하여 복잡한 레이어 애니메이션이 계산되는 방식을 정확하게 제어할 수 있습니다.
복사로 배열
이제 JavaScript에는 원본 데이터를 변경하지 않고 배열을 변환할 수 있는 메서드가 포함됩니다. toReversed(), toSorted(), toSpliced()와 같은 메서드는 수정된 배열의 새 복사본을 반환하여 더 기능적이고 안전한 프로그래밍 스타일을 촉진합니다.
품질 개선에 참여하기
언제나처럼 기준선과 관련된 내용이 누락된 경우 알려주시면 향후 버전에 반영하도록 하겠습니다. Baseline에 관해 궁금한 점이 있거나 의견을 제공하고 싶다면 Issue Tracker에서 문제를 신고하세요.