DAY 11 [배포] Vercel 배포 + 도메인 연결 20분 컷

바이브 코딩으로 블로그 만들기 시리즈 코딩을 몰라도 AI와 대화하며 ‘내 소유’ 수익형 웹사이트를 만드는 15일 여정

DAY 10에서 점검·체크리스트까지 마쳤다면, 오늘은 그 블로그를 진짜 주소로 세상에 공개하는 날입니다.

오늘은 이 시리즈에서 가장 짜릿한 날입니다.

지금까지 10일 동안, 우리 블로그는 오직 여러분의 컴퓨터 안에서만 존재했습니다. localhost:3000이라는 주소는 본인 컴퓨터에서만 작동합니다. 친구에게 보여주려고 카카오톡에 localhost:3000을 보내봐야 안 열립니다.

오늘, 그 블로그가 세상에 나옵니다.

지구 반대편의 누군가가 구글에 검색해서 우리 블로그에 들어올 수 있게 됩니다. 카카오톡에 링크를 보내면 진짜로 열립니다. 주소창에 우리만의 도메인 주소가 표시됩니다.

이게 오늘의 목표입니다. 20분이면 끝납니다. 진짜로요.

오늘의 여정 한눈에 보기

STEP	여정
1	GitHub에 코드 올리기
2	Vercel 가입 · GitHub 저장소 연결
3	배포 확인 · `*.vercel.app` 주소 받기
4	도메인 구매 (선택)
5	도메인 연결

서버 호스팅 비용은 0원 · 도메인은 연 1~2만 원대(선택)

STEP 1: GitHub에 코드 올리기 (5분)

DAY 03에서 GitHub 계정을 만들고 빈 저장소(my-blog)까지 만들어뒀습니다. 기억하시죠? 그때 만들어둔 빈 방에 드디어 짐을 옮길 시간입니다.

1-1. 터미널에서 Git 초기화

Cursor에서 my-blog 폴더를 연 상태로 터미널을 엽니다.

먼저 Git이 이 폴더를 추적하도록 초기화합니다.

git init

만약 ‘Reinitialized existing Git repository’ 같은 메시지가 나오면 이미 초기화되어 있는 겁니다. 그대로 진행하세요.

1-2. 모든 파일을 Git에 추가

git add .

맨 끝의 점(.)은 ‘현재 폴더의 모든 파일’이라는 뜻입니다. .gitignore에 등록된 node_modules, .next 같은 폴더는 자동으로 제외됩니다.

1-3. 첫 커밋 만들기

git commit -m "Initial commit: 바이브 코딩으로 만든 블로그 첫 배포"

커밋 메시지란? 코드 변경 사항을 한 줄로 설명하는 메모입니다. ‘이번 변경에서 뭘 했는지’를 미래의 자신과 다른 사람이 알 수 있게 적습니다. 첫 커밋이니까 ‘Initial commit’이라는 관례적 표현을 썼습니다.

엔터를 치면 파일들이 커밋됩니다. 화면에 ‘create mode 100644 …’ 같은 메시지가 주르르 뜨면 성공입니다.

1-4. GitHub 저장소와 연결

DAY 03에서 만들어둔 GitHub 저장소 주소를 기억하시나요? https://github.com/유저네임/my-blog.git 형태였습니다. 기억 안 나면 GitHub에 로그인해서 my-blog 저장소 페이지로 가면 보입니다.

이 주소를 내 컴퓨터의 Git에 등록합니다.

git remote add origin https://github.com/유저네임/my-blog.git

유저네임 부분을 본인의 GitHub 유저네임으로 바꾸세요. 예: https://github.com/jisu-codes/my-blog.git

1-5. GitHub에 푸시(업로드)

git branch -M main
git push -u origin main

첫 번째 명령어는 현재 브랜치 이름을 main으로 통일하는 거고, 두 번째 명령어가 실제로 코드를 GitHub에 올리는 명령입니다.

처음 푸시할 때는 GitHub 로그인 창이 뜰 수 있습니다. 브라우저에서 자동으로 인증이 진행됩니다. 인증이 끝나면 파일들이 업로드되기 시작합니다.

1-6. 확인

GitHub에서 my-blog 저장소 페이지를 새로고침하세요. 빈 방이었던 저장소에 수십 개의 파일이 들어차 있을 겁니다. app/, posts/ 등 폴더가 보이면 성공입니다.

이제 여러분의 코드는 인터넷에 백업되어 있습니다. 컴퓨터가 갑자기 고장 나도 다른 컴퓨터에서 이 저장소를 다운로드받아 작업을 이어갈 수 있습니다. Git의 진짜 가치를 처음으로 체감하는 순간입니다.

STEP 2: Vercel 가입 + 프로젝트 연결 (5분)

이제 GitHub에 올라간 코드를 Vercel이 가져가서 인터넷에 띄우게 만들 차례입니다.

