2026년 1월 Baseline 월간 요약

Baseline 요약의 2026년 1월 에디션에 오신 것을 환영합니다. 매달 저희는 Baseline에서 새로운 이정표에 도달한 웹 플랫폼 기능들을 강조하여, 여러분이 오늘날 프로젝트에서 어떤 도구들을 바로 사용할 수 있는지 이해하도록 돕습니다.

1월은 여러 중요한 API와 CSS 단위들이 '새로 사용 가능 (Newly available)' 카테고리로 이동하고, 주요 레이아웃 개선 사항이 '널리 사용 가능 (Widely available)' 상태가 되면서 흥미로운 한 해의 시작을 알렸습니다.

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

다음 웹 기능들이 2026년 1월에 Baseline '새로 사용 가능 (Newly available)' 상태가 되었습니다.

활성 뷰 전환 (Active view transition)

:active-view-transition CSS 의사 클래스 (pseudo-class)가 이제 Baseline '새로 사용 가능 (Newly available)' 상태가 되었습니다. 이 선택자를 사용하면 개발자는 뷰 전환 (view transition)이 진행되는 동안에만 문서의 루트 요소 (root element)를 특정하여 스타일을 지정할 수 있습니다. 이는 전환 오버레이 (transition overlay)의 배경색을 변경하거나, 매끄러운 시각적 흐름을 보장하기 위해 특정 레이어의 z-index를 조정하는 것과 같이 전환 기간 동안에만 존재해야 하는 전역 스타일이나 조정을 적용할 때 특히 유용합니다.

서비스 워커 (Service workers)에서의 JavaScript 모듈

이제 모든 주요 브라우저 엔진에서 서비스 워커 (Service workers)가 JavaScript 모듈 (modules)을 지원합니다. navigator.serviceWorker.register()를 호출할 때 type: 'module' 옵션을 설정함으로써, 서비스 워커 스크립트 내에서 표준 import 및 export 문을 사용할 수 있습니다. 이를 통해 서비스 워커를 현대적인 JavaScript 개발 관행에 맞출 수 있으며, 더 나은 코드 구조화, 쉬운 의존성 관리 (dependency management), 그리고 메인 스레드 (main thread)와 백그라운드 워커 (background worker) 간의 코드 공유가 가능해집니다.

내비게이션 API (Navigation API)

내비게이션 API (Navigation API)는 기존의 History API를 대체하기 위해 특별히 설계된 현대적이고 목적에 부합하는 대안으로, 특히 싱글 페이지 애플리케이션 (SPAs)의 요구 사항에 맞춰 설계되었습니다. 이는 브라우저의 뒤로 가기 및 앞으로 가기 버튼에 의해 트리거되는 동작을 포함하여, 모든 유형의 내비게이션 동작을 시작, 가로채기 및 관리할 수 있는 중앙 집중식 방법을 제공합니다. Maps와 같은 이벤트와 함께...

개발자는 더 적은 상용구 코드 (boilerplate code)로 더 매끄러운 클라이언트 측 라우팅 (client-side routing)을 구현할 수 있습니다. 이것이 웹을 구축하는 방식을 어떻게 변화시키는지 더 자세히 알고 싶다면, 전용 블로그 포스트인 'Modern client-side routing: the Navigation API'를 확인해 보세요.

rcap

CSS 단위 (CSS unit)

rcap 단위는 루트 요소 (root element) 폰트의 'cap height'(대문자의 명목상 높이)와 동일한 루트 폰트 상대 길이 단위 (root-font-relative length unit)입니다. 이를 통해 단순히 폰트 크기에 의존하는 것이 아니라, 사이트에서 사용되는 기본 타이포그래피 (typeface)에 상대적으로 확장되는 정밀한 타이포그래피 레이아웃을 구성할 수 있습니다.

rch

CSS 단위 (CSS unit)

ch 단위와 유사하지만 루트 요소에 상대적이라는 점이 다른 rch 단위는 루트 요소 폰트 내 '0'(영) 글리프 (glyph)의 너비, 더 구체적으로는 전진 폭 (advance measure)을 나타냅니다. 이는 루트 폰트의 특정 문자 수에 정확히 맞춰져야 하는 컨테이너와 같이, 문자 너비에 의존하는 레이아웃을 생성할 때 이상적입니다.

rex

CSS 단위 (CSS unit)

rex 단위는 ex의 루트 상대 버전으로, 루트 요소 폰트의 x-height (소문자 x의 높이)와 같습니다. 이 단위는 문서의 기본 타이포그래피 내 소문자 높이에 상대적으로 요소를 크기 조정하거나 수직 정렬할 때 특히 유용합니다.

ric

CSS 단위 (CSS unit)

ric 단위는 ic 단위의 루트 상대 대응 단위입니다. 이는 루트 요소 폰트의 '표의 문자' (ideographic) 전진 폭 (일반적으로 CJK 표의 문자의 너비 또는 높이)과 같습니다. 이는 국제화된 레이아웃, 특히 중국어, 일본어 또는 한국어 문자를 사용하는 레이아웃을 구축하는 개발자들에게 필수적인 도구입니다.

Baseline 광범위하게 사용 가능한 기능 (Widely available features)

다음 웹 기능들이 2026년 1월에 Baseline Widely 단계로 전환되었습니다.

두 개의 값을 갖는 CSS display 속성

display 속성의 다중 키워드 구문 (multi-keyword syntax)이 이제 Baseline Widely 단계에서 사용할 수 있습니다. 이 업데이트를 통해 박스의 '외부' (outer) 및 '내부' (inner) 디스플레이 유형을 모두 명시적으로 정의할 수 있습니다. 예를 들어, 결합된 형태인 inline-flex 대신 display: inline flex를 사용할 수 있습니다.

이는 요소가 블록 흐름(block flow) 또는 인라인 흐름(inline flow) 중 어디에 참여하는지(외부 유형)와 그 자식 요소들이 어떻게 배치되는지(내부 유형, 예: flex 또는 grid)를 명확하게 해줍니다. 이러한 변화는 CSS 레이아웃 엔진을 개발자들에게 더욱 논리적이고 일관성 있게 만들어 줍니다.

animation-composition CSS 속성

animation-composition 속성은 여러 애니메이션이 동시에 동일한 속성에 영향을 미칠 때 이들이 어떻게 상호작용해야 하는지를 정의합니다. replace, add, 또는 accumulate 중에서 선택할 수 있으며, 이를 통해 복잡하고 계층적인 애니메이션이 계산되는 방식을 정밀하게 제어할 수 있습니다.

복사본을 통한 배열 (Array by copy)

JavaScript에는 이제 원본 데이터를 변경(mutation)하지 않고 배열을 변형할 수 있는 메서드들이 포함되었습니다. toReversed(), toSorted(), toSpliced()와 같은 메서드들은 수정된 새로운 배열 복사본을 반환하며, 이를 통해 더욱 함수형(functional)이고 안전한 프로그래밍 스타일을 장려합니다.

개선을 위해 도와주세요

평소와 마찬가지로, Baseline 관련 내용 중 저희가 놓친 부분이 있다면 알려주세요. 다음 판에서 반드시 반영하도록 하겠습니다! Baseline에 대한 질문이 있거나 피드백을 제공하고 싶다면, 저희의 이슈 트래커(issue tracker)에 이슈를 등록해 주세요.