사장님, 오늘 홈페이지
하나 만들어 갑니다

0-1. 이 홈페이지, 진짜 손님을 데려옵니다

요즘 사람들은 "건대 회식 어디서 하지?"를 네이버가 아니라 챗GPT에게 물어봅니다. 아래는 실제 화면입니다. 누군가 챗GPT에 "건대 단체회식 장소 추천해줘"라고 물었더니, AI가 고기석 건대본점을 추천 목록에 올렸습니다.

그리고 그 추천을 본 손님이 실제로 예약을 했습니다. 예약 화면의 "어떻게 알고 찾아주셨나요?" 답변을 보세요.

이게 핵심입니다. 홈페이지가 없으면 AI가 읽을 내용도 없고, 추천할 근거도 없습니다. 오늘 여러분이 만드는 게 바로 이런 홈페이지의 시작입니다.

0-2. 오늘의 완성품

🔗 고기석 홈페이지 gokiseok.com

주소창에 gokiseok.com 을 직접 쳐서 들어가도 똑같이 열립니다. 오늘 마지막엔 여러분도 이렇게 말로 불러줄 수 있는 내 주소를 하나 갖게 됩니다.

0-3. 클로드는 아는데, 클로드코드는 뭔가요?

챗GPT나 클로드 같은 대화형 AI는 많이 써보셨을 겁니다. 그런데 오늘 쓸 클로드코드는 조금 다릅니다.

예를 들면 "홈페이지 만들어줘" 했을 때

0-4. 준비물 체크

1. 노트북 (Windows 기준으로 진행합니다)
2. Claude Pro 구독 계정: claude.ai 에서 월 $20 구독. 아직이라면 지금 claude.ai에서 가입 후 Pro 결제
3. 이메일 주소: Cloudflare(배포 서비스) 무료 가입에 사용
4. (선택) 가게 사진·로고 2~3장: 노트북에 미리 옮겨두면 좋아요

설치할 것은 두 가지입니다. ① VSCode(작업실) ② 클로드코드(AI 직원). 순서대로 천천히 따라오세요.

1-1. VSCode 설치: 우리의 작업실

VSCode는 마이크로소프트가 만든 무료 프로그램입니다. 우리에겐 "AI 직원이 일하는 사무실"이라고 생각하면 됩니다.

1. 인터넷 브라우저에서 code.visualstudio.com 접속
2. 화면 가운데 큰 Download for Windows 버튼 클릭 → 다운로드된 파일 실행
3. 설치 화면에서 계속 다음 → 마지막에 설치 클릭 (옵션은 건드리지 않아도 됩니다)
4. 설치가 끝나면 종료 클릭. VSCode가 열립니다

1-2. 화면을 한국어로 바꾸기

VSCode는 처음에 영어로 열립니다. 앞으로 편하게 쓰려면 한국어로 바꿔둡시다.

1. Ctrl+Shift+P (Mac은 Cmd+Shift+P)
2. Configure Display Language 입력 후 선택
3. 목록에서 한국어 (Korean) 선택. 설치 안 돼 있으면 자동 설치됩니다

1-3. 클로드코드 설치

1. VSCode 왼쪽 세로 아이콘 중 네모 4개짜리 아이콘(확장, Extensions) 클릭
2. 검색창에 Claude Code 입력
3. 제작사가 Anthropic인 Claude Code를 선택하고 Install(설치) 클릭
4. 설치되면 왼쪽 아이콘 줄에 클로드 아이콘이 생깁니다. 클릭하세요
5. Sign in(로그인)을 누르면 인터넷 브라우저가 열립니다 → Pro를 구독한 claude.ai 계정으로 로그인 → 승인(Authorize) 클릭
6. "브라우저를 닫고 VSCode로 돌아가라"는 안내가 나오면 VSCode로 돌아옵니다

1-4. 작업 폴더 만들기

1. 바탕화면에서 마우스 오른쪽 클릭 → 새로 만들기 → 폴더 → 이름을 내홈페이지로 변경
2. VSCode 상단 메뉴 파일(File) → 폴더 열기(Open Folder) → 방금 만든 내홈페이지 폴더 선택 → 폴더 선택
3. "이 폴더의 작성자를 신뢰합니까?" 창이 뜨면 예, 신뢰합니다 클릭

2-1. 첫 지시 내려보기

