📎 처음엔 그냥 긁으면 될 줄 알았습니다 (Open Graph 크롤링 개발기)

링크 저장 서비스를 만들다 보면 반드시 마주치는 이슈가 하나 있습니다.
바로 Open Graph(OG) 데이터를 어떻게 빠르고 정확하게 불러올 것인가입니다.

링크를 저장했을 때, 썸네일·제목·설명이 자동으로 뜨는 그 경험을 만들기 위해
우리는 어떤 방식으로 OG 데이터를 크롤링하고, 어떤 구조를 설계했을까요?

오늘은 그 개발기 과정을 공유합니다.

---

❓ 왜 open-graph-scraper를 쓰지 않았나요?

처음에는 open-graph-scraper 같은 라이브러리를 사용할까 했지만, 실제로 적용해보니 두 가지 이유로 포기했습니다.

첫째, 속도입니다. 평균 2~3초 정도로 응답 속도가 느려 사용자 경험에 영향을 줬습니다.
직접 구현한 FastAPI 기반 정적 크롤러는 0.2 ~ 0.4초로 약 10배 빨랐습니다.

둘째, 가져오지 못하는 사이트가 너무 많았습니다.
JavaScript로 OG 태그를 렌더링하거나, SPA 구조로 된 페이지는 정보를 제대로 불러오지 못했죠.

이러한 문제로 인해 속도와 커버리지를 모두 만족시키기 위해 직접 크롤러를 설계하게 되었습니다.

---

1. 🚀 처음엔 정적 크롤링부터

초기에는 FastAPI 기반의 정적 크롤러를 직접 만들었습니다.

직접 구현했을 때 결과는?

• 평균 응답 속도: 0.2초 ~ 0.4초
• 기본적인 OG 태그(title, description, image) 처리 가능
• 빠르고 가벼움

예시 코드

import requests
from bs4 import BeautifulSoup

def fetch_og_static(url: str) -> dict:
    headers = {
        "User-Agent": "Mozilla/5.0"
    }

    try:
        response = requests.get(url, headers=headers, timeout=5)
        response.raise_for_status()

        soup = BeautifulSoup(response.text, 'html.parser')

        def get_meta(property_name):
            tag = soup.find("meta", property=property_name)
            return tag["content"] if tag and tag.get("content") else ""

        og_data = {
            "title": get_meta("og:title"),
            "description": get_meta("og:description"),
            "image": get_meta("og:image"),
        }

        return og_data
    except Exception as e:
        print(f"[ERROR] Failed to fetch OG data: {e}")
        return {}

하지만 큰 문제가 있었습니다.

JavaScript로 렌더링되는 OG 태그나 SPA 구조의 페이지에서는 meta 정보가 아예 포함되지 않거나,
초기 요청 시점에는 존재하지 않아 정적 파싱으로는 OG 데이터를 불러올 수 없었습니다.

이런 경우는 아무리 빠르게 처리해도 가져올 수 없는 정보였습니다.

---

2. 🧠 정적 크롤링 실패 시 → 동적 크롤링

정적 크롤링만으로는 한계가 있다는 걸 빠르게 체감하고,
우리는 동적 크롤링을 병렬 구조로 설계했습니다.

정적 크롤링이 실패하면, 동적 크롤링으로 자동 전환

동적 크롤링은 Playwright를 사용해 구현했습니다.
실제 브라우저를 띄워 페이지를 렌더링한 뒤, 렌더된 HTML에서 OG 데이터를 파싱합니다.

사용한 스택

• 언어: Python
• 라이브러리: playwright

예시 코드

from playwright.sync_api import sync_playwright

def fetch_og_with_playwright(url: str) -> dict:
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=True)
        page = browser.new_page()

        try:
            page.goto(url, wait_until="domcontentloaded", timeout=8000)

            og_data = {
                "title": page.locator("meta[property='og:title']").get_attribute("content") or "",
                "description": page.locator("meta[property='og:description']").get_attribute("content") or "",
                "image": page.locator("meta[property='og:image']").get_attribute("content") or "",
            }

            return og_data
        except Exception as e:
            print(f"[ERROR] Failed to fetch OG data: {e}")
            return {}
        finally:
            browser.close()

