이제 Modern Web Guidance가 안정화되었습니다. 전문가가 검증한 웹 개발 권장사항으로 코딩 에이전트를 업그레이드하세요. 공지 확인하기

Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

기본적으로 교차 브라우저: Modern Web Guidance에서 Baseline 대체가 작동하는 방식

Tara Agyemang

게시일: 2026년 11월 12일

AI 코딩 에이전트에게 도움말이나 모달 대화상자를 빌드해 달라고 요청하고, 에이전트가 작성하는 코드를 자세히 살펴보세요. 대부분의 경우 에이전트는 JavaScript를 가져와 브라우저에 내장된 기능을 다시 만듭니다. 에이전트에게 최신 CSS 또는 HTML 기능을 사용하라는 프롬프트를 표시하면 기능 감지 및 대체가 건너뛰는 경우가 많습니다. 이러한 누락으로 인해 지원되지 않는 브라우저를 사용하는 사용자는 페이지가 깨진 상태로 남게 됩니다.

Modern Web Guidance는 모든 추천에 브라우저 호환성을 기본으로 포함합니다. 모든 가이드에는 최신 웹 기능과 기준 지원 데이터 및 검증된 대체 패턴이 함께 제공됩니다. 이 게시물에서는 에이전트가 이 데이터를 사용하여 최신 크로스 브라우저 코드를 작성하는 방법을 살펴봅니다.

코딩 에이전트가 안내 없이 브라우저 지원을 잘못 처리하는 이유

가이드가 없으면 코딩 에이전트는 코드를 작성하기 전에 프로젝트에서 지원해야 하는 브라우저를 확인하는 경우가 거의 없습니다. 대신 다음 두 가지 극단 중 하나에 해당하는 경향이 있습니다.

기본적으로 레거시 코드로 설정: 모델 학습 데이터는 레거시 패턴으로 가득 차 있으며, Modern Web Guidance 평가에 따르면 모델은 여전히 이러한 패턴을 많이 추천합니다. 상담사는 기본 제공 HTML 또는 CSS 기능으로도 충분한 작업에 복잡한 JavaScript를 작성하거나 외부 라이브러리를 추가하는 경우가 많습니다.
안전망 없이 새로운 기능 사용: 에이전트에게 최신 웹 기능을 사용하도록 요청하면 일반적으로 지원 브라우저용 코드를 작성하고 거기서 중단됩니다. 기능 감지를 건너뛰고 대체 기능을 제외하므로 해당 기능을 지원하지 않는 브라우저에서 페이지가 손상됩니다.

Modern Web Guidance 평가 도구 모음의 데이터는 이러한 격차가 얼마나 흔한지 보여줍니다. 아직 모든 주요 브라우저에서 작동하지 않는 기능의 경우 평가 도구 모음은 기능 감지, @supports 규칙, 대체, 조건부 폴리필을 테스트합니다. 가이드가 없는 모델은 이러한 검사를 통과하는 비율이 43% 에 불과합니다. Modern Web Guidance를 사용 설정하면 통과율이 87%로 급증합니다.

기준 데이터가 모든 추천을 안내하는 방식

Modern Web Guidance는 Baseline을 사용하여 웹 기능에 대체가 필요한 시점을 결정합니다. Baseline은 핵심 브라우저 세트(데스크톱 및 모바일의 Chrome, Edge, Firefox, Safari) 전반의 지원을 세 가지 상태로 추적합니다.

Baseline 널리 사용 가능: 이 기능은 최소 30개월 동안 모든 핵심 브라우저에서 작동했습니다.
기준 새로 사용 가능: 이 기능은 마지막 브라우저에서 지원을 추가한 날짜부터 모든 핵심 브라우저에서 작동합니다.
제한적 사용 가능: 이 기능은 아직 모든 핵심 브라우저에서 지원되지 않습니다.

모든 Modern Web Guidance 가이드에는 web-features 패키지의 기본 제공 Baseline 상태 및 브라우저 버전 데이터가 포함되어 있습니다. 코딩 에이전트가 가이드를 로드하면 구현 안내와 함께 기능의 정확한 지원 상태, 출시일, 브라우저 버전을 가져옵니다. 예를 들면 다음과 같습니다.

Browser support for <dialog closedby>: Limited availability.
Supported by: Chrome 134 (Mar 2025), Edge 134 (Mar 2025), and Firefox 141 (Jul 2025).
Unsupported in: Safari.

