개발자들 수십 년간 고통받던 'iframe 높이 맞추기' 드디어 브라우저 기본 지원 등장

요약 웹 개발에서 오랫동안 개발자들을 괴롭혀 온 고질적인 'iframe 높이 자동 조절' 문제가 마침내 해결될 조짐을 보이고 있습니다. 크롬 154(Chrome 154)부터는 자바스크립트 측정 스크립트나 postMessage 없이도 CSS 한 줄로 내부 콘텐츠 높이에 맞춰 iframe 크기를 늘릴 수 있는 새로운 기능이 도입되었습니다. 기존에는 결제 창이나 외부 위젯 같은 크로스 도메인(cross-origin) iframe의 경우, 보안 정책 때문에 부모 페이지가 내부 콘텐츠의 실제 높이를 직접 알 수 없었습니다. 이 때문에 개발자들은 iframe 내부에서 ResizeObserver로 높이를 잰 뒤 postMessage로 부모 페이지에 전송하고, 부모 페이지가 이를 수신해 인라인 스타일로 높이를 강제 변경하는 복잡한 연동 코드를 짜야 했습니다. 화면 회전, 늦게 로딩되는 폰트나 이미지, 폼 에러 메시지 출력 등 높이가 변할 때마다 재측정이 필요했고, 특히 모바일에서 결제 도중 iframe 내부 스크롤바가 생기면 최악의 사용자 경험을 유발하곤 했습니다. 이번에 추가된 방식은 매우 간단합니다. 부모 페이지에서는 iframe CSS에 `frame-sizing: content-height;` 속성을 한 줄 추가하면 됩니다. 다만 보안을 위해 iframe 내부 페이지가 이에 동의(opt-in)해야 합니다. 내부 페이지의 `<head>`에 허용할 도메인을 명시한 메타 태그(`<meta name="responsive-embedded-sizing" content="allow-origins=...">`)가 반드시 포함되어 있어야 브라우저가 자동으로 높이를 맞춰줍니다. 이후 에러 메시지나 단계 전환 등으로 내부 높이가 동적으로 변할 때는 내부 스크립트에서 `window.requestResize()` 함수만 호출해주면 브라우저가 알아서 다시 크기를 계산합니다. 이 기능은 결제 폼, 외부 댓글창, 설문조사 위젯, 그리고 직접 렌더링하는 sandboxed iframe 미리보기 등에서 매우 유용하게 쓰일 수 있습니다. 다만 외부 결제사나 위젯 제공업체가 해당 메타 태그를 지원해 주어야 하고, 현재는 크로미엄(Chromium) 기반 브라우저 전용 기능이라 파이어폭스나 사파리 미지원에 대비한 폴백(fallback)이 필요하다는 점이 과제로 꼽힙니다.