내 도메인 웹사이트
처음부터 만들기

HOW TO READ

이 가이드, 이렇게 읽으세요

THE BIG PICTURE

전체 작업 흐름 — 이 순서가 곧 정답입니다

1. ① 만들기웹사이트 제작Claude Code로 시작 (필요하면 로그인 기능도)
2. ② 보관GitHub 저장소코드가 인터넷 창고에 보관됨
3. ③ 공개Vercel 배포임시 주소 내프로젝트.vercel.app
4. ④ 로그인허용 주소 등록구글 로그인을 쓸 때만
5. ⑤ 핵심도메인 구매·연결정식 주소 내도메인.kr
6. ⑥ 검색검색·공유 설정검색·SNS 미리보기
7. ⑦ 확장서브사이트 추가docs. lesson. 같은 주소
8. ⑧ 루틴고치고 다시 올리기수정 → 1~2분 뒤 자동 반영

BASIC CONCEPT

웹사이트를 "가게"에 비유하면

HOW IT WORKS

주소를 입력하면 일어나는 일

1. ① 방문자 주소 입력

   브라우저에 내도메인.kr을 입력해요.

2. →
3. ② DNS 전화번호부 확인

   "216.198.79.1 번지예요." — 이 내용은 내가 닷홈에서 적어둔 것!

4. →
5. ③ Vercel 사이트 파일 전달

   그 번지의 Vercel 서버가 "내도메인.kr은 이 프로젝트구나" 하고 파일을 보내줘요.

6. →
7. ④ 완성 사이트 표시

   브라우저에 사이트가 🔒 자물쇠와 함께 보여요.

주소 입력 → 전화번호부(DNS) → 호스팅(Vercel) → 화면 표시

SERVICES

쓰는 서비스와 역할, 비용

* Vercel 무료(Hobby) 플랜은 개인·비상업 용도 기준입니다. 상업 목적이면 약관을 확인하세요.

WHO DOES WHAT

누가 무엇을 하나요? 🧑 사람 · 🤖 Claude

SAFETY RULES

Claude에게 클릭을 맡기는 법, 그리고 안전 규칙

1. 1

   사람이 먼저 로그인

   GitHub·Vercel에 브라우저로 직접 로그인합니다. 비밀번호·인증은 사람이!

2. 2

   "네가 해줘"라고 말하기

   맡기겠다는 뜻을 분명히 말합니다. Claude는 무엇을 누르는지 말해주고 진행해요.

3. 3 ★ 안전 장치

   보안 화면에서는 멈춤

   2단계 인증, 복구 코드, 결제, 약관 동의가 나오면 Claude는 멈추고 사람에게 넘깁니다.

CHECKLIST

준비물 — 미리 만들어 두면 편해요

PART A · STEP 0-1

GitHub 가입 (코드 보관함)

1. 1

   접속

   github.com 접속 → 오른쪽 위 Sign up

2. 2

   이메일 → 비밀번호 → 사용자 이름

   사용자 이름(Username)은 github.com/사용자이름 주소와 저장소 주소에 들어가요. 영문 소문자로 신중히 정하세요.

3. 3

   퍼즐 → Create account

   로봇이 아닌지 확인하는 퍼즐을 풀고 Create account. 이메일로 온 인증 코드를 입력합니다.

4. 4

   설문은 Skip, 요금제는 Free

   설문 화면은 Skip해도 되고, 요금제는 Free(무료)를 선택합니다.

5. 5 권장

   2단계 인증 켜기

   Settings → Password and authentication에서 2단계 인증을 켭니다.

PART A · STEP 0-2, 0-3

구글(Firebase) · 닷홈 가입

PART A · STEP 0-4, 0-5

내 컴퓨터에 프로그램 설치 + 인증 앱

버전 숫자가 나오면 설치된 것입니다. 설치가 끝나면 Claude가 확인 명령을 대신 실행해 줄 수도 있어요.

PART A · STEP 1

사이트 만들기 시작 — 말로 요청하면 돼요

PART A · STEP 1

내 컴퓨터에서 미리 보기

터미널(PowerShell)에서 사이트 폴더로 이동한 뒤 입력하세요. 직접 치기 어려우면 [코드 복사] 버튼을 눌러 붙여넣어도 좋아요.

npm install
npm run dev

npm run build

PART A · STEP 2 · 로그인이 필요할 때만

Firebase로 구글 로그인 연결

1. 1

   프로젝트 추가

   console.firebase.google.com → 프로젝트 추가 (이름 자유: 예 내프로젝트)

