이 가이드에서는 다음을 배우게 됩니다:
- GPT Vision이 기존 파싱 기법을 뛰어넘는 데이터 추출 작업에 탁월한 선택인 이유.
- Python에서 GPT Vision을 활용한 시각적 웹 스크래핑 수행 방법.
- 이 접근법의 주요 한계점과 이를 해결하는 방법.
자, 시작해 보겠습니다!
데이터 스크래핑에 GPT Vision을 사용해야 하는 이유
GPT Vision은 텍스트와 이미지를 모두 이해하는 다중 모달 AI 모델입니다. 이러한 기능은 최신 OpenAI 모델에서 사용할 수 있습니다. GPT Vision에 이미지를 전달하면 시각적 데이터 추출을 수행할 수 있으며, 이는 기존 데이터 파싱이 한계에 부딪히는 시나리오에 이상적입니다.
일반적인 데이터 파싱은 문서에서 데이터를 추출하기 위한 맞춤형 규칙(예: HTML 페이지에서 데이터를 얻기 위한 CSS 선택기 또는 XPath 표현식 )을 작성하는 것을 포함합니다. 문제는 정보가 이미지, 배너 또는 복잡한 UI 요소 내에 시각적으로 내장되어 있어 표준 파싱 기술로는 접근할 수 없다는 점입니다.
GPT Vision은 이러한 접근이 어려운 소스에서 데이터를 추출하는 데 도움을 줍니다. 가장 흔한 두 가지 사용 사례는 다음과 같습니다:
- 시각적 웹 스크래핑: 페이지 변경이나 시각적 요소를 걱정하지 않고 페이지 스크린샷에서 직접 웹 콘텐츠를 추출합니다.
- 이미지 기반 문서 추출: 이력서, 청구서, 메뉴, 영수증 등 로컬 파일의 스크린샷이나 스캔본에서 구조화된 데이터를 추출합니다.
비시각적 접근을 원한다면 ChatGPT 스크레이퍼를 선택하거나 ChatGPT를 활용한 웹 스크래핑 가이드를 참조하세요.
파이썬에서 GPT Vision을 활용한 스크린샷 데이터 추출 방법
이 단계별 섹션에서는 GPT Vision 웹 스크래핑 스크립트를 구축하는 방법을 배웁니다. 구체적으로 스크래퍼는 다음 작업을 자동화합니다:
- Playwright를 사용하여 대상 웹페이지에 연결합니다.
- 데이터를 추출하려는 특정 섹션의 스크린샷을 찍습니다.
- 스크린샷을 GPT Vision에 전달하고 구조화된 데이터 추출을 요청합니다.
- 추출된 데이터를 JSON 파일로 내보냅니다.
대상은 “Books to Scrape”의 특정 제품 페이지입니다:
이 페이지는 자동 스크래핑 봇을 명시적으로 허용하므로 테스트에 완벽합니다. 또한 별점 위젯과 같은 시각적 요소를 포함하고 있어 기존 파싱 방법으로 처리하기 어렵습니다.
참고: 간결성을 위해 샘플 코드는 Python으로 작성되며 OpenAI Python SDK가 널리 사용되기 때문입니다. 그러나 JavaScript OpenAI SDK나 기타 지원되는 언어로 동일한 결과를 얻을 수 있습니다.
GPT Vision을 사용해 웹 데이터를 스크래핑하는 방법을 아래 단계별로 알아보세요!
필수 조건
시작하기 전에 다음을 준비하세요:
- Python 3.8 이상이 컴퓨터에 설치되어 있어야 합니다.
- GPT Vision API에 접근하기 위한 OpenAI API 키.
OpenAI API 키를 받으려면 공식 가이드를 따르세요.
다음 배경 지식을 갖추면 본 글을 최대한 활용하는 데 도움이 됩니다:
- 브라우저 자동화, 특히 Playwright 사용에 대한 기본적인 이해.
- GPT Vision의 작동 방식에 대한 이해.
참고: 이 방법에는 Playwright와 같은 브라우저 자동화 도구가 필요합니다. 그 이유는 대상 페이지를 브라우저 내에서 렌더링해야 하기 때문입니다. 그런 다음 페이지가 로드되면 관심 있는 특정 섹션의 스크린샷을 찍을 수 있습니다. 이는 Playwright Screenshots API를 사용하여 수행할 수 있습니다.
1단계: Python 프로젝트 생성
스크래핑 프로젝트용 새 폴더를 생성하려면 터미널에서 다음 명령어를 실행하세요:
mkdir gpt-vision-scrapergpt-vision-scraper/ 폴더는 GPT Vision을 활용한 웹 스크레이퍼 구축의 메인 프로젝트 폴더 역할을 합니다.
폴더로 이동하여 내부에서 Python 가상 환경을 생성합니다:
cd gpt-vision-scraper
python -m venv venv선호하는 Python IDE로 프로젝트 폴더를 엽니다. Python 확장 프로그램이 설치된 Visual Studio Code 또는 PyCharm Community Edition을 사용하면 됩니다.
프로젝트 폴더 내에 scraper.py 파일을 생성합니다:
gpt-vision-scraper
├─── venv/
└─── scraper.py # <------------현재 scraper.py는 빈 파일입니다. 곧 GPT Vision을 통한 시각적 LLM 웹 스크래핑 로직이 포함될 예정입니다.
다음으로 터미널에서 가상 환경을 활성화하세요. Linux 또는 macOS에서는 다음 명령을 실행합니다:
source venv/bin/activateWindows에서는 동일하게 다음을 실행하세요:
venv/Scripts/activate좋습니다! 이제 GPT Vision을 활용한 시각적 스크래핑을 위한 Python 환경이 준비되었습니다.
참고: 다음 단계에서는 필요한 종속성 설치 방법을 안내합니다. 한 번에 모두 설치하려면 다음 명령어를 실행하세요:
pip install playwright openai그런 다음:
python -m playwright install좋습니다! 이제 Python 환경이 설정되었습니다.
2단계: 대상 사이트에 연결하기
먼저 제어된 브라우저를 사용하여 Playwright가 대상 사이트를 방문하도록 지시해야 합니다. 활성화된 가상 환경에서 다음 명령어로 Playwright를 설치하세요:
pip install playwright 그런 다음 필요한 브라우저 바이너리를 다운로드하여 설치를 완료하세요:
python -m playwright install다음으로, 스크립트에서 Playwright를 임포트하고 goto() 함수를 사용하여 대상 페이지로 이동합니다:
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
# 새 Playwright 인스턴스 실행
browser = p.chromium.launch()
page = browser.new_page()
# 대상 페이지 방문
url = "https://books.toscrape.com/catalogue/the-dirty-little-secrets-of-getting-your-dream-job_994/index.html"
page.goto(url)
# 스크린샷 처리 로직...
# 브라우저 닫기 및 리소스 해제
browser.close()이 API에 익숙하지 않다면, Playwright를 사용한 웹 스크래핑에 관한 저희 글을 읽어보세요.
훌륭합니다! 이제 대상 페이지에 성공적으로 연결된 Playwright 스크립트를 갖게 되었습니다. 이제 스크린샷을 찍을 차례입니다.
3단계: 페이지 스크린샷 찍기
스크린샷을 찍는 로직을 작성하기 전에, OpenAI는 토큰 사용량 기준으로 요금을 부과한다는 점을 명심하세요. 즉, 입력하는 스크린샷이 클수록 비용이 더 많이 발생합니다.
비용을 절감하려면 관심 있는 데이터가 포함된 HTML 요소만 스크린샷에 포함시키는 것이 가장 좋습니다. Playwright가 노드 기반 스크린샷을 지원하므로 이는 가능합니다. 범위를 좁힌 스크린샷은 GPT Vision이 관련 콘텐츠에 집중하도록 도와 환각 현상 발생 위험을 줄여줍니다.
먼저 브라우저에서 대상 페이지를 열고 구조를 파악하세요. 그런 다음 콘텐츠를 마우스 오른쪽 버튼으로 클릭하고 “검사”를 선택하여 브라우저의 개발자 도구를 엽니다:
관련 콘텐츠 대부분이 .product_page HTML 요소 내에 포함되어 있음을 확인할 수 있습니다.
이 요소는 JavaScript로 동적으로 로드되거나 표시될 수 있으므로 캡처 전에 대기해야 합니다:
product_page_element = page.locator(".product_page")
product_page_element.wait_for()기본적으로 wait_for() 는 DOM에 요소가 나타날 때까지 최대 30초 동안 대기합니다. 빈 섹션이나 보이지 않는 부분을 스크린샷하지 않도록 하기 위해 이 미세 단계는 매우 중요합니다.
이제 선택된 로케이터에 screenshot() 메서드를 활용하여 해당 요소만 스크린샷을 찍습니다:
product_page_element.screenshot(path=SCREENSHOT_PATH)여기서 SCREENSHOT_PATH는 출력 파일 이름을 저장하는 변수입니다. 예를 들어:
SCREENSHOT_PATH = "product_page.png"이 정보를 변수에 저장하는 것이 좋습니다. 곧 다시 필요할 테니까요.
스크립트를 실행하면 product_page.png라는 이름의 파일이 생성되며 내용은 다음과 같습니다:
참고: 스크린샷을 파일로 저장하는 것이 권장되는 방법입니다. 나중에 다른 기법이나 모델을 사용하여 재분석할 필요가 있을 수 있기 때문입니다.
훌륭합니다! 스크린샷 작업이 완료되었습니다.
4단계: Python에서 OpenAI 구성하기
웹 스크래핑에 GPT Vision을 활용하려면 OpenAI Python SDK를 사용할 수 있습니다. 활성화된 가상 환경에서 openai 패키지를 설치하세요:
pip install openai다음으로 scraper.py에서 OpenAI 클라이언트를 임포트하세요:
from openai import OpenAIOpenAI 클라이언트 인스턴스를 초기화합니다:
client = OpenAI()이를 통해 Vision API를 포함한 OpenAI API에 보다 쉽게 연결할 수 있습니다. 기본적으로 OpenAI() 생성자는 OPENAI_API_KEY 환경 변수에서 API 키를 찾습니다. 해당 환경 변수를 설정하는 것이 인증을 안전하게 구성하는 권장 방법입니다.
개발 또는 테스트 목적으로는 코드에 키를 직접 추가할 수도 있습니다:
OPENAI_API_KEY = "<YOUR_OPENAI_API_KEY>"
client = OpenAI(api_key=OPENAI_API_KEY)<YOUR_OPENAI_API_KEY> 자리 표시자를 실제 OpenAI API 키로 대체하세요.
훌륭합니다! 이제 OpenAI 설정이 완료되었으며, 웹 스크래핑을 위해 GPT Vision을 사용할 준비가 되었습니다.
5단계: GPT Vision 스크래핑 요청 전송
GPT Vision은 공개 이미지 URL을 포함한여러 형식의 입력 이미지를 허용합니다. 로컬 파일을 사용 중이므로 이미지를 Base64 인코딩된 문자열로 변환하여 OpenAI 서버로 전송해야 합니다.
스크린샷 파일을 Base64로 변환하려면 다음 코드를 작성하세요:
with open(SCREENSHOT_PATH, "rb") as image_file:
base64_image = base64.b64encode(image_file.read()).decode("utf-8") 이를 위해 Python 표준 라이브러리에서 다음을 임포트해야 합니다:
import base64이제 인코딩된 이미지를 GPT Vision에 전달하여 시각적 웹 스크래핑을 수행합니다:
response = client.responses.create(
model="gpt-4.1-mini",
input=[
{
"role": "user",
"content": [
{
"type": "input_text",
"text": """
다음 제품 페이지에서 구조화된 데이터(예: 제목, 설명, "x/5" 형식의 평점 등)를 추출하세요.
"최근에 본 상품" 섹션은 무시하세요.
데이터를 소문자 snake_case 형식의 속성명으로 JSON 형식으로 반환하세요.
"""
},
{
"type": "input_image",
"image_url": f"data:image/png;base64,{base64_image}"
}
]
}
],
text={"format": {"type": "json_object"}} # JSON 모드 활성화로 JSON 형식 출력 데이터 획득
)참고: 위 예시는 gpt-4.1 모델을 설정하지만, 시각적 기능을 지원하는 모든 OpenAI 모델을 사용할 수 있습니다.
GPT Vision이 응답 API에 직접 통합된 점을 주목하세요. 특별한 설정 없이 "type": "input_image"로 Base64 이미지를 포함하기만 하면 바로 사용할 수 있습니다.
위에서 사용한 스크래핑 프롬프트는 다음과 같습니다:
다음 제품 페이지에서 구조화된 데이터(예: 제목, 설명, "x/5" 형식의 평점 등)를 추출하세요.
"최근 본 상품" 섹션은 무시하세요.
속성 이름을 소문자 snake_case로 사용하여 JSON 형식으로 데이터를 반환하세요.대상 페이지의 정확한 구조를 알 수 없으므로 프롬프트는 상당히 일반적이어야 합니다(하지만 목표에 집중해야 함). 여기서는 관심 없는 섹션을 무시하도록 모델에 명시적으로 지시했습니다. 또한 깔끔하고 잘 구조화된 키 이름을 가진 JSON 객체를 반환하도록 요청했습니다.
OpenAI 응답 API 요청은 JSON 모드로 작동하도록 구성되어 있음을 유의하십시오. 이를 통해 모델이 JSON 형식으로 출력하도록 보장할 수 있습니다. 이 기능이 작동하려면 프롬프트에 다음과 같이 JSON 형식으로 데이터를 반환하라는 지침이 포함되어야 합니다:
소문자 snake_case 형식의 속성명으로 JSON 형식의 데이터를 반환하세요.그렇지 않으면 요청이 다음과 같이 실패합니다:
openai.BadRequestError: 오류 코드: 400 - {
'error': {
'message': "Response input messages must contain the word 'json' in some form to use 'text.format' of type 'json_object'.",
'type': 'invalid_request_error',
'param': 'input',
'code': None
}
}요청이 성공적으로 완료되면, 다음과 같이 파싱된 구조화된 데이터에 접근할 수 있습니다:
json_product_data = response.output_text선택적으로 결과 문자열을 파싱하여 Python 사전으로 변환하려면:
import json
product_data = json.loads(json_product_data)GPT Vision 데이터 파싱 로직 완료! 이제 스크랩된 데이터를 로컬 JSON 파일로 내보내기만 하면 됩니다.
단계 #6: 스크랩된 데이터 내보내기
GPT Vision API 호출로 생성된 출력 JSON 문자열을 다음과 같이 작성합니다:
with open("product.json", "w", encoding="utf-8") as f:
f.write(json_product_data)이렇게 하면 시각적으로 추출된 데이터를 저장하는 product.json 파일이 생성됩니다.
잘하셨습니다! GPT Vision 기반 웹 스크래퍼가 이제 준비되었습니다.
7단계: 모든 것을 통합하기
다음은 scraper.py의 최종 코드입니다:
from playwright.sync_api import sync_playwright
from openai import OpenAI
import base64
# 페이지 스크린샷 저장 위치
SCREENSHOT_PATH = "product_page.png"
with sync_playwright() as p:
# 새로운 Playwright 인스턴스 실행
browser = p.chromium.launch()
page = browser.new_page()
# 대상 페이지 방문
url = "https://books.toscrape.com/catalogue/the-dirty-little-secrets-of-getting-your-dream-job_994/index.html"
page.goto(url)
# 제품 페이지 요소가 DOM에 로드될 때까지 대기
product_page_element = page.locator(".product_page")
product_page_element.wait_for()
# 요소의 전체 스크린샷 촬영
product_page_element.screenshot(path=SCREENSHOT_PATH)
# 브라우저 닫기 및 리소스 해제
browser.close()
# OpenAI 클라이언트 초기화
OPENAI_API_KEY = "<YOUR_OPENAI_API_KEY>" # OpenAI API 키로 대체
client = OpenAI(api_key=OPENAI_API_KEY)
# 파일 시스템에서 스크린샷 읽기
with open(SCREENSHOT_PATH, "rb") as image_file:
base64_image = base64.b64encode(image_file.read()).decode("utf-8")
# GPT Vision을 통해 데이터 추출 요청 수행
response = client.responses.create(
model="gpt-4.1-mini",
input=[
{
"role": "user",
"content": [
{
"type": "input_text",
"text": """
다음 제품 페이지에서 구조화된 데이터(예: 제목, 설명, "x/5" 형식의 평점 등)를 추출하세요.
"최근 본 상품" 섹션은 무시하세요.
소문자 snake_case 형식의 속성명으로 JSON 형식으로 데이터를 반환하세요.
"""
},
{
"type": "input_image",
"image_url": f"data:image/png;base64,{base64_image}"
}
]
}
],
text={"format": {"type": "json_object"}} # JSON 모드 활성화로 출력 데이터를 JSON 형식으로 획득)
# 출력 데이터를 추출하여 JSON 파일로 내보내기
json_product_data = response.output_text
with open("product.json", "w", encoding="utf-8") as f:
f.write(json_product_data)와! 65줄도 안 되는 코드로 GPT Vision을 활용한 시각적 웹 스크래핑을 수행했습니다.
GPT Vision 스크레이퍼 실행 명령어:
python scraper.py스크립트가 잠시 실행된 후 프로젝트 폴더에 product.json 파일을 생성합니다. 파일을 열면 다음과 같은 내용을 확인할 수 있습니다:
{
"title": "꿈의 직장을 얻는 더러운 작은 비밀들",
"price_gbp": "£33.34",
"availability": "재고 있음 (19개 보유)",
"rating": "4/5",
"description": "마케팅 에이전시에서 지원자를 평가한 풍부한 경험을 바탕으로 한 실제 사례, 샘플 커버 레터, 이력서, 그리고 직설적인 조언을 담은 돈 라스킨의 『꿈의 직장을 얻는 더러운 작은 비밀들』은 까다로운 취업 시장을 헤쳐 나가 꿈의 직장을 확보하는 데 필요한 모든 도구를 제공합니다... [생략]",
"product_information": {
"upc": "2597b5a345f45e1b",
"product_type": "Books",
"price_excl_tax": "£33.34",
"price_incl_tax": "£33.34",
"tax": "£0.00",
"availability": "재고 있음 (19개 보유)"
}
}페이지의 모든 제품 정보(순수 시각적 요소인 리뷰 평점 포함)를 성공적으로 추출한 점을 주목하세요:
자, 이제 GPT Vision이 스크린샷을 깔끔하게 구조화된 JSON 파일로 변환하는 데 성공했습니다.
다음 단계
GPT Vision 스크래퍼를 개선하려면 다음 사항을 고려하세요:
- 재사용 가능하게 만들기: 대상 URL, 대기할 요소의 CSS 선택자, CLI에서 입력하는 LLM 프롬프트를 받아들이도록 스크립트를 리팩토링하세요. 이렇게 하면 코드를 수정하지 않고도 다른 페이지를 스크래핑할 수 있습니다.
- API 키 보안 강화: OpenAI API 키를 하드코딩하지 말고
.env파일에 저장한 후python-dotenv패키지로 로드하세요. 또는OPENAI_API_KEY라는글로벌 환경 변수로 설정하세요. 두 방법 모두 자격 증명을 보호하고 코드베이스 보안을 유지하는 데 도움이 됩니다.
시각적 웹 스크래핑의 가장 큰 한계 극복하기
이 웹 스크래핑 방식의 주요 난관은 스크린샷 단계에 있습니다. “Books to Scrape” 같은 샌드박스 사이트에서는 완벽하게 작동했지만, 실제 웹사이트는 다른 현실을 보여줍니다.
많은 현대 웹사이트는 스크립트가 페이지에 접근하기 전에 차단할 수 있는 반스크래핑 방어책을 적용합니다. 스크래퍼가 페이지 접근에 성공하더라도 오류 메시지나 인간 인증 챌린지가 발생할 수 있습니다. 예를 들어, G2.com 같은 사이트에 기본 Playwright를 사용할 때 이런 현상이 발생합니다:
이러한 문제는 브라우저 지문 인식, IP 평판, 속도 제한, CAPTCHA 인증 등 다양한 원인으로 발생할 수 있습니다.
이러한 차단 방식을 우회하는 가장 강력한 방법은 전용 웹 언락킹 API를 활용하는 것입니다!
Bright Data의 Web Unlocker는 1억 5천만 개 이상의 IP로 구성된 프록시 네트워크를 기반으로 하는 강력한 스크래핑 엔드포인트입니다. 특히 지문 위조, 자바스크립트 렌더링, CAPTCHA 해결 기능 등 다양한 기능을 제공합니다. 스크린샷 캡처까지 지원하므로 Playwright의 수동 스크린샷 로직을 완전히 생략할 수 있습니다.
예를 들어 Bright Data의 G2 판매자 페이지에서 평균 별점을 추출하고 싶다면:
시작하려면 문서에 설명된 대로 웹 언락커를 설정하고 Bright Data API 키를 가져옵니다. GPT Vision과 웹 언락커를 다음과 같이 함께 사용하세요:
# pip install requests
import requests
from openai import OpenAI
import base64
BRIGHT_DATA_API_KEY = "<YOUR_BRIGHT_DATA_API_KEY>" # 본인의 Bright Data API 키로 대체
# Bright Data Web Unlocker로 대상 페이지 스크린샷 획득
url = "https://api.brightdata.com/request"
headers = {
"Content-Type": "application/json",
"Authorization": f"Bearer {BRIGHT_DATA_API_KEY}"
}
payload = {
"zone": "web_unlocker", # 웹 언락커 존 이름으로 교체
"url": "https://www.g2.com/sellers/bright-data", # 대상 페이지 주소
"format": "raw",
"data_format": "screenshot" # 스크린샷 모드 활성화
}
response = requests.post(url, headers=headers, json=payload)
# 스크랩한 스크린샷 저장 위치
SCREENSHOT_PATH = "screenshot.png"
# 스크린샷을 파일로 저장 (예: 향후 추가 분석을 위해)
with open(SCREENSHOT_PATH, "wb") as f:
f.write(response.content)
# OpenAI 클라이언트 초기화
OPENAI_API_KEY = "<YOUR_OPENAI_API_KEY>" # OpenAI API 키로 대체
client = OpenAI(api_key=OPENAI_API_KEY)
# 스크린샷 파일을 읽고 내용을 Base64로 변환
with open(SCREENSHOT_PATH, "rb") as image_file:
base64_image = base64.b64encode(image_file.read()).decode("utf-8")
# GPT Vision을 사용해 스크래핑 요청 수행
response = client.responses.create(
model="gpt-4.1-mini",
input=[
{
"role": "user",
"content": [
{
"type": "input_text",
"text": """
다음 이미지에서 평균 별점을 반환하세요.
"""
},
{
"type": "input_image",
"image_url": f"data:image/png;base64,{base64_image}"
}
]
}
],)
print(response.output_text)위의 스크립트를 실행하면 다음과 같은 출력이 생성됩니다:
이미지의 평균 별점은 4.6입니다.웹 언락커가 반환한 생성된 screenshot.png 파일에서 시각적으로 확인할 수 있듯이 이는 정확한 정보입니다:
참고: Web Unlocker를 사용하면 페이지의 완전히 잠금 해제된 HTML을 가져올 수 있을 뿐만 아니라, AI에 최적화된 마크다운 형식으로 콘텐츠를 얻을 수도 있습니다.
이렇게 간단합니다—더 이상 차단도, 골치 아픈 문제도 없습니다. 이제 보호된 웹사이트에서도 작동하는, GPT Vision 기반의 생산 환경 수준의 웹 스크래퍼를 보유하게 되었습니다.
더 복잡한 스크래핑 시나리오에서 OpenAI SDK와 Web Unlocker가 함께 작동하는 모습을 확인해 보세요.
결론
이 튜토리얼에서는 GPT Vision과 Playwright의 스크린샷 기능을 결합하여 AI 기반 웹 스크레이퍼를 구축하는 방법을 배웠습니다. 가장 큰 과제(즉, 스크린샷 촬영 중 차단되는 문제) 는 Bright Data Web Unlocker API로 해결했습니다.
논의한 바와 같이, GPT Vision과 Web Unlocker API가 제공하는 스크린샷 기능을 결합하면 사용자 정의 파싱 코드를 작성하지 않고도 모든 웹사이트에서 시각적으로 데이터를 추출할 수 있습니다. 이는 Bright Data의 AI 제품 및 서비스가 다루는 수많은 시나리오 중 하나에 불과합니다.
Bright Data 계정을 무료로 생성하고 저희 데이터 솔루션을 직접 체험해 보세요!
