바이브 코딩 웹사이트 만들기｜무료 도메인·Netlify 배포 9단계

이 글은 비개발자가 직접 진행한 바이브 코딩 웹사이트 만들기 과정을 담았습니다. 저는 코딩을 1도 할 줄 모릅니다. 하지만 실제로 작동하는 웹사이트를 만들었습니다. 예전 같으면 코딩 지식 없이는 페이지의 기본 구조도 못 잡았을 겁니다. 웹사이트는 코드로 돌아가니까요. 하지만 2026년 현재 장벽은 무너졌습니다. 누구나 자신만의 웹사이트를 빠르게 만드는 세상입니다. 무료로 웹사이트를 만드는 방법을 알려드리겠습니다.

웹사이트를 만드는 방법이 생소하고 어려울 수 있습니다. 그럴 때는 챗GPT나 제미나이에게 이 글을 복사 붙여넣기 해서 물어보세요. 궁금한 점을 질문하면서 조금씩 개선할 때, 여러분의 진짜 능력이 강화됩니다.

AI로 만든 웹사이트입니다. 저를 소개하는 용도입니다. 5년 전에 이 웹사이트를 만드려면 돈이 얼마나 필요했을까요? 확실한 건 웹사이트를 만드는 전문 인력을 구해야 한다는 거죠. 사실 이건 임시 사이트입니다. 무료로도 만들 수 있는 정도예요. 웹사이트를 만드려면 간단한 준비물이 필요합니다. 하나씩 같이 봅시다.

바이브 코딩 웹사이트 만들기 준비물

안티그래비티(Antigravity)
AI 코딩 도구입니다. 코딩을 대신 해주는 고마운 AI입니다. 우리는 이 친구에게 원하는 걸 설명하면 됩니다. 만약 사용법을 모른다면 이 글을 참고해주세요.

내도메인.한국
무료 도메인 발급 사이트입니다. 웹사이트의 주소를 무료로 받을 수 있습니다. google.com, naver.com, chatgpt.com 처럼 실제 주소가 필요합니다. 기껏 만들었는데 들어갈 수 있어야 하니까요.

Netlify
초간단 서버 발급 사이트입니다. 실제로 사이트가 작동하려면 서버가 필요합니다. 서버를 정석으로 구축하려면 너무 어렵고 힘이 듭니다. 그래서 마우스 클릭 몇 번 만으로 서버를 구축할 겁니다. 직접 웹사이트를 만드는 게 중요합니다.

목표 정하기

나를 소개하는 웹사이트를 만들 겁니다. 명함 같은 거죠. 여러분 본인이 만들고 싶은 걸 만드세요. 스스로 목표를 정하고 관련된 걸로 정해야 실력이 늡니다. 저는 명함 웹사이트로 정했습니다.

안티그래비티 프로그램을 실행해줍니다. 만약 실행 오류가 나거나 무한로딩 버그가 발생했다면 구글 안티그래비티 사용법 글을 보고 해결하세요.

Antigravity 시작 화면에서 Open Folder 버튼을 선택하는 모습 — Antigravity에서 새 작업 폴더를 여는 첫 단계

Windows 폴더 선택 창에서 웹사이트 작업 폴더를 고르고 Select folder 버튼을 누르는 화면 — 웹사이트 파일을 저장할 새 폴더 선택

파란색 Open Folder 버튼을 누르고, 작업할 폴더를 고르세요. 새로 만드시는 걸 권장합니다. 그 다음 Select folder 버튼을 누르면 끝입니다. 저는 폴더 이름을 “내 웹사이트 만들기”로 정했습니다. 여러분이 원하는 대로 하시면 됩니다.

Antigravity 작업 화면의 왼쪽 파일 공간과 오른쪽 프롬프트 입력창 — 왼쪽 파일 영역과 오른쪽 AI 대화창

작업 공간에 들어왔으니 본격적으로 해봅시다. 왼쪽이 작업 폴더 공간입니다. AI가 파일을 만들면, 저곳에 보이게 될 거예요.

Antigravity 대화창에 포트폴리오 웹사이트 제작 요청을 입력한 화면 — 만들고 싶은 웹사이트를 자연어로 설명한 프롬프트

오른쪽 대화창에 원하는 걸 적어줍시다. 여기서 짚고 넘어가야 합니다. AI는 Gemini 3.5 Flash를 선택해주세요. 초보자가 쓰기 가장 좋은 모델입니다. 괄호로 High라고 적혀있는데, AI가 얼마나 깊게 생각할지 정하는 겁니다. minimal, low, medium, high로 구성되어 있습니다. 이제 파란색 화살표를 눌러서 메시지를 보내세요. 마법이 일어납니다.

