MCP 기반 Inline UI 설계를 통한 AI 클라이언트 내 DOOM 런타임 구현

DOOM running in ChatGPT and Claude

2026년 4월 28일6분intermediate

AI 요약

Context

AI 클라이언트 내에서 인터랙티브한 게임 경험을 제공하기 위해 MCP(Model Context Protocol) 기반의 앱 구조 설계가 필요했음. 단순 URL 링크 제공을 넘어 호스트 환경의 CSP(Content Security Policy) 및 Iframe 제약 사항으로 인해 Inline UI 렌더링 시의 브라우저 보안 정책 충돌 문제가 발생함.

Technical Solution

cloudflare/doom-wasm 기반의 WebAssembly 런타임을 활용하여 브라우저 내 독립적인 DOOM 엔진 구동 환경 구축
Signed Token 기반의 Stateless 세션 모델을 채택하여 서버 사이드 Persistence 없이 URL만으로 게임 부팅이 가능한 구조 설계
Nested Iframe 구조에서 발생하는 CSP 및 frame-src 제약을 해결하기 위해 MCP App View 내에 DOOM Canvas를 직접 렌더링하는 Direct Rendering 방식으로 아키텍처 전환
Netlify의 단일 도메인 하에 /doom/* 경로를 네임스페이스화하여 정적 에셋과 MCP 서버의 동시 배포 및 경로 일관성 확보
Blob-backed preload 방식의 불안정성을 제거하고 WAD 파일을 Emscripten 파일시스템에 직접 기록하여 런타임 로딩 신뢰성 향상
Inline UI 지원 여부에 따라 create_doom_session과 get_doom_launch_url 툴을 분기 제공하는 Progressive Enhancement 전략 적용

실천 포인트

- 외부 호스트에 UI를 임베딩할 때 Nested Iframe 대신 Direct Canvas/DOM 렌더링을 통해 CSP 제약 최소화 - 세션 상태를 서버에 저장하지 않고 Signed Token에 포함하여 인프라 복잡도를 낮추는 Stateless 인증 흐름 검토 - WASM 기반 런타임 도입 시 에셋 로딩 경로를 가상 파일시스템(Emscripten 등)에 직접 매핑하여 Origin 관련 버그 방지

태그

#MCP #CSP #Stateless Session #WebAssembly #Progressive Enhancement

원문 읽기