DEVOCEAN

바로 어제 진행한 Microsoft Build 2025 행사에서 새롭게 선보인 NLWeb에 대해 알아보겠습니다.

NLWeb은 웹사이트를 손쉽게 AI 앱처럼 만들 수 있는 오픈 프로젝트로서, 사용자가 웹 콘텐츠를 자연어로 질의하고 대화하듯 상호작용할 수 있게 해줍니다.

이 발표에서 NLWeb을 가리켜 “리치한 시맨틱 웹 상호작용”이라고 강조했고, 이는 오늘날 웹 검색 경험을 한 단계 도약시키려는 Microsoft의 비전의 일환이었습니다.

지금부터 NLWeb이 무엇인지, 어떠한 구조와 목표를 갖고 있는지, 그리고 실제로 이를 활용해보는 방법을 차례로 살펴보겠습니다.

NLWeb이 등장한 배경과 목표

NLWeb의 등장은 웹 상호작용 방식의 혁신과 관련이 깊습니다.

Microsoft는 NLWeb을 “에이전틱 웹(Agentic Web)의 HTML”에 비유했는데,

이는 HTML이 웹1.0 시대에 문서 공유를 표준화했듯이 NLWeb은 AI 시대의 웹 상호작용을 표준화하려는 시도라는 뜻입니다.

기존에도 웹사이트에 챗봇이나 검색 기능을 붙이는 시도가 있었지만, 복잡한 통합 작업, 벤더 종속성 등의 한계가 있었습니다.

NLWeb은 이러한 장벽을 허물고 몇 줄의 코드만으로 대화형 AI 인터페이스를 웹에 추가할 수 있도록 설계되었습니다.

그 결과 웹 운영자는 자신만의 데이터와 원하는 AI 모델로 손쉽게 자연어 챗봇 경험을 제공할 수 있게 됩니다.

NLWeb의 근본 목표는 웹을 통째로 AI 환경으로 탈바꿈시키는 데 있습니다.

사용자는 더 이상 검색어 키워드 나열이 아닌 대화 형태로 사이트 콘텐츠를 탐색하고, 웹사이트 역시 이러한 질의에 대응하여 정확하고 풍부한 답변을 제공할 수 있습니다.

특히 이 프로젝트를 이끄는 R.V. Guha는 RSS, RDF, Schema.org 등을 만들어 웹 표준을 주도한 인물로,

NLWeb을 통해 오랜 기간 고민해온 “개방형 웹”의 가치를 AI 시대에 접목하고 있습니다.

기존 기술과의 차별점

NLWeb이 기존의 검색 엔진이나 챗봇과 근본적으로 다른 점은 개방성과 표준성입니다.

지금까지는 개별 웹사이트가 챗봇을 도입하려면 특정 업체의 API에 의존하거나 커스텀 개발을 해야 했습니다.

예를 들어 쇼핑몰이 OpenAI와 제휴해 자체 챗GPT 기반 검색을 구현하는 식의 일대일 맞춤형 계약이 필요했습니다.

본 발표에서 NLWeb에 대해 “더 이상 이러한 1:1 커스텀 딜이 아니라 오픈 프로토콜로 가는 것”이라고 설명합니다.

즉, NLWeb을 도입하면 어떠한 웹사이트라도 손쉽게 표준화된 방법으로 AI 검색 기능을 제공할 수 있고, 외부 거대 모델과도 동등하게 통신할 수 있다는 의미입니다.

NLWeb의 구성요소

NLWeb은 여러 컴포넌트로 이루어진 경량 서비스입니다. 주요 구성은 다음과 같습니다.

• Agent (코어 서비스): 자연어 질의를 처리하는 백엔드 엔진입니다.

  질의를 받아 벡터DB 조회, LLM 응답 생성 등의 핵심 로직을 수행합니다.

  필요에 따라 프롬프트 템플릿이나 응답 형식 등을 커스터마이즈할 수 있습니다.

• Data Connector: 다양한 LLM 모델(OpenAI GPT, Anthropic Claude 등)과 벡터 데이터베이스(Qdrant, Milvus, Azure Cognitive Search 등)에 연결하는 플러그인 모듈입니다.

  개발자는 구성 파일만 변경하여 선호하는 모델과 DB를 선택할 수 있습니다.