Vercel이 뭐고, 왜 무료인가?

Vercel은 Next.js를 만든 회사가 운영하는 호스팅 서비스입니다. Next.js로 만든 사이트를 가장 빠르고 정확하게 배포해주는 곳이고, 개인 프로젝트는 영구 무료입니다.

Vercel이 무료로 제공하는 것:

- 무제한 정적 사이트 호스팅
- 자동 HTTPS 
- 글로벌 CDN (전 세계 빠른 로딩)
- 무제한 대역폭 (방문자 수 제한 없음, 합리적 사용 범위 내)
- 자동 빌드/배포 (GitHub에 푸시하면 자동 반영)
- 무료 *.vercel.app 서브도메인
- 커스텀 도메인 연결 (도메인은 따로 사야 함)

‘아니 이걸 왜 무료로 줘요?’라고 의심스러워 할 수 있습니다. Vercel은 개인/소규모 사용자를 무료로 끌어들인 뒤, 회사 단위 사용자에게 유료 플랜을 판매하는 비즈니스 모델입니다. 우리 같은 개인 블로그 운영자는 평생 무료로 써도 됩니다.

2-1. Vercel 가입

브라우저에서 vercel.com에 접속합니다.

화면 오른쪽 상단의 [Sign Up] 버튼을 클릭하세요.

그러면 플랜을 선택하는 팝업 창이 나타납니다. 무료인 ‘Hobby’ 옵션을 선택합니다. 무료 플랜이고, 우리에게 필요한 모든 기능이 들어 있습니다. 이름을 입력한 후 [Continue]를 눌러 계속 진행합니다.

가입 옵션이 나오면 [Continue with GitHub]를 선택합니다. GitHub 계정과 연결해서 가입하는 게 가장 편합니다(아니, 거의 필수입니다). 이미 로그인된 GitHub 계정이 있으면 클릭 한 번으로 가입이 끝납니다.

2-2. 새 프로젝트 만들기

가입이 끝나면 Vercel 대시보드로 이동합니다. 왼쪽 메뉴에서 [Projects]을 선택한 후 [Add New...] 버튼이나 [All Projects]→[Create Project]를 클릭하세요.

그러면 다음과 같은 화면이 나오는데, ‘Import Git Repository’ 섹션에서 [Continue with GitHub]를 선택합니다.

그러면 ‘Import Git Repository’ 섹션 아래로 여러분의 GitHub 저장소 목록이 표시됩니다.

my-blog 저장소 옆의 [Import] 버튼을 클릭하세요.

만약 저장소 목록이 비어 있다면, ‘Adjust GitHub App Permissions’를 클릭해서 Vercel에 GitHub 저장소 접근 권한을 부여해야 합니다. ‘All repositories’ 또는 my-blog 저장소만 선택해서 권한을 주세요.

2-3. 프로젝트 설정

my-blog 저장소를 선택하면 설정 화면이 나옵니다. 거의 모든 설정이 자동으로 잡혀 있습니다.

아무것도 바꾸지 말고 [Deploy] 버튼을 누르세요. Vercel이 우리가 Next.js를 쓰고 있다는 걸 자동으로 감지해서 모든 설정을 잡아줍니다.

Framework Preset이 Next.js로 자동 감지되는 게 핵심입니다. 만약 다른 프레임워크로 잡혀 있다면 드롭다운에서 ‘Next.js’를 직접 선택하세요.

STEP 3: 배포 확인 + vercel.app 주소 받기 (2분)

[Deploy] 버튼을 누르면 Vercel이 일을 시작합니다. 화면에 빌드 로그가 실시간으로 표시됩니다.

전체 과정은 1~3분 정도 걸립니다. 로그를 보고 있으면 ‘내 코드가 인터넷 어딘가에 진짜로 올라가고 있구나’가 실감 납니다.

배포 완료!

배포가 끝나면 화면에 축하 화면이 뜹니다. 콘페티가 떨어지고, 블로그의 미리보기 이미지가 표시됩니다.

배포 완료 화면에서 [Add Domain]을 클릭해 들어가면 이런 주소가 있을 겁니다.

🎉 my-blog-xxxxx.vercel.app

이 주소를 클릭하세요.

여러분의 블로그가 인터넷에 떴습니다.

지금 휴대폰을 꺼내서 휴대폰 브라우저에도 저 주소를 입력해보세요. 진짜로 열립니다. 친구에게 카톡으로 보내보세요. 친구도 볼 수 있습니다. 지구 어디에서든 이 주소로 접속할 수 있습니다.

잠깐 멈춰서 이 순간을 즐기세요

10일 전에는 코딩이 뭔지도 몰랐던 사람이, 지금 인터넷에 본인 블로그를 띄웠습니다. 이건 진짜로 굉장한 일입니다.