---

3. 🔐 프록시 크롤링으로 우회하기

정적/동적 크롤링 구조를 갖췄지만, 여전히 한 가지 문제가 남아 있었습니다.
바로 “보안이 철저한 사이트”에서는 크롤링 자체가 차단된다는 점입니다.

대표적으로는 다음과 같은 사이트들입니다:

• Cloudflare, Incapsula 등 WAF(Web Application Firewall)가 적용된 사이트
• 접근 빈도나 User-Agent 등을 분석해 봇 트래픽을 차단하는 서비스
• IP나 국가 기반 차단 정책이 있는 일부 글로벌 도메인

이런 사이트는 단순한 User-Agent 조작만으로는 통하지 않았습니다.

그래서 도입한 것이 바로 Smartproxy입니다.

---

💡 왜 Smartproxy를 사용했나요?

Smartproxy는 저희가 테스트한 여러 프록시 서비스 중에서
가장 안정적이고 빠른 속도, 그리고 요금 구조의 유연성을 갖춘 서비스였습니다.

• ✅ 성공한 요청에 대해서만 비용이 부과됨
• ✅ 전 세계 수십만 개의 IP 풀 제공 (회전형, 고정형 모두 지원)
• ✅ 다른 프록시보다 응답 속도와 성공률이 우수
• ✅ Python, Node.js 등 다양한 언어에서 쉽게 연동 가능

이런 특성 덕분에 특정 사이트는 프록시 크롤링으로만 접근하도록 구조를 분기했습니다.

---

🧪 예시 코드 (Smartproxy + Python)

Smartproxy는 HTTP 프록시 방식으로 접근하므로, requests에서 손쉽게 연동할 수 있습니다.

import requests

# 실제 응답 body를 BeautifulSoup 등으로 파싱하여 OG 데이터 추출 가능
# 예: soup = BeautifulSoup(response.text, 'html.parser')
def fetch_with_proxy(url: str) -> dict:
    proxies = {
        "http": "http://username:password@gate.smartproxy.com:7000",
        "https": "http://username:password@gate.smartproxy.com:7000"
    }

    headers = {
        "User-Agent": "Mozilla/5.0"
    }

    try:
        response = requests.get(url, headers=headers, proxies=proxies, timeout=10)
        response.raise_for_status()

        # 여기서는 간단히 상태 코드만 반환 (실제 구현에서는 BeautifulSoup 등으로 파싱)
        return {
            "status": response.status_code,
            "preview": response.text[:200]  # 일부 미리보기용
        }
    except Exception as e:
        print(f"[ERROR] Proxy fetch failed: {e}")
        return {}

---

✅ 최종 구조 요약

1. 정적 크롤링 → 빠르고 가볍지만 한계가 있음
2. 정적 실패 시 → 동적 크롤링 (Playwright로 렌더링)
3. 보안 강화된 사이트 → 프록시로 우회 시도

이 모든 과정을 거쳐,
링크 저장 시 썸네일과 제목이 빠르게 잘 뜨는 구조를 완성할 수 있었습니다.

---

🧪 지금, 베타 버전에서 체험해보세요!

우리는 지금 링크 드라퍼라는 서비스를 만들고 있습니다.
여러분이 저장한 링크를 더 잘 정리하고, 다시 꺼내볼 수 있게 돕는 서비스입니다.

👉 🔗 링크 드라퍼 베타 체험하러 가기

지금 직접 저장해보시고, 썸네일이 어떻게 잘 나오는지 확인해보세요!

---

📌 다음 글 예고

여전히 저희는 만족스러운 퍼포먼스를 얻지 못했습니다.
다음 글에서는 “Open Graph 크롤링 속도를 어떻게 개선했는가”에 대한 이야기를 나눠보려 합니다.

읽어주셔서 감사합니다 🙌
궁금한 점이나 의견은 댓글로 편하게 남겨주세요!