Antigravity가 작성한 구현 계획서와 생성된 assets 폴더 및 index.html 파일 — AI가 만든 구현 계획과 웹사이트 파일 확인

AI가 기획서를 들고 왔습니다. 제 실명을 알아내서 계획서에 당당히 놔뒀네요. 그리고 이상한 부분도 조금 보입니다. 이래서 기획안을 끝까지 읽어봐야 합니다. AI는 독심술사가 아니거든요. 정확히 지시하지 않으면, 자기 맘대로 하는 경우가 꽤 있습니다. 항상 체크하는 습관을 들이시면 좋습니다. 저는 실명 대신 닉네임으로 대체하라고 했습니다.

Antigravity가 제공한 로컬 웹 서버 접속 링크와 생성 파일 설명 — 완성된 웹사이트를 로컬 주소로 여는 안내

이렇게 AI가 웹사이트 주소를 띄워줬습니다. 만약 주소가 안 보이시면 AI에게 주소를 알려달라고 하세요. 아쉽게 개인 컴퓨터에서만 작동하는 주소입니다. 남들이 들어오게 하려면 서버가 필요하죠. 하지만 걱정 마세요. 곧 남들도 들어올 수 있게 만들 겁니다.

로컬 주소에서 열린 네온 색상의 포트폴리오 웹사이트 첫 결과 — Antigravity가 처음 만든 포트폴리오 웹사이트

AI가 네온사인 느낌의 웹사이트를 만들어줬습니다. 생각보다 그럴싸하네요. 제가 추구하는 스타일과 다릅니다. 뭔가 마음에 안 든다면, AI에게 바꿔달라고 요청하면 됩니다.

Antigravity 대화창에 네온 대신 실리콘밸리 스타일로 바꿔달라고 요청한 화면 — 원하는 분위기로 디자인을 다시 요청하는 과정

이렇게 요청사항을 적고, 계속 고치면 됩니다. 본인이 마음에 들 때까지 요청하세요. 사람은 수정을 귀찮아하지만, AI는 귀찮아도 해주니까요. 결국 AI와 소통하는게 중요합니다.

수정 요청 뒤 어두운 스타일로 바뀐 웹사이트의 역량 섹션 — 추가 프롬프트를 반영한 포트폴리오 디자인

이렇게 바뀌었네요. 어느 정도 마음에 들었다면, 실제 사람들이 접속할 수 있게 바꿔봅시다.

내도메인 한국 로그인 화면에서 보안코드와 회원가입 위치를 표시한 화면 — 무료 도메인 발급을 위한 회원가입과 로그인

내도메인.한국에 접속해주세요. 무료로 도메인을 발급받을 수 있는 사이트입니다. 처음이라면 회원가입부터 하세요. 로그인하면 도메인 선택 창이 보입니다.

한글 도메인이 xn--로 시작하는 Punycode 주소로 표시된 예시 — 한글 주소가 영문 문자 형태로 변환되는 예시

원하는 도메인을 치고 검색하세요. 저는 큐스페(qspae)로 진행해보겠습니다. 개인적으로 영문 도메인을 추천합니다. 한국어로 하면 깨집니다. 불법 사이트로 오해받으면 안 되잖아요. 내도메인.한국 주소가 xn--220 어쩌구로 표시됩니다.

내도메인 한국의 일반 도메인 검색 입력란에 qspae를 입력한 화면 — 사용할 영문 도메인 이름 검색

도메인 검색 결과에서 qspae1234.kro.kr 등록하기를 선택하는 화면 — 사용 가능한 kro.kr 무료 도메인 선택

가급적 영어로 원하는 걸 적고, 검색 버튼을 누르면 됩니다. kro.kr를 선택하세요. 이번 실습에서는 Netlify 연결에 사용할 수 있었던 kro.kr을 선택했습니다.

개인 계정 이름을 가린 내도메인 한국의 도메인 등록 완료 팝업 — 무료 도메인 등록 완료 안내

Netlify에 웹사이트 파일 올리기

무료 도메인을 등록했습니다. 이제 반은 넘게 온 겁니다. 제 주소는 qspae1234.kro.kr입니다. 여러분의 주소를 기억하세요. 이제 웹사이트를 연결해보겠습니다. 먼저 Netlify에 접속해주세요. 홈페이지 파일을 인터넷에 공개해주는 호스팅 서비스입니다. 폴더를 끌어다 놓는 것만으로 배포할 수 있어서 편합니다.