스크린샷 한 장 찍어두세요. 나중에 수익이 나기 시작했을 때 이 사진을 보면서 ‘저때부터 시작했지’라고 회상하게 될 겁니다.

잠깐의 자축 후에 다음 단계로 갑시다. 아직 할 일이 있습니다.

STEP 4: 도메인 구매 (5분, 선택)

지금 받은 my-blog-xxxxx.vercel.app 주소도 작동은 합니다. 하지만 두 가지 이유로 꼭 본인 도메인이 필요합니다.

vercel.app 서브도메인의 한계:

- 애드센스 승인이 사실상 불가능
   (구글이 서브도메인을 “임시 사이트”로 판단)
   
- 신뢰감 부족
   (방문자가 “무료 사이트네”라고 인식)
   
- 브랜딩 약함
   (긴 주소는 기억되지 않음)

- SEO에서 불리
   (도메인 신뢰도(Domain Authority) 누적이 안 됨)

DAY 04에서 도메인 후보를 정해두라고 했었죠. 이제 그 후보를 실제로 구매할 시간입니다. 연 1~2만 원이면 됩니다.

구매할 곳

DAY 04에서 추천한 사이트들입니다.

구매처	사이트	특징	가격대(참고)
가비아	gabia.com	한국어 UI, 국내 결제 편리	`.com` / `.kr` / `.co.kr` · 연 약 16,500원~
Namecheap	namecheap.com	영어, 가격대 낮음, 신규 할인 자주 있음	연 약 $9~
Cloudflare	cloudflare.com	원가에 가깝게 판매, 영어 · 절차 다소 복잡	연 약 $10~

처음이라면 가비아를 추천합니다. 한국어로 결제하고 관리할 수 있고, 도메인을 Vercel과 연결할 때도 한국어 가이드가 풍부합니다.

구매 과정 (가비아 기준)

gabia.com 접속 → 도메인 검색창에 원하는 이름 입력
이름이 사용 가능하면 장바구니 담기
회원가입 (만약 처음이라면)
결제 (카드 또는 계좌이체)
마이페이지에서 도메인 관리 화면 진입

신청 기간은 1년부터 가능합니다. 처음에는 1년만 사도 충분합니다. 블로그가 잘 되면 5년, 10년 단위로 연장하면 됩니다.

WHOIS 보호는 신청하세요. 도메인 등록 시 본인의 이름, 주소, 전화번호가 공개되는데, WHOIS 보호 옵션을 켜면 가립니다. 보통 무료이거나 매우 저렴합니다. 개인정보 보호를 위해 꼭 신청하세요.

STEP 5: 도메인 연결 + HTTPS 자물쇠 (3분)

도메인을 샀으면 Vercel에 연결해서 진짜 내 주소로 블로그를 띄울 차례입니다.

5-1. Vercel에 도메인 추가

Vercel 대시보드에서 my-blog 프로젝트로 들어갑니다.

왼쪽 메뉴에서 [Domains] 클릭.

[Add Existing] 버튼을 클릭하고 구매한 도메인 이름을 입력한 후 [Save] 버튼을 누릅니다.

5-2. DNS 설정 안내 받기

Vercel이 화면에 DNS 설정 방법을 안내합니다. 이런 식의 정보가 표시됩니다.

이 정보를 그대로 열어 두세요. 다음 단계에서 도메인 구매처(가비아)에 복사해서 입력해야 합니다.

5-3. 가비아에서 DNS 설정

가비아에 로그인한 후 [My가비아] → [DNS 관리툴]을 클릭합니다.

구매한 도메인 앞쪽 체크박스에 체크한 후 상단의 [DNS 설정]으로 들어갑니다.

DNS 설정 표에 Vercel에서 제공하는 두 개의 레코드(A와 CNAME)를 정확히 입력하고 저장합니다. [레코드 추가] 버튼을 눌러 표에 줄을 추가할 수 있습니다. 설정이 완료되고 나면 [저장] 버튼을 눌러 주세요.

5-4. DNS 전파 기다리기

DNS 설정이 전 세계 인터넷에 반영되는 데 5분~24시간이 걸립니다. 보통은 10분 안에 됩니다.

Vercel 도메인 설정 화면으로 돌아가면 도메인 옆에 상태 표시가 정상으로 표시되는 것을 확인할 수 있습니다.

5-5. HTTPS 자물쇠 자동 활성화

DNS가 정상 연결되면 Vercel이 자동으로 HTTPS 인증서를 발급합니다. 우리가 따로 할 일은 없습니다.

브라우저에서 https://자신의도메인이름으로 접속해보세요.

자물쇠 아이콘이 의미하는 것은 이렇습니다.

HTTPS 통신: 방문자와 블로그 사이의 데이터가 암호화되어 있음
인증서 정상: 신뢰할 수 있는 사이트
SEO 가산점: 구글이 HTTPS 사이트를 우대
애드센스 승인 자격: HTTPS는 사실상 필수

