LabHub

블로그

웹 플랫폼 2025 완전 정복: Container Queries·:has()·CSS Nesting·Subgrid·Popover API·Anchor Positioning·WebGPU·WASI·Speculation Rules·Baseline 2024-2025 — Season 6 Ep 5

2026-04-15 · 15 분 읽기 · #web-platform#container-queries#has-selector#css-nesting#css-subgrid#popover-api#anchor-positioning#webgpu#webassembly#wasi#speculation-rules#baseline#web-components

한국어English日本語中文

프롤로그 · 플랫폼이 커지면 프레임워크는 가벼워진다

2014-2020년, React·Vue·Angular가 필요했던 이유는 브라우저가 많이 부족했기 때문이다. 컴포넌트·상태관리·애니메이션·라우팅·레이아웃·인터랙션 모두 JS로 해결해야 했다.

2024-2025년은 다르다. 브라우저가 대부분을 한다.

Next.js·React를 여전히 쓰지만, "플랫폼에 맡길 수 있는 건 플랫폼에" 는 2025년의 원칙이다. 이번 글은 그 지도.

1장 · Baseline — 호환성의 새 언어

Baseline이란?

2023-2024년 Web DX Community Group이 만든 브라우저 기능 호환성 라벨 체계. "이 기능은 지금 써도 안전한가?" 에 답.

3단계

Baseline Newly available

Baseline Widely available

Limited availability

실전 사용

왜 중요한가

2장 · Container Queries — 반응형의 혁명

전통적 문제

미디어 쿼리 @media는 뷰포트 전체 기준. 그러나 같은 카드 컴포넌트가 어떨 땐 사이드바, 어떨 땐 메인에 배치되면 크기가 다름. 뷰포트는 같아도.

해결: @container

.card-grid {
  container-type: inline-size;
  container-name: grid;
}

@container grid (min-width: 600px) {
  .card { display: flex; }
}

이제 카드 그리드 자체 폭 기준으로 카드 레이아웃 결정.

단위

2025년 지원

사용 패턴

(1) 자체 반응형 컴포넌트

(2) Style Queries (2024 Chrome/Edge)

(3) 뷰포트 + 컨테이너 조합

3장 · :has() — 부모 선택자의 도래

왜 혁명인가

CSS는 항상 아래로만 내려가는 선택자였다. 자식 기반 부모 스타일링은 JS 필수. :has() 가 이 제한 제거.

사용 예

(1) 자식 유무에 따른 부모 스타일

.card:has(img) { padding-top: 0; }
.form:has(input:invalid) { border: 1px solid red; }

(2) 자식 상태에 따른 전체 스타일

body:has(dialog[open]) { overflow: hidden; }

(3) 형제 관계

label:has(+ input:focus) { color: blue; }

지원

실전 임팩트

4장 · CSS Nesting 네이티브

이전까지

2023-2024 네이티브 Nesting

