Home
AMP
Component

구글 AMP – iFrames

5 min read

구글 amp-iframe은 페이지에 iframe을 표시하는데 사용됩니다. amp-iframe에 몇 가지 조건을 추가해야 하므로 페이지에서 일반 iframe을 사용할 수 없습니다. 이 글에서는 이에 대해 자세히 설명합니다.

iFrame에 따라야 할 조건

AMP 페이지에서 iframe을 사용할 때 주의해야 할 조건은 다음과 같습니다.

  • iframe에서 사용되는 URL은 https 요청 또는 데이터 URI이거나 srcdocattribute를 사용해야 합니다.
  • 기본적으로 amp-iframe에는 샌드 박스 속성이 추가됩니다. 샌드 박스 속성은 비어 있도록 설정됩니다. 샌드 박스 값이 비어 있으면 iframe이 maximum sandboxed 처리됨을 의미합니다. (iframe에 대한 추가 제한.) 아래 예제의 도움으로 논의할 값을 샌드 박스에 추가할 수 있습니다.
  • amp-iframe은 페이지 상단에 표시할 수 없습니다. 상단에서 스크롤할 때 상단에서 거의 600px 떨어져 있거나 표시 영역의 처음 75% 내에 있어야 합니다. 처음에 iframe을 표시해야 하는 경우 튜토리얼의 뒷부분에서 예제를 통해 논의할 iframe에 placeholder를 추가합니다.
  • amp-iframe은 컨테이너와 원본이 동일하지 않아야 합니다. 예를 들어 기본 사이트가 www.xyz.com에있는 경우 iframe src를 www.xyz.com/urlname으로 사용할 수 없습니다. xyz.com, example.xyz.com 등과 같은 다른 것을 취할 수 있습니다.

iframe을 사용하려면 다음 스크립트를 추가해야 합니다.

<script async custom-element="amp-iframe" 
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Amp-iframe 형식은 다음과 같습니다.

<amp-iframe width="600" title="Google map" height="400" layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-popups"
            frameborder="0" 
            src="https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=embed">
</amp-iframe>

아래에 주어진 것처럼 iframe을 사용하여 구글 맵를 표시하는 작업 예제의 도움으로 이를 이해하겠습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Iframe</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-iframes.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp-custom>
    div {
      height:850px;
      text-align:center;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Iframe</h3>
<div>
  Google Maps in Iframe
</div>
<h3>Google AMP - Amp Iframe</h3>
<amp-iframe width="600"
            title="Google map"
            height="400"
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-popups"
            frameborder="0"
            src="https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=emb
ed">
</amp-iframe>
</body>
</html>

iframe을 상단에서 600px 이상 떨어진 곳에 배치했습니다. 아래와 같이 오류가 발생합니다.

위의 예에서는 아래와 같은 값을 가진 샌드 박스를 사용했습니다.

sandbox="allow-scripts allow-same-origin allow-popups"

Sandbox 속성은 iframe 내부에로드되는 콘텐츠에 대한 권한처럼 작동합니다. 여기에서는 구글 맵 링크에서 오는 모든 스크립트를 로드할 수 있습니다. 샌드 박스 속성을 제공하지 않는 경우 iframe에로드 될 콘텐츠를 차단하는 오류가 표시됩니다.

샌드 박스에 대한 올바른 권한을 부여해야 합니다. 여기에서 샌드 박스에 부여할 모든 권한에 대한 세부 정보를 찾을 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/iframe#attr-sandbox

amp-iframe 내부의 placeholder 속성을 사용하여 600px 이상의 조건을 제거할 수 있습니다.

동일한 작업 예가 아래에 나와 있습니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Iframe</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-iframes.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <style amp-custom>
    div {
      height:850px;
      text-align:center;
    }
  </style>
</head>
<body>
<h3>Google AMP - Amp Iframe</h3>
<div>
  Google Maps in Iframe
</div>
<h3>Google AMP - Amp Iframe</h3>
<amp-iframe width="600"
            title="Google map"
            height="400"
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-popups"
            frameborder="0"
            src="https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=emb
ed">
  <amp-img layout="fill"
           src="images/loading.jpg"
           placeholder></amp-img>
</amp-iframe>
</body>
</html>

다음과 같이 amp-img를 자리표시자로 사용했습니다.

<amp-iframe width="600"
            title="Google map"
            height="400"
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-popups"
            frameborder="0"
            src="https://maps.google.com/maps?q=telangana&t=&z=13&ie=UTF8&iwloc=&output=emb
ed">
  <amp-img layout="fill"
           src="images/loading.jpg"
           placeholder></amp-img>
</amp-iframe>

이 경우 75% 뷰포트에서 600px 및 amp-iframe 제한은 고려하지 않으며, 이미지에 표시된 로딩 표시기 (점 3 개)가 기본적으로 amp-iframe src에 대한 자리표시자로 사용됩니다. iframe 콘텐츠가 로드되면 이미지가 제거되고 iframe 콘텐츠가 아래 표시된 출력과 같이 표시됩니다.

방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • 구글 AMP – 광고
    광고는 게시자의 수익원이기 때문에 게시자의 웹 페이지에서 중요한 역할을 합니다. Amp 페이지의 경우 약간의 차이가 있습니다. Amp 페이지는 타사 javascript 파일을 추가할 수 없습니다. 페이지에 광고를 표시하기 위해 페이지에 광고를 표시하는데 도움이 되는 amp-ad라는 amp 구성 요소가 있습…
  • 구글 AMP - 미디어
    이 글에서는 jwplayer 및 유튜브 같은 타사 파트너의 비디오 및 오디오를 표시하는 방법에 대해 설명합니다. 다음에 대해 자세히 알아보겠습니다. 구글 AMP - JwPlayer 구글 AMP - 유튜브 구글 AMP - 오디오 구글 AMP - JwPlayer jwplayer를 사용하…
  • 구글 AMP – 애니메이션
    Amp-animation은 다른 amp 구성 요소에서 사용할 애니메이션을 정의하는 amp 구성 요소입니다. 이 글에서는 이에 대해 자세히 설명합니다. Amp-animation을 사용하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-animati…
  • 구글 AMP – 데이터 바인딩
    Amp-bind는 데이터 바인딩 및 JS 유사 표현식을 사용하는 작업을 기반으로 amp 구성 요소 및 html 태그에 상호 작용을 추가하는데 도움이 됩니다. 이 글에서는 데이터 바인딩에 대해 자세히 설명합니다. Amp-bind를 사용하려면 페이지에 다음 스크립트를 추가해야 합니다. <scri…
  • 구글 AMP – 애널리틱스
    Amp 애널리틱스는 페이지에서 데이터를 추적하는데 사용되는 amp 구성 요소입니다. 페이지의 모든 사용자 상호 작용을 기록하고 저장하여 추가 개선 또는 비즈니스 목적을 위해 데이터를 분석할 수 있습니다. amp-analytics 구성 요소를 사용하려면 head 섹션에 다음 스크립트를 추가해야 합니…
  • 구글 AMP – 소셜 위젯
    Amp는 외부 라이브러리를 로드하지 않고도 페이지에 소셜 위젯을 표시할 수 있도록 지원합니다. 이 글에서는 몇 가지 인기있는 소셜 위젯에 대해 설명합니다. 구글 AMP - 페이스북 구글 AMP - 트위터 구글 AMP - 핀터레스트 구글 AMP - 페이스북 amp-facebook 구성…

댓글 쓰기