OpenGraph Metadata Crawling System
웹 페이지의 OpenGraph 메타데이터를 수집하기 위한 크롤링 서버다른 사이드 프로젝트를 개발하던 중, URL을 입력하면 해당 페이지의 메타데이터를 수집하는 기능이 필요했다. 하지만 외부 API 기반 메타데이터 수집 서비스는 호출 제한이 있거나 유료 플랜 의존도가 높아, 비용과 운영 측면에서 제약이 있었다. 이에 따라 외부 서비스에 의존하지 않고 안정적으로 활용할 수 있는 자체 OpenGraph 메타데이터 수집 시스템을 기획했다. 전반적인 구현은 Codex를 활용했으며, 요구사항 정의 및 주요 기능 설계는 직접 담당했다.
Period
2026.01 - 진행 중
Type
Personal
Role
Product planning, flow design, and AI-assisted development
Tech Stack
Express, JavaScript, Cheerio, Playwright, Codex, Render, Lambda
Contributions
페이지 특성별 크롤링 전략 설계
문제 배경
정적 페이지나 SSR 페이지와 달리 SPA는 메타데이터가 노출되는 시점과 방식이 다르기 때문에, 단순 HTTP 요청만으로는 메타데이터 수집 정확도를 보장하기 어려웠다. 반대로 모든 요청을 브라우저 렌더링으로 처리하면 비용이 커지고 응답 시간이 길어져, 수집 안정성과 성능 사이의 균형이 필요한 상황이었다.
접근 방식
수집 경로를 하나로 통일하지 않고, 페이지 특성에 따라 static과 dynamic 두 가지 방식으로 분리해 설계했다.
먼저 HTML 응답만으로 메타 태그를 확보할 수 있는 페이지는 HTTP 요청 기반으로 처리해 빠르게 결과를 반환하도록 했고, 동적 렌더링이나 SPA처럼 초기 HTML만으로 정보가 부족한 경우에는 Playwright 기반 브라우저 렌더링을 수행하도록 구성했다.
또한 모든 요청에 브라우저 렌더링을 적용하지 않도록, 우선 HTTP 요청으로 메타데이터를 수집한 뒤 일정 시간 내 결과가 충분하지 않을 때만 브라우저 렌더링이 지연 실행되도록 설계했다. 이를 통해 응답 속도와 수집 정확도를 함께 확보하고자 했다.
성과
페이지 특성에 따라 수집 방식을 다르게 적용함으로써, 정적 페이지에서는 빠른 응답 속도를 유지하고 동적 페이지에서는 메타데이터 수집 정확도를 높일 수 있었다. 또한 브라우저 렌더링을 필요한 경우에만 제한적으로 수행하도록 설계해 불필요한 리소스 사용을 줄이고 운영 비용 부담도 완화했다.
<head> 우선 수집을 통한 크롤링 응답 속도 50% 단축
문제 배경
OpenGraph 메타데이터는 대부분 <head> 구간에 포함되어 있었지만, 기존에는 이를 확인하기 위해 전체 HTML을 끝까지 다운로드하고 있었다. 그 결과 static 경로의 평균 응답 시간이 3~4초 수준으로 길어져, 메타데이터 수집 성능을 개선할 필요가 있었다.
접근 방식
전체 문서를 항상 내려받지 않고, <head> 구간만 우선 수집하는 방식으로 크롤링 경로를 최적화했다. 메타 태그를 조기에 탐지하면 즉시 수집을 종료하고, <head> 탐지에 실패하거나 바이트 제한을 초과하는 경우에만 전체 문서를 다시 요청하는 fallback 구조를 설계했다.
성과
불필요한 전체 HTML 다운로드를 줄여 네트워크 비용을 절감했고, static 경로의 평균 응답 시간을 약 1.5초 수준으로 단축했다.