마지막 정리: metadataBase 도메인 업데이트

DAY 09에서 메타 태그를 잡을 때 기준 URL은 lib/config.js의 SITE_URL(그리고 루트 metadataBase)입니다. 배포 전에 임시로 넣어 둔 주소가 있다면, 실제 도메인이 정해진 뒤 한곳이라도 빠지면 안 되니 전부 새 주소로 맞춥니다.

AI에게 도메인 업데이트 요청하기

Cursor를 열고 채팅 창에 다음과 같이 입력합니다.

실제 도메인이 https://example.com 으로 정해졌어.
(← 본인 실제 도메인으로 교체)

이 프로젝트에서 프로덕션 기준 URL은
lib/config.js의 SITE_URL 한 곳이 중심이야.

다음을 확인해서 임시·로컬 주소를 모두
새 도메인으로 통일해줘.
(https://example.com,
www 포함 규칙은 우리 사이트에 맞게)

1. lib/config.js의 SITE_URL
2. app/layout.js의 metadataBase
   (있다면 SITE_URL과 일치)
3. app/sitemap.js·app/robots.js·JSON-LD 등
   SITE_URL을 가져다 쓰는지

기존 임시 값이 들어간 모든 곳을 찾아서
새 도메인으로 교체해줘.

AI가 수정을 끝내면 [File] → [Save]를 눌러 파일을 저장합니다. 그리고 터미널 창에서 변경 사항을 GitHub에 푸시합니다.

git add .
git commit -m "Update domain to actual production URL"
git push

자동 재배포 마법

여기서 Vercel의 진짜 마법이 시작됩니다.

GitHub에 푸시하면 Vercel이 자동으로 변경 사항을 감지해서 재배포합니다.

GitHub에 푸시
     ↓
Vercel이 자동 감지 (10초 이내)
     ↓
새 빌드 시작
     ↓
1~2분 후 자동 배포 완료
     ↓
새 도메인으로 사이트 즉시 반영

앞으로 블로그에 변경 사항이 생길 때마다 이 과정을 거칩니다. 새 글을 쓰면 GitHub에 푸시 → 자동 배포. 디자인을 바꾸면 GitHub에 푸시 → 자동 배포.

여러분은 글만 쓰면 됩니다. 배포는 알아서 됩니다.

이제 여러분은 세상 누구나 접속할 수 있는 자기 소유의 블로그를 가졌습니다. 서버비 0원, 도메인 비용 월 1,000~2,000원. 그게 전부입니다.

지금 당장 해야 할 두 가지

첫째, 카톡 친구 한 명에게 링크 보내기. “나 블로그 만들었어”라고 자랑하세요. 친구가 “우와 진짜?” 하는 반응을 보면 짜릿함이 두 배가 됩니다. 그리고 친구의 피드백(“폰트가 좀 작은 것 같아”)이 의외로 좋은 개선 아이디어가 됩니다.

둘째, 자기 블로그 주소를 SNS 프로필에 적기. 인스타그램, 트위터, 링크드인, 어디든. 도메인을 본인 정체성의 일부로 만드세요.

오늘의 에러 119 🚨

이 코너는 매 회 해당 단계에서 자주 겪는 문제와 해결법을 다룹니다.

에러 1: git push했는데 “Authentication failed”

→ GitHub의 인증 방식이 변경돼서 비밀번호 대신 토큰이나 OAuth를 써야 합니다. 가장 쉬운 해결법은 GitHub Desktop이나 Cursor의 GUI Git 기능을 쓰는 겁니다. 또는 터미널에서 gh auth login 명령어로 GitHub CLI를 설치해 인증할 수 있습니다. AI에게 “git push에서 인증 에러가 나. 윈도우/맥 환경에서 GitHub 인증을 설정하는 가장 쉬운 방법 알려줘”라고 물어보세요.

에러 2: Vercel 배포가 빌드 단계에서 실패한다

→ 로컬에서는 잘 됐는데 Vercel에서 안 되는 경우, 보통 두 가지 원인입니다. 첫째, package.json에 명시되지 않은 라이브러리를 쓰고 있는 경우. 둘째, 환경 변수가 빠진 경우. Vercel의 빌드 로그에서 에러 메시지를 통째로 복사해 AI에게 주세요. 대부분 1~2번 시도로 해결됩니다.

에러 3: 도메인을 연결했는데 “Invalid Configuration”이 계속 뜬다

→ DNS 설정이 잘못 입력됐거나 전파 시간이 더 필요한 경우입니다. 먼저 30분~1시간 더 기다려보세요. 그래도 안 되면 가비아의 DNS 설정 화면에서 A 레코드의 값(76.76.21.21)이 정확한지 다시 확인하세요. CNAME의 호스트는 www, 값은 cname.vercel-dns.com이어야 합니다(끝에 점 없음). 또한, 가비아의 “네임서버”가 가비아 기본값으로 설정되어 있어야 DNS 레코드가 작동합니다.

