iframe은 "Inline Frame"의 약자로, 웹 페이지 내에 다른 웹 페이지를 포함시키기 위해 사용되는 HTML 요소입니다. 즉, 하나의 웹 페이지 안에서 다른 웹 페이지를 작은 프레임 안에 삽입하여 보여줄 수 있는 기능을 제공합니다. 이는 웹 페이지 간의 콘텐츠 통합과 상호작용을 가능하게 하며, 다양한 사용 사례를 위해 활용됩니다.

2.iframe이 사용될 때

1) 다른 웹사이트의 콘텐츠를 내 웹사이트에 삽입

웹사이트에서는 Youtube 영상, SlideShare의 슬라이드쇼, 구글의 지도 또는 광고용 콘텐츠를 삽입하는 등 다양한 이유로 iframe을 사용합니다. 사용자가 문서를 다운로드할 필요가 없는 PDF를 삽입할 때에도 iframe을 사용할 수 있어요.

2) 페이지 내부를 별도의 영역으로 구분

웹사이트의 좌측을 메뉴 영역, 우측을 메인 콘텐츠 영역으로 구분하고 싶거나 페이지 하단의 광고 부분을 분리할 때에도 iframe을 사용할 수 있습니다.

3) 동적 콘텐츠 로딩

동적으로 로딩되는 콘텐츠나 웹 앱을 iframe을 통해 현재 페이지 내에서 표시할 수 있습니다. 이를 통해 웹 페이지 간의 상호작용을 가능하게 할 수 있어요.

3. iframe의 장단점

1) 장점

✅ 손쉽게 외부 콘텐츠를 가져올 때 좋아요

iframe을 사용하면 다른 웹사이트의 내용을 손쉽게 현재 페이지에 내장하여 표시할 수 있어 다른 서비스의 콘텐츠를 통합하여 보여줄 때 유용합니다.

아래의 간단한 코드로 지도를 쉽게 삽입할 수 있어요. (출처: mdn web docs)


&lt;iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"&gt;
&lt;/iframe&gt;

✅ 같은 콘텐츠를 여러 번 사용할 때 좋아요

다양한 페이지에서 같은 콘텐츠를 여러 번 사용해야 할 때, iframe을 사용하여 중복 작업을 피할 수 있습니다.

✅ 현재 페이지에 영향을 주지 않아 좋아요

iframe 안의 콘텐츠는 외부 웹 페이지와 분리되어 독립적으로 동작하기 때문에, 외부 콘텐츠의 변화가 현재 페이지에 영향을 주지 않을 수 있습니다.

2) 단점

⚠️ 보안에 취약해질 수 있어요

iframe을 사용하면 외부 콘텐츠가 내부 페이지와 같은 도메인 및 보안 정책으로 실행될 수 있어 사이트에 XSS(Cross Site Scripting)와 같은 보안 위험이 발생할 수 있습니다.

⚠️ 접근성 문제가 발생할 수 있어요

iframe 안에 있는 콘텐츠는 원래 문서와 분리되어서 접근성에 문제가 있을 수 있습니다. 스크린 리더 등의 보조 기술을 사용하는 사용자들에게는 불편을 줄 수 있습니다.

⚠️ SEO에 좋지 못한 영향을 줄 수 있어요

예전에는 검색 엔진이 iframe의 내용을 가져올 수 없었기 때문에 iframe은 SEO에 좋지 못하다는 이야기가 있었습니다. 그러나 지금은 iframe 자체가 SEO에 영향을 준다고 보기에는 어렵습니다.

이제는 검색 엔진이 iframe 감지하고 이를 다른 웹사이트의 콘텐츠로 인식하기 때문에 iframe은 검색 엔진 순위에 도움을 주지도, 해를 끼치지도 않습니다.

그러나 검색 결과에서 상위에 노출되고자 하는 메인 페이지는 iframe 사용을 자제하는 것이 좋습니다. 메인 페이지에는 외부 콘텐츠가 아닌 고유하고 유용한 콘텐츠로 구성하는 것이 SEO에 좋기 때문입니다.

⚠️ 크기 조절이 어려울 수 있어요

iframe은 원본 콘텐츠의 크기에 따라 크기가 조절되기 때문에, 반응형 레이아웃 디자인에 어려움을 줄 수 있습니다.

⚠️ 사용자 경험이 저하될 수 있어요

iframe 안의 콘텐츠가 로딩되는 동안 페이지 내용이 멈추거나 지연될 수 있어 사용자 경험이 저하될 수 있습니다.

4.Selenium에서 iframe 내 정보를 가져오는 방법

Selenium에서 다음과 같은 단계로 iframe에 접근할 수 있습니다.

1) 웹페이지 접속


from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()  # 웹 드라이버 선택 (예: Chrome)
driver.get("URL_OF_YOUR_PAGE")  # 접근할 웹 페이지의 URL 입력

2) iframe 엘리먼트 식별 find_element 메서드를 사용하여 iframe을 찾을 수 있습니다. 이 때, iframe의 id, name, index 등을 활용할 수 있습니다.


iframe_element = driver.find_element(By.ID, "iframe_id")  # iframe의 id를 사용하여 찾는 예시

3) iframe 내부로 전환 switch_to.frame() 메서드를 사용하여 iframe 내부로 컨텍스트를 변경합니다.


driver.switch_to.frame(iframe_element)  # iframe 내부로 전환

4) iframe 내부에서 필요한 작업 수행


driver.find_element(By.CLASS_NAME, "element_class") # iframe 안의 엘리먼트의 class로 찾는 예시

5) 작업이 끝난 후 원래의 컨텍스트로 돌아오기


driver.switch_to.default_content()  # 원래의 컨텍스트로 복귀

5. Watir에서 iframe 내 정보를 가져오는 방법

Watir에서는 다음과 같은 단계로 iframe에 접근할 수 있습니다.

1) 웹페이지 접속


require 'watir'

browser = Watir::Browser.new :chrome  # 브라우저 선택 (예: Chrome)
browser.goto 'URL_OF_YOUR_PAGE'      # 접근할 웹 페이지의 URL 입력

2) iframe 엘리먼트 식별


iframe_element = browser.iframe(id: 'iframe_id')  # iframe의 id를 사용하여 찾는 예시

3) iframe 내부에서 필요한 작업 수행


iframe.element(xpath: "//button[@class='CLASS_NAME']") # iframe 안의 엘리먼트를 class로 찾는 예시

6.마무리

웹 크롤러를 만들 때 분명히 존재하는 xpath인데도 element를 찾지 못하는 경우가 있다면 대부분의 경우 그 element는 iframe 안에 있을 수 있습니다. 이처럼 크롤링을 할 때 iframe 안의 요소는 바로 찾을 수 없고 따로 접근하기 위한 방법이 필요합니다. 오늘은 iframe의 개념과 장단점, 그리고 웹 크롤러를 만들 때 iframe에 접근하는 방법에 대해 알아보았습니다. 앞서 언급한 방법들은 웹 크롤링 능력을 더욱 향상시키고 다양한 데이터를 수집하는 데에 큰 도움이 될 것입니다.