2026년 8월 Baseline 월간 요약

월간 Baseline 요약에 오신 것을 환영합니다. 이번 에디션에서는 2026년 8월 동안 Baseline Newly available 및 Baseline Widely available 상태에 도달한 웹 플랫폼 기능들과, 웹 개발자 커뮤니티가 공유한 아티클 및 리소스를 탐색해 보세요.

토큰 스킬의 시작점으로 활용되는 Modern Web Guidance

Brecht De Ruyte는 Google의 Modern Web Guidance 스킬 세트가 AI 코딩 에이전트가 구식 패턴에 의존하는 대신 최신이며 Baseline을 인식하는 CSS 및 HTML을 작성하도록 돕는 방식을 검토했습니다. 이 게시물은 커스텀 디자인 토큰 스킬과 Modern Web Guidance를 결합하여 현대적인 플랫폼 표준을 존중하면서도 디자인 시스템의 일관성을 유지하는 방법을 안내합니다. 더 자세한 정보는 [Modern Web Guidance as a starting point for my own token skills: getting agents to write better CSS]를 참조하세요.

Baseline Newly available 기능

다음 기능들은 2026년 8월에 모든 핵심 브라우저 엔진에서 지원되면서 이제 Baseline Newly available 상태가 되었습니다.

:paused
CSS pseudo-class

:paused pseudo-class는 <audio> 및 <video>와 같은 재생 가능한 미디어 요소를, 재생이 일시 중지될 때마다 일치시킵니다. 또한 로드되었지만 아직 재생을 시작하지 않은 미디어 요소도 일치시킵니다. 이는 버퍼링이나 탐색과 같은 전환 상태와 일시 중지된 재생을 구별하여, 미디어 플레이어 컨트롤 및 주변 UI가 CSS에서 재생 상태를 직접 반영할 수 있도록 합니다. 더 자세한 정보는 :paused의 MDN 문서를 참조하세요.

sibling-count()
CSS function

sibling-count() 함수는 부모 요소를 공유하는 형제 요소들의 총 개수를, 해당 요소 자신을 포함하여 나타내는 정수 값을 반환합니다. 생성된 콘텐츠용으로 포맷된 문자열을 반환하는 counter()와 달리, sibling-count()는 calc()를 사용한 수학 계산에 직접 사용할 수 있는 정수로 해석됩니다.

이것은 자식 요소가 JavaScript나 고정 스타일을 요구하지 않고도 전체 형제 요소 개수를 기반으로 열 너비와 같은 비례 레이아웃 크기를 계산할 수 있게 합니다. 더 자세한 정보는 MDN의 sibling-count() 문서를 참조하십시오.

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

다음 기능은 2026년 8월에 Baseline '널리 사용 가능(Widely available)' 상태에 도달했습니다. 이는 모든 핵심 브라우저 엔진에서 30개월 동안 지원되었으며, 폴리필 없이 안전하게 사용할 수 있음을 의미합니다.

선언적 Shadow DOM (Declarative Shadow DOM)

선언적 Shadow DOM을 사용하면 <template> 요소를 사용하여 shadowrootmode 속성을 open 또는 closed로 설정함으로써 HTML 마크업에 직접 섀도우 루트를 정의할 수 있습니다. 이를 통해 JavaScript를 통해 Element.attachShadow()로 섀도우 루트를 연결할 필요가 없어집니다. 이는 서버에서 렌더링된 웹 컴포넌트가 초기 로드 시 스타일이 없는 콘텐츠 깜빡임(FOUC) 없이 자체 캡슐화된 스타일을 가지고 렌더링되도록 하며, 검색 엔진 및 JavaScript가 없는 클라이언트에서도 구문 분석이 가능하게 합니다. 더 자세한 정보는 MDN의 shadowrootmode 문서를 참조하십시오.

마무리 (Wrap-up)

Baseline 업데이트나 커뮤니티 게시물을 놓쳤다면 팀에 알려주시면 다음 에디션에 포함될 수 있습니다. Baseline에 대한 질문이나 피드백이 있다면 이슈 트래커(issue tracker)에 이슈를 등록해 주십시오.