웹용 2026년 3월 광범위하게 사용 가능한 API

2026년 3월 기준 널리 사용 가능한 12가지 브라우저 API: 프로덕션에 배포할 항목

2026년 3월, 12가지 브라우저 API가 '널리 사용 가능' 상태에 도달했습니다. 이는 모든 주요 브라우저에서 최소 2.5년 동안 안정적인 지원을 받았다는 의미로, 구현 결정을 단순화합니다. Can I Use와 사용자 지표를 확인하면 프로덕션 준비 여부를 확인할 수 있습니다. 성능, 타이포그래피, 데이터 관리를 최적화하기 위한 CSS 속성, HTTP 헤더, JavaScript 이벤트에 초점을 맞춥니다.

주요 기능 목록:

• Clear-Site-Data
• contain-intrinsic-size
• @counter-style
• 디바이스 방향 이벤트
• hyphenate-character
• hyphens
• image-set()
• <link rel="modulepreload">
• 오버플로 미디어 쿼리
• 스토리지 관리자
• 업데이트 빈도 미디어 쿼리
• subgrid

Clear-Site-Data: 로컬 데이터 완전 초기화

HTTP 헤더 Clear-Site-Data는 서버가 브라우저 저장소(캐시, 쿠키, localStorage, IndexedDB, 서비스 워커)를 지우도록 시작할 수 있게 합니다. 로그아웃, 사용자 전환 또는 손상된 캐시 복구 시 사용됩니다.

구문 및 지시어

지시어는 큰따옴표로 지정하고 쉼표로 구분합니다:

Clear-Site-Data: "cache"
Clear-Site-Data: "cache", "cookies"
Clear-Site-Data: "*"

주요 지시어:

• "cache" — HTTP 캐시, bfcache, WebGL 셰이더.
• "cookies" — 도메인 및 하위 도메인의 쿠키와 HTTP 인증.
• "storage" — localStorage, sessionStorage, IndexedDB, 서비스 워커.
• "executionContexts" (실험적) — 컨텍스트 재로드.
• "clientHints" (실험적) — 클라이언트 힌트 재설정.
• "prefetchCache", "prerenderCache" (실험적) — 추측 규칙.
• "*" — 모든 데이터 유형.

사용 예시

완전 정리 로그아웃:

HTTP/1.1 200 OK
Clear-Site-Data: "cache", "cookies", "storage", "executionContexts", "prefetchCache", "prerenderCache"
Content-Type: text/html

쿠키만:

Clear-Site-Data: "cookies"

프로덕션에서 이 헤더는 POST /logout 후 남은 데이터 문제(서비스 워커 충돌 및 캐시된 번들 포함)를 해결합니다. "cache", "storage"가 포함된 복구 페이지는 DevTools 없이도 상태를 빠르게 복원합니다.

contain-intrinsic-size: 컨테인먼트로 레이아웃 안정화

contain-intrinsic-size 속성은 contain: size 또는 content-visibility: auto가 적용된 요소의 대체 크기를 설정합니다. 뷰포트 외부 렌더링 시 높이/너비를 고정하여 스크롤 시 리플로우를 방지합니다.

구문

contain-intrinsic-size: none;
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 300px 200px;
contain-intrinsic-size: auto 320px;
contain-intrinsic-size: auto 400px auto 250px;
contain-intrinsic-size: auto none;

값:

• none — 대체 없음.
• <length> — 고정 크기.
• auto <length> — 첫 렌더링 후 실제 크기를 기억.
• auto none — 사용 가능한 메모리가 없으면 none으로 대체.

예시

뉴스 피드:

.feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

상품 카드:

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

이 속성은 '점프' 스크롤을 제거합니다: 없으면 보이지 않는 블록의 높이가 0이 되어 스크롤 시 재계산을 유발합니다. auto 모드는 첫 렌더링 후 최적화합니다.

@counter-style: 사용자 정의 목록 스타일

@counter-style 규칙은 system, symbols, additive-symbols와 같은 디스크립터를 사용하여 목록의 사용자 정의 번호 매기기 스타일을 정의합니다. decimal, disc 등 내장 스타일을 확장합니다.

구문 및 디스크립터

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

주요 디스크립터:

• system: cyclic, numeric, alphabetic, fixed, additive.
• symbols: 마커용 문자열/이미지.
• additive-symbols: 로마 숫자용 가중치-심볼 쌍.
• prefix/suffix: 프레이밍.
• range: 허용 값.
• pad: 최소 길이(제로 패딩).
• fallback: 대체 스타일.

예시

원형 문자:

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

.items {
  list-style: circled-alpha;
}

목록용 로켓:

@counter-style rocket {
  system: cyclic;
  symbols: "\1F680";
  suffix: " ";
}

ul.features {
  list-style: rocket;
}

섹션용:

@counter-style chapter {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ". ";
}

.article h2::before {
  counter-increment: section;
  content: counter(section, chapter);
}

프로덕션에서 @counter-style는 번호 매기기의 현지화를 단순화하여 JS/백엔드 로직을 최소화합니다. 접근성을 위해 fallback 및 speak-as를 보장하세요.

디바이스 방향 이벤트 및 기타 기능

디바이스 방향 이벤트는 DOM 이벤트를 통해 디바이스 방향 및 가속도 데이터를 제공합니다. 목록은 하이픈을 위한 hyphenate-character 및 hyphens, 반응형 이미지를 위한 image-set(), 모듈 프리로딩을 위한 <link rel="modulepreload">, 성능 적응을 위한 오버플로/업데이트 빈도 미디어 쿼리, 할당량을 위한 스토리지 관리자, 그리드를 위한 subgrid로 보완됩니다.

핵심 요약

• 널리 사용 가능 — 모든 브라우저에서 최소 2.5년 동안 안정적인 지원.
• 구현 전 사용자 지표와 Can I Use를 확인하세요.
• Clear-Site-Data는 로그아웃 및 복구에 필수적.
• contain-intrinsic-size는 content-visibility로 스크롤을 안정화.
• @counter-style는 JS 없이 사용자 정의 타이포그래피 가능.

— Editorial Team