• 데이터 투입 도구: 웹사이트의 콘텐츠를 벡터DB에 적재하는 툴입니다.

  Schema.org 마크업 데이터, RSS 피드, JSONL 등 반정형 데이터를 읽어들여 임베딩 생성 후 인덱싱합니다.

  이를 통해 사이트의 페이지, 상품, 리뷰 등의 정보가 검색 가능한 벡터 형태로 저장됩니다.

• 웹 서버 프론트엔드 & UI: 사용자 질의를 받아 Agent에 전달하고 응답을 보여주는 경량 웹 서버 및 채팅 UI입니다.

  기본 제공되는 샘플 UI는 사용자가 브라우저에서 질문을 입력하고 답변을 확인하는 챗봇 형태 인터페이스를 제공합니다.

  실제 프로덕션 환경에서는 이 UI를 커스터마이징하거나 별도 애플리케이션에 통합하는 것이 좋습니다.

이처럼 NLWeb은 코어 엔진부터 데이터 적재, UI까지 한 패키지로 제공되어, 개발자가 복잡한 통합 없이 곧바로 동작하는 챗봇 서비스를 구축할 수 있다는 장점이 있습니다.

또한 모든 구성요소가 MIT 라이선스 오픈소스로 공개되어 있어, 필요하다면 코드를 직접 수정하여 자신만의 특화된 기능을 추가하는 것도 가능합니다.

MCP(Model Context Protocol) 지원

NLWeb을 특별하게 만드는 또 하나의 특징은 MCP 지원입니다.

MCP는 Anthropic 등이 주창하는 오픈 프로토콜로, 다양한 AI 에이전트가 툴이나 외부 지식에 접속해 상호작용할 수 있도록 해줍니다.

NLWeb은 모든 인스턴스가 MCP 서버로 동작하도록 설계되어, 사람뿐 아니라 다른 AI도 해당 웹의 NL 인터페이스에 질의할 수 있습니다.

쉽게 말해 NLWeb = MCP를 말하는 웹용 챗봇 서버라고 보시면 됩니다.

MCP의 동작은 일종의 약속된 질문/응답 API로 이루어지는데,

NLWeb 측에서는 이 프로토콜을 통해 질문을 받으면 자신의 벡터DB와 LLM을 활용해 답변하고, 그 결과를 JSON 등 구조화된 형식으로 반환합니다.

이를 통해 외부 에이전트가 NLWeb에 접속해 실시간으로 해당 웹의 최신 정보를 얻어갈 수 있게 됩니다.

예를 들어 NLWeb을 도입한 TripAdvisor 사이트가 MCP 기능을 활성화하면,

ChatGPT나 Claude 같은 모델이 인터넷 검색 대신 해당 TripAdvisor NLWeb endpoint에 직접 질의를 보내어 풍부한 여행 정보를 받아갈 수 있습니다.

웹사이트 입장에서는 자신의 데이터를 구조화된 방식으로 제공함으로써 AI 에이전트 생태계의 일부가 될 수 있고,

사용자는 각 사이트의 최신 정보에 기반한 정확한 답변을 얻을 수 있어 Win-win이 됩니다.

다만 MCP 참여는 사이트 운영자의 선택 사항이며, 공개 범위도 설정할 수 있습니다.

데이터를 모두 개방할지 일부만 허용할지 결정함으로써, 데이터 주권과 개방성 사이에서 유연한 조율이 가능합니다.

Microsoft는 이러한 MCP 지원을 통해 NLWeb이 “열린 에이전틱 웹”의 기반이 되리라 보고 있으며,

궁극적으로 HTML이 그랬던 것처럼 웹 전반의 상호작용 패러다임을 바꾸는 표준이 되길 기대하고 있습니다.

초기 활용 사례

NLWeb은 발표 시점부터 이미 여러 웹사이트에 시험 도입되고 있습니다.

Microsoft 공식 블로그에 따르면 초기 협력사로 Tripadvisor, Eventbrite, Shopify, O’Reilly Media 등 업계 각기 다른 분야의 사이트들이 참여하여 NLWeb을 테스트했다고 합니다.

예를 들어 여행 정보 플랫폼인 TripAdvisor는 NLWeb을 통해 사용자들이 “이탈리아 로마에서 가족과 갈 만한 현지 맛집 추천해줘”와 같은 복잡한 질문도 자연스럽게 물어볼 수 있는 대화형 가이드를 실험하고 있습니다.

