Build Log #5: AI가 만든 코드, 어떻게 세상에 공개할까?

이전 글에서 24개의 프롬프트로 블로그를 만드는 과정을 보여드렸습니다.

그런데 한 가지 의문이 생깁니다.

"만들어진 코드는 내 PC에만 있잖아. 다른 사람들은 어떻게 내 블로그에 들어오지?"

이번 글에서는 그 과정을 설명합니다.

---

먼저, 지금 상황을 정리하면

Claude Code가 코드를 만들어줬고, 그 코드는 제 PC 안에 있습니다.

C:\Users\toby\aicraftlog\
├── src/          ← 블로그 소스 코드
├── content/      ← 블로그 글 (마크다운 파일)
├── public/       ← 이미지, 로고
├── package.json  ← 프로젝트 설정
└── ...

이 상태에서는 제 PC에서만 블로그가 보입니다. 전 세계 사람들이 aicraftlog.com에 접속하려면, 이 코드를 인터넷에 올려야 합니다.

여기서 두 가지 도구가 필요합니다.

---

Git이란?

Git은 코드의 변경 이력을 기록하는 도구입니다.

비유하면 이렇습니다.

워드에서 문서를 작성할 때, "보고서_v1", "보고서_v2", "보고서_최종", "보고서_진짜최종" 이렇게 파일을 복사한 경험이 있을 겁니다. Git은 이 과정을 자동으로 해줍니다.

하나의 파일에서 모든 변경 이력을 기록하고, 언제든 이전 버전으로 돌아갈 수 있습니다.

Git이 기록하는 것

• 언제 수정했는지 (날짜, 시간)
• 무엇을 수정했는지 (어떤 파일, 어떤 줄)
• 왜 수정했는지 (커밋 메시지)

예를 들어, 블로그 색상을 파란색에서 초록색으로 바꿨다면, Git은 "3월 1일, theme.css 파일의 12번째 줄에서 blue를 green으로 바꿨음"이라고 자동으로 기록합니다.

Git은 아래 링크에서 설치할 수 있습니다.

https://git-scm.com/

---

GitHub이란?

GitHub은 Git으로 관리하는 코드를 인터넷에 보관하는 서비스입니다.

Git이 "변경 이력을 기록하는 도구"라면, GitHub은 "그 기록을 클라우드에 저장하는 장소"입니다.

비유하면, Git은 일기장이고, GitHub은 그 일기장을 보관하는 클라우드 서랍장입니다.

GitHub을 쓰는 이유

1. 백업 — 내 PC가 고장나도 코드가 사라지지 않습니다.

2. 공유 — 다른 사람에게 코드를 보여줄 수 있습니다. 제 블로그 코드도 GitHub에 공개되어 있습니다: https://github.com/johnehk86/aicraftlog

3. 자동 배포 — GitHub에 코드를 올리면, Cloudflare가 자동으로 웹사이트를 업데이트합니다. 이게 가장 중요한 이유입니다.

---

Cloudflare Pages란?

Cloudflare Pages는 코드를 웹사이트로 바꿔주는 서비스입니다.

GitHub에 올린 코드 파일들은 그 자체로는 웹사이트가 아닙니다. 누군가 aicraftlog.com을 입력했을 때 화면이 나오려면, 코드를 웹사이트로 변환하고 전 세계에서 접속 가능한 서버에 올려야 합니다.

Cloudflare Pages가 이 두 가지를 자동으로 해줍니다.

Cloudflare Pages가 하는 일

1단계: 빌드 (Build) — 코드를 웹사이트로 변환합니다.

2단계: 배포 (Deploy) — 변환된 웹사이트를 전 세계 서버에 올립니다.

그리고 이 모든 것이 git push 한 번에 자동으로 일어납니다.

빌드란?

AI(Claude Code)가 만들어준 코드는 TypeScript, JSX, MDX 같은 형식으로 되어 있습니다. 문제는 브라우저(크롬, 사파리 등)가 이 파일들을 직접 읽지 못한다는 것입니다.

브라우저가 읽을 수 있는 건 오직 세 가지입니다:

• HTML — 페이지의 내용과 구조 (뼈대)
• CSS — 색상, 폰트, 레이아웃 (디자인)
• JS — 클릭, 검색, 다크모드 전환 (동작)

빌드는 소스 코드를 이 세 가지로 변환하는 과정입니다.