에러 4: 사이트는 뜨는데 자물쇠 대신 ‘안전하지 않음’ 경고가 뜬다

→ HTTPS 인증서 발급이 아직 안 끝난 겁니다. 보통 DNS 설정 후 5~30분 안에 자동 발급됩니다. 1시간 이상 기다렸는데도 안 되면, Vercel 도메인 설정 페이지에서 도메인을 한 번 삭제하고 다시 추가해보세요.

에러 5: 새 글을 GitHub에 푸시했는데 사이트에 반영이 안 된다

→ Vercel 대시보드에서 [Deployments] 탭을 확인하세요. 최신 배포가 진행 중인지, 실패했는지 보입니다. 실패했다면 로그에 빨간 에러가 있을 겁니다. 성공했는데도 사이트에 안 보인다면, 브라우저 캐시 문제일 수 있으니 강력 새로고침(Ctrl+Shift+R 또는 Cmd+Shift+R)을 해보세요.

바이브 코딩으로 블로그 만들기 시리즈 코딩을 몰라도 AI와 대화하며 ‘내 소유’ 수익형 웹사이트를 만드는 15일 여정

DAY 10에서 점검·체크리스트까지 마쳤다면, 오늘은 그 블로그를 진짜 주소로 세상에 공개하는 날입니다.

오늘은 이 시리즈에서 가장 짜릿한 날입니다.

오늘, 그 블로그가 세상에 나옵니다.

이게 오늘의 목표입니다. 20분이면 끝납니다. 진짜로요.

오늘의 여정 한눈에 보기

STEP	여정
1	GitHub에 코드 올리기
2	Vercel 가입 · GitHub 저장소 연결
3	배포 확인 · `*.vercel.app` 주소 받기
4	도메인 구매 (선택)
5	도메인 연결

서버 호스팅 비용은 0원 · 도메인은 연 1~2만 원대(선택)

STEP 1: GitHub에 코드 올리기 (5분)

DAY 03에서 GitHub 계정을 만들고 빈 저장소(my-blog)까지 만들어뒀습니다. 기억하시죠? 그때 만들어둔 빈 방에 드디어 짐을 옮길 시간입니다.

1-1. 터미널에서 Git 초기화

Cursor에서 my-blog 폴더를 연 상태로 터미널을 엽니다.

먼저 Git이 이 폴더를 추적하도록 초기화합니다.

git init

만약 ‘Reinitialized existing Git repository’ 같은 메시지가 나오면 이미 초기화되어 있는 겁니다. 그대로 진행하세요.

1-2. 모든 파일을 Git에 추가

git add .

맨 끝의 점(.)은 ‘현재 폴더의 모든 파일’이라는 뜻입니다. .gitignore에 등록된 node_modules, .next 같은 폴더는 자동으로 제외됩니다.

1-3. 첫 커밋 만들기

git commit -m "Initial commit: 바이브 코딩으로 만든 블로그 첫 배포"

커밋 메시지란? 코드 변경 사항을 한 줄로 설명하는 메모입니다. ‘이번 변경에서 뭘 했는지’를 미래의 자신과 다른 사람이 알 수 있게 적습니다. 첫 커밋이니까 ‘Initial commit’이라는 관례적 표현을 썼습니다.

엔터를 치면 파일들이 커밋됩니다. 화면에 ‘create mode 100644 …’ 같은 메시지가 주르르 뜨면 성공입니다.

1-4. GitHub 저장소와 연결

이 주소를 내 컴퓨터의 Git에 등록합니다.

git remote add origin https://github.com/유저네임/my-blog.git

유저네임 부분을 본인의 GitHub 유저네임으로 바꾸세요. 예: https://github.com/jisu-codes/my-blog.git

1-5. GitHub에 푸시(업로드)

git branch -M main
git push -u origin main

첫 번째 명령어는 현재 브랜치 이름을 main으로 통일하는 거고, 두 번째 명령어가 실제로 코드를 GitHub에 올리는 명령입니다.

처음 푸시할 때는 GitHub 로그인 창이 뜰 수 있습니다. 브라우저에서 자동으로 인증이 진행됩니다. 인증이 끝나면 파일들이 업로드되기 시작합니다.

1-6. 확인

이제 여러분의 코드는 인터넷에 백업되어 있습니다. 컴퓨터가 갑자기 고장 나도 다른 컴퓨터에서 이 저장소를 다운로드받아 작업을 이어갈 수 있습니다. Git의 진짜 가치를 처음으로 체감하는 순간입니다.

STEP 2: Vercel 가입 + 프로젝트 연결 (5분)