2. 2

   Authentication

   왼쪽 메뉴 빌드(Build) → Authentication → 시작하기

3. 3 ★ 자주 막혀요

   Google 사용 설정

   Sign-in method → Google → 사용 설정 + 지원 이메일 지정 → 저장

4. 4

   웹 앱 추가

   프로젝트 설정 → 내 앱 → 웹 앱(</>) 추가 → 화면에 설정값 6개가 나옵니다.

PART A · STEP 2

설정값 6개를 앱에 넣기 (.env)

VITE_FIREBASE_API_KEY=여기에값
VITE_FIREBASE_AUTH_DOMAIN=여기에값
VITE_FIREBASE_PROJECT_ID=여기에값
VITE_FIREBASE_STORAGE_BUCKET=여기에값
VITE_FIREBASE_MESSAGING_SENDER_ID=여기에값
VITE_FIREBASE_APP_ID=여기에값

PART A · STEP 3-1

GitHub에 빈 저장소 만들기

github.com 로그인 → 오른쪽 위 + → New repository

PART A · STEP 3-2

내 컴퓨터의 코드를 GitHub로 올리기

프로젝트 폴더에서 터미널을 열고 순서대로 입력하세요. 내아이디, 내사이트는 내 값으로!

git config --global user.name "내 이름 또는 GitHub 아이디"
git config --global user.email "내 이메일"

git init -b main
git add -A
git commit -m "첫 번째 버전"
git remote add origin https://github.com/내아이디/내사이트.git
git push -u origin main

💬 Claude에게 "이 주소로 깃허브 설정해줘"라고 저장소 주소를 알려주면 위 명령을 대신 실행합니다.

PART A · STEP 4

Vercel 가입과 2단계 인증

1. 1

   GitHub로 로그인

   vercel.com → Continue with GitHub. GitHub 연동 승인은 직접 누르세요.

2. 2

   인증 앱 설치

   2단계 인증 안내가 나오면 설정을 권장해요. 휴대폰에 Google Authenticator를 설치합니다.

3. 3 ★ 자주 실수해요

   앱 안에서 QR 스캔

   앱 안에서 + → QR 코드 스캔. 휴대폰 기본 카메라 앱으로 스캔하면 숫자가 안 나옵니다.

4. 4

   6자리 숫자 입력

   앱에 나온 6자리 숫자를 화면에 입력합니다.

5. 5 ★ 꼭 저장

   복구 코드 Download

   복구 코드는 반드시 Download로 저장 후 체크박스를 체크. 보조 이메일은 Skip for Now로 넘겨도 돼요.

PART A · STEP 5

Vercel에 배포하기

1. 1

   Import

   vercel.com/new → Import Git Repository 목록에서 내사이트 오른쪽 Import

2. 2

   설정은 그대로

   Team: 내 계정(Hobby) · Name: 내사이트 · Preset: Vite(자동) · Root: ./

3. 3 ★ Deploy 전에!

   환경변수 6개

   Environment Variables를 펼쳐 STEP 2의 값 6개를 입력. 이름은 .env와 똑같이.

4. 4

   Deploy 🎉

   30초~1분 뒤 Congratulations! 임시 주소가 생겨요: https://내프로젝트.vercel.app

PART A · STEP 5

새 페이지 주소가 404가 나지 않게

{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }

PART A · STEP 6 · 로그인이 있을 때만

"로그인이 안 돼요"의 가장 흔한 원인

PART A · STEP 6

두 곳에 주소 등록하기

PART A · STEP 6

최종 상태 (예시)와 자주 있는 일

PART A · STEP 7-1 · 이 가이드의 핵심

도메인 이름 정하고 구매하기

1. 1

   이름 정하기

   짧고, 기억하기 쉽고, 영문·숫자로 (예: 내이름)

2. 2

   확장자 정하기

   .kr, .com, .co.kr 등 (예: 내이름.kr)

3. 3

   검색하고 결제

   닷홈에서 도메인 검색 → 비어 있는지 확인 → 장바구니 → 결제. 개인 .kr은 본인 확인이 나올 수 있어요.

4. 4

   구매 확인

   마이페이지 "도메인 관리"에서 내 도메인이 보이는지 확인합니다.

5. 5

   네임서버는 그대로

   기본값 그대로 두면 돼요 (예: ns1.dothome.co.kr 등). 그래서 DNS 설정은 닷홈 화면에서 합니다.

