# Vercel이 AI 에이전트를 위해 웹페이지 용량을 500KB → 2KB로 줄인 방법

> Clean Markdown view of GeekNews topic #26531. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=26531](https://news.hada.io/topic?id=26531)
- GeekNews Markdown: [https://news.hada.io/topic/26531.md](https://news.hada.io/topic/26531.md)
- Type: news
- Author: [davespark](https://news.hada.io/@davespark)
- Published: 2026-02-09T15:08:39+09:00
- Updated: 2026-02-09T15:08:39+09:00
- Original source: [vercel.com](https://vercel.com/blog/making-agent-friendly-pages-with-content-negotiation)
- Points: 17
- Comments: 2

## Summary

AI 에이전트가 불필요한 **CSS·JS·이미지**를 내려받지 않도록, Vercel은 콘텐츠 협상 기반으로 동일 URL에서 브라우저에는 완전한 HTML을, 에이전트에는 **마크다운 버전**을 제공합니다. Accept 헤더를 판별해 Next.js 라우트에서 변환을 수행하며, 이 방식으로 평균 500KB 페이지를 2KB로 줄였습니다. 토큰 낭비를 최소화하면서도 콘텐츠 동기화를 유지해, 사람과 AI 모두에 맞춘 웹 전달 구조를 실험적으로 제시합니다.

## Topic Body

**핵심 문제 인식**  
  
* 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 모두를 위한 웹**의 중요한 출발점  
  
https://aisparkup.com/posts/8997

## Comments



### Comment 51027

- Author: halfenif
- Created: 2026-02-12T07:21:47+09:00
- Points: 1

이런건 따라하면 좋을거 같습니다.

### Comment 50901

- Author: developerjhp
- Created: 2026-02-09T17:26:21+09:00
- Points: 1

미래의 web은 UI/UX가 없는 형태가 될 수도 있겠네요..