이제 GitHub에 올라간 코드를 Vercel이 가져가서 인터넷에 띄우게 만들 차례입니다.

Vercel이 뭐고, 왜 무료인가?

Vercel이 무료로 제공하는 것:

- 무제한 정적 사이트 호스팅
- 자동 HTTPS 
- 글로벌 CDN (전 세계 빠른 로딩)
- 무제한 대역폭 (방문자 수 제한 없음, 합리적 사용 범위 내)
- 자동 빌드/배포 (GitHub에 푸시하면 자동 반영)
- 무료 *.vercel.app 서브도메인
- 커스텀 도메인 연결 (도메인은 따로 사야 함)

2-1. Vercel 가입

브라우저에서 vercel.com에 접속합니다.

화면 오른쪽 상단의 [Sign Up] 버튼을 클릭하세요.

2-2. 새 프로젝트 만들기

가입이 끝나면 Vercel 대시보드로 이동합니다. 왼쪽 메뉴에서 [Projects]을 선택한 후 [Add New...] 버튼이나 [All Projects]→[Create Project]를 클릭하세요.

그러면 다음과 같은 화면이 나오는데, ‘Import Git Repository’ 섹션에서 [Continue with GitHub]를 선택합니다.

그러면 ‘Import Git Repository’ 섹션 아래로 여러분의 GitHub 저장소 목록이 표시됩니다.

my-blog 저장소 옆의 [Import] 버튼을 클릭하세요.

만약 저장소 목록이 비어 있다면, ‘Adjust GitHub App Permissions’를 클릭해서 Vercel에 GitHub 저장소 접근 권한을 부여해야 합니다. ‘All repositories’ 또는 my-blog 저장소만 선택해서 권한을 주세요.

2-3. 프로젝트 설정

my-blog 저장소를 선택하면 설정 화면이 나옵니다. 거의 모든 설정이 자동으로 잡혀 있습니다.

아무것도 바꾸지 말고 [Deploy] 버튼을 누르세요. Vercel이 우리가 Next.js를 쓰고 있다는 걸 자동으로 감지해서 모든 설정을 잡아줍니다.

Framework Preset이 Next.js로 자동 감지되는 게 핵심입니다. 만약 다른 프레임워크로 잡혀 있다면 드롭다운에서 ‘Next.js’를 직접 선택하세요.

STEP 3: 배포 확인 + vercel.app 주소 받기 (2분)

[Deploy] 버튼을 누르면 Vercel이 일을 시작합니다. 화면에 빌드 로그가 실시간으로 표시됩니다.

전체 과정은 1~3분 정도 걸립니다. 로그를 보고 있으면 ‘내 코드가 인터넷 어딘가에 진짜로 올라가고 있구나’가 실감 납니다.

배포 완료!

배포가 끝나면 화면에 축하 화면이 뜹니다. 콘페티가 떨어지고, 블로그의 미리보기 이미지가 표시됩니다.

배포 완료 화면에서 [Add Domain]을 클릭해 들어가면 이런 주소가 있을 겁니다.

🎉 my-blog-xxxxx.vercel.app

이 주소를 클릭하세요.

여러분의 블로그가 인터넷에 떴습니다.

잠깐 멈춰서 이 순간을 즐기세요

10일 전에는 코딩이 뭔지도 몰랐던 사람이, 지금 인터넷에 본인 블로그를 띄웠습니다. 이건 진짜로 굉장한 일입니다.

스크린샷 한 장 찍어두세요. 나중에 수익이 나기 시작했을 때 이 사진을 보면서 ‘저때부터 시작했지’라고 회상하게 될 겁니다.

잠깐의 자축 후에 다음 단계로 갑시다. 아직 할 일이 있습니다.

STEP 4: 도메인 구매 (5분, 선택)

지금 받은 my-blog-xxxxx.vercel.app 주소도 작동은 합니다. 하지만 두 가지 이유로 꼭 본인 도메인이 필요합니다.

vercel.app 서브도메인의 한계:

- 애드센스 승인이 사실상 불가능
   (구글이 서브도메인을 “임시 사이트”로 판단)
   
- 신뢰감 부족
   (방문자가 “무료 사이트네”라고 인식)
   
- 브랜딩 약함
   (긴 주소는 기억되지 않음)

- SEO에서 불리
   (도메인 신뢰도(Domain Authority) 누적이 안 됨)

DAY 04에서 도메인 후보를 정해두라고 했었죠. 이제 그 후보를 실제로 구매할 시간입니다. 연 1~2만 원이면 됩니다.

구매할 곳

DAY 04에서 추천한 사이트들입니다.