이는 기존의 키워드 기반 검색보다 훨씬 유연하고 맥락있는 Q&A 경험을 제공할 수 있어, 사용자 만족도와 체류 시간을 높일 수 있을 것으로 기대됩니다.

이외에도, 요리 레시피 사이트(Serious Eats)는 재료나 난이도에 맞춘 레시피 대화를, 전자상거래 플랫폼(Shopify)은 재고 정보와 연계한 제품 추천 챗봇 등을 NLWeb으로 구현해 보는 등 다양한 사례가 보고되고 있습니다.

아직은 소규모 파일럿 단계이지만, 이는 NLWeb이 산업 전반에 걸쳐 적용 가능함을 보여주는 증거라 할 수 있습니다.

NLWeb의 작동 방식

NLWeb에 사용자 질문이 들어오면 내부적으로 어떤 일이 일어날까요?

한 마디로 표현하면 “웹문서를 위한 RAG (Retrieval-Augmented Generation)” 과정이 펼쳐집니다.

일반적인 처리 흐름을 단계별로 살펴보면 다음과 같습니다.

1. 벡터 인덱싱 – 우선 웹사이트의 콘텐츠는 벡터DB에 임베딩 되어 저장되어 있습니다. NLWeb은 제공된 데이터 적재 툴로 Schema.org 스키마 데이터나 RSS 피드 등을 읽어와, 각 항목별로 벡터 임베딩을 생성한 후 벡터DB에 색인해 둡니다. 예를 들어 여행지 설명 페이지라면 해당 페이지의 주요 문장들이 벡터화되어 DB에 저장됩니다. 이러한 준비 단계는 앱 기동 시 또는 데이터 업데이트 시 수행되며, 질의 처리 전에 완료되어야 합니다.

2. 질의 임베딩 & 검색 – 사용자가 자연어로 질문을 입력하면, NLWeb은 우선 이 질문을 임베딩 벡터로 변환합니다. 여기에는 구성된 LLM 모델의 임베딩 API를 활용하며, 질문 문장의 의미를 수치 벡터로 표현합니다. 그런 다음 미리 구축된 벡터DB를 유사도 검색하여 질문과 관련도가 높은 문서 조각들을 찾아냅니다. 이때 예를 들어 “서울 추천 맛집 알려줘”라는 질문이라면, 서울 여행글이나 맛집 리뷰에 해당하는 벡터들이 상위 결과로 검색될 것입니다. NLWeb은 이렇게 상위 N개의 연관 콘텐츠와 메타데이터를 획득합니다.

3. 컨텍스트 조합 & LLM 답변 생성 – 검색된 관련 콘텐츠들은 프롬프트 형태로 LLM에 전달되어 답변 생성에 활용됩니다. NLWeb은 기본적으로 프롬프트 템플릿을 사용하여, 사용자 질문과 검색된 문서 내용을 한데 넣은 후 LLM에게 답변을 요청합니다. 예를 들어 프롬프트에는 “다음 사용자 질문에 대답하되, 제공된 웹 문서 내용을 참고하세요.“와 같이 지시하고, 그 아래에 검색된 맛집 리뷰 내용이 첨부되는 식입니다. LLM은 이 프롬프트를 읽고 사용자 질문에 대한 최종 답변을 생성하게 됩니다. 이 과정에서 NLWeb은 LLM이 보다 정확히 답할 수 있도록 추가 지식을 부여하기도 하는데, 예를 들어 지리 질문이라면 위치 정보를 기반으로 추가 맥락으로 인근 도시나 교통정보 등을 LLM에게 전달하여 풍부한 답변을 유도합니다.

4. 결과 반환 – 최종 생성된 답변은 사용자에게 자연어 텍스트로 제공되는 한편, 구조화된 데이터가 포함되어 있을 경우 Schema.org 등의 포맷으로 함께 반환될 수 있습니다. NLWeb의 API는 기본적으로 JSON 형태로 답변을 주도록 설계되어 있어, 대화 UI에서는 텍스트를 보여주고 개발자가 원하면 해당 JSON을 파싱하여 지도 표시나 상품 구매 링크 등과 같은 추가 기능을 구현할 수도 있습니다. 예를 들어 맛집 추천 질문에 답하면서 JSON에 좌표나 예약 링크를 실어 보낼 수 있는 것입니다. 이렇게 대화 UI와 구조화 데이터를 겸비한 응답을 통해, 사용자에게는 편리한 대화 경험을, 개발자에게는 결과 활용의 유연성을 제공합니다.

