바이브코딩 · 7회차 핸즈온 워크북

내 사이트에 진짜 주소 달기
— vercel.app 꼬리표 떼기

시간 약 75분
준비물 6회차에 배포한 내 사이트(···.vercel.app), 결제할 카드, 6회차에 적어 온 README 초안, 안티그래비티
만들 것 세상에 하나뿐인 내 도메인 주소
오늘의 약속. 코드는 거의 안 만집니다. 오늘은 “도메인 사기 → Vercel에 등록 → 네임서버 바꾸기 → 기다리기” 이 한 바퀴를 도는 게 전부예요. 거의 다 마우스 클릭입니다. 외울 필요 없습니다 — 이 책을 옆에 두고 한 칸씩 따라오세요.

0큰 그림 — 오늘 바꾸는 건 딱 하나 5분

지난 시간 우리 사이트에 AI 심장을 달았습니다. 사이트는 잘 돌아가는데, 주소를 한번 보세요 — 내앱이름.vercel.app. 작동은 완벽한데, 뒤에 vercel.app이라는 꼬리표가 붙어 있죠.

오늘은 그 꼬리표를 떼고, 내이름.shop 같은 내가 산 진짜 주소로 바꿉니다.

셋방 → 내 간판 비유

···.vercel.app 주소는 “○○빌딩 301호” 같은 거예요. 빌딩(Vercel) 이름을 빌려 쓰는 셋방 주소죠.

오늘 하는 일은 그 가게 앞 길에 내 간판 하나를 거는 것입니다. 가게 안(사이트 내용)은 그대로예요. 바뀌는 건 “주소” 하나뿐입니다. 코드도, 디자인도, AI 기능도 손대지 않습니다.

오늘 등장하는 곳 두 군데. ① 호스팅케이알 — 도메인을 파는 가게(여기서 주소를 삽니다). ② Vercel — 6회차에 쓴 그곳(여기에 “이 주소가 내 사이트예요”라고 알려줍니다).

1도메인이 뭔가요 5분

인터넷 집 주소 비유

컴퓨터끼리는 사실 숫자로 서로를 찾습니다 (예: 76.76.21.21). 그런데 사람이 숫자를 외우긴 어렵죠.

그래서 그 숫자에 이름표를 붙였습니다. 그 이름표가 도메인이에요. naver.com, google.com … 전부 숫자에 붙인 이름표입니다.

도메인을 사면 한 가지를 더 정해줘야 합니다 — “이 이름표가 어느 집을 가리킬지”. 그 길을 안내하는 표지판이 네임서버예요.

오늘 어려운 말은 딱 두 개.
· 도메인 = 내 사이트에 붙이는 이름표 (오늘 삽니다)
· 네임서버 = 그 이름표가 어디를 가리킬지 정하는 표지판 (오늘 Vercel 쪽으로 돌립니다)
이 둘만 알면 오늘 수업 끝입니다.

2호스팅케이알에서 도메인 사기 20분

2-1. 호스팅케이알 접속 · 회원가입5분
  1. 브라우저에서 hosting.kr 접속
  2. 오른쪽 위 로그인 → 처음이면 회원가입 (이름·이메일·휴대폰)
  3. 비밀번호는 메모지에 적어두세요 — 비번 찾느라 시간 낭비가 가장 흔합니다
화면 오른쪽 위에 내 이름(또는 아이디)이 보이면 로그인 OK.
  • 휴대폰 본인인증에서 막힘 → 통신사·번호 다시 확인, 그래도 안 되면 강사님 호출
  • 이미 호스팅케이알 계정이 있다면 → 회원가입 건너뛰고 바로 로그인
2-2. 도메인 이름 검색하고 고르기8분
  1. 메인 화면 가운데 검색창에 원하는 이름을 영어로 입력 → 검색
  2. 검색 결과에서 “사용 가능”(초록색)으로 나온 것만 살 수 있습니다
  3. 끝글자(.shop / .site / .online 등)는 가격이 가장 싼 것으로 고르세요 — 첫해 보통 몇천 원입니다
