ChatGPT 코드를
라이브 웹사이트로
ChatGPT가 만든 HTML, CSS, JavaScript, React 파일을 완성된 프런트엔드로 저장해 업로드하고, 테스트와 공유, 도메인 연결이 가능한 HTTPS URL을 받으세요.
어떤 ChatGPT 결과물을 배포할 수 있나요?
AI 결과물이 정적 프런트엔드라면 DeployPages가 알맞은 대상입니다. 생성된 앱에 서버, 데이터베이스, 인증, 비밀 키가 필요하다면 그 부분은 백엔드로 분리하세요.
단일 HTML 파일
인라인 CSS와 JavaScript가 포함된 완성형 index.html이 가장 단순한 경로입니다. 파일을 업로드하고 생성된 URL을 테스트하세요.
여러 파일로 된 정적 사이트
ChatGPT가 HTML, CSS, JS, 이미지, 폰트 파일을 따로 준다면 자산 경로가 유지되도록 전체 폴더를 업로드하세요.
React 또는 Vite 프로젝트
소스 프로젝트를 그대로 올리지 말고 먼저 빌드한 뒤 dist나 build 같은 프로덕션 결과물 폴더를 업로드하세요.
프레임워크 정적 export
프레임워크가 정적 파일을 생성하는 경우에 동작합니다. 서버 렌더링 route, API route, 데이터베이스 로직은 별도 런타임이 필요합니다.
프롬프트에서 라이브 URL까지 세 단계
배포 가능한 파일 요청
ChatGPT에 index.html, style.css, script.js, 이미지나 폰트를 위한 assets 폴더처럼 파일명이 분명한 정적 프런트엔드 프로젝트를 요청하세요.
전체 프로젝트 저장
페이지가 CSS, JavaScript, 이미지, 폰트를 참조한다면 보이는 HTML만 붙여 넣지 마세요. ChatGPT가 사용한 파일명과 폴더 경로를 그대로 유지합니다.
업로드하고 검토
완성된 폴더를 DeployPages에 올리고 라이브 URL을 열어 레이아웃, 링크, 이미지, 폼, 콘솔 오류를 확인한 뒤 공개적으로 공유하세요.
AI 생성 코드를 공개하기 전에
ChatGPT는 첫 버전을 빠르게 작성합니다. 배포 단계에서는 누락 파일, 임시 문구, 위험한 가정이 바로 드러납니다.
임시 문구 교체
가짜 이메일, lorem 문구, 샘플 가격, 임시 링크, 만들어낸 후기 같은 내용을 공개 전에 찾아 바꾸세요.
자산 경로 확인
이미지나 스타일시트를 참조한다면 업로드 폴더에 같은 상대 경로로 해당 파일이 존재하는지 확인하세요.
노출된 비밀값 제거
AI가 만든 프런트엔드 코드에 비밀 API key, database URL, service token, 관리자 인증 정보를 넣어 공개하지 마세요.
실제 브라우저 페이지 테스트
배포된 URL을 데스크톱과 모바일에서 열어 콘솔 오류, 깨진 폼, 외부 링크, 반응형 레이아웃, 로딩 동작을 확인하세요.
자주 생기는 ChatGPT 배포 문제
채팅 미리보기에서는 되는데 업로드 후 깨집니다
미리보기는 누락 파일 문제를 숨길 수 있습니다. 참조된 모든 파일을 저장하고 메인 HTML 파일과 함께 전체 폴더를 업로드하세요.
이미지가 깨집니다
ChatGPT에 필요한 자산 목록을 요청한 뒤 각 파일이 실제로 있는지 확인하세요. 상상으로 만든 이미지 경로는 실제 파일이나 호스팅 이미지 URL로 바꾸세요.
폼이 아무 동작을 하지 않습니다
정적 호스팅은 폼을 보여줄 수 있지만 백엔드를 만들지는 않습니다. 제출을 받으려면 폼 엔드포인트, 서버리스 함수, 외부 서비스를 연결하세요.
React 버전이 바로 배포되지 않습니다
의존성을 설치하고 프로덕션 빌드를 실행한 뒤 생성된 결과물 폴더를 업로드하세요. 소스 파일과 package.json은 배포 가능한 정적 사이트가 아닙니다.
ChatGPT 배포 FAQ
ChatGPT Artifacts의 코드도 배포할 수 있나요?
네. ChatGPT가 파일 묶음이나 완성된 프런트엔드 프로젝트를 제공하면 정적 파일을 직접 업로드하세요. React 스타일 프로젝트는 먼저 빌드하고 생성된 출력 폴더를 올리면 됩니다.
프로젝트가 로컬 이미지나 자산을 사용하면 어떻게 하나요?
이미지 경로, 스타일, 스크립트가 유지되도록 전체 폴더를 업로드하세요. 로컬 자산을 참조하는 프로젝트에서 HTML 파일만 올리면 안 됩니다.
첫 배포 후 사이트를 업데이트할 수 있나요?
네. ChatGPT에서 수정 버전을 만들고 새 파일을 업로드하면 DeployPages가 기존 배포를 업데이트된 빌드로 교체할 수 있습니다.
ChatGPT가 만든 백엔드 코드도 여기서 실행되나요?
이 정적 배포 흐름에는 포함되지 않습니다. DeployPages는 프런트엔드 출력물을 호스팅합니다. 백엔드 route, 데이터베이스, 인증 callback, 비밀 키는 백엔드나 서버리스 런타임이 필요합니다.
배포 전에 ChatGPT에 무엇을 요청해야 하나요?
필요한 모든 파일을 나열하고, 임시 문구를 제거하고, 상대 자산 경로를 쓰고, 프런트엔드 코드에 비밀값을 넣지 않으며, 백엔드가 필요한 부분을 설명해 달라고 요청하세요.