Vercel이 AI 에이전트를 위해 웹페이지 용량을 500KB → 2KB로 줄인 방법
(vercel.com)핵심 문제 인식
- AI 에이전트는 사람과 달리 CSS, 클라이언트 JS, 이미지 등을 전혀 필요로 하지 않음
- 이런 요소들은 토큰만 낭비하고 실제 유용한 정보는 거의 제공하지 않음
- 에이전트에게 필요한 것은 깔끔하고 구조화된 텍스트뿐
Vercel의 해결책
- 콘텐츠 협상(Content Negotiation) HTTP 메커니즘 활용
- 동일 URL에서 클라이언트 요청에 따라 다른 포맷 반환
- 사람(브라우저) → 완전한 HTML + CSS + JS 경험
- AI 에이전트 → 마크다운 제공
- 별도 사이트나 콘텐츠 중복 없이 구현
동작 방식 (Accept 헤더 기반)
- 에이전트가 보내는 예시 헤더
-
Accept: text/markdown, text/html, */* - → markdown을 가장 먼저 선호한다고 명시
- Vercel 미들웨어가 Accept 헤더 검사
- markdown 선호 시 → Next.js 라우트 핸들러로 전달
- Contentful rich-text 콘텐츠를 markdown으로 변환하여 응답
- 코드 블록: 문법 강조 마커 유지
- 제목: 계층 구조 보존
- 링크: 그대로 유지
효과 및 수치
- 일반 블로그 포스트
- HTML 버전: 약 500KB
- Markdown 버전: 약 2KB
- 용량 감소율: 99.6%
- 이점
- 토큰 예산 효율 극대화 → 마크업 대신 실제 정보에 집중
- 요청당 더 많은 콘텐츠 처리 가능
- 더 빠른 동작 + 토큰 한계 덜 도달
기술적 유지보수
- Next.js 16의 remote cache + 공유 slug 활용
- Contentful 콘텐츠 업데이트 시 HTML과 markdown 버전 동시 새로고침 → 동기화 유지
에이전트 탐색 지원
- markdown 형식의 전용 sitemap 제공
- 포함 정보: 발행 날짜, 콘텐츠 타입, HTML/마크다운 각 버전 직접 링크 등
- 에이전트가 사용 가능한 전체 콘텐츠 지도 파악 → 최적 포맷 선택 용이
결론적 의미
- 사람과 AI의 웹 소비 방식이 근본적으로 다르다는 점 인정
- 각 클라이언트에 최적화된 경험 제공하는 실용적 사례
- 사람과 AI 모두를 위한 웹의 중요한 출발점