좋은 도메인 이름 규칙 — 짧게, 영어 소문자, 띄어쓰기 없이.
  • 좋은 예: jiyoung-diary.shop, mychef.site, hello-rody.online
  • 피하기: 너무 긴 이름, 숫자 섞기, 하이픈(-) 2개 이상, 대문자
가격 함정 — 꼭 확인. .shop·.site 같은 주소는 첫해는 몇천 원으로 싸지만, 2년차 갱신(연장)은 2~4만 원으로 오릅니다. 1년만 체험할 거면 부담 없어요. 계속 쓸 거면 “갱신 가격”을 한 번 보고 정하세요.
장바구니(또는 신청 화면)에 내가 고른 도메인 1개가 담기고, 등록 기간이 1년으로 보이면 OK.
2-3. 결제하고 등록 확인7분
  1. 장바구니 → 주문/결제 화면으로 이동
  2. 등록 기간이 1년인지 확인
  3. 자동연장(자동결제) 옵션이 켜져 있으면, 원치 않을 경우 끄세요
  4. 카드로 결제
“도메인 등록 완료” 안내가 뜨고, 마이페이지 → 도메인 목록에 내 도메인이 보이면 성공.
결제가 어렵거나 부담되면 — 괜찮습니다. 강사님께 말씀하세요. 오늘 도메인을 못 사도 ···.vercel.app 주소로 사이트는 멀쩡히 작동합니다. 도메인은 다음에 붙여도 늦지 않아요. 오늘은 구경만 하고 넘어가도 됩니다.

3Vercel에 내 도메인 알려주기 10분

도메인은 샀지만, 아직 내 사이트와 연결되지 않았습니다. 이제 Vercel에게 “이 주소가 내 사이트예요”라고 알려줄 차례입니다.

3-1. 내 프로젝트의 Domains 화면 열기3분
  1. 브라우저에서 vercel.com 접속 → 로그인
  2. 6회차에 배포한 내 프로젝트를 클릭해서 들어갑니다
  3. 위쪽 메뉴에서 Settings → 왼쪽 메뉴에서 Domains 클릭
···.vercel.app 주소가 목록에 보이는 화면이면 제대로 온 거예요.
3-2. 내가 산 도메인 추가하기3분
  1. 입력칸에 방금 산 도메인을 그대로 입력 (예: mychef.site)
  2. Add(추가) 버튼 클릭
빨간 표시가 떠도 정상입니다. “아직 연결 안 됨 / Invalid Configuration” 같은 안내가 나옵니다. 지금부터 그 연결을 해줄 거예요.
3-3. Vercel이 알려주는 “네임서버” 받아 적기4분

Vercel이 연결 방법을 안내합니다. 우리는 그중 네임서버(Nameservers) 방법을 씁니다. 화면에 주소 두 개가 보일 거예요. 보통 이렇게 생겼습니다:

종이에 그대로 적으세요 (수업 내내 봅니다):
  • 1번: ns1.vercel-dns.com
  • 2번: ns2.vercel-dns.com

→ 화면에 나온 값이 위와 다르면 화면에 나온 것을 적으세요.

  • 네임서버는 안 보이고 숫자 주소(76.76.21.21)만 보임 → 다른 연결 방법입니다. 부록 “다른 방법”을 보거나 강사님 호출
  • 화면이 영어라 헷갈림 → “Nameservers” 또는 “ns…vercel-dns.com”으로 끝나는 글자만 찾으면 됩니다

4호스팅케이알에서 표지판 돌리기 10분

이제 호스팅케이알로 돌아가, 내 도메인의 표지판(네임서버)을 Vercel 쪽으로 돌립니다. 이게 오늘의 핵심 한 동작이에요.

4-1. 내 도메인 관리 화면 열기3분
  1. 호스팅케이알 → 마이페이지(또는 My서비스) → 도메인
  2. 방금 산 내 도메인을 클릭
  3. 네임서버(또는 “네임서버/DNS”) 설정 메뉴를 찾습니다
