iframe 가이드

iframe은 생각보다 자주 보이지만,
막상 직접 다루려고 하면 높이 문제나 도메인 제약 때문에 꽤 까다로운 태그다.

특히 그냥 붙여 넣기만 하면 되는 줄 알았다가
높이가 안 맞거나, 내부 페이지에 접근이 안 되거나, 반응형 대응이 꼬이는 경우가 많다.

이번 글은 실무에서 iframe을 쓸 때 헷갈리기 쉬운 포인트들을 기준으로 정리해봤다.

---

iframe이란?

HTML 페이지 안에 또 다른 HTML 페이지를 삽입하는 태그.
말 그대로 "내부 프레임(inline frame)".

<iframe src="/other_page.php" width="400" height="300"></iframe>

---

왜 쓰는지

• 외부 콘텐츠 삽입 — 유튜브, 지도, 결제창 등 다른 도메인의 페이지를 그대로 가져올 때
• 독립된 환경 격리 — iframe 안의 CSS/JS가 부모 페이지에 영향을 주지 않음 (반대도 마찬가지)
• 레거시 페이지 재사용 — 기존 페이지를 수정 없이 다른 페이지 안에 넣고 싶을 때

---

언제 쓰는지

• 결제 모듈 (KCP, 이니시스 등) — 보안상 iframe 필수
• 외부 서비스 임베드 (YouTube, Google Maps, 광고)
• 사이드 패널에 별도 페이지를 띄울 때

---

장점

• 부모/자식 페이지의 CSS, JS가 서로 완전히 격리됨
• 외부 도메인 콘텐츠를 간단히 삽입 가능
• 페이지 전체 새로고침 없이 iframe만 교체 가능

---

주의할점 (단점)

1. 높이 자동조절 불가

iframe은 일반 <div>와 다르게 height: auto가 안 먹힌다.
height를 지정하지 않으면 브라우저 기본값 150px이 적용된다.

그래서 아무 생각 없이 붙이면
내용은 많은데 iframe은 150px짜리 박스만 보이는 상황이 생긴다.

콘텐츠에 맞추려면 JS로 내부 scrollHeight를 읽어서 직접 세팅해야 한다.

// iframe 내부 페이지에서 부모 iframe 높이를 세팅
parent.document.getElementById("my_iframe").height = document.body.scrollHeight;

상한/하한이 필요하면 Math.min, Math.max를 사용한다.

// 최소 205px, 최대 495px
const nextHeight = Math.max(Math.min(document.body.scrollHeight, 495), 205);
parent.document.getElementById("my_iframe").height = nextHeight;

2. HTML 속성 height vs CSS style.height 충돌

iframe의 높이를 세팅하는 방법이 두 가지 있다.

// 방법 1: HTML 속성
iframe.height = "300";

// 방법 2: 인라인 스타일
iframe.style.height = "300px";

이 두 가지를 섞어 쓰면 충돌이 발생한다.
인라인 style이 HTML 속성보다 우선하므로, 이전에 style.height를 세팅한 적이 있으면 이후 iframe.height 변경이 무시될 수 있다.

한 가지 방식으로 통일하거나, 전환 시 이전 값을 초기화해야 한다.

// 인라인 스타일 초기화
iframe.style.height = "";

실무에서는 이런 식으로 섞어 쓰다가
“분명 높이를 바꿨는데 왜 안 바뀌지?” 하고 한참 헤매는 경우가 많다.

3. CSS !important와의 관계

#my_iframe { height: 495px !important; }
#my_iframe { max-height: 495px !important; }

height: !important는 JS의 인라인 스타일 세팅도 덮어쓸 수 있어서,
동적 높이 제어가 필요하면 max-height/min-height를 사용하는 것이 좋다.

4. 성능

별도 문서를 로드하므로 CSS, JS 등 리소스가 이중으로 로딩된다.
페이지에 iframe이 많을수록 성능 부담이 커진다.

5. SEO

iframe 안의 콘텐츠는 검색엔진에서 별도의 페이지로 인식된다.

즉,

• iframe src의 페이지는 따로 크롤링될 수 있지만
• 부모 페이지의 SEO에는 거의 기여하지 않는다

👉 iframe은 SEO에 불리하다기보다
SEO 관점에서 “기여하지 않는 구조”에 가깝다.

6. 반응형 어려움

내부 콘텐츠 크기가 변해도 부모가 자동으로 감지하지 못한다.
MutationObserver 등으로 변화를 감시하고 수동으로 높이를 업데이트해야 한다.

new MutationObserver(function() {
    parent.document.getElementById("my_iframe").height = document.body.scrollHeight;
}).observe(document.body, { childList: true, subtree: true });

7. 크로스 도메인 제약

다른 도메인의 iframe이면 JS로 내부 콘텐츠에 접근할 수 없다 (동일 출처 정책).
이 경우 postMessage를 사용해야 한다.

8. postMessage

postMessage는 부모 페이지와 iframe 사이에서
👉 메시지 형태로 데이터를 주고받는 방식이다.

// iframe 내부에서 부모에게 높이 전달
parent.postMessage({ type: 'resize', height: document.body.scrollHeight }, '*');

// 부모 페이지에서 수신
window.addEventListener('message', function(e) {
    if (e.data.type === 'resize') {
        document.getElementById("my_iframe").style.height = e.data.height + 'px';
    }
});

⚠️ 보안 주의

parent.postMessage(data, '*');

*는 모든 도메인을 허용하는 방식이라 위험하다.

parent.postMessage(data, 'https://example.com');

window.addEventListener('message', function(e) {
    if (e.origin !== 'https://example.com') return;
});

---

iframe을 쓰면 안 되는 경우

• 같은 도메인인데 단순 UI 삽입 → AJAX + div가 훨씬 편함
• SEO가 중요한 콘텐츠 → 본문, 상품 설명
• 반응형이 중요한 경우 → 유지보수 난이도 상승

---

대안

방식	설명	적합한 경우
AJAX + div	fetch()로 HTML 삽입	같은 도메인
Web Component	Shadow DOM으로 격리	iframe 대체
모달/팝업	JS로 토글	단순 UI

---

한 줄 요약

iframe은 격리와 외부 삽입에는 강하지만,
높이 제어와 SEO, 반응형 대응에서 까다롭다.