바이브 코딩 웹사이트 만들기, 코덱스 설치부터 버셀 배포까지
바이브 코딩 웹사이트 만들기를 처음부터 끝까지 따라 하는 순서로 정리했습니다. 코덱스(Codex) 앱에 말로 지시해 회사 소개 사이트를 만들고, 코드를 깃허브(GitHub)에 올린 뒤 버셀(Vercel)로 배포해 누구나 들어올 수 있는 주소를 받고, 고친 내용을 같은 주소에 다시 반영하는 데까지 갑니다. 설치와 가입이 처음이면 이것만 1시간 남짓 걸릴 수 있습니다.

바이브 코딩 웹사이트 만들기, 전체 흐름
순서는 네 덩어리입니다.
- 준비: 코덱스 앱, VS 코드, 깃을 설치하고 깃허브에 가입합니다.
- 제작: 바탕화면 폴더를 코덱스 프로젝트로 등록하고, 지시문(프롬프트)을 넣어 사이트를 만듭니다. 결과는 내 컴퓨터 주소(localhost:3000)에서 확인합니다.
- 보관: 코드를 깃허브 비공개 저장소에 올립니다.
- 공개: 버셀이 깃허브 저장소를 가져가 배포하고
.vercel.app으로 끝나는 주소를 줍니다. 이후 고친 코드를 깃허브에 올리면 버셀이 같은 주소로 다시 배포합니다.
이 글의 목표는 외주를 맡기지 않고, 챗GPT 플러스 구독(월 29,000원 안팎)에 들어 있는 코덱스로 이런 회사 소개 사이트를 직접 만들어 보는 것입니다.
먼저 알아 둘 개념 네 가지
깃·API·포트 같은 기본 용어는 "바이브코딩 기초 지식", 서버에서 배포까지의 큰 그림은 "웹 개발 과정" 글에서 따로 다룹니다. 여기서는 이 절차에 꼭 필요한 것만 짧게 적습니다.
- 에이전트: 판단만 하는 AI 모델과 달리, 목표를 이루려고 코드를 직접 쓰고 실행하고 오류를 찾아 고치는 데까지 하는 AI입니다. 코덱스, 클로드 코드, 커서(Cursor)가 대표적인 코딩 에이전트입니다. 챗봇에 묻고 답을 사람이 붙여 넣던 예전 "AI 코딩 어시스턴트"와 다른 점이 여기입니다.
- 바이브 코딩: 코드가 안에서 어떻게 쓰였는지 몰라도 원하는 결과를 말로 지시하고, 에이전트가 쓴 코드를 받아 쓰는 방식입니다. 2025년 2월 안드레이 카파시(Andrej Karpathy)가 처음 쓴 말입니다.
- 서버와 배포: 서버는 요청을 받으면 응답을 돌려주는 컴퓨터(또는 프로그램)입니다. 배포는 내 코드를 남의 서버에 올려 다른 사람이 접속하게 하는 일입니다. 만든 직후 열리는 localhost:3000은 내 컴퓨터에서만 열리는 주소라서, 남에게 보여 주려면 배포가 필요합니다.
- 깃과 깃허브: 깃은 코드의 변경 이력을 관리하는 프로그램이고, 깃허브는 그 코드를 인터넷에 올려 두는 사이트입니다. 구글 드라이브의 코드판이라고 보면 됩니다. 버셀은 깃허브에 올린 코드를 가져가 자동으로 배포해 주는 서비스입니다. AWS처럼 서버를 통째로 빌려 직접 설정하는 방식보다 비개발자가 쓰기 훨씬 쉽습니다.
준비물과 비용
- 컴퓨터 1대(윈도우 또는 맥). 코덱스 앱은 맥과 윈도우 버전이 모두 있습니다.
- 구글 계정 하나. 코덱스(챗GPT) 로그인, 깃허브 가입, 버셀 가입에 모두 씁니다.
- 휴대폰 번호. 챗GPT 로그인 중에 입력하라고 나옵니다.
- 코덱스 요금: 무료 계정으로도 써 볼 수 있지만 고를 수 있는 모델과 사용량이 제한됩니다. 챗GPT 플러스는 월 20달러, 국내 결제로는 29,000원 안팎입니다. 2026년 9월 기준으로 코덱스에서 무료 계정은 GPT-5.6 테라를, 플러스는 GPT-5.6 솔·테라·루나를 고를 수 있었습니다. 2026년 10월 코덱스 요금 안내에는 무료 계정에 GPT-6 루나, 플러스에 GPT-6.1 솔과 GPT-6 루나가 적혀 있고, GPT-5.6 모델도 전환 기간에는 그대로 쓸 수 있습니다. 요금과 모델 구성은 자주 바뀌니 앱의 요금제 화면을 확인합니다.
- 깃허브: 비공개 저장소까지 무료로 쓸 수 있습니다.
- 버셀: 무료 Hobby 플랜으로 배포할 수 있습니다. 다만 버셀 공식 문서 기준 Hobby 플랜은 개인적·비상업적 용도로만 쓸 수 있습니다. 실제 영업에 쓰는 회사 사이트라면 Pro 플랜(개발자 1명당 월 20달러, 2026년 10월 공식 문서 기준)으로 올려야 합니다. 연습용·개인 사이트는 Hobby로 충분합니다.
따라 하기 1. 코덱스 앱 설치와 로그인
- 브라우저에서 "코덱스 다운로드"를 검색해 OpenAI의 코덱스 앱 내려받기 페이지(openai.com 또는 chatgpt.com 주소)로 들어갑니다.
- 확인: 맥OS 버전과 윈도우 버전 내려받기 버튼이 보인다.
- 내 컴퓨터에 맞는 버튼을 눌러 설치 파일을 받고, 더블클릭해 설치를 마칩니다. 인텔 맥은 인텔용 파일을 고릅니다.
- 주의: 설치된 앱 이름이 "ChatGPT"로 보일 수 있습니다. 시작 메뉴나 런치패드에서 "챗GPT" 또는 "코덱스"로 찾으면 됩니다.
- 앱을 열고 "로그인 계속하기"를 눌러 구글 계정으로 로그인합니다.
- 확인: 휴대폰 번호 입력 요청이 뜬다.
- 국가에서 대한민국(South Korea)을 고르고 휴대폰 번호를 넣은 뒤 "Continue"를 누릅니다.
- 확인: 로그인이 끝나고 앱 첫 화면이 보인다.
플러스 구독과 해지(선택)
처음에는 무료로 써 보다가 모자라면 구독해도 됩니다.
- 앱 왼쪽 위의 "플러스 이용하기" 버튼을 눌러 결제합니다.
- 확인: 프로필을 누르면 요금제가 "플러스"로 표시된다.
- 한 달만 쓰고 끝낼 생각이면, 웹 브라우저로 챗GPT 웹사이트에 들어가 프로필 > 설정 > 결제(청구) 순서로 들어갑니다.
- 확인: 현재 플랜과 다음 결제일이 보인다.
- 아래쪽 "플랜 취소"를 누르고, 이어지는 할인 제안 창에서는 거절 쪽 버튼을 누릅니다.
- 확인: 이번 결제 기간이 끝나는 날 구독이 끝난다는 안내가 나온다. 남은 기간은 계속 쓸 수 있다.
따라 하기 2. VS 코드·깃 설치와 깃허브 가입
VS 코드는 에이전트가 쓴 코드를 열어 보는 편집기입니다. 깃은 코드를 깃허브로 올리고 받는 데 필요합니다. 이 구간이 처음 하는 사람이 가장 많이 막히는 곳이니 천천히 합니다.
- code.visualstudio.com에서 내 운영체제용 VS 코드를 내려받아 설치합니다. 윈도우 설치 창은 "동의합니다"와 "다음"을 차례로 누르면 됩니다.
- 확인: VS 코드가 실행된다.
- (윈도우) 설치 중 추가 작업을 고르는 화면에서 "'Code(으)로 열기' 작업 추가" 항목에 체크해 둡니다.
- 확인: 폴더를 오른쪽 클릭했을 때 "Code(으)로 열기"가 보인다.
- (윈도우) git-scm.com에서 Git for Windows를 내려받아 설치합니다. "Next"를 계속 누르다가 기본 편집기를 고르는 화면에서만 "Use Visual Studio Code as Git's default editor"를 고릅니다. 나머지 화면은 기본값 그대로 "Next"를 누릅니다.
- 확인: 설치가 끝난다.
- (맥) 코덱스 입력창에 아래 문장을 입력하고 엔터를 누릅니다. 맥은 깃 설치를 에이전트에게 맡기는 편이 간단합니다.
- 확인: 코덱스가 컴퓨터에 맞게 설치를 진행하고 끝났다고 알려 준다. 중간에 맥의 "개발자 도구 설치" 창이 뜨면 "설치"를 누른다.
깃 설치해 주세요.
- github.com에 들어가 오른쪽 위 "Sign up"을 누르고 구글 계정으로 가입합니다.
- 확인: 깃허브에 로그인된 첫 화면이 보인다.
따라 하기 3. 프로젝트 폴더 등록과 권한·모델 설정
- 바탕화면에 빈 폴더를 하나 만들고 이름을
website처럼 정합니다. 나중에 저장소 이름과 주소에도 쓰이니 영어 소문자가 편합니다. - 코덱스 앱 왼쪽 위가 "코덱스" 화면인지 확인합니다. "챗GPT" 쪽은 웹과 같은 대화 화면이고, 코딩 작업은 "코덱스" 쪽에서 합니다.
- 왼쪽 "프로젝트" 칸에 마우스를 올려 "+" 버튼을 누르고 "로컬"을 고른 뒤 "다음"을 누릅니다.
- 확인: 작업 폴더를 고르는 화면이 나온다.
- "소스 폴더" 칸을 눌러 방금 만든 폴더를 고르고 "열기", "프로젝트 만들기"를 차례로 누릅니다.
- 확인: 폴더 이름의 프로젝트가 생기고 새 채팅 입력칸이 보인다.
- 입력칸 근처의 권한 버튼을 눌러 권한 수준을 고릅니다. 선택지는 "승인 요청", "나 대신 승인", "전체 권한"입니다(앱 버전과 설정에 따라 두 개만 보이기도 합니다).
- 주의: "나 대신 승인"은 위험해 보이는 작업만 묻고, "전체 권한"은 묻지 않고 인터넷과 내 컴퓨터의 모든 파일에 접근합니다. 민감한 정보나 비밀 키를 다루지 않는 간단한 사이트라면 큰 위험은 적지만, 처음이라면 "승인 요청"으로 두고 무엇을 하려는지 보면서 승인하는 쪽이 안전합니다. 전체 권한을 고르면 경고 안내가 뜨고, 확인을 눌러야 넘어갑니다.
- 오른쪽 모델 선택 버튼에서 모델을 고릅니다. 사이트를 처음 만드는 작업은 고를 수 있는 가장 좋은 모델(플러스라면 GPT-5.6 솔 이상)을 씁니다.
- 추론 수준(답하기 전에 얼마나 오래 생각할지 정하는 설정)은 "엑스트라 하이"로 둡니다. 맨 위 "울트라"는 사용량을 더 많이 씁니다.
- 스피드 모드(1.5배 속도)는 켜지 않습니다. 답은 빨라지지만 사용량이 그만큼 빨리 줄어듭니다.
- 확인: 모델, 추론 수준, 권한이 원하는 대로 표시되고 스피드 모드가 꺼져 있다.
따라 하기 4. 지시문으로 웹사이트 만들기
지시문에 담을 것은 다섯 가지입니다. 회사 이름, 사이트의 목적, 참고할 디자인 사이트 주소, 상단 메뉴와 버튼별 기능, 그리고 마지막 두 줄(Next.js로 만들 것, 다 만들면 브라우저에서 열어 볼 수 있게 실행할 것)입니다. Next.js(넥스트JS)는 웹사이트를 만드는 도구 이름인데, 버셀이 바로 알아보고 배포 설정을 자동으로 잡아 줍니다. 그래서 마지막 두 줄은 내용을 바꾸지 않습니다. 아래는 그대로 고쳐 쓰면 되는 예시입니다.
"나도 AI"라는 회사의 홈페이지를 만들어 줘.
- 회사 소개: 기업과 기관을 대상으로 바이브 코딩을 가르치는 AI 교육 회사
- 디자인 참고 사이트: (참고하고 싶은 사이트 주소)
- 스타일: 밝고 깔끔한 화면, 모바일에서도 잘 보이게
- 상단 메뉴: 회사 소개, 교육 과정, 수강 후기, 교육 문의
- 버튼 기능: "교육 문의하기" 버튼을 누르면 이름·연락처·문의 내용을 받는 양식이 열리고, 보내면 (내 이메일 주소)로 전달되게 해 줘
- 버셀로 배포할 수 있게 Next.js를 사용해 줘.
- 작성이 끝나면 크롬에서 바로 열어 볼 수 있게 코드를 실행해 줘.
- 회사 이름, 소개 문장, 참고 사이트 주소, 메뉴와 버튼 기능을 내 것으로 고칩니다. 안경점이라면 잘 알려진 안경 체인 사이트를, 교육 회사라면 교육 회사 사이트를 참고 주소로 주면 됩니다.
- 확인: 마지막 두 줄은 그대로 남아 있다.
- 지시문을 코덱스 입력칸에 붙여 넣고(윈도우 Ctrl+V, 맥 Cmd+V) 엔터를 누릅니다.
- 확인: 에이전트가 작업을 시작한다. "전체 엑세스가 켜져 있다"는 안내가 뜨면 내용을 읽고 닫는다.
- 작업이 끝날 때까지 기다립니다. 한 사례에서는 16분 7초가 걸렸고, 같은 지시문이라도 결과와 시간은 사람마다 다릅니다.
- 확인: 작업 완료 메시지와 함께
localhost:3000형태의 주소가 나온다.
- 확인: 작업 완료 메시지와 함께
- 그 주소를 복사해 크롬 주소창에 붙여 넣고 엔터를 누릅니다.
- 확인: 만든 웹사이트가 열린다. 메뉴와 "교육 문의하기" 같은 버튼을 눌러 기능이 의도대로 움직이는지 본다. 이메일 전송처럼 외부 서비스가 필요한 기능은 코덱스가 추가 설정(메일 발송 서비스 가입 등)을 요청할 수 있다.
말로 고치기
- 마음에 안 드는 문구를 사이트에서 복사해 코덱스 입력칸에 붙여 넣고, 이어서 "이 문구 지워줘"를 입력한 뒤 엔터를 누릅니다.
- 확인: 재생 버튼이 정지 버튼으로 바뀌며 작업하고, 30초 남짓 뒤 끝났다고 알려 준다.
- 브라우저의 사이트 화면을 새로고침합니다.
- 확인: 그 문구가 사라져 있다. 색 바꾸기, 마우스를 올렸을 때 모양 바꾸기 같은 요청도 같은 방식으로 한다.
남은 사용량 보기
- 코덱스 앱 왼쪽 아래 내 계정을 누르고 "남은 사용량"을 엽니다.
- 확인: 5시간 단위와 일주일 단위의 남은 사용량이 % 로 나온다. 예를 들어 사이트 하나를 만든 뒤 일주일 80%, 5시간 72%가 남는 식이다.
- 주의: 사용량을 다 쓰면 다시 채워질 때까지 쓸 수 없습니다. 문구 삭제 같은 간단한 수정은 GPT-5.6 테라 같은 가벼운 모델과 "미디엄" 이하 추론으로 해도 충분합니다.
따라 하기 5. 코드를 깃허브에 올리기
에이전트가 쓴 코드는 13단계에서 만든 바탕화면 폴더에 그대로 저장돼 있습니다. 파일을 더블클릭하면 VS 코드로 열어 볼 수 있습니다.
- 깃허브에 로그인한 상태에서 왼쪽의 "New" 버튼을 누릅니다.
- 확인: 새 저장소(Repository) 만들기 화면이 열린다.
- 저장소 이름에
website처럼 입력하고, 공개 범위를 "Private"(비공개)로 바꾼 뒤 "Create repository"를 누릅니다. - 확인: 빈 저장소 화면과 저장소 주소가 보인다.
- 브라우저 주소창의 저장소 주소를 복사합니다.
- 코덱스에서 새 채팅을 열고 주소를 붙여 넣은 다음, 이어서 아래 문장을 입력합니다.
- 확인: 입력칸에 저장소 주소와 문장이 함께 있다.
지금까지 작성한 코드를 여기에 올려 줘
- 모델은 GPT-5.6 테라, 추론은 "미디엄"으로 낮추고 엔터를 누릅니다. 올리기 같은 단순한 일에 좋은 모델을 쓰면 사용량만 줄어듭니다.
- 확인: 에이전트가 작업을 시작한다.
- 처음 연결할 때는 깃허브 로그인 창이 뜹니다. 가입에 쓴 구글 계정으로 깃허브에 로그인하고 권한을 허용합니다.
- 확인: 로그인 뒤 업로드가 이어진다. 한 번 연결하면 다음부터는 묻지 않는다.
- 막히면: 코덱스에게 "깃허브 연결하려는데 로그인이 안 돼. 어떤 버튼을 눌러야 해?"처럼 그대로 묻습니다.
- "저장소에 업로드했습니다"라는 답이 나오면 깃허브 저장소 화면을 새로고침합니다. 한 사례에서는 1분 24초가 걸렸습니다.
- 확인: 바탕화면 폴더에 있던 파일들이 저장소에 올라와 있다.
깃허브에서 코드 되살리기(선택)
깃허브에 올려 두면 내 컴퓨터의 폴더가 사라져도 코드를 다시 받아 올 수 있습니다. 확인하고 싶을 때만 해 봅니다. 34단계에서 업로드를 눈으로 확인한 뒤에만 합니다.
- 바탕화면 폴더를 휴지통으로 옮기고, 영어 이름의 빈 폴더를 새로 만듭니다.
- 코덱스 프로젝트의 "편집"에서 예전 폴더를 빼고 새 폴더를 등록합니다.
- 새 채팅에 저장소 주소를 붙여 넣고 "여기에 있는 코드 다시 가져와 주세요"라고 입력합니다. 모델은 GPT-5.6 테라, 추론은 "미디엄"이면 됩니다.
- 확인: 한 사례에서는 22초 만에 새 폴더에 코드가 다시 들어왔다.
따라 하기 6. 버셀로 배포하기
- vercel.com에 들어가 오른쪽 위 "Sign Up"을 누르고 구글 계정으로 가입합니다.
- 확인: 계정 종류를 고르는 화면이 나온다.
- 계정 종류에서 무료인 "Hobby"를 고르고, 이름 칸에 영어로 간단한 이름을 넣은 뒤 "Continue"를 누릅니다. 한글이 입력되지 않으면 한/영 키를 눌러 영어로 씁니다.
- 주의: 앞의 비용 항목에 적었듯이 Hobby는 비상업적 용도 전용입니다.
- 저장소 가져오기 화면에서 "GitHub" 버튼을 누르고, 깃허브 인증 창에서 "Authorize"를 누릅니다.
- 확인: 버튼이 "Install"로 바뀐다.
- "Install"을 누릅니다. 저장소 범위는 기본값 그대로 둬도 되고, "Only select repositories"를 골라 이번 저장소만 허용해도 됩니다.
- 확인: 깃허브 저장소 목록이 버셀 화면에 나온다. 2단계 인증 설정을 권하는 창이 뜨면 지금은 건너뛰어도 된다.
- 목록에서
website저장소 옆의 "Import"를 누릅니다.- 확인: Framework Preset(프레임워크 설정)이 Next.js로 자동으로 잡혀 있다.
- "Deploy"를 누르고 끝날 때까지 기다립니다. 보통 수십 초면 끝납니다.
- 확인: "Congratulations" 화면과 사이트 미리보기가 나온다.
- 미리보기를 누릅니다.
- 확인: 배포된 사이트가 열리고, 주소가
.vercel.app으로 끝난다.
- 확인: 배포된 사이트가 열리고, 주소가
- 주소를 복사해 카카오톡 같은 메신저로 다른 사람에게 보냅니다.
- 확인: 받은 사람의 휴대폰이나 컴퓨터에서도 사이트가 열린다.
따라 하기 7. 고치고 다시 배포하기
- 배포된 사이트에서 지우고 싶은 문구를 복사해 코덱스에 붙여 넣고 "이 문구를 지워 주세요"라고 입력합니다. 간단한 수정이니 GPT-5.6 테라면 됩니다.
- 확인: 수정을 마쳤고 어떤 파일을 고쳤는지 답이 나온다.
- 이어서 깃허브 저장소 주소를 붙여 넣고 아래 문장을 입력한 뒤 엔터를 누릅니다.
- 확인: 변경된 코드를 올렸다는 답이 나온다. 바뀐 코드를 기록하고 깃허브로 올리는 이 동작을 "커밋 및 푸시"라고 부른다.
여기에 변경된 코드 올려 주세요
- 깃허브 저장소 화면을 새로고침합니다.
- 확인: 방금 바뀐 파일에 새 기록이 찍혀 있다.
- 버셀에서 프로젝트를 열고 "Deployments"(배포 기록)로 들어갑니다.
- 확인: 몇십 초 전에 새 배포가 자동으로 시작된 기록이 보인다.
- 새 배포가 끝나면 사이트 주소를 다시 엽니다.
- 확인: 지운 문구가 사라져 있고, 주소는 처음과 같다.
주소 이름 바꾸기와 내 도메인 연결(선택)
처음 받은 .vercel.app 주소는 저장소 이름을 따라 자동으로 붙습니다. 회사 이름이 들어간 주소로 바꾸고 싶다면 이렇게 합니다.
- 버셀 프로젝트에서 Settings > Domains로 들어갑니다.
- 확인: 지금 쓰는
.vercel.app주소가 목록에 보인다.
- 확인: 지금 쓰는
- 그 주소의 "Edit"을 눌러 앞부분을 원하는 이름으로 바꾸고 저장합니다. 다른 사람이 이미 쓰는 이름은 고를 수 없습니다.
- 확인: 새 주소로 사이트가 열린다.
- 따로 산 도메인(예:
naedo-ai.com)을 쓰려면 같은 화면의 "Add Domain"에 도메인을 넣습니다.- 확인: 버셀이 도메인 업체에 넣어야 할 DNS 값(레코드 종류와 값)을 보여 준다.
- 도메인을 산 업체의 DNS 관리 화면에 버셀이 보여 준 값을 그대로 넣습니다.
- 확인: 몇 분에서 길게는 하루쯤 뒤 버셀 화면의 도메인 옆에 "Valid Configuration"이 뜨고, 내 도메인으로 사이트가 열린다.
다 하고 나서 점검할 것
- 코덱스(챗GPT 앱)가 설치되고 로그인됐다.
- VS 코드와 깃이 설치됐고 깃허브에 가입했다.
- 바탕화면 폴더가 코덱스 프로젝트로 등록됐다.
- 사이트가 만들어져 localhost 주소로 열린다.
- 깃허브 비공개 저장소에 코드가 올라가 있다.
- 버셀에서 저장소를 가져와 배포했고
.vercel.app주소로 열린다. - 코드를 고쳐 깃허브에 올리면 같은 주소에 바뀐 내용이 반영된다.
바이브 코딩 웹사이트가 막힐 때
버셀 팀 이름이 입력되지 않는다
한글 입력이 막혀 있는 칸입니다. 한/영 키를 눌러 영어로 씁니다.
코덱스에서 깃허브 로그인이 안 된다
처음 연결할 때는 시간이 걸리고 로그인 창이 따로 뜹니다. 가입에 쓴 구글 계정으로 깃허브에 로그인하고, 그래도 막히면 코덱스에게 지금 보이는 화면을 그대로 설명하고 물어봅니다.
사용량이 너무 빨리 줄어든다
스피드 모드나 높은 추론 수준을 쓰면 더 빨리 줄어듭니다. 처음 만들 때만 좋은 모델과 높은 추론을 쓰고, 문구 수정이나 업로드는 가벼운 모델과 "미디엄"으로 합니다.
다른 사람이 내 사이트에 못 들어온다
localhost 주소를 보냈을 가능성이 큽니다. 그 주소는 내 컴퓨터에서만 열립니다. 버셀 배포 뒤 받은 .vercel.app 주소를 보냅니다.
버셀 배포가 실패한다
버셀 프로젝트의 실패한 배포를 열면 빌드 기록(Build Logs)이 나옵니다. 빨간 오류 줄을 복사해 코덱스에 붙여 넣고 "버셀 배포가 이 오류로 실패했어. 고쳐서 다시 올려 줘"라고 하면 됩니다.
프로젝트를 더 늘리고 싶다면
같은 순서로 두 번째, 세 번째 사이트나 간단한 웹 게임도 만들 수 있습니다. 새 폴더를 코덱스 프로젝트로 등록해 만들고, 깃허브에 새 저장소로 올린 뒤, 버셀 오른쪽 위 "Add New" > "Project"에서 그 저장소를 "Import"해 "Deploy"하면 됩니다. 깃허브에 저장소가 여러 개면 버셀 목록에 자동으로 다 보입니다.
권한은 사이트가 커질수록 보수적으로 바꾸는 편이 좋습니다. 결제나 로그인, 비밀 키를 다루기 시작하면 "승인 요청"으로 돌려 두고 에이전트가 무엇을 하려는지 확인하며 진행합니다.
자주 묻는 질문
바이브 코딩으로 웹사이트를 만들려면 코딩을 알아야 하나요?
몰라도 따라 할 수 있습니다. 코드는 코덱스가 쓰고, 사람은 지시문을 쓰고 결과를 확인하고 버튼을 누르는 일을 합니다. 다만 VS 코드·깃 설치와 깃허브 연결은 처음에 한 번 손이 가니 그 구간은 천천히 합니다.
버셀 무료 플랜으로 회사 홈페이지를 운영해도 되나요?
공식 문서 기준으로 무료 Hobby 플랜은 개인적·비상업적 용도 전용입니다. 영업에 쓰는 회사 사이트라면 Pro 플랜(개발자 1명당 월 20달러, 2026년 10월 기준)으로 올리거나 다른 호스팅을 씁니다. 요금은 바뀔 수 있으니 버셀 요금 안내를 확인합니다.
localhost:3000 주소를 보내면 다른 사람도 볼 수 있나요?
볼 수 없습니다. localhost는 내 컴퓨터 자신을 가리키는 주소라 다른 기기에서는 열리지 않습니다. 깃허브에 올리고 버셀로 배포해 받은 .vercel.app 주소를 보내야 합니다.
코덱스 무료 계정으로도 끝까지 할 수 있나요?
가능은 하지만 고를 수 있는 모델과 사용량이 제한돼 중간에 멈출 수 있습니다. 무료로 시작해 모자라면 플러스를 구독하고, 필요 없어지면 챗GPT 웹의 설정 > 결제에서 해지하면 남은 결제 기간까지 쓸 수 있습니다.
사이트를 고치면 다시 배포해야 하나요?
버셀이 깃허브 저장소를 지켜보고 있어서, 고친 코드를 깃허브에 올리기만 하면 자동으로 다시 배포됩니다. 코덱스에 저장소 주소와 함께 "여기에 변경된 코드 올려 주세요"라고 하면 되고, 주소는 바뀌지 않습니다.
이 글의 본문은 아래 원본 유튜브 영상의 내용을 바탕으로 쓸모연구소가 다시 정리해 쓴 것입니다. 세부 내용과 최신 정보는 원본 영상과 공식 안내에서 확인해 주세요.
원본 영상 보러가기 ↗