.card {
  padding: 1rem;

  & .title {
    font-size: 1.5rem;
  }

  &:hover {
    background: #f0f0f0;

    & .title { color: #333; }
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

주의

지원

의미

5장 · CSS Subgrid

전통 Grid의 한계

Subgrid 해결

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  display: grid;
  grid-template-columns: subgrid; /* 부모 그리드 계승 */
}

이제 자식 grid가 부모 grid의 트랙에 맞춤.

사용 사례

지원

6장 · Popover API·Dialog Element

전통 모달의 문제

<dialog> (HTML5)

Popover API (2024-2025)

<button popovertarget="menu">메뉴</button>
<div id="menu" popover>
  <ul>
    <li>항목 1</li>
    <li>항목 2</li>
  </ul>
</div>

지원

실전 영향

7장 · CSS Anchor Positioning

문제: 플로팅 UI

툴팁·드롭다운·팝오버를 특정 요소 기준으로 정확히 위치시키기는 복잡.

해결: CSS Anchor Positioning (2024-)

<button id="btn">클릭</button>
<div popover style="position-anchor: --btn;">
  툴팁
</div>

#btn { anchor-name: --btn; }

[popover] {
  position: absolute;
  top: anchor(--btn bottom);
  left: anchor(--btn left);
}

지원 (2025 4월)

임팩트

8장 · Web Components 2025 현주소

기본 3요소

2024-2025년 성숙

(1) Declarative Shadow DOM

(2) Form-associated Custom Elements

(3) CSS :state() 의사 클래스

프레임워크 통합

현실 평가

장점

한계

적합한 용도

9장 · WebGPU 현주소

WebGL의 한계

WebGPU (2023-)

2024-2025 주요 사용

(1) AI/ML 브라우저 실행

(2) 고성능 그래픽

(3) 데이터 시각화

지원

한계

10장 · File System Access API·기타 Local 기능

File System Access API

주요 새 API 2024-2025

(1) Clipboard API 고도화

(2) Web Share API

(3) Wake Lock API

(4) Screen Capture·WebCodecs

(5) Compression Streams

(6) Web Locks

한계

11장 · WebAssembly·WASI 2025

WASM 현재

WASI (WebAssembly System Interface)

브라우저 밖·서버 WASM 실행 표준.

실전 사용

(1) Serverless 엣지

(2) 플러그인 시스템

(3) 브라우저 내 헤비 연산

한국 적용 사례

12장 · Speculation Rules API

목적

예시

<script type="speculationrules">
{
  "prerender": [
    { "source": "list",
      "urls": ["/next-page", "/likely-next"] }
  ],
  "prefetch": [
    { "source": "document",
      "where": { "href_matches": "/articles/*" } }
  ]
}
</script>

모드

2024-2025 현황

실전 사용

주의

13장 · 실전 · "플랫폼 먼저" 체크리스트

새 컴포넌트·기능 만들 때 프레임워크·라이브러리 전에 확인.

체크 항목

판단 순서

  1. 웹 플랫폼에 기본 기능이 있나?
  2. Baseline Widely 지원인가?
  3. 없으면, 경량 라이브러리로 대체?
  4. 여전히 필요하면, 프레임워크 컴포넌트

14장 · 다음 글 예고 — Season 6 Ep 6: "성능·Core Web Vitals 2025"

웹 플랫폼 기능을 잘 쓰는 건 성능을 잘 쓰는 것. Ep 6은 Core Web Vitals와 성능 전반.

"성능은 기능이 아니다. 모든 기능의 조건이다."

다음 글에서 만나자.

에필로그 · 체크리스트 12

  1. Baseline Widely 기준으로 기능 사용을 결정하는가?
  2. 반응형이 필요할 때 Container Queries 를 먼저 고려하는가?
  3. 부모 기반 스타일에 :has() 를 활용하는가?
  4. CSS가 빌드 도구 없이 Nesting 으로 관리되는가?
  5. 복잡한 레이아웃에 Subgrid 를 쓰는가?
  6. 모달·팝오버를 네이티브 API로 구현하는가?
  7. 툴팁·드롭다운 위치를 Anchor Positioning 으로?
  8. Web Components를 공유 라이브러리에 활용하는가?
  9. WebGPU의 기회(AI·시각화)를 탐색하는가?
  10. Local 기능(파일·시스템)이 필요하면 Platform API 가 먼저인가?
  11. Speculation Rules로 프리페치/프리렌더 검토했는가?
  12. "플랫폼 먼저" 체크리스트를 새 컴포넌트마다 적용하는가?

"좋은 엔지니어는 플랫폼의 능력을 안다. 위대한 엔지니어는 언제 플랫폼에 맡기고 언제 직접 만들지 안다."

— Season 6 Ep 5, Fin.

원문 보기: https://www.youngju.dev/blog/culture/2026-04-15-web-platform-2025-complete-guide-container-queries-has-selector-nesting-subgrid-popover-anchor-positioning-webgpu-wasi-speculation-rules-baseline-deep-dive-guide-2025

댓글

아직 댓글이 없습니다.

로그인하면 댓글을 쓸 수 있습니다