전체 흐름부터 이해하기: 파일이 웹주소가 되는 과정

먼저 결과부터

우리가 만들려는 구조는 단순합니다. ChatGPT가 code를 만들고, GitHub가 안전하게 보관하고, Cloudflare가 인터넷 주소로 보여줍니다. 처음 연결만 끝내면 이후에는 GitHub의 파일이 바뀔 때마다 웹사이트가 자동으로 다시 배포됩니다.

각 서비스가 맡는 역할

ChatGPT와 Codex

ChatGPT는 화면, 문구, folder tree, bug 수정 방향과 배포 설정을 설계합니다. 표준 ChatGPT GitHub app은 repository 읽기·검색용이며, write 작업은 Codex나 별도 write 권한이 있는 도구가 필요합니다. 다만 가능한 action은 연결 방식과 권한마다 다릅니다. 새 repository 생성, GitHub 승인, Cloudflare account 승인처럼 계정 소유 확인이 필요한 작업은 해당 action이 없으면 사용자가 한 번 눌러야 합니다.

GitHub

웹사이트 원본과 변경 기록을 보관합니다. 잘못 수정해도 이전 commit으로 되돌릴 수 있고, Cloudflare가 어느 branch를 배포할지 판단하는 기준이 됩니다. 초보자는 main을 실제 공개용, 나머지 branch를 미리보기용으로 생각하면 됩니다.

Cloudflare Pages

GitHub repository를 연결해 정적 파일을 전 세계 CDN에 배포합니다. main에 push하면 production 주소가 갱신되고, 다른 branch에는 별도의 preview 주소가 만들어집니다.

정적 웹과 관리자 웹을 구분해야 하는 이유

소개 페이지, 블로그, 사용 설명서는 HTML·CSS·JavaScript만으로 충분합니다. 반대로 관리자 login, 문의 저장, 결제, 프로그램 upload는 server code와 Database가 필요합니다. 이 둘을 처음부터 구분하면 “화면은 보이는데 저장이 안 되는” 문제를 막을 수 있습니다.

처음 한 번만 하는 설정

1. GitHub account 준비
2. ChatGPT에서 GitHub app 연결
3. repository 생성
4. Cloudflare에서 GitHub 승인
5. production branch와 output folder 지정

여기까지 끝나면 그다음부터는 code 수정 → GitHub commit → Cloudflare 자동 배포로 돌아갑니다.