바이브코딩 4회 과정 · 3회차 / 4

빌린 주소를 떠나
내 도메인으로 이사합니다

시간 3시간 (10분 휴식 1회)
준비물 기관 PC, 2회차에 만든 사이트, 본인 명의 신용·체크카드, 도메인 후보 이름 3개
만들 것 내가 산 도메인(.kr)으로 접속되고 자물쇠가 보이는 사이트
오늘의 약속. 오늘 끝나면 명함에 적을 수 있는 내 주소가 생깁니다. 단, 도메인 값 약 1만 1천 원을 카드로 결제하는 단계가 있습니다. 결제가 어려우신 분은 강사에게 미리 말씀해 주세요.

0큰 그림 — 오늘 무슨 일이 일어나는가 10분

지난 두 번의 수업을 거쳐 여러분은 이미 인터넷에 사이트가 있습니다. 주소는 내이름.vercel.app 처럼 생겼죠. 오늘은 그 주소를 바꿉니다.

가게 간판 비유

지금까지의 주소(vercel.app)는 빌린 건물 호수입니다. "○○빌딩 302호"라고 하면 주소이긴 하지만, 명함에 적기엔 좀 어색하죠. 내 도메인(.kr)은 내 가게 간판이자 내 주소판입니다. 건물 호수는 그대로 있고, 간판만 새로 다는 것이라서 사이트 내용은 하나도 건드리지 않아도 됩니다.

오늘 할 일은 딱 세 가지입니다.
  1. 도메인 사기 — 호스팅케이알에서 .kr 주소 한 개 구매 (약 11,000원)
  2. Vercel에 연결하기 — "나 이 도메인 쓸게요"라고 등록
  3. DNS 길 터주기 — 호스팅케이알에서 "이 도메인이 Vercel로 가야 해"라고 알려주기

헷갈리는 용어, 미리 풀기

도메인(Domain)이란?
인터넷 주소입니다. naver.com, google.com처럼 사람이 외우기 쉬운 이름. 매년 돈을 내고 빌리는 개념이에요.
DNS(Domain Name System)란?
"이 이름으로 오면 어디로 가야 하는지" 알려주는 전화번호부입니다. 우리는 "내 도메인으로 오면 Vercel로 가세요"라고 등록할 거예요.
A레코드 · CNAME이란?
전화번호부에 적는 항목의 종류입니다. A레코드는 숫자 주소(IP)로 직접 연결, CNAME은 다른 이름으로 연결. 오늘은 Vercel이 "이 값을 넣으세요"라고 알려주니까 그대로 복사하면 됩니다.

1점검 — 내 사이트와 도메인 후보 확인 20분

시작 전에 지난 수업의 결과물이 아직 잘 있는지 확인하고, 오늘 살 도메인 이름을 준비합니다.

1-1. 안티그래비티 열고 2회차 프로젝트 다시 켜기5분
  1. 안티그래비티 실행 → File → Open Folder… → 2회차에 만든 폴더 선택
  2. 왼쪽 폴더 트리에 파일들이 보이면 OK
  3. AI 채팅창에 아래와 같이 적어 개발 서버를 켜세요
개발 서버를 다시 켜줘. 브라우저에서 열 주소도 알려줘.
터미널에 Local: http://localhost:3000 같은 줄이 보이면 성공.
  • 폴더를 못 찾겠다 → 바탕화면이나 문서 폴더에서 2회차에 만든 폴더 이름을 찾아보세요. 기억이 안 나면 강사에게 물어보세요.
  • "신뢰합니까?" 창이 뜬다 → Yes, I trust the authors 클릭.
1-2. vercel.app 주소로 2회차 사이트 확인5분
  1. 크롬 주소창에 2회차에 받은 내이름.vercel.app 주소 입력
  2. 내 이름·사진·연락처가 담긴 페이지가 보이면 OK
사이트가 잘 뜨고, 이름·소개·사진이 보입니다. 이 페이지가 오늘 "이사"할 집입니다.
  • 사이트가 안 뜬다 → vercel.com 로그인 → 내 프로젝트 → Deployments 탭에서 최근 배포 상태를 확인하세요. 빨간 "Error"가 있으면 강사 호출.
  • 주소를 잊어버렸다 → vercel.com 로그인 후 내 프로젝트를 클릭하면 주소가 나옵니다.
1-3. 도메인 후보 이름 3개 + 카드 준비 확인10분

지난주 숙제였던 도메인 이름 후보 3개를 확인합니다. 1순위가 이미 팔렸을 수 있어서 꼭 세 개가 필요합니다.