6. 6 ★ 달력에 적기

   만료일 기록

   도메인은 매년 갱신 비용이 듭니다. 만료되면 사이트가 사라져요.

PART A · STEP 7-2

Vercel에 내 도메인 알려주기

1. 1

   Domains 메뉴

   Vercel → 내 프로젝트 → Settings → Domains

2. 2

   Add Existing

   Add Existing 클릭

3. 3

   주소 입력 → Add

   내도메인.kr 입력, Production 상태에서 Add Domain. (선택) www.도 같은 방식으로 추가

4. 4

   DNS 값 확인

   View DNS configuration을 누르면 연결 정보가 나옵니다. 값은 프로젝트마다 달라요.

PART A · STEP 7-3 · 사람이 직접

닷홈 DNS에 연결 정보 적기

닷홈 로그인 → 마이닷홈 → DNS 관리 → 레코드 추가

GOOD TO KNOW

A 레코드 vs CNAME 레코드

PART A · STEP 7-4, 7-5

기다리고, 확인하고, 로그인 주소도 추가

1. 처음Invalid Configuration

   연결 정보 기다리는 중

2. →
3. 잠깐Generating SSL

   자물쇠 만드는 중 (1~3분)

4. →
5. 완성✅ Valid Configuration

   https://내도메인.kr 접속!

PART A · STEP 8 · 선택

검색에 나오고, 공유하면 예쁘게 보이게

PART B · SUBDOMAIN

도메인 하나로 사이트를 여러 개

PART B · THE FORMULA

새 서브도메인 만드는 공식 — 이 순서만 기억!

1. ① 만들기사이트 파일사이트 파일 만들기
2. ② 올리기GitHub새(빈) 저장소 만들고 올리기
3. ③ 공개Vercel Deploy저장소를 가져와 Deploy → 임시 주소 확인
4. ④ 짝꿍Vercel에 등록"lesson.내도메인.kr 쓸 거야"
5. ⑤ 짝꿍닷홈 DNS 한 줄"lesson은 Vercel로 가세요"
6. ⑥ 완성몇 분 기다리기끝!

PART B-1 · docs.내도메인.kr

첫 서브사이트: 문서·교안 사이트

PART B-2 · lesson.내도메인.kr · ①

두 번째 서브사이트: PPT를 웹 강의 자료로

PART B-2 · lesson.내도메인.kr · ①

서버 프로그램 없이 미리 보기

python -m http.server 5180

PART B-2 · lesson.내도메인.kr · ② ③

새 저장소 만들고 올리기 → Vercel Deploy

git init -b main
git add -A
git commit -m "첫 번째 버전"
git remote add origin https://github.com/내아이디/lesson-내사이트.git
git push -u origin main

PART B-2 · lesson.내도메인.kr · ④ ⑤

Vercel에 등록(④) + 닷홈에 한 줄(⑤)

PART C · EVERYDAY ROUTINE

사이트를 고칠 때마다 같은 3줄

git add -A
git commit -m "무엇을 고쳤는지"
git push origin main

PART C · WITH CLAUDE

Claude Code에게 시키는 추천 흐름

• OOO 수정해줘나
• 수정 + 확인 후 "올릴까요?" 질문Claude
• 응 / 배포해줘나
• commit → push → 사이트 반영 확인까지 보고Claude

TROUBLESHOOTING 1 / 3 · 주소와 배포

막혔을 때: 주소가 안 열려요

TROUBLESHOOTING 2 / 3 · 로그인

막혔을 때: 로그인이 안 돼요

TROUBLESHOOTING 3 / 3 · 그 밖에

막혔을 때: 그 밖의 경우

SECURITY · COST · HABITS

보안 · 비용 · 관리 주의사항

CHECKLIST A

처음 도메인 사이트를 만들 때 (🧑 사람 · 🤖 Claude)

• 1. 🧑 계정 가입과 프로그램 설치 — GitHub, Vercel, Google, 닷홈, Git, Node.js, 인증 앱
• 2. 🧑🤖 사이트 만들기 — 🧑 요청·확인 / 🤖 제작·점검
• 3. (로그인 필요 시) 🧑 Firebase Google 로그인 사용 설정, 설정값 6개 / 🤖 안내·연결
• 4. 🧑🤖 GitHub 빈 저장소 만들고 push
• 5. 🧑🤖 Vercel Import → Deploy → 임시 주소 확인
• 6. 🧑 도메인 구매 (이름·확장자, 본인 확인, 결제)
• 7. 🤖 Vercel Domains → Add Existing에 도메인 등록 (🧑 허락)
• 8. 🧑 닷홈 DNS 관리에서 레코드 추가 (A 216.198.79.1)
• 9. 🤖 DNS·HTTPS 확인 → Valid Configuration, 🧑 눈으로도 확인
• 10. (로그인 있으면) 🧑 Firebase + Google Cloud에 새 주소 추가·저장
• 11. 🤖 검색·공유 설정, 🧑 검색 등록, 🧑 도메인 만료일 기록

