코드 없이 AI로 웹사이트 만드는 법

코드 한 줄 안 치고 AI랑 대화만으로 웹사이트를 만들어서 인터넷에 띄우는 방법을 정리했다. 실제로 이 사이트(sonnyplot.com)를 이렇게 만들었고, 저녁에 시작해서 그날 밤에 끝났다. 도구는 Claude Code(AI 코딩 도구)랑 Cloudflare 두 개면 된다.

준비물

도메인 하나 — 나는 sonnyplot.com을 Cloudflare에서 사뒀다 (도메인이 Cloudflare에 있으면 뒤가 훨씬 편하다)
Claude Code — 대화로 시키는 AI 코딩 도구
아는 것: 없어도 됨 — DNS·호스팅이 뭔지 몰라도 된다. 실제로 나도 몰랐다
비용: 도메인 값 말곤 0원

1단계 — AI한테 뭐라고 시키나

거창한 프롬프트는 필요 없다. 그냥 하고 싶은 걸 말하면 된다. 내가 처음 친 문장은 이거였다.

“난 sonnyplot.com이라는 도메인을 하나 사놨거든. 여기에 Claude Code로 재밌는 웹, 나의 놀이 공간을 올리고 싶어. 가능해?”

그랬더니 AI가 호스팅 옵션을 몇 개 비교해주고, 도메인이 Cloudflare에 있으니 Cloudflare에서 다 끝내는 게 깔끔하다고 추천했다. 그 말대로 갔다. → 핵심은 “어디에 올릴지”를 AI한테 물어보고 결정만 하면 된다는 것.

2단계 — Cloudflare로 배포하기

AI가 랜딩 페이지 HTML을 만들어준다 (나는 다크모드 대응 + 실험을 카드로 추가하는 구조로 시켰다)
Cloudflare 대시보드에서 클릭 몇 번으로 파일을 올리면 ~.workers.dev 주소로 바로 배포된다
이 시점에서 이미 임시 주소로는 사이트가 뜬다

3단계 — 내 도메인 연결하기

Cloudflare에서 커스텀 도메인으로 sonnyplot.com을 연결한다. 도메인이 같은 계정에 있으면 DNS가 자동으로 잡히고, HTTPS 인증서도 알아서 붙는다. 몇 분 뒤 https://sonnyplot.com으로 접속되면 성공. 여기서 내가 DNS를 손으로 건드린 건 0번이다.

4단계 — GitHub 자동 배포 붙이기 (선택)

매번 파일을 손으로 올리는 게 귀찮아서 하나 더 시켰다. “코드를 GitHub에 push하면 자동으로 배포되게 해줘.”

AI가 git 저장소를 만들고 GitHub에 올린 뒤 설정 파일을 추가했고, 나는 Cloudflare 화면에서 저장소 연결 버튼만 눌렀다.

⚠️ 막혔던 지점: Cloudflare에서 저장소 목록이 안 뜨는 문제가 있었다. 원인은 GitHub 앱 권한. GitHub → Settings → Applications에서 Cloudflare에 저장소 접근 권한을 주면 목록이 뜬다. 같은 데서 막히면 여기부터 확인하면 된다.

테스트로 페이지 푸터 글자 하나 바꿔서 push했더니 약 20초 만에 실제 사이트에 반영됐다.

결과 — 이렇게 하면 되는 것

✅ sonnyplot.com 라이브
✅ 코드 수정 → push → 자동 배포 (약 30초)
✅ 비용 0원 (도메인 제외), 내가 친 코드 0줄
⏱ 저녁에 시작 → 그날 밤 완료

내가 한 일은 딱 두 가지다: 대화, 그리고 대시보드에서 클릭 몇 번. DNS 레코드가 뭔지, wrangler 설정이 뭔지 지금도 잘 모른다. 모르는 부분은 AI가 처리하고, 나는 “어느 호스팅 쓸래?”, “저장소 공개로 할래 비공개로 할래?” 같은 결정만 했다.

이제 이 놀이터에 뭘 채우느냐가 진짜 실험이다. 다음 글부터는 “AI한테 ○○를 만들어달라고 해봤다” 시리즈로 간다.

이 블로그 자체도 AI가 세팅했고, 글 올리는 것도 AI한테 시킨다. 어디까지 되나 보자.