바이브 코딩
바이브 코딩은 만들고 싶은 앱이나 웹사이트를 말로 설명하면 AI 에이전트가 직접 코드를 쓰고 실행해 완성해 주는 기능입니다. 만드는 동안 결과가 화면 오른쪽 미리보기에서 바로 돌아가고, 마음에 들면 승인 한 번으로
이름.baze.cloud 주소에 게시되어 링크만으로 누구나 열 수 있습니다. 코드를 몰라도 가게 주문 페이지, 팀 예약표, 행사 신청서처럼 실제로 쓰는 앱을 대화만으로 만들고, 쓰다가 바꾸고 싶은 점도 대화로 고칩니다.바이브 코딩으로 회의실 예약 앱 만들기
개요
에이전트는 격리된 작업 공간에서 파일을 만들고, 명령을 실행하고, 미리보기를 직접 열어 점검합니다. 사용자는 무엇을 원하는지만 말하고, 중요한 순간(비밀 값 입력, 외부 서비스 연결, 게시)에만 카드로 확인합니다.
| 특징 | 설명 |
|---|---|
| 말로 만들기 | 화면 구성, 기능, 문구를 평소 말투로 적으면 에이전트가 계획을 세우고 코드를 씁니다. 고칠 때도 "제목을 바꿔 줘"처럼 말하면 됩니다. |
| 실시간 미리보기 | 만든 앱이 작업 화면에서 바로 실행됩니다. 데스크톱·태블릿·모바일 화면 크기로 바꿔 볼 수 있습니다. |
| 스스로 점검 | 에이전트가 앱을 실행해 동작을 확인하고, 미리보기에서 난 오류는 모아서 보여 줍니다. 오류는 에이전트에게 바로 고치게 할 수 있습니다. |
| 승인 후 게시 | 게시 전에 주소와 공개 범위가 적힌 카드로 확인을 받습니다. 승인하면 이름.baze.cloud에서 앱이 열립니다. |
| 앱 데이터 | 주문, 신청, 설문 응답처럼 앱이 저장하는 정보가 프로젝트의 데이터베이스에 표로 쌓입니다. |
| 시작점 | 빈 입력창, 분야별 템플릿, 내 GitHub 저장소 중 어디서든 시작할 수 있습니다. |
시작하기
바이브 코딩은 왼쪽 메뉴의 바이브 코딩에 있습니다. 첫 화면 입력창에 적은 내용이 새 프로젝트의 첫 요청이 되고, 보내는 즉시 에이전트가 작업을 시작합니다.
입력창 아래에서 에이전트가 쓸 모델과 추론 강도를 고릅니다. 첫 화면에는 고른 모델로 앱 하나를 완성하는 데 보통 드는 크레딧과 수정 1회에 드는 크레딧이 함께 표시됩니다.
자연어 요청 예시
| 시나리오 | 요청 예시 |
|---|---|
| 가게 주문 | "우리 카페 픽업 주문 페이지를 만들어 줘. 손님이 메뉴와 옵션을 골라 픽업 시각을 정하면, 나는 들어온 주문 상태와 품절 메뉴를 관리하고 싶어. 결제는 매장에서 해." |
| 팀 업무 | "우리 팀 회의실 예약 페이지를 만들어 줘. 시간표 형태로 보여 주고 겹치는 예약은 막아 줘." |
| 행사 신청 | "다음 달 동아리 발표회 신청 페이지를 만들어 줘. 이름과 참석 여부를 받고, 신청 명단은 나만 볼 수 있게 해 줘." |
| 데이터 도구 | "엑셀을 올리면 월별 매출을 차트로 보여 주는 도구를 만들어 줘." |
| 포트폴리오 | "사진가 포트폴리오 사이트를 만들어 줘. 첫 화면은 큰 사진이 넘어가는 슬라이드로." |
활용하기
템플릿에서 시작하기
템플릿 둘러보기에는 업무, 홈페이지, 비즈니스, 포트폴리오, 가게·주문, 블로그, 학생, 행사, 개인, 여행 같은 분야별 템플릿이 있습니다. 썸네일은 실제로 완성된 앱 화면이고, 미리보기에서 템플릿 앱을 큰 화면으로 확인할 수 있습니다.
템플릿마다 그 앱에 맞는 첫 요청이 들어 있습니다. 요청은 그대로 보내도 되고, 우리 가게 이름이나 필요한 기능을 덧붙여 고쳐 보내도 됩니다.
예시: 「카페 픽업 주문」 템플릿의 요청을 그대로 보냄 → 메뉴 옵션과 픽업 시각을 고르는 손님 화면, 주문 상태와 품절을 관리하는 사장님 화면까지 갖춘 앱이 만들어집니다.
GitHub 저장소에서 시작하기
GitHub 계정을 연결해 두면 내 저장소와 브랜치를 프로젝트로 가져올 수 있습니다. 가져온 뒤 할 일을 적지 않으면 에이전트가 저장소를 살펴보고 실행해 미리보기로 보여 줍니다. 이미 만들어 둔 사이트를 고치거나 기능을 덧붙일 때 씁니다.
대화로 만들고 고치기
작업 화면 왼쪽은 에이전트와 나누는 대화, 오른쪽은 미리보기입니다. 에이전트가 파일을 읽고 코드를 쓰고 명령을 실행한 과정은 「코드 5회 실행, 파일 3개 읽음」처럼 한 줄로 묶여 보이고, 작업이 끝나면 무엇을 바꿨는지 정리해 알려 줍니다. 다음 요청은 지금까지 만든 앱을 이어서 고칩니다.
예시: "첫 화면 제목을 '성수에서 미리 주문, 줄 없이 픽업'으로 바꾸고, 커피 메뉴에 시즌 음료 '유자 캐모마일 티'를 추가해 줘." → 바뀐 제목과 새 메뉴가 미리보기에 바로 반영되고, 에이전트가 가격과 옵션을 어떻게 정했는지 알려 줍니다.
- 요소 선택: 미리보기 화면의 버튼이나 이미지를 대화에 붙여 "이 버튼 색을 바꿔 줘"처럼 가리켜 요청할 수 있습니다.
- 파일 첨부: 디자인 시안, 로고, 엑셀 같은 파일을 한 메시지에 10개까지(파일당 20MB) 붙일 수 있습니다. 이미지는 에이전트가 직접 보고 참고합니다.
- 코드 탭: 프로젝트 파일을 열어 보고 직접 고칠 수 있습니다(1MB 이하 파일). 저장 기록에는 작업이 끝날 때와 직접 저장할 때마다 코드가 저장되어, 원하는 시점으로 되돌리거나 그 시점의 코드를 내려받을 수 있습니다. 되돌려도 대화와 게시된 앱은 그대로입니다. 한 번에 저장할 수 있는 크기는 200MB까지입니다. 프로젝트가 이보다 크면 설치 파일(.apk, .aab, .exe, .msi, .dmg)과 50MB가 넘는 파일을 빼고 저장하며, 이 파일들은 코드 탭에서 계속 내려받을 수 있습니다. 그래도 한도를 넘으면 저장되지 않고, 크기를 많이 차지하는 항목이 함께 안내됩니다.
- 대화 요약: 대화가 길어지면
/compact만 따로 보내 앞 대화를 요약할 수 있습니다.
에이전트가 확인을 구하는 카드
에이전트는 혼자 정하면 안 되는 일 앞에서 멈추고 대화에 카드를 띄웁니다. 카드에 답해야 작업이 이어집니다.
| 카드 | 나오는 때 | 고를 수 있는 것 |
|---|---|---|
| 질문 | 요구 사항이 분명하지 않을 때 | 답하거나 건너뜁니다. 건너뛰면 에이전트가 무난한 쪽으로 정하고 무엇으로 정했는지 알려 줍니다 |
| 계획 | 큰 작업을 시작하기 전 | 승인하고 만들기 또는 수정 요청 |
| 확인이 필요한 작업 | 명령 실행, 파일 수정, 외부 주소 열기, 프로젝트 밖 폴더 사용처럼 확인이 필요한 작업 | 거절, 한 번 허용, 이 프로젝트에서 항상 허용 |
| 키 입력 | 앱이 관리자 비밀번호나 외부 서비스 API 키 같은 값을 필요로 할 때 | 직접 입력, 자동으로 만들기, 입력 안 함 |
| 앱에서 AI 쓰기 | 앱에 글쓰기·요약, 이미지, 영상, 음성 같은 AI 기능을 넣을 때 | 앱 전용 키 만들기 또는 지금은 안 함 |
| 서비스 연결 | GitHub, Supabase, Cloudflare 계정이 필요할 때 | 새 창에서 로그인해 연결하거나 연결하지 않음 |
| 게시 요청 | 앱을 게시할 때 | 승인하고 게시 또는 거절 |
키 입력 카드에 넣은 값은 암호화해 저장하고 대화에는 나오지 않습니다. 저장한 값은 설정의 환경 변수에서 바꾸거나 지울 수 있습니다.
앱에서 AI 쓰기로 만든 키는 내 이름으로 발급됩니다. 미리보기나 게시된 앱에서 AI 기능이 쓰일 때마다 내 크레딧이 차감되고, 키는 설정에서 언제든 폐기할 수 있습니다. 조직에서 게이트웨이 API를 꺼 두었다면 키를 만들 수 없습니다.
미리보기로 확인하고 문제 고치기
미리보기는 데스크톱·태블릿·모바일 화면 크기로 바꿔 보거나, 페이지 경로를 골라 이동하거나, 새 탭에서 열 수 있습니다. 미리보기에서 요청 실패, 실행 오류, 빈 화면 같은 문제가 생기면 위쪽에 문제 수가 표시되고, 「미리보기 문제 N건」 목록에 같은 문제가 몇 번 났는지와 원문이 모입니다. 문제마다 또는 모두 에이전트로 고치기로 한꺼번에 에이전트에게 맡길 수 있습니다.
설정의 데이터베이스에는 앱이 저장한 정보가 표로 보입니다. 미리보기에서 써 본 테스트 데이터와 게시된 앱에 실제로 쌓인 실제 데이터를 나눠 보여 주며, 실제 데이터는 읽기만 할 수 있고 CSV로 내려받을 수 있습니다.
게시하기
게시는 에이전트에게 맡기거나 직접 할 수 있습니다. 에이전트에게 맡기면 앱 주소를 정하고 게시 전 점검을 마친 뒤 대화에 게시 요청 카드를 띄웁니다. 카드에는 앱 설명, 주소, 공개 범위, 앱이 쓰는 비밀 값 수가 적혀 있고, 승인하면 앱이 올라갑니다. 직접 게시할 때는 앱 주소와 공개 범위를 정합니다.
예시: "이 앱을 게시해 줘." → 에이전트가 모바일 화면과 관리자 보호를 점검한 뒤 게시 요청 카드를 띄우고, 승인하면
morningside-seongsu-pickup.baze.cloud 같은 주소에서 앱이 열립니다.| 항목 | 내용 |
|---|---|
| 앱 주소 | 영문주소.baze.cloud. 영문 소문자, 숫자, 하이픈으로 3~40자이며 이미 쓰는 이름은 쓸 수 없습니다. 게시한 뒤에도 바꿀 수 있습니다 |
| 공개 범위 | 공개: 링크가 있는 누구나 열 수 있습니다. 조직 구성원만: 조직 계정으로 로그인한 구성원만 열 수 있습니다 |
| 걸리는 시간 | 보통 30초 안팎이며, 창을 닫아도 게시는 계속됩니다 |
| 업데이트 | 게시한 뒤 고친 내용은 업데이트로 반영합니다. 업데이트하는 동안에는 지금 버전이 계속 열립니다 |
공개로 게시한 앱은 링크만 있으면 로그인 없이 누구나 열 수 있습니다. 이름이나 연락처처럼 개인정보를 받는 앱은 공개 범위를 조직 구성원만으로 두거나, 관리 화면에 비밀번호를 거는 등 보호 장치를 에이전트에게 요청해 주세요.
게시한 앱 관리하기
설정의 게시에서 운영 중인 앱의 상태, 주소, 공개 범위, 게시된 버전, 이번 달 호스팅 사용량을 한눈에 봅니다.
- 게시된 버전: 게시할 때마다 버전이 쌓이고, 이전 버전을 다시 게시해 되돌릴 수 있습니다.
- 게시 내리기: 앱이 내려가 주소로 열 수 없게 됩니다. 버전, 주소, 데이터는 그대로 남아 언제든 다시 게시할 수 있습니다.
- 내 도메인:
app.example.com처럼 갖고 있는 도메인의 하위 주소로 앱을 열 수 있습니다. 넣어야 할 DNS 레코드와 도메인 관리 업체별 입력 방법이 함께 표시되며, 연결된 달마다 100크레딧이 듭니다. - 환경 변수: 앱이 쓰는 API 키 같은 비밀 값입니다. 저장한 값은 다시 보이지 않으며, 바꾸면 게시된 앱에도 반영됩니다.
- 연결: GitHub, Supabase, Cloudflare 같은 개발 계정과 내 커넥터를 프로젝트마다 켜고 끕니다. 켠 것만 에이전트가 씁니다.
프로젝트 관리하기
내 프로젝트 보기에는 만든 프로젝트가 앱 화면 썸네일과 함께 모입니다. 카드나 목록으로 볼 수 있고, 이름으로 찾거나 게시 상태(게시됨·게시 전)로 거를 수 있습니다. 게시한 프로젝트에는 앱 주소가 함께 보입니다.
프로젝트 이름은 바꿀 수 있고, 삭제하면 작업 공간과 게시한 앱이 함께 사라지며 되돌릴 수 없습니다. 프로젝트 화면을 닫은 동안 작업이 끝나거나 에이전트가 답이나 승인을 기다리면 알림으로 알려 줍니다.
작업 공간은 5분 동안 쓰지 않으면 잠시 꺼집니다. 만든 내용은 그대로 있고, 메시지를 보내면 다시 켜져 이어서 작업합니다. 동시에 켜 둘 수 있는 프로젝트는 한 사람당 5개입니다.
비용
바이브 코딩의 크레딧은 작업(대화 한 번)마다 정산됩니다. 에이전트가 모델을 쓴 만큼에 작업시간 1분당 5크레딧이 더해지며, 정산 전인 작업은 추정치로 먼저 표시됩니다. 여러 모델을 조합해 작업하므로 같은 요청이라도 고른 모델과 앱의 크기, 수정 횟수에 따라 차감액이 달라집니다.
| 항목 | 크레딧 | 참고 |
|---|---|---|
| 앱 만들기·고치기 | 모델 사용량 + 작업시간 1분당 5 | 첫 화면에 고른 모델 기준 예상치가 표시됩니다 |
| 이미지 생성 | 장당 약 20~160 | 에이전트가 앱에 쓸 이미지를 만들 때 |
| 호스팅 | 내 앱 전체 합쳐 월 10만 회 요청까지 무료 | 넘으면 요청 1만 회당 10크레딧 |
| 내 도메인 | 연결된 달마다 100 | 도메인마다 |
| 앱 속 AI 기능 | 쓴 만큼 | 앱 전용 키로 쓰인 AI 사용량이 내 크레딧에서 차감됩니다 |
설정의 사용량에서 이 프로젝트에서 쓴 크레딧, 작업 수, 작업시간을 모델별로 확인합니다.
호스팅 요청은 방문자 수가 아니라 앱 주소로 들어온 요청 수로 셉니다. 페이지를 한 번 열어도 화면·이미지·데이터 요청이 함께 세집니다. 무료 한도를 넘었는데 호스팅 요금을 낼 크레딧이 부족하면 앱이 닫히고, 크레딧을 충전하면 다시 열 수 있습니다.
관리자 설정
마지막 수정 날짜: Nov 10, 2026