ChatGPT에서 요기요 배달 사용하기 — MCP와 위젯 연동 개발기

ChatGPT Apps SDK와 MCP(Model Context Protocol) 를 결합해, 요기요 배달 기능을 ChatGPT 대화 안에 넣는 구조를 만들었다. 핵심은 AI가 배달 서비스를 대체하는 것이 아니라, 플랫폼이 Tool과 위젯을 열어 ChatGPT가 필요한 기능만 호출하고 바로 렌더링하게 하는 방식이었다.

출발점은 OpenAI의 Apps SDK Examples 중 Node.js 예제였고, 프로토타입 단계에서는 Claude를 활용한 Vibe Coding으로 속도를 끌어올렸다. 이후 요기요 내부 API를 실제로 연결하고, TypeScript 단일 스택으로 MCP 서버와 React 위젯을 함께 운영할 수 있도록 모노레포 구조를 정리했다.

구현은 여러 단계로 확장됐다.

• Phase 1: mock 데이터를 제거하고 요기요 내부 API로 교체, tools/list와 tools/call 흐름을 배달 도메인에 맞게 재설계
• Phase 2: Figma 가이드와 OpenAI 디자인 가이드에 맞춰 리스트, 상세, 메뉴, 지도, 리뷰 위젯을 재구성
• Phase 3: MCP 서버와 위젯 정적 파일 서빙을 분리해, 서버는 비즈니스 로직에 집중하고 위젯은 S3 + CloudFront 로 배포
• Phase 4: openai/widgetCSP 를 정리해 Mapbox, 이미지 CDN, S3 등 허용 도메인을 명시
• Phase 5: Datadog APM 과 dd-trace 를 붙이고 SSE 연결과 메시지 전송에 커스텀 스팬을 추가
• Phase 6: ESM 환경에서 dd-trace 초기화 순서를 고쳐 트레이싱 누락을 해결

가장 까다로웠던 부분은 CSP였다. sandbox iframe 안에서는 외부 리소스가 조용히 막히기 때문에, 지도 타일, 이미지, data: URI, 외부 JS가 하나만 빠져도 화면이 빈 채로 끝났다. 결국 connect_domains, resource_domains, script_domains 를 환경별로 동적으로 관리하고, 로컬·ngrok·프로덕션을 각각 분리해 다뤄야 했다.

운영과 등록 절차도 개발만큼 중요했다. 앱 제출에는 Business Verification, 도메인 소유권 검증, 테스트 케이스, OS별 구동 영상이 필요했고, 등록부터 약 50일 뒤에야 Approved 상태가 됐다. 그 과정에서 .well-known/openai-apps-challenge 엔드포인트를 추가하고, 실제 배포와 동일한 빌드 해시를 맞추기 위해 위젯 배포와 MCP 서버 배포 순서까지 고정했다.

결국 이 프로젝트가 보여준 것은, ChatGPT 안에서 동작하는 배달 경험은 단순한 텍스트 응답이 아니라 대화 + Tool 호출 + 인라인 위젯 의 결합으로 완성된다는 점이다. 다음 단계는 주문·결제 플로우, 위젯 UX 개선, 사용 지표 연동까지 확장하는 것이다.