HTML iframe 태그: 웹페이지에 외부 콘텐츠 임베딩하기

iframe 태그는 웹페이지에 다른 웹페이지나 외부 콘텐츠를 임베딩할 때 사용하는 HTML 요소입니다. 주로 외부 웹사이트, 동영상, 지도 등을 페이지 내에 삽입하여 표시할 수 있으며, 간단한 코드로 다양한 기능을 활용할 수 있어 유용합니다. 그러나 사용 시 몇 가지 단점과 보안 고려사항이 있어 주의가 필요합니다.

iframe 기본 예제 코드

아래는 iframe 태그를 사용하여 Google Maps를 이용한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Maps iframe 예제 - 서울</title>
</head>
<body>

    <h1>Google Maps를 활용한 iframe 예제</h1>
    <p>아래는 서울의 위치를 Google Maps로 임베딩한 예제입니다.</p>

    <iframe
        width="600"
        height="450"
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3164.952925919692!2d126.97829131531515!3d37.56653527979883!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca3b6ea8a1e21%3A0x5b89b8e1c9b9c27f!2z7ISc7Jq47Yq567OE7Iuc!5e0!3m2!1sko!2skr!4v1698416012345!5m2!1sko!2skr"
        style="border:0;"
        allowfullscreen=""
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>

</body>
</html>

src 속성의 URL에 서울의 위치 좌표가 포함되어 있어 서울의 지도가 표시됩니다.
width와 height는 iframe의 크기를 설정하며, allowfullscreen, loading="lazy", referrerpolicy 속성은 성능과 보안을 위해 추가되었습니다.

▼ 실행 결과

iframe 태그의 장단점

장점

외부 콘텐츠 임베딩: 다른 웹사이트나 애플리케이션의 콘텐츠를 쉽게 포함할 수 있습니다.
동영상 및 지도 통합: YouTube 동영상이나 Google Maps를 웹페이지에 직접 삽입하여 사용자 경험을 향상시킬 수 있습니다.
HTML5 지원: 최신 HTML5 표준을 지원하여 다양한 미디어 콘텐츠 임베딩에 적합합니다.

단점

느린 로딩 시간: 외부 콘텐츠를 불러오기 때문에 페이지 로딩 속도가 느려질 수 있습니다.
SEO에 불리: 임베딩된 콘텐츠는 검색 엔진이 인식하지 못하는 경우가 많아 SEO 최적화에 불리할 수 있습니다.
스타일 커스터마이징 제한: 임베딩된 콘텐츠의 스타일을 변경하기 어렵습니다.

iframe 사용 시 보안 고려사항

iframe을 사용할 때는 보안에 주의해야 합니다. 외부 콘텐츠를 임베딩할 때 ‘sandbox’ 속성을 사용하면 보안을 강화할 수 있습니다. 아래 예제는 sandbox 속성을 활용한 iframe 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe Example - bluesharehub.com</title>
</head>
<body>

    <h1>iframe으로 외부 콘텐츠 임베딩하기</h1>
    <p>아래는 <strong>bluesharehub.com</strong> 웹사이트를 iframe으로 임베딩한 예제입니다.</p>

    <iframe 
        src="https://bluesharehub.com" 
        width="560" 
        height="315" 
        sandbox="allow-same-origin allow-scripts">
    </iframe>

</body>
</html>

Sandbox 속성 설명: 이 속성은 임베딩된 콘텐츠가 특정 행동을 제한하는 데 유용합니다. 예를 들어, “allow-same-origin”은 임베딩된 콘텐츠에서 동일 출처 요청만 허용하고, “allow-scripts”는 스크립트 실행을 허용합니다. 필요한 속성을 선택하여 보안을 강화할 수 있습니다.

iframe을 대체하는 방법

iframe 외에도 JavaScript 등을 이용하여 외부 콘텐츠를 가져오는 방법이 있습니다. 아래 예제는 Fetch API를 활용하여 JSON 데이터를 가져와 HTML에 표시하는 방법입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON 데이터 가져오기 예제</title>
</head>
<body>
    <h1>게시물 제목</h1>
    <div id="content">로딩 중...</div>

    <script>
        fetch('https://jsonplaceholder.typicode.com/posts/1')
            .then(response => response.json())
            .then(data => {
                document.getElementById('content').innerText = data.title;
            })
            .catch(error => {
                document.getElementById('content').innerText = '데이터를 불러오는 데 실패했습니다';
                console.error('Error:', error);
            });
    </script>
</body>
</html>

이 방법은 페이지에 더 많은 제어권을 부여하며, 콘텐츠가 iframe처럼 고립되지 않고 웹페이지와 통합됩니다. 하지만 Fetch API는 JSON과 같은 데이터만 불러올 수 있으며, 전체 HTML 콘텐츠 임베딩에는 적합하지 않습니다.

▼ 실행 결과

☞ iframe은 외부 콘텐츠를 간단하게 추가할 수 있지만, 보안 및 성능 최적화를 위해 다른 대안과 함께 고려해보는 것이 좋습니다.

함께 보면 좋은 게시글

이 글이 도움이 되셨다면 공유 부탁 드립니다.