종이나 메모장에 아래 양식으로 적어 두세요.
  • 1순위: ________.kr
  • 2순위: ________.kr
  • 3순위: ________.kr
  • 도메인 후보를 못 정해 왔다 → 지금 즉석에서 정해도 됩니다. 아래 규칙을 참고해서 2번 섹션으로 바로 넘어가도 됩니다.
  • 카드가 없다 → 오늘 도메인 결제 단계는 건너뛰고, 나머지 단계는 강사 화면 보며 따라가도 좋습니다.

2도메인 이름 고르기 25분

도메인은 한번 사면 최소 1년입니다. 나중에 바꾸면 기존 주소로 오는 사람들이 헷갈립니다. 처음에 잘 고르는 게 중요합니다.

좋은 도메인의 규칙

간판 비유
.kr / .com / .co.kr 차이 한 줄 정리
후보 3개를 1·2·3순위로 종이에 적으세요. 예시:

※ 예시일 뿐입니다. 본인만의 이름을 생각해 보세요.

결정 팁. 너무 고민하지 마세요. 지금 내 이름이나 활동명을 그대로 쓰는 게 제일 좋습니다. "나중에 더 좋은 이름으로 바꾸면 되지"라고 생각하면 결정이 어렵습니다. 지금 가장 자연스러운 이름 하나를 고르세요.

3도메인 구매 실습 — 호스팅케이알 35분

호스팅케이알(hosting.kr)은 국내에서 많이 쓰는 도메인 등록 서비스입니다. 한국어 지원이 잘 되고 결제도 간편합니다.

3-1. 호스팅케이알 접속 · 회원가입7분
  1. 크롬에서 새 탭 → 주소창에 hosting.kr 입력 → 엔터
  2. 오른쪽 위 회원가입 클릭
  3. 이름·이메일·비밀번호 입력 후 가입 완료
  4. 가입 시 입력한 이메일로 인증 메일이 오면 확인 버튼 클릭
로그인된 상태로 호스팅케이알 메인 화면이 보이면 성공.
  • 인증 메일이 안 온다 → 스팸 메일함을 먼저 확인하세요. 없으면 "인증 메일 재발송" 버튼을 클릭하세요.
  • 이미 예전에 가입했다 → 그냥 로그인하면 됩니다. 비밀번호 모르면 "비밀번호 찾기"로.
3-2. 도메인 검색 — 구매 가능한지 확인5분
  1. 메인 화면 가운데 도메인 검색창에 1순위 후보 입력 (예: kimsunja)
  2. .kr을 선택하고 검색 버튼 클릭
  3. 결과 화면에서 "등록 가능" 표시인지 확인
"등록 가능합니다" 또는 초록색 표시가 보이면 그 이름을 살 수 있습니다.
  • 1순위가 "이미 등록됨"이다 → 2순위, 3순위 순서로 검색해 보세요. 세 개 다 팔렸다면 즉석에서 새 후보를 만들면 됩니다.
  • 어떤 이름이 좋을지 모르겠다 → AI에게 물어볼 수도 있습니다. 안티그래비티에 "내 이름이 OOO인데 .kr 도메인 이름 5개 추천해줘"라고 해 보세요.
3-3. 장바구니 담고 결제 (카드, 약 11,000원)10분
  1. 구매 가능한 도메인 옆 장바구니 담기 (또는 신청하기) 클릭
  2. 기간 선택 화면 → 1년으로 설정 (충분합니다)
  3. 장바구니 → 주문·결제로 이동
  4. 결제 수단 선택 → 신용카드 또는 체크카드로 결제
결제 전 꼭 확인하세요. 결제 화면에 자동 갱신·부가서비스(메일호스팅, 보안서버 SSL 등) 체크가 자동으로 켜져 있을 수 있습니다. 필요 없는 서비스는 체크를 풀고 결제하세요. 오늘은 도메인 이름 하나만 사면 됩니다. SSL(자물쇠)은 Vercel이 무료로 자동으로 해줍니다.
"주문 완료" 또는 "결제 완료" 화면이 보이면 성공. 결제 금액 약 11,000원 확인.
  • 결제가 안 된다 → 카드 한도 확인, 또는 다른 카드 사용. 그래도 안 되면 강사 호출.
  • 본인인증 단계에서 막힌다 → 문자로 받은 인증번호를 입력하면 됩니다. 스마트폰 문자를 확인하세요.
  • 사이트 화면이 이상하거나 오류가 뜬다 → 크롬 새로고침(F5) 후 다시 시도. 그래도 안 되면 강사 호출.
3-4. 구매 완료 · 내 도메인 목록 확인5분
  1. 로그인 상태에서 오른쪽 위 내 아이디 클릭 → 마이페이지
  2. 도메인 관리 또는 내 도메인 목록 클릭
  3. 방금 산 도메인이 목록에 보이는지 확인
