홈페이지 만들기는 이제 코딩을 몰라도 할 수 있습니다. 방문자가 내 홈페이지를 보고 무엇을 하길 바라는지 정하고, 필요한 페이지와 문구를 준비한 다음, AI에게 한국어로 설명하면 실제로 동작하는 사이트가 만들어집니다. 미리보기에서 확인하고 고친 뒤 버튼 하나로 공개하면 됩니다. 이 글에서는 동네 필라테스 스튜디오 홈페이지를 VibeDream으로 만드는 과정을 예로 들어 설명합니다.
만들기 전에 정할 것
어떤 도구를 쓰든 홈페이지는 결국 글과 사진입니다. 편집기를 열기 전에 "방문자가 이 사이트를 보고 무엇을 해야 하는가"라는 질문에 먼저 답해 두세요. 필라테스 스튜디오라면 체험 수업 신청이 답입니다. 모든 페이지가 그 행동으로 이어지게 구성합니다.
- 첫 화면: 무엇을 하는 곳인지와 위치를 한 문장으로, 대표 사진 한 장, 핵심 버튼(예약, 전화, 문의)
- 수업과 가격: 방문자가 가장 많이 찾는 페이지입니다. 실제 목록과 가격을 그대로 적습니다.
- 소개: 운영자와 강사를 짧게 소개합니다. 실제 이름과 얼굴이 신뢰를 줍니다.
- 오시는 길과 문의: 주소, 지도 링크, 운영 시간, 전화번호, 간단한 문의 폼
- 개인정보 처리방침: 이름이나 연락처를 받는다면 꼭 필요합니다.
문구는 메모장에 미리 써 두는 편이 훨씬 빠릅니다. 사진도 5장에서 10장 정도 함께 모아 두세요. 낮에 휴대폰으로 찍은 사진이면 충분합니다.
AI로 홈페이지 만드는 순서
VibeDream에서 New Project를 누르고 Direct Prompt를 고른 뒤 설명을 붙여 넣거나, 마이크로 말하거나, 마음에 드는 사이트의 스크린샷을 첨부합니다. 화면은 현재 영어지만 설명은 한국어로 써도 됩니다. 처음부터 쓰기 어렵다면 Aesthetic Landing Page 템플릿에서 시작해 채팅으로 바꿔도 됩니다.
망원동 필라테스 스튜디오 "숨결 필라테스" 홈페이지를 만들어 주세요.
페이지: 첫 화면, 수업 안내(그룹 수업, 1:1 개인 레슨, 기구 필라테스와 가격), 강사 소개, 오시는 길, 체험 수업 신청 폼(이름, 연락처, 희망 날짜, 남기고 싶은 말).
운영 시간: 평일 7시부터 22시, 토요일 9시부터 15시, 일요일 휴무.
분위기: 밝고 차분하게, 흰 배경에 연한 세이지 그린 포인트, 큰 사진, 큰 글씨.
휴대폰에서 먼저 보기 좋게 만들고, 모든 문구는 한국어로 해 주세요.채팅 옆에 미리보기가 나타나고 AI가 작업하는 동안 화면이 채워집니다. 미리보기는 데스크톱 화면과 휴대폰 화면을 바꿔 가며 볼 수 있습니다. 이후에는 말로 고쳐 나갑니다.
- "첫 화면 위쪽에 체험 수업 신청 버튼을 크게 넣어 주세요."
- "운영 시간을 오시는 길 페이지 맨 위로 옮겨 주세요."
- "수업 안내에서 가격을 수업 이름 바로 아래에 굵게 보여 주세요."
- "체험 신청이 들어오면 저장하고, 비밀번호로 보호된 관리자 페이지에서 목록을 볼 수 있게 해 주세요."
결과물은 React 프론트엔드와 FastAPI 백엔드로 된 실제 코드입니다. Code 탭에서 모든 파일을 볼 수 있고, ZIP으로 내려받거나 GitHub에 동기화할 수 있습니다. 홈페이지를 만드는 여러 방법을 비교한 영어 글 How to build a website도 함께 보면 좋습니다.
공개하고 내 도메인 연결하기
다 되었으면 Put it online을 누르고 이름을 정합니다. 보통 1~3분 안에 soomgyeol.vibedreams.ai 같은 주소로 HTTPS가 적용되어 공개되고, 공개할 때마다 5크레딧이 듭니다. 공개된 사이트는 Update it을 누르기 전까지 바뀌지 않으므로, 미리보기에서 계속 실험해도 방문자에게는 영향이 없습니다.
내 도메인을 쓰려면 Put it online 창의 Your own domain 탭에 www.내도메인.com 같은 주소를 넣고, 도메인을 산 곳에서 TXT 레코드와 CNAME 레코드를 추가합니다. HTTPS 인증서는 자동으로 발급됩니다. 다만 현재는 www가 없는 루트 도메인을 바로 연결할 수 없으므로, www 주소를 연결하고 루트 도메인은 도메인 업체의 포워딩 설정으로 www로 넘기세요. 자세한 단계는 영어 배포 가이드와 What is a custom domain에 있습니다.
비용은 얼마나 드나요
VibeDream은 크레딧이 포함된 월 요금제로 이용합니다. All Access Mini는 월 49달러에 60크레딧, 활성 프로젝트 최대 3개입니다. All Access는 월 97달러에 150크레딧, 활성 프로젝트 최대 5개입니다. 크레딧은 메시지마다 쓰이고 큰 수정일수록 더 쓰입니다. 공개와 업데이트는 각각 5크레딧이며 호스팅은 요금제에 포함됩니다. 도메인을 따로 산다면 도메인 업체에 내는 연간 등록비가 추가됩니다. 현재 요금은 요금 페이지에서 확인하세요.
공개 전 점검 목록
- 내 휴대폰과 컴퓨터에서 모든 페이지를 직접 열어 봅니다.
- 문의 폼으로 테스트 메시지를 보내고 제대로 저장되는지 확인합니다.
- 운영 시간, 전화번호, 주소가 네이버 플레이스나 지도 앱에 등록된 정보와 똑같은지 확인합니다.
- 페이지마다 알기 쉬운 제목과 한 줄 설명을 넣어 검색 결과에서 잘 보이게 합니다.
- 사진 용량을 줄입니다. 첫 화면이 느리면 휴대폰 방문자가 금방 떠납니다.
- 사이트를 처음 보는 두 사람에게 가격과 전화번호를 찾아보라고 하고, 어디서 막히는지 지켜봅니다.
홈페이지 말고 예약이나 기록처럼 기능이 있는 앱이 필요하다면, 대화로 앱을 만드는 방식인 바이브 코딩부터 읽어 보세요.