지금은 호스팅케이알 기본 네임서버(···.hosting.kr 같은 주소)로 채워져 있을 거예요. 정상입니다.
4-2. Vercel 네임서버로 바꾸기5분
  1. “타사 네임서버 사용”(또는 “네임서버 직접 입력”)을 선택
  2. 1차 네임서버 칸: ns1.vercel-dns.com
  3. 2차 네임서버 칸: ns2.vercel-dns.com
  4. 3차·4차 칸은 비워둡니다
  5. 저장
오타 주의 — 점(.) 하나, 글자 하나만 틀려도 연결이 안 됩니다. 3-3에서 적어 둔 종이와 한 글자씩 대조하세요.
네임서버 칸에 ns1.vercel-dns.com / ns2.vercel-dns.com 두 개가 저장된 채로 보이면 OK.
  • “타사 네임서버” 메뉴를 못 찾음 → 도메인 옆 연필(수정) 아이콘을 눌러보세요
  • 저장 후 “처리 중” / “적용까지 시간이 걸립니다” 메시지 → 정상입니다. 다음 단계로

5기다리는 동안 — README 다듬기 15분

표지판은 바로 안 바뀝니다. 보통 10분~1시간(대부분 30분 안)이 걸려요. 그 빈 시간에, 6회차 미션이었던 README를 마저 채웁니다.
자기소개서 비유

README(리드미)는 내 프로젝트의 자기소개서입니다. 깃허브 저장소 첫 화면에 큰 글로 보이는 그 글이에요. 처음 들어온 사람이 “이게 무슨 사이트지?”를 바로 알 수 있게 해줍니다.

5-1. README.md 열고, 적어 온 내용 채우기6분
  1. 안티그래비티에서 6회차 프로젝트 폴더를 엽니다
  2. 왼쪽 사이드바에서 README.md 클릭
  3. 6회차에 적어 온 3가지를 한국어로 그대로 채웁니다:
  • 이 사이트는 무엇을 하는 사이트인가 (1~2문장)
  • 어떻게 쓰는지 (1~2문장)
  • 본인 이름 · 만든 날짜
