피드로 돌아가기
Dev.toInfrastructure
원문 읽기
Static Site와 MCP 기반 Agent 레이어 분리로 고성능 AI 교육 플랫폼 구현
How I turned a static site into a fully agentic AI course site using MCP and AI agents
AI 요약
Context
콘텐츠 제공을 위한 정적 사이트의 빠른 속도와 저렴한 비용은 유지하되, 사용자 상태 추적 및 인터랙티브한 학습 경험 제공이라는 상충하는 요구사항 해결 필요. 기존 AI 챗봇의 단순 FAQ 수준을 넘어 학습자의 코드 검증 및 진도 관리가 가능한 Agentic Layer 도입을 목표로 함.
Technical Solution
- Content와 Agency를 완전히 분리하여 Quarto 기반 Static HTML은 Cloudflare Pages로 서빙하고, 동적 기능은 별도의 Agentic Layer에서 처리하는 아키텍처 설계
- Cloudflare Worker 상에 Model Context Protocol(MCP) 서버를 구축하여 IDE, CLI, 웹 위젯 등 다양한 인터페이스가 동일한 도구 세트(ask, find, validate)를 공유하도록 구현
- FetchLens.ai를 통해 정적 콘텐츠에 기반한 RAG(Retrieval-Augmented Generation)를 구현하여 답변의 근거를 사이트 내 콘텐츠로 한정
- Discord OAuth를 통한 통합 인증 체계를 구축하여 웹-터미널-IDE 전 영역에서 동일한 학습자 레코드와 진행 상태를 동기화
- @aiedx/firstbreakai npm 패키지를 통해 로컬 MCP 서버를 제공함으로써 오프라인 환경에서도 루브릭 기반의 코드 검증이 가능하도록 설계
- JavaScript 기반 위젯을 Deferred Script로 로드하여 메인 콘텐츠의 LCP(Largest Contentful Paint) 및 SEO 성능 저하를 원천 차단
실천 포인트
1. AI 기능을 추가할 때 기존 애플리케이션을 리라이트하는 대신 별도의 MCP 서버 레이어 구축 검토
2. SEO와 초기 로딩 속도 유지를 위해 AI 위젯은 반드시 비동기/지연 로딩(Deferred Loading) 처리
3. 사용자 경험의 일관성을 위해 웹, CLI, IDE 등 서로 다른 접점에서 동일한 API 엔드포인트를 공유하는 아키텍처 설계
4. 콘텐츠 업데이트 주기와 기능 업데이트 주기를 분리하여 배포 파이프라인의 독립성 확보