크롤링 실패? 바로 이 문제 때문일 거에요! iframe 해결의 모든 것

크롤링에서 iframe 문제 해결하기: Selenium과 Watir 방법 포함

0. 크롤링이 안되는 요소가 있을 때: iframe에 접근하기

웹크롤러를 만들다 보면 한 번쯤은 만나 검색하게 되는 것이 iframe입니다. 오늘은 iframe은 개념과 장단점, 사용 사례에 대해 알아보고 Selenium과 Watir를 사용해 iframe 콘텐츠에 접근하는 방법도 살펴보겠습니다.
 
 

1. iframe의 개념

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

2.iframe이 사용될 때

1) 다른 웹사이트의 콘텐츠를 내 웹사이트에 삽입
  • 웹사이트에서는 Youtube 영상, SlideShare의 슬라이드쇼, 구글의 지도 또는 광고용 콘텐츠를 삽입하는 등 다양한 이유로 iframe을 사용합니다. 사용자가 문서를 다운로드할 필요가 없는 PDF를 삽입할 때에도 iframe을 사용할 수 있어요.
2) 페이지 내부를 별도의 영역으로 구분
  • 웹사이트의 좌측을 메뉴 영역, 우측을 메인 콘텐츠 영역으로 구분하고 싶거나 페이지 하단의 광고 부분을 분리할 때에도 iframe을 사용할 수 있습니다.
3) 동적 콘텐츠 로딩
  • 동적으로 로딩되는 콘텐츠나 웹 앱을 iframe을 통해 현재 페이지 내에서 표시할 수 있습니다. 이를 통해 웹 페이지 간의 상호작용을 가능하게 할 수 있어요.
 
 

3. iframe의 장단점

1) 장점

✅ 손쉽게 외부 콘텐츠를 가져올 때 좋아요
  • iframe을 사용하면 다른 웹사이트의 내용을 손쉽게 현재 페이지에 내장하여 표시할 수 있어 다른 서비스의 콘텐츠를 통합하여 보여줄 때 유용합니다.
  • 아래의 간단한 코드로 지도를 쉽게 삽입할 수 있어요. (출처: mdn web docs)
<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"> </iframe>
 
✅ 같은 콘텐츠를 여러 번 사용할 때 좋아요
  • 다양한 페이지에서 같은 콘텐츠를 여러 번 사용해야 할 때, 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에 접근하는 방법에 대해 알아보았습니다. 앞서 언급한 방법들은 웹 크롤링 능력을 더욱 향상시키고 다양한 데이터를 수집하는 데에 큰 도움이 될 것입니다.
 

이 글도 함께 읽어보세요: