ChatGPT 앱으로 요기요 배달 주문, 위젯과 MCP의 만남

본 프로젝트는 ChatGPT Apps SDK와 MCP(Model Context Protocol)를 활용하여, 챗GPT 내에서 요기요 배달 서비스를 구현했다. MCP 서버는 툴(Tool) 목록 제공, 툴 호출 처리, 위젯용 HTML/리소스 정보를 제공하며, SSE(Server-Sent Events)를 통해 ChatGPT와 장기 연결을 유지한다. 위젯은 React + Vite 기반으로 개발되었으며, 리스트, 상세, 메뉴, 지도, 리뷰 등 화면을 독립된 HTML/JS/CSS 번들로 빌드한다. 위젯은 ChatGPT의 샌드박스 iframe 안에서 로드되어 실행되며, window.openai.callTool() API를 통해 MCP 서버와 통신한다. 이러한 아키텍처는 대화 흐름 속에서 필요한 데이터만 툴로 가져오고, 그에 맞는 UI를 위젯으로 렌더링하는 경험을 제공한다.

ChatGPT Apps 위젯 개발에서 가장 중요한 부분 중 하나는 CSP(Content Security Policy) 설정이다. ChatGPT는 위젯을 샌드박스 iframe 안에서 실행하며, 기본적으로 모든 외부 네트워크 요청을 차단한다. 외부 JS(Mapbox GL), 이미지 CDN, MCP 서버 호출이 필요한 경우, MCP 메타데이터의 openai/widgetCSP 필드에 허용 도메인을 명시적으로 선언해야 한다. CSP 위반 시 에러 팝업 없이 이미지가 안 뜨거나, 지도가 빈 화면이 되는 등 조용히 실패하는 경우가 발생하므로, 개발 초기부터 위젯에서 사용하는 외부 리소스를 파악하고, MCP 메타데이터에 정확하게 설정해야 한다. 특히, data: URI와 같은 인라인 리소스의 경우에도 resource_domains에 명시해야 한다.

배포 환경에서는 MCP 서버 URL, 위젯 CDN URL, 위젯 도메인 등 세 가지 URL을 분리하여 관리한다. 위젯 정적 파일은 S3 + CloudFront CDN을 통해 서빙하며, MCP 서버는 EC2에서 실행되고 ALB를 통해 HTTPS로 노출된다. 위젯 빌드 시에는 위젯 CDN URL을 주입하여 HTML 안의 스크립트/스타일 경로를 생성하고, MCP 서버의 CSP에도 이 도메인을 허용하도록 설정한다. MCP 서버의 ReadResource에서 위젯 HTML 템플릿을 내려줄 때, HTML 안에 링크된 JS 파일명에는 빌드 시 생성되는 콘텐츠 해시가 포함되므로, MCP 서버 배포 시에도 반드시 최신 빌드 결과물의 해시를 맞춰야 한다. 이러한 URL 분리 전략과 빌드 파이프라인 구축을 통해 배포의 독립성과 안정성을 확보했다.

프로덕션 환경에서 Datadog APM을 사용하여 트레이스와 성능을 모니터링한다. Node 서버에는 dd-trace를 사용하고, 호스트에 Datadog Agent가 떠 있으면 트레이스가 자동으로 수집된다. 특히, SSE(Server-Sent Events) 트래픽을 분석하기 위해 커스텀 스팬을 추가하여, “GET /mcp → mcp.sse_connection → mcp.sse_send 여러 개”와 같은 트레이스 트리를 구성했다. 또한, Tracer 초기화 순서를 보장하여 HTTP 패치를 적용하고, 위젯 버전과 MCP 서버 간의 일관성을 유지하기 위한 배포 절차를 문서화했다. 이러한 모니터링 체계를 통해 시스템의 가시성을 확보하고, 문제 발생 시 신속하게 대응할 수 있도록 했다.

개발 완료 후, 실제 서비스 출시를 위해서는 OpenAI에 앱을 등록하는 절차를 거쳐야 한다. 이 과정에서 사업자 인증, 도메인 소유권 인증, 테스트 케이스 작성, OS별 구동 영상 등 예상치 못한 항목들이 요구되었다. 특히, 도메인 인증을 위해 MCP 서버에 .well-known 경로를 서빙하는 핸들러를 급히 추가해야 했고, 테스트 케이스는 End-to-End 시나리오를 플랫폼별로 작성해야 했다. 앱 등록에 필요한 준비물을 개발 단계에서 미리 파악하고 병행하는 것이 중요하며, 출시 리드 타임(Lead Time)을 단축하기 위한 노력이 필요하다.