구매처	사이트	특징	가격대(참고)
가비아	gabia.com	한국어 UI, 국내 결제 편리	`.com` / `.kr` / `.co.kr` · 연 약 16,500원~
Namecheap	namecheap.com	영어, 가격대 낮음, 신규 할인 자주 있음	연 약 $9~
Cloudflare	cloudflare.com	원가에 가깝게 판매, 영어 · 절차 다소 복잡	연 약 $10~

처음이라면 가비아를 추천합니다. 한국어로 결제하고 관리할 수 있고, 도메인을 Vercel과 연결할 때도 한국어 가이드가 풍부합니다.

구매 과정 (가비아 기준)

gabia.com 접속 → 도메인 검색창에 원하는 이름 입력
이름이 사용 가능하면 장바구니 담기
회원가입 (만약 처음이라면)
결제 (카드 또는 계좌이체)
마이페이지에서 도메인 관리 화면 진입

신청 기간은 1년부터 가능합니다. 처음에는 1년만 사도 충분합니다. 블로그가 잘 되면 5년, 10년 단위로 연장하면 됩니다.

WHOIS 보호는 신청하세요. 도메인 등록 시 본인의 이름, 주소, 전화번호가 공개되는데, WHOIS 보호 옵션을 켜면 가립니다. 보통 무료이거나 매우 저렴합니다. 개인정보 보호를 위해 꼭 신청하세요.

STEP 5: 도메인 연결 + HTTPS 자물쇠 (3분)

도메인을 샀으면 Vercel에 연결해서 진짜 내 주소로 블로그를 띄울 차례입니다.

5-1. Vercel에 도메인 추가

Vercel 대시보드에서 my-blog 프로젝트로 들어갑니다.

왼쪽 메뉴에서 [Domains] 클릭.

[Add Existing] 버튼을 클릭하고 구매한 도메인 이름을 입력한 후 [Save] 버튼을 누릅니다.

5-2. DNS 설정 안내 받기

Vercel이 화면에 DNS 설정 방법을 안내합니다. 이런 식의 정보가 표시됩니다.

이 정보를 그대로 열어 두세요. 다음 단계에서 도메인 구매처(가비아)에 복사해서 입력해야 합니다.

5-3. 가비아에서 DNS 설정

가비아에 로그인한 후 [My가비아] → [DNS 관리툴]을 클릭합니다.

구매한 도메인 앞쪽 체크박스에 체크한 후 상단의 [DNS 설정]으로 들어갑니다.

5-4. DNS 전파 기다리기

DNS 설정이 전 세계 인터넷에 반영되는 데 5분~24시간이 걸립니다. 보통은 10분 안에 됩니다.

Vercel 도메인 설정 화면으로 돌아가면 도메인 옆에 상태 표시가 정상으로 표시되는 것을 확인할 수 있습니다.

5-5. HTTPS 자물쇠 자동 활성화

DNS가 정상 연결되면 Vercel이 자동으로 HTTPS 인증서를 발급합니다. 우리가 따로 할 일은 없습니다.

브라우저에서 https://자신의도메인이름으로 접속해보세요.

자물쇠 아이콘이 의미하는 것은 이렇습니다.

HTTPS 통신: 방문자와 블로그 사이의 데이터가 암호화되어 있음
인증서 정상: 신뢰할 수 있는 사이트
SEO 가산점: 구글이 HTTPS 사이트를 우대
애드센스 승인 자격: HTTPS는 사실상 필수

마지막 정리: metadataBase 도메인 업데이트

AI에게 도메인 업데이트 요청하기

Cursor를 열고 채팅 창에 다음과 같이 입력합니다.

실제 도메인이 https://example.com 으로 정해졌어.
(← 본인 실제 도메인으로 교체)

이 프로젝트에서 프로덕션 기준 URL은
lib/config.js의 SITE_URL 한 곳이 중심이야.

다음을 확인해서 임시·로컬 주소를 모두
새 도메인으로 통일해줘.
(https://example.com,
www 포함 규칙은 우리 사이트에 맞게)

1. lib/config.js의 SITE_URL
2. app/layout.js의 metadataBase
   (있다면 SITE_URL과 일치)
3. app/sitemap.js·app/robots.js·JSON-LD 등
   SITE_URL을 가져다 쓰는지

기존 임시 값이 들어간 모든 곳을 찾아서
새 도메인으로 교체해줘.

AI가 수정을 끝내면 [File] → [Save]를 눌러 파일을 저장합니다. 그리고 터미널 창에서 변경 사항을 GitHub에 푸시합니다.

git add .
git commit -m "Update domain to actual production URL"
git push

자동 재배포 마법

여기서 Vercel의 진짜 마법이 시작됩니다.

GitHub에 푸시하면 Vercel이 자동으로 변경 사항을 감지해서 재배포합니다.

GitHub에 푸시
     ↓
Vercel이 자동 감지 (10초 이내)
     ↓
새 빌드 시작
     ↓
1~2분 후 자동 배포 완료
     ↓
