소개
Apps in ChatGPT 를 띄우기 위해 만들어놓은 UI를 띄우는 상황에서 HTML에서 불러오는 JS/CSS 리소스가 ChatGPT 환경 내에서 404 에러를 발생시키는 이슈가 있었고, 이를 해결하는 과정에서 얻은 인사이트를 정리해보았습니다 🛠️
진행 방법
문제: Apps in ChatGPT로 UI불러올 때, HTML 내의 JS/CSS 리소스들이 404 에러 발생
처음에는 일단 띄워볼 목적으로 html내의 인라인 코드로 다 변경해서 올려봤었는데, 코드 재사용성이나 용량 문제도 있어서 이 구조를 계속 가져갈수는 없다고 생각했습니다. 하지만, ngrok을 무료 플랜을 사용하고 있어서 프론트, MCP서버를 동시에 띄울 수 있는 상황이 아니여서 다른 방법을 찾아야 했습니다.
해결 방법
MCP 서버는 ngrok을 통해 외부 공개
프론트엔드 리소스(JS/CSS)는 GitHub Pages에 따로 배포
HTML에서 JS/CSS를 inline으로 모두 포함하지 않고, GitHub Pages의 URL을 통해 외부 참조
그 결과 Apps in ChatGPT 내부에서 HTML이 정상적으로 렌더링되고 JS/CSS 로딩도 문제없이 수행됨 🎉
사용 도구
VSCodeClaude Code(프론트 코드 작업)ngrok(백엔드 서버 외부 연결)GitHub Pages(프론트엔드 리소스 호스팅)
결과와 배운 점
JS/CSS를 HTML 내부에 모두 넣으면 용량 증가, 재사용성 저하
리소스를 외부 URL로 분리하고, GitHub Pages처럼 안정적인 호스팅 환경을 활용하는 것이 훨씬 효율적
도움 받은 글
혼자 끙끙거리면서 함