위 그림은 NLWeb의 전체적인 자리매김을 보여줍니다.

웹 콘텐츠 위에 NLWeb 계층이 놓이고, 그 위로 MCP 등의 프로토콜을 통해 다양한 AI 에이전트들이 연결되는 구조입니다.

NLWeb 내부에서는 앞서 설명한 바와 같이 벡터DB와 LLM이 유기적으로 작동하여 질의응답을 처리합니다.

이러한 모듈식 처리 흐름 덕분에, 개발자는 프롬프트 수정, 검색 결과 개수 조절, 메모리 기능 추가 등 세부 동작을 조정하여 자신만의 웹 에이전트를 만들 수 있습니다.

NLWeb 깃허브 문서에서도 프롬프트 변경, 추가 메모리 연결, UI 변경 등의 방법을 자세히 다루고 있으니 필요에 따라 참고하면 됩니다.

NLWeb 실습 환경 설정하기

이제 NLWeb을 직접 로컬 환경에서 실행해보면서 동작을 이해해보겠습니다. NLWeb 저장소는 오픈소스로 제공되어 누구나 내려받아 실행할 수 있습니다.

실습을 위해서는 Python 3.10+ 환경과 OpenAI API 키가 필요합니다.

여기서는 OpenAI API를 사용한다고 가정하고, 기본적인 설정 과정을 안내합니다. 여러분의 환경에 맞게 적절히 설정하셔도 좋습니다.