기본적으로 Modern Web Guidance는 이 데이터를 기반으로 두 가지 규칙을 따릅니다.

기준 널리 사용 가능한 기능: 에이전트는 추가 기능 감지나 대체 코드 없이 이러한 기능을 직접 사용합니다. 이 규칙은 코드베이스를 간결하게 유지하고 불필요한 해결 방법을 방지합니다.
기준 새로 사용 가능 및 한정 재고 수량 기능: 이러한 기능에 대한 가이드에는 검증된 대체 전략이 포함되어 있습니다. 에이전트는 지원되는 경우 최신 기능을 사용하고 다른 브라우저에 깔끔한 대체 기능을 제공합니다.

Modern Web Guidance가 실제로 사용하는 4가지 대체 패턴

모든 웹 기능에 동일한 종류의 대체가 필요한 것은 아닙니다. Modern Web Guidance는 지원되지 않는 브라우저에서 기능이 작동하는 방식에 따라 각 기능을 네 가지 대체 접근 방식 중 하나에 매칭합니다.

대체 패턴	Modern Web Guidance에서 사용하는 경우
대체 코드가 없는 점진적 개선	지원되지 않는 브라우저가 레이아웃이나 동작을 중단하지 않고 안전하게 무시하는 장식 또는 추가 기능입니다.
`@supports` 규칙을 사용한 CSS 기능 감지	최신 CSS 기능에 의존하며 부분적으로 적용될 경우 깨져 보일 수 있는 시각적 스타일 또는 레이아웃 스타일
가벼운 맞춤 자바스크립트	이전 브라우저에서 동작을 복제하기 위해 작고 종속성이 없는 스크립트가 필요한 대화형 HTML 속성 또는 API입니다.
조건부로 로드된 polyfill	네이티브 지원이 누락된 경우에만 동적으로 로드되는 검증된 폴리필이 필요한 더 큰 CSS 또는 자바스크립트 기능

대체 코드가 없는 점진적 개선

일부 최신 기능은 페이지 작동 방식을 변경하지 않고 서체, 애니메이션 또는 페이지 로드 속도를 개선합니다. 브라우저가 이러한 기능을 인식하지 못하면 이를 무시하고 나머지 페이지를 정상적으로 렌더링합니다.

예를 들어 text-wrap: balance CSS 선언(Baseline 새로 사용 가능)은 제목의 줄 길이를 균일하게 합니다.

.balanced {
  text-wrap: balance;
}

Speculation Rules API(제한된 사용 가능 여부)는 예정된 페이지를 미리 가져오거나 사전 렌더링합니다. 지원되지 않는 브라우저는 <script type="speculationrules"> 블록과 인식되지 않는 CSS 선언을 안전하게 무시합니다.

