ChatGPT에서 요기요 배달 쓰기 — MCP + 위젯 연동 개발기

핵심 내용

• ChatGPT Apps SDK와 MCP로 요기요 배달 서비스를 연동한 개발기
• 대화 흐름에서 레스토랑 검색, 메뉴·리뷰·지도 확인, 주문 진입까지 이어지는 위젯 기반 상호작용 구조
• MCP 서버와 위젯을 TypeScript 단일 스택으로 구성하고, 프로토타이핑부터 운영 분리까지 단계적으로 확장

구조와 흐름

• MCP 서버가 tools/list, tools/call, read resource를 담당하고 요기요 내부 API를 호출
• React + Vite 위젯이 sandbox iframe 안에서 렌더링되며 window.openai.callTool로 상호작용
• 정적 리소스는 S3 + CloudFront, 서버는 EC2/ALB로 분리해 배포 독립성 확보

성능/운영 포인트

• CSP 화이트리스트 관리로 Mapbox, 이미지 CDN, data URI 등 외부 리소스 제어
• 빌드 해시와 배포 순서를 맞춰 위젯 로딩 실패 방지
• Datadog APM, SSE 트레이스, 로컬 mock-openai.js로 개발·운영 관측성 강화

적용해볼 점

• MCP와 위젯을 분리해 AI 서비스 연동 UI를 대화형으로 설계하는 방식
• 개발용 워크스페이스, ngrok, 로컬 테스트 위젯으로 E2E 검증하는 방식
• readOnlyHint, suggestedNextTools 같은 메타데이터로 ChatGPT 도구 사용성을 높이는 방식