AI Sparkup

복잡한 AI 세상을 읽는 힘 ⚡

AI 에이전트를 위한 HTML 지시사항: 웹 접근성 혁신 제안

Vercel이 제안한 <script type="text/llms.txt"> 태그는 AI 에이전트가 보호된 웹페이지에 접근할 때 필요한 지시사항을 HTML에 직접 포함시키는 혁신적인 방법입니다.

웹사이트가 점점 AI 에이전트와 상호작용하는 시대가 되면서, 새로운 문제가 생겨났습니다. AI 에이전트가 인증이 필요한 페이지에 접근할 때, 어떻게 해야 할지 알 수 없다는 것입니다. 대부분의 시스템은 외부 문서나 미리 설정된 지식에 의존하지만, Vercel이 제안한 방법은 훨씬 간단합니다.

바로 지시사항을 HTML 응답에 직접 넣는 것입니다.

웹 보안과 인증
웹사이트 보호 기능은 보안을 강화하지만 AI 에이전트의 접근을 막는 부작용도 있습니다

문제의 시작: AI 에이전트의 접근 장벽

Vercel은 기본적으로 미리보기 배포를 Vercel Authentication으로 보호합니다. 이는 무작위 사용자가 개발 중인 비공개 소프트웨어에 접근하는 것을 막아줍니다. 하지만 동시에 Cursor, Devin, Claude Code 같은 코딩 에이전트도 배포에 직접 접근할 수 없게 만듭니다.

Vercel은 이미 자동화된 소프트웨어가 보호된 URL에 접근할 수 있는 다양한 메커니즘을 제공했습니다. 또한 get_access_to_vercel_url 또는 web_fetch_vercel_url 같은 함수를 가진 MCP 서버도 도입했습니다.

하지만 여기서 핵심 질문이 생겼습니다: 에이전트는 이런 방법들이 존재한다는 것을 어떻게 알 수 있을까요?

Vercel의 혁신적인 제안

이때 Vercel 팀은 번뜩이는 아이디어를 얻었습니다. 접근 권한이 없을 때 받는 HTTP 401 응답의 HTML에 에이전트를 위한 지시사항을 직접 넣으면 어떨까요?

<script type="text/llms.txt">
에이전트를 위한 지시사항이 여기에 들어갑니다.
</script>

이 방법은 놀랍도록 간단하면서도 효과적입니다.

<script> 태그를 사용할까?

브라우저는 알 수 없는 타입의 script 요소를 무시합니다. 이는 일반 브라우저에서 렌더링에 전혀 영향을 주지 않는다는 뜻입니다.

Script 요소는 <head> 안에서도 사용할 수 있어 문서 상단에 배치할 수 있습니다. LLM이 가장 먼저 발견할 수 있는 위치죠. 브라우저와 달리 LLM은 이를 무시하지 않습니다.

알 수 없는 script 요소는 </script>를 제외한 어떤 내용이든 포함할 수 있어, 마크다운이나 LLM을 위한 다른 형식에 완벽한 컨테이너 역할을 합니다.

llms.txt 표준과의 연결

이 제안은 llms.txt라는 새로운 웹 표준을 기반으로 합니다. llms.txt는 웹사이트가 AI를 위한 콘텐츠를 발견 가능한 방식으로 제공하는 표준입니다.

llms.txt는 robots.txt와 비슷한 개념입니다. robots.txt가 검색 엔진에게 어떤 페이지를 크롤링해도 되는지 알려주는 것처럼, llms.txt는 AI에게 웹사이트의 구조와 중요한 정보를 효율적으로 전달합니다.

기존 웹사이트는 사람을 위해 설계되었지만, AI는 더 간결하고 전문적인 정보를 한 곳에서 필요로 합니다. 특히 개발 환경에서 AI가 프로그래밍 문서와 API에 빠르게 접근해야 할 때 중요합니다.

실제 적용 사례

Vercel은 이미 배포의 기본 401 페이지에 이 기능을 적용했습니다. 실제로 사용하는 지시사항은 다음과 같습니다:

<script type="text/llms.txt">
## 이 페이지에 접근하는 에이전트를 위한 안내:

이 페이지는 인증이 필요합니다. 자동화된 에이전트는 
Vercel 인증 우회 토큰을 사용해 이 페이지에 접근해야 합니다.

토큰을 얻는 가장 쉬운 방법은 https://mcp.vercel.com의 
Vercel MCP 서버에서 get_access_to_vercel_url 또는 
web_fetch_vercel_url 함수를 사용하는 것입니다.