<script type="speculationrules">
  {
    "prefetch": [{
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

이 동작으로 인해 에이전트는 추가 대체 코드 없이 이러한 기능을 직접 추가할 수 있습니다.

`@supports` 규칙을 사용한 CSS 기능 감지

다른 CSS 기능은 화면에서 요소의 위치나 스타일을 변경합니다. 스타일의 일부를 무조건 적용하면 지원되지 않는 브라우저에서 요소가 잘못된 위치에 렌더링될 수 있습니다.

예를 들어 위치가 지정된 도움말의 앵커 컨테이너 쿼리(container-type: anchored, 한정 재고 수량)를 사용하면 표시 영역 가장자리 근처에서 도움말이 뒤집힐 때 도움말의 화살표를 뒤집을 수 있습니다. 앵커 컨테이너 쿼리를 지원하지 않는 브라우저에서는 화살표가 뒤집기를 감지할 수 없으며 잘못된 방향을 가리킬 수 있습니다. Modern Web Guidance는 에이전트에게 화살표 스타일을 @supports (container-type: anchored) 규칙으로 래핑하도록 지시하여 @container anchored() 뒤집기 규칙도 지원하는 브라우저에서만 기본 화살표가 표시되도록 합니다.

@supports (container-type: anchored) {
  .tooltip-content::before {
    content: "▼";
    position: absolute;
    inset-block-end: 0;
  }
}

@container anchored(fallback: flip-block) {
  .tooltip-content::before {
    content: "▲";
    inset-block-start: 0;
    inset-block-end: auto;
  }
}

가벼운 맞춤 자바스크립트

모든 핵심 브라우저에서 상호작용 HTML 기능이 지원되지 않는 경우 서드 파티 라이브러리를 가져올 필요가 없습니다. 자체 포함된 상호작용의 경우 Modern Web Guidance는 기능 확인 뒤에 종속 항목이 없는 짧은 JavaScript 대체 기능을 제공합니다.

예를 들어 <dialog> 요소의 closedby="any" 속성(한정 재고 수량)을 사용하면 사용자가 배경을 클릭하여 모달 대화상자를 닫을 수 있습니다. closedby 속성을 지원하지 않는 브라우저의 경우 가이드에 HTMLDialogElement.prototype 객체를 먼저 확인하는 작은 클릭 리스너가 포함되어 있습니다.

const dialog = document.querySelector('dialog');

if (!('closedBy' in HTMLDialogElement.prototype)) {
  dialog.addEventListener('click', (event) => {
    if (event.target !== dialog) return;

    const rect = dialog.getBoundingClientRect();
    const clickedInDialog =
      rect.top <= event.clientY &&
      event.clientY <= rect.top + rect.height &&
      rect.left <= event.clientX &&
      event.clientX <= rect.left + rect.width;

    if (!clickedInDialog) {
      dialog.close();
    }
  });
}

조건부로 로드된 polyfill

CSS 앵커 위치 지정(제한된 사용 가능 여부) 또는 Temporal API(제한된 사용 가능 여부)와 같은 대규모 플랫폼 기능의 경우 맞춤 대체 기능을 직접 작성하는 것은 실용적이지 않습니다. 동시에 모든 사용자를 위해 폴리필을 번들로 묶으면 이미 이 기능을 지원하는 브라우저에 추가 다운로드 비용이 발생합니다.

이러한 경우 Modern Web Guidance는 에이전트에게 먼저 지원 여부를 확인하고 번들러 또는 CDN의 import() 표현식을 사용하여 검증된 폴리필을 동적으로 로드하도록 안내합니다. 지원 브라우저는 추가 코드를 다운로드하지 않지만 이전 브라우저는 필요에 따라 폴리필을 가져옵니다.

if (!CSS.supports('anchor-name: --a')) {
  await import('@oddbird/css-anchor-positioning');
}

프로젝트의 브라우저 지원 타겟 맞춤설정

기본적으로 Modern Web Guidance는 Baseline의 널리 사용 가능한 기능을 대체 없이 안전하게 사용할 수 있는 것으로 간주합니다. Baseline 새로 사용 가능 및 제한된 사용 가능 기능에 대한 대체가 필요합니다.

프로젝트에 따라 브라우저 요구사항이 다를 수 있습니다. 예를 들어 특정 Baseline 연도를 타겟팅하거나, Electron 앱용으로 빌드하거나, 폴리필을 제외하여 번들을 작게 유지할 수 있습니다.

프로젝트의 AGENTS.md 또는 CLAUDE.md 파일에서 맞춤 브라우저 지원 정책을 정의할 수 있습니다.

## Browser support policy

- Target **Baseline 2024** or earlier. Omit fallbacks and `@supports` blocks for features that reached Baseline in or before 2024.
- Allow **Baseline Newly available** features when paired with a custom fallback of 20 lines or fewer.
- Don't add polyfill dependencies. Prefer CSS `@supports` rules or built-in HTML fallbacks instead.

모든 가이드에는 각 기능의 기준 상태, 출시일, 최소 브라우저 버전이 포함되어 있습니다. 에이전트는 코드를 작성하기 전에 정책을 이 호환성 데이터와 비교합니다. 기능이 이미 타겟을 충족하는 경우 에이전트는 최신 코드를 작성하고 대체 코드를 건너뜁니다.

Modern Web Guidance 시작하기

프로젝트에 Modern Web Guidance를 추가하려면 프로젝트 디렉터리에서 대화형 설치 프로그램을 실행합니다.

npx modern-web-guidance@latest install

이전 버전이 설치되어 있는 경우 업데이트 명령어를 실행하여 버전 1.0으로 업그레이드합니다.

npx modern-web-guidance@latest update

Claude Code, Codex, Cursor, Antigravity, GitHub Copilot, WebStorm, Kimi Code, Grok의 플러그인 마켓플레이스를 통해서도 Modern Web Guidance를 설치할 수 있습니다.

자세한 내용은 다음 리소스를 참고하세요.

기본적으로 교차 브라우저: Modern Web Guidance에서 Baseline 대체가 작동하는 방식 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.