아래 문장을 클로드코드 채팅창에 꼭 직접 타이핑해서 넣으세요.

test.html 파일을 만들어줘. "○○○(내 매장 혹은 서비스)에 오신 것을 환영합니다"라는 문구가 나오는 홈페이지 만들어줘

2-2. 수정 시켜보기

이번에도 직접 타이핑입니다. 조금 귀찮아도 두 번만 손으로 쳐보면 그다음부터는 안 보고도 쓰게 됩니다.

배경색을 진한 남색으로 바꾸고, 글자는 흰색으로 해줘. 환영 문구 아래에 "오늘도 정성을 다합니다"라는 작은 문구도 추가해줘.

좋은 홈페이지는 화려한 게 아니라 손님이 궁금한 걸 바로 답해주는 홈페이지입니다. 들어갈 내용은 딱 여섯 가지입니다.

개인 PR 랜딩페이지(프리랜서·강사·온라인 사업)도 똑같습니다. 상호 → 내 이름, 메뉴 → 제공 서비스, 위치 → 활동 지역·연락 채널로 바꾸면 됩니다.

기획 워크시트: 여기에 직접 채워보세요

아래 칸을 채우면, 4장의 마스터 프롬프트에 자동으로 들어갑니다. 편하게 말하듯 쓰세요. 맞춤법·문장력 걱정은 AI가 알아서 다듬어줍니다.

3장 워크시트에 쓴 내용이 아래 프롬프트에 자동으로 들어가 있습니다. 복사 버튼을 눌러 클로드코드에 붙여넣으세요. 초록색 글씨가 여러분이 입력한 내용입니다.

4-1. 마스터 프롬프트 실행

index.html 파일 하나로 된 우리 가게 홈페이지를 만들어줘.

[기본 정보]
- 업종: 
- 상호: 
- 한 줄 소개: 
- 대표 서비스·메뉴: 
- 강점·스토리: 
- 위치: 
- 영업시간: 
- 전화번호: 
- 인스타그램: 
- 카카오톡: 

[요구사항]
1. 휴대폰에서 봐도 깔끔한 반응형 페이지로 만들어줘.
2. 첫 화면에 상호와 한 줄 소개가 크게 보이게 해줘.
3. 대표 서비스·메뉴 3가지를 카드 형태로 보여줘.
4. 강점·스토리 섹션을 넣어줘.
5. 위치·영업시간 섹션을 넣고, 네이버 지도에서 상호를 검색한 결과로 연결되는 "지도 보기" 버튼을 넣어줘.
6. 화면 하단에 항상 보이는 "전화하기" 버튼을 넣어줘. 누르면 바로 전화가 걸리게 해줘.
7. 인스타그램과 카카오톡 링크가 있으면 버튼으로 넣고, 비어 있으면 빼줘.
8. 손님 후기 섹션 자리도 만들어줘. 후기는 일단 "후기 준비 중"으로 비워둬.
9. 사진 자리는 회색 박스로 비워둬. 나중에 사진을 주면 바꿔 넣을 거야.
10. 전체 분위기는  느낌, 색은  계열로 해줘.
11. 글이 어색한 부분이 있으면 자연스럽게 다듬어줘.

1. 클로드코드가 작업하는 동안 화면을 지켜보세요 (1~2분 걸릴 수 있습니다). 파일 생성을 물어보면 수락
2. 완료되면 내홈페이지 폴더의 index.html을 더블클릭해 브라우저로 열기
3. 첫 완성본 감상 🎉 마음에 안 드는 부분을 찾는 게 다음 단계입니다

4-2. 다듬기 라운드: 사장님 취향대로

이제 30분 동안 마음껏 고칩니다. 한 번에 한두 가지씩 시키고, 브라우저 새로고침(F5)으로 확인하세요. 아래는 바로 쓸 수 있는 수정 지시 예문입니다.

지금 홈페이지는 내 노트북에서만 보입니다. 이제 Cloudflare(클라우드플레어)라는 서비스에 올려서, 누구나 접속할 수 있는 주소를 만듭니다. 무료입니다.

5-1. Cloudflare 무료 가입

1. dash.cloudflare.com/sign-up 접속
2. 이메일 주소와 비밀번호 입력 → Sign Up(가입)
3. 가입한 이메일로 온 인증 메일을 열어 Verify email(이메일 확인) 클릭
4. 로그인된 대시보드 화면이 보이면 성공. 유료 결제 안내가 나와도 모두 건너뛰세요. 오늘 쓰는 기능은 전부 무료입니다