비유하면, 여러 언어로 쓰인 원고(소스 코드)를 누구나 읽을 수 있는 책(HTML/CSS/JS)으로 번역하고 편집하고 인쇄하는 것과 같습니다.

배포란?

빌드가 끝나면 HTML, CSS, JS 파일이 만들어집니다. 배포는 이 파일들을 전 세계 Cloudflare 서버에 올려서, 누구든 aicraftlog.com에 접속하면 볼 수 있게 하는 것입니다.

그리고 이 모든 것이 무료 플랜으로 가능합니다.

---

전체 흐름: PC → GitHub → Cloudflare

전체 과정은 딱 3단계입니다.

1단계: 내 PC에서 코드 작성

Claude Code가 코드를 만들어주면, 내 PC의 프로젝트 폴더에 파일이 생깁니다. VS Code에서 확인할 수 있습니다.

2단계: GitHub에 코드 올리기

터미널에서 명령어 3줄을 입력합니다.

git add .
git commit -m "블로그 디자인 수정"
git push

git add . — "이 파일들을 올릴 준비를 해줘"

git commit -m "메시지" — "이번 변경 내용을 기록해줘. 메모는 '블로그 디자인 수정'이야"

git push — "GitHub 서버로 보내줘"

이 3줄이면 내 PC의 코드가 GitHub에 올라갑니다.

3단계: Cloudflare가 자동으로 웹사이트 업데이트

GitHub에 코드가 올라가는 순간, Cloudflare Pages가 자동으로 감지합니다. 그리고 새로운 코드를 가져와서 웹사이트를 다시 만들어줍니다.

내가 할 일은 없습니다. git push만 하면 1~2분 뒤에 aicraftlog.com이 자동으로 업데이트됩니다.

---

처음 GitHub에 연결하는 방법

아직 GitHub 계정이 없다면, 처음 한 번만 설정하면 됩니다.

1. GitHub 가입

https://github.com 에서 무료 계정을 만듭니다.

2. 새 Repository 만들기

GitHub에 로그인한 뒤, "New Repository" 버튼을 클릭합니다. Repository 이름에 프로젝트 이름(예: aicraftlog)을 입력하고 "Create"를 클릭하면 됩니다.

3. 내 PC와 GitHub 연결

터미널에서 아래 명령어를 실행합니다.

cd aicraftlog
git init
git remote add origin https://github.com/내아이디/aicraftlog.git
git add .
git commit -m "첫 번째 커밋"
git push -u origin main

이 과정은 처음 한 번만 하면 됩니다. 이후부터는 git add, git commit, git push 3줄이면 충분합니다.

---

Cloudflare Pages 연결하기

GitHub에 코드가 올라갔으면, 이제 Cloudflare Pages에 연결합니다.

1. Cloudflare 가입

https://dash.cloudflare.com 에서 무료 계정을 만듭니다.

2. Pages 프로젝트 생성

Cloudflare 대시보드에서 "Workers & Pages" 메뉴를 클릭합니다.

페이지를 시작하려면 "Get Started"를 선택해주세요.

그리고 "Import an existing Git repository"를 선택해주세요.

GitHub 계정을 연결하고, aicraftlog 레포지토리를 선택합니다.

3. 빌드 설정

빌드 명령어와 출력 디렉토리만 입력하면 됩니다.

빌드 명령어: npx @cloudflare/next-on-pages
출력 디렉토리: .vercel/output/static

"Save and Deploy"를 누르면, 첫 번째 배포가 시작됩니다.

4. 도메인 연결

배포가 완료되면 Cloudflare가 임시 주소를 줍니다 (예: aicraftlog.pages.dev). 여기에 자신의 도메인(aicraftlog.com)을 연결하면 끝입니다.

---

정리

단계도구역할

코드 작성	VS Code + Claude Code	AI가 코드를 만들어 줌
코드 보관	Git + GitHub	변경 이력 기록, 클라우드 백업
웹사이트 공개	Cloudflare Pages	코드를 웹사이트로 자동 변환

일상적인 작업 흐름은 이렇습니다.

코드 수정 → git add . → git commit -m "메시지" → git push → 자동 배포 완료

한 번 설정해두면, 이후에는 git push 한 줄이면 전 세계에 내 블로그가 공개됩니다.

---

다음 글 예고

블로그가 만들어지고, 배포까지 완료되었습니다.

다음 글에서는 도메인을 구매하는 방법과 사이트에 연결하는 방법을 정리하겠습니다.

Build Log #6에서 만나겠습니다.