목록에 방금 산 내이름.kr이 보이고, 상태가 "정상" 또는 "활성"이면 구매 완료.
🍵 10분 쉬어가기. 화장실·물 한 잔. 노트북 덮지 말고 안티그래비티와 호스팅케이알 탭은 켜둔 채로 잠깐 쉽니다.

4Vercel에 내 도메인 연결 35분

도메인을 샀다고 해서 자동으로 내 사이트에 연결되지는 않습니다. Vercel에 "이 도메인 내가 쓸게요"라고 먼저 등록해야 합니다. 그러면 Vercel이 "DNS에 이 값 넣어줘"라고 알려줍니다.

4-1. Vercel 로그인 → 내 프로젝트 → Settings → Domains5분
  1. 크롬 새 탭 → vercel.com → 로그인
  2. 대시보드에서 2회차에 만든 내 프로젝트 클릭
  3. 상단 탭에서 Settings 클릭
  4. 왼쪽 메뉴에서 Domains 클릭
현재 내이름.vercel.app 같은 주소가 목록에 보이는 화면이 나오면 OK. 여기에 새 도메인을 추가할 것입니다.
4-2. 산 도메인 입력하고 Add 클릭5분
  1. Domains 화면 위쪽 입력창에 방금 산 도메인 입력: 예) kimsunja.kr
  2. Add 버튼 클릭
  3. 잠시 후 도메인이 목록에 추가됨
www를 붙여야 하나요? www.kimsunja.kr도 같이 등록하면 좋습니다. Vercel이 추천하면 두 개 다 추가하세요. 하나만 해도 됩니다.
4-3. Vercel이 알려주는 DNS 값 메모하기10분

도메인을 추가하면 Vercel이 빨간 경고 표시와 함께 "DNS에 이 값을 넣으세요"라고 안내합니다.

아래 표에 Vercel이 알려준 값을 받아 적으세요. (이 정보는 5번 섹션에서 씁니다.)
유형호스트(이름)값(Vercel이 알려준 숫자 또는 주소)
A 레코드@
CNAMEwww

A레코드 값은 76.76.21.21인 경우가 많습니다. Vercel이 다른 값을 보여주면 그 값을 적으세요.

Vercel 화면에 도메인이 추가됐고, 빨간 "Invalid Configuration" 같은 표시가 보이면 정상입니다. DNS를 아직 안 했으니 빨간 게 뜨는 건 당연합니다. 5번에서 해결합니다.
이 탭을 닫지 마세요. Vercel이 알려준 값이 보이는 이 화면을 그대로 열어둔 채로 5번으로 넘어갑니다.

5DNS 길 터주기 — 호스팅케이알 35분

이제 호스팅케이알에 "이 도메인으로 오는 사람은 Vercel로 보내주세요"라고 알려줄 차례입니다. 이 단계가 3회차에서 가장 중요하고, 가장 실수가 많이 나는 부분입니다. 천천히 따라가세요.

전화 교환원 비유

옛날에는 전화를 연결해주는 교환원이 있었습니다. "○○○씨 집에 연결해줘"라고 하면 교환원이 전선을 꽂아 연결해줬죠. DNS는 그 교환원입니다. 우리는 교환원에게 "kimsunja.kr로 오면 Vercel(76.76.21.21)로 연결해줘"라고 알려주는 겁니다.

5-1. 호스팅케이알 → 도메인 관리 → DNS 설정 화면 찾기8분
  1. 호스팅케이알 탭으로 이동 (아까 열어둔 탭)
  2. 마이페이지 → 도메인 관리
  3. 산 도메인 옆 관리 또는 설정 버튼 클릭
  4. DNS 관리 또는 네임서버/DNS 레코드 항목 찾아 클릭
"DNS 레코드 설정" 같은 화면이 열리고, 레코드 유형(A, CNAME 등)을 추가하는 버튼이 보이면 성공.
  • DNS 설정 화면을 못 찾겠다 → 강사를 불러주세요. 사이트 인터페이스는 가끔 바뀌기 때문에 위치가 조금씩 다를 수 있습니다.
  • 네임서버 관련 화면이 나온다 → 네임서버가 아니라 "DNS 레코드" 탭을 찾아야 합니다. 두 가지가 다릅니다.
5-2. A레코드 입력8분

Vercel이 알려준 A레코드 값을 입력합니다. (4-3에서 메모한 값)

  1. 레코드 추가 버튼 클릭
  2. 유형(Type): A 선택
  3. 호스트(Host) 또는 이름(Name): @ 입력 (루트 도메인을 뜻함)
  4. 값(Value) 또는 IP 주소: 76.76.21.21 입력 (Vercel이 준 값)
  5. TTL은 기본값으로 놔두기
  6. 저장 클릭
@이 뭔가요? @은 "도메인 자체"를 뜻하는 기호입니다. kimsunja.kr 자체로 왔을 때를 말합니다.
5-3. CNAME 입력 (www용)5분