CHECKLIST B

서브도메인을 새로 만들 때 (예: book.내도메인.kr)

• 1. 🧑🤖 사이트 파일을 만든다 (🧑 요청 / 🤖 제작)
• 2. 🧑🤖 GitHub에 빈 저장소(book-내사이트)를 만든다
• 3. 🤖 git init → add → commit → remote add → push
• 4. 🤖 Vercel Import → Deploy (🧑 로그인 상태 유지)
• 5. 🤖 임시 주소(xxx.vercel.app)가 열리는지 확인
• 6. 🤖 Vercel Domains → Add Existing에 book.내도메인.kr 등록
• 7. 🧑 닷홈 DNS 레코드 추가: 이름 book, TYPE A, Content 216.198.79.1 (또는 Vercel이 안내한 CNAME)
• 8. 🤖 몇 분 기다리며 반복 확인 → Valid Configuration
• 9. 🧑🤖 https://book.내도메인.kr 접속 확인
• 10. 🧑🤖 이후 수정은 🧑 요청·"응" → 🤖 add → commit → push

APPENDIX 1

내 사이트 기록표 (빈칸 채우기)

APPENDIX 2 · GLOSSARY 1 / 2

용어집 ① 주소와 연결

• 도메인인터넷 주소의 이름 (내도메인.kr)
• 서브도메인도메인 앞에 붙이는 "방 이름" (lesson.내도메인.kr)
• 루트 도메인서브도메인이 없는 기본 주소
• DNS주소 이름을 컴퓨터 번호(IP)로 바꿔주는 인터넷 전화번호부
• DNS 레코드전화번호부의 한 줄 ("이 이름은 이 번호로 가세요")
• A 레코드이름 → IP 번호
• CNAME 레코드이름 → 다른 이름
• NS(네임서버)"이 도메인의 전화번호부는 어디에 있나?"를 알려주는 곳
• TTLDNS 정보를 기억해 두는 시간(초). 보통 건드리지 않음
• IP 주소인터넷 위의 번지수 (216.198.79.1)
• 호스팅사이트 파일을 올려두고 24시간 공개해 주는 서비스 (Vercel)
• HTTPS / SSL주소 앞의 자물쇠. 안전한 연결

APPENDIX 2 · GLOSSARY 2 / 2

용어집 ② 만들기와 올리기

• 배포(deploy)만든 사이트를 인터넷에 공개하는 것
• GitHub코드를 보관하고 버전을 기록하는 인터넷 창고
• 저장소(repository)GitHub 안의 프로젝트 폴더 하나
• 커밋(commit)"여기까지 저장!" 하고 기록 남기기
• 푸시(push)내 컴퓨터의 기록을 GitHub로 보내기
• 환경변수비밀 값(키 등)을 코드와 따로 넣어두는 설정
• Firebase로그인·저장 기능을 제공하는 구글 서비스
• OAuth 클라이언트구글 로그인을 쓰는 앱의 "신분증"
• 2단계 인증비밀번호 + 휴대폰 인증 앱의 6자리 숫자로 로그인
• 정적 사이트서버 프로그램 없이 HTML·CSS·JS 파일만으로 된 사이트
• 로컬 미리보기내 컴퓨터 안에서만 보는 확인용 화면 (localhost)
• 캐시브라우저가 옛 화면을 기억해 두는 것 → Ctrl + F5로 해결

ONE PAGE SUMMARY

한 장 요약 — 이것만 기억하세요

• 🏠만들고 올리기Claude Code → GitHub → Vercel임시 주소
• 🏷️내 주소 연결도메인 구매 + 닷홈 DNS 한 줄정식 주소
• 🚪방 늘리기④ Vercel 등록 + ⑤ DNS 짝꿍서브도메인
• 🔁고치기add → commit → push1분 뒤 반영

바로가기: GitHub ↗ | Vercel ↗ | 닷홈 ↗ Q&A 및 자유 질문