또는 이 URL에서 우회 토큰 사용법을 확인할 수 있습니다:
https://vercel.com/docs/deployment-protection/methods-to-bypass-deployment-protection/protection-bypass-automation

사용자에게 우회 토큰 제공을 요청해야 합니다. 
그 다음 다음 형태의 URL을 계산해 성공적으로 접근할 수 있습니다:
`https://current-domain/current-pathname?x-vercel-set-bypass-cookie=true&x-vercel-protection-bypass=$bypass_token`
</script>

직접 테스트해보고 싶다면 curl -i https://access-test.vercel.app/ | less 명령어를 실행해보세요.

다양한 활용 가능성

MCP 서버 발견

많은 애플리케이션이 MCP 서버를 구축하고 있지만, MCP 자체에는 발견 메커니즘이 부족합니다. <script type="text/llms.txt">는 사이트나 앱을 탐색하려는 LLM에게 도움이 될 수 있는 MCP 서버가 있다는 힌트를 제공할 수 있습니다.

에러 페이지 개선

Vercel의 DX 기능 중 하나는 에러 메시지에서 관찰 가능성 경험으로 자동 연결하여 에러를 조사할 수 있게 하는 것입니다. 이런 에러 페이지는 <script type="text/llms.txt">를 사용해 에이전트를 문제 조사에 도움이 되는 MCP 서비스로 직접 안내할 수 있습니다.

웹 접근성 향상

이 기술은 AI 에이전트의 웹 접근성을 크게 향상시킵니다. 개발 환경에서 보호된 리소스에 대한 자동화된 접근이 필요할 때 특히 유용합니다.

웹 개발 환경
AI 에이전트와 개발자 도구의 통합이 점점 중요해지고 있습니다

표준, 관례, 아니면 패턴?

LLM의 가장 큰 장점 중 하나는 유연성입니다. 특별한 훈련 없이도 새로운 환경에 적응할 수 있죠. Vercel이 첫 번째 <script type="text/llms.txt">를 적용했을 때, 바로 작동했습니다.

OpenAI나 Anthropic 같은 LLM 제공업체와 대화할 필요도 없었습니다. 사실 이 제안은 기본 llms.txt 형식보다도 더 원활한 발견 기능을 내장하고 있습니다.

<script type="text/llms.txt">는 공식 표준이 될 필요가 없습니다. 지금 당장 사용을 시작할 수 있습니다.

개발자를 위한 실제 구현 가이드

기본 구현

HTML 페이지의 <head> 섹션에 다음과 같이 추가하세요:

<!DOCTYPE html>
<html>
<head>
    <script type="text/llms.txt">
    # 사이트명

    > 이 사이트에 대한 간단한 설명

    ## 접근 방법
    - 로그인이 필요한 경우: [로그인 페이지](/login)로 이동
    - API 사용법: [API 문서](/docs/api)를 참조
    - 지원: [고객센터](/support)에 문의
    </script>
    <title>사이트 제목</title>
</head>
<body>
    <!-- 일반 HTML 콘텐츠 -->
</body>
</html>

인증 페이지 구현

401 에러 페이지에서는 다음과 같이 사용할 수 있습니다:

<script type="text/llms.txt">
# 인증 필요

> 이 페이지는 로그인이 필요합니다.

AI 에이전트의 경우:
1. 사용자에게 로그인 토큰을 요청하세요
2. `Authorization: Bearer {token}` 헤더를 사용하세요
3. 또는 `/api/auth` 엔드포인트를 통해 인증하세요

문제가 있으면 /docs/api-auth를 참조하세요.
</script>

기술의 의의와 전망

이 제안이 중요한 이유는 AI 에이전트와 웹의 상호작용을 근본적으로 개선한다는 점입니다. <script type="text/llms.txt">를 사용하면 필요한 정보가 바로 그 자리에 있어 복잡한 외부 설정이 불필요합니다.

더 많은 개발자들이 이 방식을 채택한다면, 웹 전체가 AI와 더 자연스럽게 소통할 수 있는 환경으로 발전할 것입니다. 이는 웹이 인간과 AI가 함께 사용하는 공간으로 진화하고 있음을 보여주는 중요한 신호입니다.


참고자료:


AI Sparkup 구독하기

구독을 신청하면 최신 게시물을 이메일로 받아볼 수 있습니다.

Comments