# Apps in Chatgpt UI띄울 때, JS/CSS 404 이슈 해결

- 작성자: [소심한 수달](https://community.clauders.ai/member/imported-member-txq75GhzHi)
- 공간: [바이브 코딩](https://community.clauders.ai/claude-code)
- 게시: 2025-11-16
- 연재: [ChatGPT 앱 개발과 출시](https://community.clauders.ai/series/chatgpt-app-development) 1/1편
- 태그: #챗GPT앱
- 주소: https://community.clauders.ai/claude-code/post/apps-in-chatgpt-ui%EB%9D%84%EC%9A%B8-%EB%95%8C-js-css-404-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0-eab797a5-d152-85bf-b553-42c7760b905f

---

##  소개

**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 로딩도 문제없이 수행됨 🎉

### 사용 도구

- `VSCode`
- `Claude Code` (프론트 코드 작업)
- `ngrok` (백엔드 서버 외부 연결)
- `GitHub Pages` (프론트엔드 리소스 호스팅)

## 결과와 배운 점

- JS/CSS를 HTML 내부에 모두 넣으면 용량 증가, 재사용성 저하
- 리소스를 외부 URL로 분리하고, GitHub Pages처럼 안정적인 호스팅 환경을 활용하는 것이 훨씬 효율적

## 도움 받은 글

- 혼자 끙끙거리면서 함