5-2. 안티그래비티에게 깔끔하게 다듬어 달라고 하기5분
README.md 파일을 깔끔한 마크다운으로 다듬어줘.
제목(#) → 소개 → 사용법 → 만든 사람 순서로 정리해줘.
내가 쓴 내용은 그대로 두고, 형식만 보기 좋게 바꿔줘.

변경안을 보고 Apply(또는 Accept)를 누릅니다.

마크다운 첫 만남. #은 제목, **굵게**는 강조, -는 목록. 메모장 글을 보기 좋게 꾸미는 간단한 약속이에요. 외울 필요 없고, 오늘은 눈에 익히기만.
5-3. 깃허브에 올리기4분
지금 변경한 내용을 git에 커밋하고, 내 깃허브 저장소에 푸시해줘.
커밋 메시지는 "README 작성" 으로.
깃허브 저장소 첫 화면을 새로고침했을 때, 다듬어진 README가 보기 좋게 보이면 OK.
참고. 안티그래비티 대신, 깃허브 저장소에서 README.md 옆 연필 아이콘으로 바로 고칠 수도 있습니다. 편한 쪽으로.

6연결됐는지 확인 — 자물쇠 찾기 5분

6-1. 내 도메인으로 직접 들어가 보기3분
  1. 브라우저 새 탭을 열고, 주소창에 내 도메인을 입력 (예: mychef.site)
  2. 엔터
내 사이트가 그대로 뜨면 대성공 ✨ 주소창 왼쪽의 자물쇠 아이콘은 HTTPS(보안 연결)가 자동으로 걸렸다는 뜻입니다 — 우리가 따로 한 게 없어도 Vercel이 알아서 해줘요.
  • 아직 안 뜨거나 호스팅케이알 광고 페이지가 뜸 → 표지판이 아직 안 바뀐 것. 더 기다리면 됩니다
  • “주의 요함” 경고 / 자물쇠가 깨져 보임 → HTTPS 발급 중. 10~30분 더 기다린 뒤 새로고침
  • 옛 화면이 계속 뜸 → ⌘+Shift+R로 강력 새로고침, 또는 시크릿창에서 확인
6-2. Vercel 화면에서도 확인2분

Vercel의 Settings → Domains 화면을 새로고침합니다.

내 도메인 옆에 초록색 체크(또는 “Valid Configuration”)가 뜨면 연결 완료.
수업 시간 안에 다 안 떠도 — 실패가 아닙니다. 표지판(네임서버)이 전 세계에 퍼지는 데 시간이 걸릴 뿐이에요. 오늘 할 일(사기 → Vercel 등록 → 네임서버 변경)을 다 했다면 끝낸 겁니다. 집에 가서 1~2시간 뒤 다시 도메인을 쳐보세요. 그때는 거의 다 떠 있습니다.

7짝꿍이랑 새 주소 나누기 5분

7-1. 진짜 내 주소를 자랑하기5분
  1. 도메인이 연결된 분끼리, 새 주소를 카톡(또는 메모)으로 주고받기
  2. ···.vercel.app 주소와 새 도메인 — 둘 다 같은 사이트로 가는지 확인
오늘의 결실. 이제 명함에, 카톡 프로필에, 인스타 소개란에 적을 수 있는 “진짜 내 주소”가 생겼습니다. 누가 물어보면 도메인 하나만 알려주면 돼요.

✓오늘의 자가 점검

위 네 개까지 체크됐다면 — 오늘 할 일은 끝났습니다. 마지막 한 개(도메인으로 열림)는 표지판이 퍼질 때까지 시간이 필요할 뿐이에요. 오늘 정신없으셨어도 괜찮습니다. 이 책을 옆에 두고 집에서 한 번 더 천천히 확인해 보세요.

★부록 — 자주 막히는 곳

증상해결
도메인을 쳐도 호스팅케이알 광고/안내 페이지가 뜬다 네임서버 변경이 아직 안 퍼진 것. 4번 설정 다시 확인 + 더 기다리기 (최대 1~2시간)
“주의 요함” 경고, 자물쇠가 안 보인다 HTTPS 발급 중. 10~30분 뒤 새로고침하면 자동으로 자물쇠가 생김
Vercel Domains에 도메인 옆 빨간 표시가 계속 네임서버 오타 확인(점·철자 한 글자씩). 호스팅케이알에서 다시 정확히 저장
옛날 화면이 계속 뜬다 ⌘+Shift+R 강력 새로고침, 또는 시크릿창에서 확인
Vercel이 네임서버 대신 숫자 주소(A레코드)만 안내 호스팅케이알 DNS 관리에서 — A레코드 @ → 76.76.21.21, CNAME www → cname.vercel-dns.com 입력 (강사 도움 권장)
도메인 이름에 오타가 있는 채로 사버렸다 보통 환불이 어려움. 강사와 상의 — 그 이름으로도 사이트는 정상 작동함
호스팅케이알 / Vercel 로그인이 안 된다 비밀번호 메모지 확인. 못 찾으면 “비밀번호 찾기”로 재설정

⌧부록 — 오늘의 용어 9개

도메인내 사이트에 붙이는 “이름표” 주소 (예: mychef.site)
네임서버그 이름표가 어느 사이트를 가리킬지 정하는 “표지판”
DNS이름표(도메인)와 실제 주소(숫자)를 이어주는 인터넷 전화번호부
호스팅케이알도메인을 사고 관리하는 가게(등록처)
Vercel내 사이트가 실제로 올라가 있는 곳 (6회차에 배포한 그곳)
HTTPS안전한 연결. 주소창 “자물쇠”로 표시됨. Vercel이 자동으로 걸어줌
파킹 페이지도메인은 샀지만 아직 연결 전일 때 뜨는 임시 안내 페이지
갱신(연장)도메인을 1년 더 쓰려고 다시 결제하는 것. 첫해보다 비쌀 수 있음
README저장소 첫 화면에 보이는 “프로젝트 자기소개서”
스마택트 Smartact · 바이브코딩 7회차 꼬리표를 떼고 — 내 이름의 주소로