5-2. 클로드코드에 배포 시키기

배포도 AI 직원에게 시킵니다. 아래 프롬프트를 붙여넣으세요.

이 폴더의 홈페이지(index.html)를 Cloudflare Pages에 배포해줘. 처음 해보는 거니 차근차근 진행해줘, 내가 해야 될 거 있으면 알려줘.

클로드코드가 알아서 도구(wrangler)를 설치하고 배포를 진행합니다. 중간에 여러분이 할 일은 두 가지뿐입니다.

1. 결재하기: 클로드코드가 명령 실행 허락을 구하면 수락을 누릅니다
2. 로그인 승인: 브라우저에 Cloudflare 로그인 창이 열리면, 로그인 후 Allow(허용) 버튼을 누르고 VSCode로 돌아옵니다

배포가 끝나면 클로드코드가 https://○○○.pages.dev 형태의 주소를 알려줍니다. 🎉

5-3. 수정하고 다시 올리기: 앞으로의 루틴

집에 가서 홈페이지를 고치고 싶을 때, 기억할 건 이 한 줄입니다.

○○○를 이렇게 바꿔줘. 다 고치면 다시 배포해줘.

주소는 그대로, 내용만 새것으로 바뀝니다. 업체에 전화해서 "홈페이지 문구 하나 바꾸는 데 얼마예요?" 물어볼 일이 사라졌습니다.

오늘 우리가 한 것

1. VSCode + 클로드코드 설치: AI 직원 채용
2. 말로 시켜서 홈페이지 제작: 시킨다 → 확인한다 → 다시 시킨다
3. Cloudflare 배포: 전 세계에서 접속되는 내 주소

기억할 건 단 하나의 루틴입니다: "고쳐줘, 그리고 다시 배포해줘." 이것만 있으면 홈페이지는 평생 여러분 손안에 있습니다.

강의에서 받은 주소(○○○.pages.dev)도 잘 작동하지만, 명함과 간판에 넣을 짧은 내 주소를 갖고 싶다면 이 부록을 따라 하세요. 비용은 도메인 값(연 1~2만 원대)뿐이고, 연결은 무료입니다.

1. 가비아에서 도메인 사기

1. gabia.com 접속 → 검색창에 원하는 주소 입력 (예: jinsimsikdang)
2. 구매 가능한 것 중 선택: .com 또는 .co.kr을 추천합니다 (연 1~2만 원대)
3. 가비아 회원가입 후 결제 (등록 기간은 1년이면 충분합니다)

2. Cloudflare에 내 도메인 등록

1. Cloudflare 대시보드 로그인 → 도메인 등록(Add a domain) 클릭 → 구매한 도메인 입력 → 계속
2. 요금제 선택 화면에서 맨 아래 Free(무료) 선택
3. 마지막 화면에 네임서버 주소 2줄이 나옵니다 (○○○.ns.cloudflare.com 모양). 이 화면을 켜둔 채 다음 단계로 가세요

3. 가비아에서 네임서버 바꾸기

1. 가비아 접속 → My가비아 → 도메인 관리 → 내 도메인 옆 관리 클릭
2. 네임서버 설정(변경) 메뉴로 이동
3. 기존 네임서버를 지우고, 2단계에서 받은 Cloudflare 네임서버 2줄을 그대로 입력 → 저장 (소유자 인증을 요구하면 안내대로 진행)
4. 반영까지 보통 10분~몇 시간, 길면 하루쯤 걸립니다. Cloudflare 대시보드에서 도메인 상태가 활성(Active)으로 바뀌면 준비 완료

4. 내 홈페이지에 도메인 붙이기

1. Cloudflare 대시보드 → Workers 및 Pages → 내 홈페이지 프로젝트 클릭
2. 사용자 지정 도메인(Custom domains) 탭 → 도메인 추가
3. 내 도메인(예: jinsimsikdang.com) 입력 → 계속 → 확인. DNS 설정은 Cloudflare가 자동으로 해줍니다
4. 몇 분 뒤 브라우저에서 내 도메인으로 접속 확인 🎉 기존 pages.dev 주소도 계속 같이 작동합니다