1. NLWeb 소스 다운로드: 터미널에서 NLWeb 저장소를 클론하고 필요한 파이썬 패키지를 설치합니다. 자세한 과정은 NLWeb 깃허브(https://github.com/microsoft/NLWeb) 참고 부탁 드립니다.

2. 환경변수 파일 설정: 프로젝트 루트 디렉토리에 기본 제공되는 .env.template 파일을 복사하여 .env로 만들고, 내부에 OpenAI API 키를 설정합니다.

3. 구성 파일 편집: NLWeb의 세부 설정은 code/config/ 폴더 내 YAML 파일들로 관리됩니다. 우선 LLM 및 Embedding 설정 파일에서 OpenAI를 사용하도록 지정합니다. config_llm.yaml과 config_embedding.yaml을 열어 보면, 사용할 모델 제공자를 고르는 항목이 있습니다. 여기서 preferred_provider 값을 openai로 변경합니다. 유사하게 config_embedding.yaml도 preferred_provider: openai로 맞춰줍니다.

4. 벡터DB 설정: NLWeb은 기본 설정으로 Qdrant라는 벡터 데이터베이스를 사용하며, 별도 Docker 등의 설치 없이도 로컬 모드로 구동할 수 있습니다. config_retrieval.yaml 파일을 열어 벡터DB 엔진을 qdrant_local로 설정했는지 확인합니다. 기본적으로 qdrant_local 설정에는 NLWeb 프로젝트 내 data/ 디렉토리에 데이터를 저장하고, 컬렉션 이름은 nlweb_collection으로 사용하는 값들이 들어있습니다. 별도로 수정할 필요는 없지만, 원한다면 경로나 컬렉션명을 변경해도 됩니다.

실습 1. OpenAI 기반 Kevin’s Podcast 질의

NLWeb 깃허브에는 “Hello World” 로 간단한 튜토리얼이 제공되는데요.

여기서는 Microsoft CTO인 Kevin Scott가 진행하는 “Behind the Tech” 팟캐스트를 예시로 들어, 해당 사이트의 RSS 피드를 로드하고 질문을 던져보는 실습을 해보겠습니다.

1. 데이터 로드: 우선 Kevin의 팟캐스트 에피소드 데이터를 벡터DB에 넣어보겠습니다. NLWeb 프로젝트의 code 디렉토리에서 다음 명령을 실행합니다.

   python -m tools.db_load https://feeds.libsyn.com/121695/rss Behind-the-Tech

   위 명령은 Behind the Tech 팟캐스트의 RSS 피드 주소와 사이트 이름을 인자로 받아, 해당 피드의 에피소드 정보를 Qdrant 벡터DB에 적재합니다.

   에피소드마다 제목, 설명 등이 벡터로 저장되어 질의에 대비하게 됩니다.

2. NLWeb 서버 기동: 데이터 로드가 완료되었다면, 이제 NLWeb 서버를 실행합니다. code 폴더에서 다음처럼 명령을 수행하세요.

   python app-file.py

   서버가 시작되면 기본적으로 http://localhost:8000 에서 웹 UI를 제공합니다.

3. 웹 UI를 통한 질의: 브라우저에서 http://localhost:8000에 접속하면 심플한 챗봇 형태의 화면이 나옵니다.

   여기에서 "Behind the Tech 팟캐스트에는 어떤 게스트들이 출연했나요?"라고 물어보겠습니다.

   
   

   이 예제를 통해 NLWeb의 기본 동작을 체험해보았습니다. 우리가 별도로 복잡한 코딩을 하지 않고도, OpenAI AI 모델과 오픈소스 벡터DB(Qdrant), 그리고 기존 웹 데이터(RSS)만으로 자연어 Q&A 웹엡을 손쉽게 구현하였습니다.

실습 2. MCP를 통한 Claude 에이전트와 NLWeb 연동

NLWeb이 Anthropic Claude와 만나는 또 다른 방식은 MCP 프로토콜을 통한 에이전트 통신입니다.

앞서 NLWeb이 MCP 서버로 동작한다고 설명했는데, 반대로 Claude를 에이전트로 활용하여 NLWeb에 질문을 보내고 답을 얻는 시나리오를 생각해볼 수 있습니다.

실제로 Anthropic은 Claude 2부터 외부 웹 검색 API를 도입하여, 필요 시 인터넷에서 정보를 찾아 답변에 반영하는 기능을 추가했습니다.

Claude가 웹 검색이 필요하다고 판단하면 적절한 질의어로 검색하고 결과를 가져와 답변을 개선하는 방식입니다.

이때 NLWeb으로 MCP 엔드포인트를 운영하는 사이트는 Claude가 접근할 수 있는 훌륭한 지식 소스가 될 수 있습니다.

1. 먼저 MCP 서버를 아래를 참고하여 설정해 줍니다.

   파일 경로 : /Users/gukil/Library/Application Support/Claude/claude_desktop_config.json

   {

   "mcpServers": {

   "ask_nlw": {

   "command": "/Users/gukil/Documents/NLWeb/.venv/bin/python",

   "args": [

   "/Users/gukil/Documents/NLWeb/code/chatbot_interface.py",

   "--server",

   "http://localhost:8000",

   "--endpoint",

   "/mcp"

   ],

   "cwd": "/Users/gukil/Documents/NLWeb/code"

   }

   }

   }

2. NLWeb 서버 기동을 확인합니다. 앞선 실습에서 기동이 된 상태라면 바로 다음 단계 넘어가시면 됩니다. 그렇지 않은 경우 code 폴더에서 python app-file.py 을 실행해줍니다.

3. 서버가 잘 실행되었다면 Claude에서 다음과 같이 Tool이 정상적으로 등록되어 사용이 가능합니다.

   
   

4. Claude에서 도구를 사용하려면 단순히 질문 앞에 도구명을 붙이면 됩니다. "ask_nlw Behind the Tech 팟캐스트에는 어떤 게스트들이 출연했나요?"라고 질문해보면 NLWeb과 MCP를 통해서 Web의 내용을 Claude에서 활용하여 답변을 생성하는 것을 확인할 수 있습니다.

   
   

마치며

이 글을 통해 NLWeb의 개념부터 실습까지 폭넓게 살펴보았습니다.

이제 막 걸음마 단계이지만, “웹의 대화형 진화”라는 거대한 흐름에서 NLWeb이 어떤 역할을 할지 매우 흥미롭습니다.

앞으로 NLWeb이 발전함에 따라 웹 개발자와 AI 엔지니어 모두에게 새로운 기회가 열릴 것으로 보입니다.

관심 있는 분들은 NLWeb 깃허브 저장소의 업데이트를 주시하면 좋겠습니다.

자연어로 소통하는 웹, 과연 얼마나 빠르게 현실이 될지 기대가 됩니다.