Sign up을 누른 뒤 편한 방법으로 가입합니다. 저는 Google 계정을 사용했습니다. 설문조사가 있는데, 무시해도 됩니다. 적당히 상황에 맞게 선택하고 Continue to deploy를 누르세요.

Netlify 온보딩에서 유입 경로를 선택하고 팀 이름을 입력하는 화면 — 가입 경로와 팀 이름을 입력하는 초기 화면

Netlify 첫 프로젝트 화면에서 Skip this step for now 링크를 표시한 화면 — 초기 AI 배포 화면을 건너뛰고 파일 업로드로 이동

프로젝트를 만드는 화면에서 Skip this step for now를 누르세요. 이번에는 Netlify의 기능을 쓰지 않을 겁니다. 폴더를 직접 업로드할 거니까요.

개인 이메일을 가린 Netlify 프로젝트 파일 업로드 영역 — 프로젝트 폴더 전체를 올리는 위치

Upload your project files 영역을 찾으세요. 안티그래비티에서 사용한 작업 폴더를 통째로 끌어다 놓습니다. 반드시 전체 폴더를 끌어다 놓아야 합니다. 안 그러면 오류가 나요.

개인정보를 가린 Windows 탐색기에서 웹사이트 폴더를 Netlify 업로드 영역으로 끌어다 놓는 화면 — 웹사이트 최상위 폴더를 Netlify로 끌어다 놓는 과정

Netlify 기본 주소에서 결과 확인하기

업로드가 끝나면 사이트이름.netlify.app 형태의 임시 주소가 만들어집니다. 초록색 주소를 눌러 홈페이지가 실제로 열리는지 먼저 확인하세요. 다른 기기에서도 이 주소로 접속할 수 있다면 파일 배포 성공입니다. 저는 graceful-halva-a1a36d.netlify.app이네요. 여러분의 주소를 확인하면 됩니다.

Netlify 프로젝트 개요에서 배포 완료와 임시 사이트 주소를 보여주는 화면 — 배포 뒤 생성된 netlify.app 기본 주소

Netlify 기본 도메인으로 접속해 포트폴리오 웹사이트가 정상 표시된 화면 — netlify.app 주소에서 실제 웹사이트 확인

화면이 비어 있거나 페이지를 찾을 수 없다고 나오면 업로드한 폴더의 가장 바깥쪽에 index.html이 있는지 확인하세요. 폴더 안에 같은 이름의 폴더가 한 번 더 들어가 있으면 Netlify가 첫 화면을 찾지 못할 수 있습니다.

무료 도메인을 Netlify에 연결하기

프로젝트에서 Domain management를 클릭하세요. Add a domain에서 Add a domain you already own을 선택하고, 아까 내도메인.한국에서 발급받은 주소를 입력하세요. http://나 https://는 붙이지 않고 qspae1234.kro.kr처럼 주소만 입력합니다.

Netlify Domain management에서 Add a domain you already own 메뉴를 선택하는 화면 — Domain management에서 보유 도메인 추가

Netlify에 qspae1234.kro.kr 사용자 도메인을 입력하고 Verify 버튼을 누르는 화면 — 발급받은 kro.kr 주소 검증

Verify를 누르면 도메인 소유권 확인용 TXT 레코드를 보여줍니다. Host는 subdomain-owner-verification(공통)이고 Value는 계정과 도메인에 따라 달라지는 긴 값입니다. 제 화면의 값을 그대로 따라 쓰지 말고, 반드시 본인 Netlify 화면에 나온 Value를 복사하세요.

Netlify가 안내한 subdomain-owner-verification TXT 레코드의 Host와 Value 화면 — DNS에 추가할 소유권 확인 Host와 Value 확인

내도메인.한국에 DNS 값 입력하기

내도메인 한국에 Netlify A 레코드 CNAME과 소유권 확인 TXT 값을 입력한 화면 — A CNAME TXT 레코드를 실제 값에 맞춰 입력

내도메인.한국 화면에서 위쪽 부분은 건드리지 마세요. 이 세 개만 입력하면 됩니다. 체크박스 체크해주세요.

IP연결(A): 왼쪽 칸은 비우고, 75.2.60.5(Netlify 표준 네트워크의 A 레코드 주소)를 입력하세요
별칭(CNAME): 왼쪽에는 www, 오른쪽에는 본인의 사이트이름.netlify.app 주소를 입력하세요.
TXT(SPF): 왼쪽에는 subdomain-owner-verification , 오른쪽에는 앞에서 복사한 본인 전용 Value를 입력하세요.

