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

Chrome 154의 반응형 iframe

Sebastian Benz

Bramus

게시일: 2026년 9월 16일

Chrome 154에서는 반응형 크기의 iframe 지원이 추가되어 <iframe>가 내장된 문서의 내재적 크기에 따라 자체적으로 크기를 조정할 수 있습니다. <iframe>를 사용하는 서드 파티 댓글 위젯, 높이가 다양한 소셜 미디어 삽입 또는 기타 삽입 유형을 원활하게 삽입하는 데 적합합니다.

Browser Support

Source

반응형 iframe은 개발자가 iframe 콘텐츠를 수동으로 측정하고, postMessage()로 크기를 전송하고, 삽입 페이지에서 iframe 크기를 수동으로 업데이트하는 일반적인 패턴을 대체합니다.

이 녹화 영상에는 iframe을 사용하여 페이지에 삽입된 댓글 양식이 표시됩니다. 사용자가 댓글을 추가하면 삽입 페이지 내 iframe의 높이가 동적으로 업데이트되어 스크롤바 없이 원활한 시각적 환경이 만들어집니다.

콘텐츠에 맞게 iframe 크기 조정

기본적으로 iframe에는 자체 뷰포트가 있습니다. 삽입된 문서가 뷰포트보다 긴 경우 사용자에게 추가 스크롤 막대가 표시될 수 있습니다. 반응형 iframe 크기를 사용하면 삽입 페이지에서 콘텐츠 기반 크기를 대신 사용할 수 있습니다.

.embed {
  width: 100%;
  frame-sizing: content-height;
}

삽입된 문서는 다음을 선택해야 합니다.

<meta name="responsive-embedded-sizing" content="allow-origins=*">

전체 예는 다음과 같습니다.

<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments">
</iframe>

/comments.html의 경우:

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>

이제 iframe이 고정 높이 표시 영역처럼 동작하는 대신 삽입된 문서의 콘텐츠 높이를 사용할 수 있습니다.

`frame-sizing` 사용

새로운 frame-sizing 속성은 iframe의 콘텐츠에서 파생되는 측정기준을 제어합니다.

지원되는 값은 다음과 같습니다.

frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;

auto는 기존 iframe 크기 조정 동작을 유지합니다.

대부분의 가로 쓰기 모드에서 content-height 및 content-block-size은 삽입 요소를 세로로 확장하는 데 가장 유용한 값입니다.

frame-sizing를 다른 CSS 제약 조건과 결합할 수도 있습니다.

.embed {
  width: 100%;
  max-height: 80vh;
  frame-sizing: content-height;
}

동적 콘텐츠 변경 후 크기 조정

브라우저는 삽입된 문서 내의 모든 레이아웃 변경사항을 지속적으로 관찰하지 않습니다.

초기 레이아웃 후 iframe의 콘텐츠가 변경되는 경우(예: 댓글을 더 로드하거나 패널을 펼친 후) 삽입된 문서는 window.requestResize()를 사용하여 새 크기 계산을 요청할 수 있습니다.

async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  window.requestResize();
}

문서의 모든 변경사항이 적용된 후 레이아웃 전에 window.requestResize()를 호출하는 것이 가장 좋습니다. 이 명시적 업데이트 모델은 iframe 크기를 변경하면 표시 영역이 변경되고, 콘텐츠가 변경되고, 크기가 다시 변경되는 크기 조정 루프를 방지하는 데 도움이 됩니다.

교차 출처 삽입

반응형 크기 조정은 교차 출처 iframe과 함께 사용할 수도 있습니다. 삽입된 문서는 허용되는 출처를 제한할 수 있습니다.

<meta
  name="responsive-embedded-sizing"
  content="allow-origins=https://publisher.example">

이렇게 하면 반응형 크기가 https://publisher.example로만 제한됩니다. 여러 출처는 공백으로 구분됩니다(content="allow-origins=https://publisher1.example https://publisher2.example").

서드 파티 위젯의 경우 액세스를 필요한 출처로 제한합니다. 이 메커니즘은 페이지를 삽입할 수 있는 사이트를 제어하는 콘텐츠 보안 정책의 frame-ancestors 지시어와 같은 기존 iframe 보안 제어를 보완합니다.

점진적 개선

기능 쿼리를 사용하여 frame-sizing를 지원하지 않는 브라우저의 기존 대체 기능을 유지할 수 있습니다.

.widget {
  width: 100%;
  height: 500px;
}

@supports (frame-sizing: content-height) {
  .widget {
    height: auto;
    frame-sizing: content-height;
  }
}

삽입된 문서가 동적으로 업데이트되는 경우 requestResize()를 기능 감지할 수도 있습니다.

if ("requestResize" in window) {
  window.requestResize();
}

따라서 지원이 확대되는 동안 기존 iframe 크기 조정 코드를 대체로 유지할 수 있습니다.

직접 해 보기

다음 데모에서 반응형 iframe 크기 조정을 사용해 보세요.