www.kimsunja.kr로 들어오는 사람도 연결하기 위해 CNAME도 추가합니다.

  1. 레코드 추가 버튼 클릭
  2. 유형(Type): CNAME 선택
  3. 호스트(Host): www 입력
  4. 값(Value): cname.vercel-dns.com 입력 (Vercel이 준 CNAME 값)
  5. 저장 클릭
Vercel이 다른 값을 알려줬다면? 4-3에서 메모한 값을 그대로 입력하세요. 위의 예시와 다를 수 있습니다.
5-4. 저장 후 Vercel 화면 새로고침해서 확인10분
  1. 호스팅케이알에서 저장이 완료됐는지 확인
  2. Vercel 탭으로 이동 → Settings → Domains 화면에서 F5로 새로고침
  3. 빨간 경고가 초록 체크로 바뀌는지 확인
DNS는 시간이 걸립니다. 보통 수 분 안에 바뀌지만, 길게는 몇 시간이 걸릴 수도 있습니다. 오늘 수업 시간 안에 초록 체크가 안 보여도 실패가 아닙니다. 내일 아침에 확인하면 대부분 됩니다.
Vercel 화면의 도메인 옆에 초록 체크(✓)가 보이면 연결 성공! 5번을 완전히 끝낸 것입니다.
  • 한참 기다려도 빨간 경고가 그대로다 → 입력값에 오타가 있을 수 있습니다. 호스팅케이알 DNS 화면으로 돌아가서 값을 다시 확인하고 강사를 불러주세요.
  • Vercel이 "도메인이 이미 다른 프로젝트에 등록됨"이라고 한다 → 이전에 다른 프로젝트에 같은 도메인을 넣은 경우입니다. 강사 호출.
  • "SERVFAIL" 같은 영어 오류가 보인다 → DNS 전파 중에 나타나는 일시적 오류입니다. 5~10분 후 다시 새로고침하세요.

6HTTPS 자물쇠 확인 + 마무리 20분

Vercel은 도메인이 연결되면 자동으로 HTTPS(보안 연결)를 적용해줍니다. 따로 설정하지 않아도 됩니다.

6-1. 내 도메인으로 직접 접속5분
  1. 크롬 주소창에 방금 연결한 도메인 입력: 예) kimsunja.kr
  2. 엔터 → 2회차에 만든 내 사이트가 뜨는지 확인
내 이름·소개·사진이 담긴 2회차 페이지가 새 도메인 주소로 열리면 성공입니다. 이제 vercel.app이 아니라 내 주소로 접속됩니다.
  • 사이트가 안 뜬다 → DNS가 아직 전파 중입니다. 5~10분 후 다시 시도해 보세요. 수업 중에 안 되면 내일 아침에 다시 확인해도 됩니다.
6-2. 주소창 자물쇠 확인 + http → https 자동 전환5분
  1. 주소창 왼쪽에 자물쇠(🔒) 또는 "안전함" 표시 확인
  2. 주소창에 http://kimsunja.kr 처럼 http로 입력해도 자동으로 https로 바뀌는지 확인
왜 자물쇠가 중요한가요? 자물쇠가 없는 사이트는 브라우저가 "안전하지 않음"이라고 표시합니다. 방문자가 불안해서 그냥 나가버립니다. Vercel이 자동으로 자물쇠를 붙여줘서 우리는 따로 할 게 없습니다.

자가 점검

전체 4회차 흐름

회차핵심 산출물오늘 위치
1회차버셀 주소로 세상에 보이는 사이트 1개 (한 사이클 완성) ✅완료
2회차내 이름·사진·소개로 채운 "나의 페이지" ✅완료
3회차내가 산 도메인(.kr)으로 접속되는 사이트 + HTTPS오늘 ★
4회차구글·네이버 검색에 등록된 사이트 + 발표마지막
다음 주(4회차) 예고. 이제 내 도메인까지 생겼습니다. 마지막 시간에는 이 사이트를 구글·네이버 검색에 등록합니다. 지금은 주소를 아는 사람만 들어올 수 있지만, 검색에 등록하면 내 이름을 검색했을 때 뜰 수 있습니다. 4회차에 발표도 있으니 내 사이트를 한번 더 다듬어 오세요.
오늘 집에 가서 확인할 것. DNS 전파에 시간이 걸립니다. 집에 도착하면 스마트폰이나 집 컴퓨터에서 내 도메인을 입력해 보세요. 대부분 수 시간 내에 됩니다. 내일 아침까지 기다려 보고, 그래도 안 되면 다음 주에 강사에게 알려주세요.
© 스마택트 · 바이브코딩 핸즈온 워크북
인쇄: 우측 하단 버튼 또는 ⌘P