Netlify의 안내 값은 시점과 설정에 따라 바뀔 수 있습니다. 특히 TXT Value와 netlify.app 주소는 사람마다 다르므로 제 화면의 값을 복사하면 안 됩니다. Netlify 화면에 표시되는 맞춤 안내를 우선하세요. 입력을 마치면 보안코드를 적고 수정하기를 누르세요.

Netlify 도메인 확인 화면에서 Add subdomain 버튼을 누르는 단계 — DNS TXT 입력 후 Add subdomain 선택

DNS 설정은 바로 반영되지 않을 수 있고 몇 시간 걸릴 수 있습니다. Netlify 화면으로 돌아가 Add subdomain을 누른 뒤 반영을 기다리세요. 값이 맞다면 도메인 소유권 확인이 끝나고 사용자 주소가 프로젝트에 연결됩니다.

HTTPS 보안 인증서까지 연결하기

사용자 도메인에서 웹사이트는 열리지만 주소창에 주의 요함이 표시된 화면 — 인증서 발급 전 사용자 도메인의 보안 경고 상태

축하합니다. 90퍼센트 이상 오셨습니다. 이제 자잘한 것만 남았습니다. 주소창 옆에 주의 요함만 없애면 됩니다. HTTPS 인증서가 준비되지 않아서 그런 겁니다. 별 거 아니에요.

Netlify SSL 인증서 오류 화면의 Verify DNS configuration 버튼 — 인증서 발급 오류에서 Verify DNS configuration 실행

Verify DNS configuration을 누릅니다. DNS verification was successful로 바뀌면 Provision certificate를 누르고, 확인 창에서도 한 번 더 Provision certificate를 선택하세요. Netlify가 인증서를 발급해 연결합니다.

DNS verification was successful 안내와 Provision certificate 버튼이 표시된 화면 — DNS 확인 성공 후 TLS 인증서 발급 시작

Netlify의 Provision Let’s Encrypt certificate 확인 팝업 — Let’s Encrypt 인증서 발급 확인 창

오류 해결 방법

가끔 오류가 날 수 있습니다. 먼저 DNS 값이 맞는지 확인하고 반영 시간을 충분히 기다리세요. 그래도 연결 상태가 갱신되지 않는다면 Options에서 Remove domain을 눌러 도메인을 삭제한 뒤 다시 등록해볼 수 있습니다. 제 실습에서는 이 방법으로 해결됐습니다.

Netlify Options 메뉴의 Remove domain 위치와 도메인 재등록 안내 — 도메인 연결이 꼬였을 때 삭제 후 재등록한 실제 해결 과정

도메인을 다시 등록하고, Your project has HTTPS enabled가 보이면 끝입니다. 인증서 갱신이 필요한 상황에서 Renew certificate 버튼이 보인다면 눌러 현재 설정으로 갱신하세요.

Netlify에서 HTTPS enabled 상태와 Renew certificate 버튼을 표시한 화면 — HTTPS 활성화와 인증서 갱신 버튼 확인

캐시 여부를 확인하려면 시크릿 모드로 들어가보세요. Ctrl+Shift+N으로 시크릿 창을 열어 같은 주소에 접속하세요. 시크릿 창에서 정상이라면 기존 브라우저 캐시가 문제인 거죠.

시크릿 모드에서 사용자 도메인 웹사이트가 정상 표시된 최종 화면 — 캐시 때문에 이전 보안 상태가 보일 때 시크릿 모드로 재확인

웹사이트를 수정한 뒤 다시 배포하는 방법

웹사이트를 수정하고 싶다면 안티그래비티에서 파일을 수정한 뒤 같은 Netlify 프로젝트의 Production deploys 업로드 영역에 폴더를 다시 끌어다 놓으면 됩니다. 도메인을 새로 만들 필요는 없습니다. 배포가 끝난 뒤 Netlify 기본 주소와 사용자 도메인에서 바뀐 화면을 확인하세요.

여기까지 완료하신 분들은 정말 대단하신 겁니다. 살면서 한 번도 웹사이트를 안 만들어본 사람들이 대다수입니다. 진입장벽을 뚫고 웹사이트를 구축해본 경험은, 앞으로 AI를 다룰 때 정말 도움이 될 겁니다. 수고하셨습니다!

바이브 코딩 웹사이트 만들기: 무료 도메인으로 홈페이지 공개하기