새 도메인으로 사이트 즉시 반영

앞으로 블로그에 변경 사항이 생길 때마다 이 과정을 거칩니다. 새 글을 쓰면 GitHub에 푸시 → 자동 배포. 디자인을 바꾸면 GitHub에 푸시 → 자동 배포.

여러분은 글만 쓰면 됩니다. 배포는 알아서 됩니다.

이제 여러분은 세상 누구나 접속할 수 있는 자기 소유의 블로그를 가졌습니다. 서버비 0원, 도메인 비용 월 1,000~2,000원. 그게 전부입니다.

지금 당장 해야 할 두 가지

둘째, 자기 블로그 주소를 SNS 프로필에 적기. 인스타그램, 트위터, 링크드인, 어디든. 도메인을 본인 정체성의 일부로 만드세요.

오늘의 에러 119 🚨

이 코너는 매 회 해당 단계에서 자주 겪는 문제와 해결법을 다룹니다.

에러 1: git push했는데 “Authentication failed”

에러 2: Vercel 배포가 빌드 단계에서 실패한다

에러 3: 도메인을 연결했는데 “Invalid Configuration”이 계속 뜬다

에러 4: 사이트는 뜨는데 자물쇠 대신 ‘안전하지 않음’ 경고가 뜬다

에러 5: 새 글을 GitHub에 푸시했는데 사이트에 반영이 안 된다

오늘의 여정 한눈에 보기

STEP 1: GitHub에 코드 올리기 (5분)

1-1. 터미널에서 Git 초기화

1-2. 모든 파일을 Git에 추가

1-3. 첫 커밋 만들기

1-4. GitHub 저장소와 연결

1-5. GitHub에 푸시(업로드)

1-6. 확인

STEP 2: Vercel 가입 + 프로젝트 연결 (5분)

Vercel이 뭐고, 왜 무료인가?

2-1. Vercel 가입

2-2. 새 프로젝트 만들기

2-3. 프로젝트 설정

STEP 3: 배포 확인 + vercel.app 주소 받기 (2분)

배포 완료!

잠깐 멈춰서 이 순간을 즐기세요

STEP 4: 도메인 구매 (5분, 선택)

구매할 곳

구매 과정 (가비아 기준)

STEP 5: 도메인 연결 + HTTPS 자물쇠 (3분)

5-1. Vercel에 도메인 추가

5-2. DNS 설정 안내 받기

5-3. 가비아에서 DNS 설정

5-4. DNS 전파 기다리기

5-5. HTTPS 자물쇠 자동 활성화

마지막 정리: metadataBase 도메인 업데이트

AI에게 도메인 업데이트 요청하기

자동 재배포 마법

지금 당장 해야 할 두 가지

오늘의 에러 119 🚨

관련 글

DAY 10 [점검] 지금까지 만든 블로그, 수익화 체크리스트로 진단하기

DAY 09 [실전] 구글 검색 1페이지에 내 글 올리는 세팅 (코딩 없이 10분)

DAY 08 [실전] 체류 시간 3분 → 7분: 자동 목차와 카테고리를 AI로 1분 만에 추가하기

오늘의 여정 한눈에 보기

STEP 1: GitHub에 코드 올리기 (5분)

1-1. 터미널에서 Git 초기화

1-2. 모든 파일을 Git에 추가

1-3. 첫 커밋 만들기

1-4. GitHub 저장소와 연결

1-5. GitHub에 푸시(업로드)

1-6. 확인

STEP 2: Vercel 가입 + 프로젝트 연결 (5분)

Vercel이 뭐고, 왜 무료인가?

2-1. Vercel 가입

2-2. 새 프로젝트 만들기

2-3. 프로젝트 설정

STEP 3: 배포 확인 + vercel.app 주소 받기 (2분)

배포 완료!

잠깐 멈춰서 이 순간을 즐기세요

STEP 4: 도메인 구매 (5분, 선택)

구매할 곳

구매 과정 (가비아 기준)

STEP 5: 도메인 연결 + HTTPS 자물쇠 (3분)

5-1. Vercel에 도메인 추가

5-2. DNS 설정 안내 받기

5-3. 가비아에서 DNS 설정

5-4. DNS 전파 기다리기

5-5. HTTPS 자물쇠 자동 활성화

마지막 정리: metadataBase 도메인 업데이트

AI에게 도메인 업데이트 요청하기

자동 재배포 마법

지금 당장 해야 할 두 가지

오늘의 에러 119 🚨

관련 글

DAY 10 [점검] 지금까지 만든 블로그, 수익화 체크리스트로 진단하기

DAY 09 [실전] 구글 검색 1페이지에 내 글 올리는 세팅 (코딩 없이 10분)

DAY 08 [실전] 체류 시간 3분 → 7분: 자동 목차와 카테고리를 AI로 1분 만에 추가하기