바이브 코딩

바이브 코딩이란?

바이브 코딩은 무엇을 만들고 싶은지 이야기처럼 적으면 AI가 실제로 동작하는 앱까지 만들어 주는 기능입니다. AI가 몇 가지 질문을 드리고, 답을 바탕으로 계획서와 첫 화면 모형을 보여드립니다. 확인하면 코드를 작성하고, 과정이 끝나면 빌드 → 배포 단계를 사용자 승인하에 진행합니다. 프로그래밍을 몰라도 됩니다.

완성된 앱은 미리보기에서 바로 실행해 볼 수 있고, 주소를 열어 계속 쓰거나 다른 사람에게 공유할 수도 있습니다. 고치고 싶은 점이 생기면 그냥 대화로 말하면 됩니다 — "버튼 색을 파랑으로 바꿔줘"처럼요.

이용 권한

바이브 코딩은 별도 권한 승인제 기능입니다. 권한이 없으면 사이드바의 바이브 코딩 메뉴에 🔒 자물쇠가 표시되고, 클릭하면 권한 요청 다이얼로그가 열립니다. 만들고 싶은 것을 간단히 적어 제출하면 관리자가 검토하고, 승인되면 메뉴가 활성화됩니다.

권한 승인 절차와 사용자별 리소스 상한(프로젝트 수, 동시 작업 수 등)은 관리자가 관리합니다.

만들기 흐름 — 5단계

1. 무엇을 만들지 적기

바이브 코딩 → 프로젝트의 새로 만들기 로 위자드가 열립니다.

• 하고 싶은 것 — 예: "우리 가족 여행을 기록하는 앱을 만들고 싶어. 사진과 메모를 날짜별로 남기고 싶어." 무엇을 적을지 모르겠으면 아래 이런 건 어때요 추천 칩을 눌러도 됩니다.
• 만들 형식 — 자동(AI가 골라요) / 웹앱 / 풀스택 / API / MCP 중 선택. 그냥 두면 AI가 알아서 고릅니다.
• 디자인 스타일 — 웹앱·풀스택처럼 화면이 있는 형식을 고르면 Linear·Notion·Stripe 같은 브랜드 무드 31종이 나타납니다. 고르지 않으면 AI가 어울리는 스타일을 선택합니다.
• AI 모델 — 기본은 자동 추천. 직접 고를 수도 있습니다.
• 저장 위치 — 개인 또는 참여 중인 그룹에 만들 수 있습니다.

작성 후 Enter(또는 만들기 시작)를 누르면 프로젝트가 만들어지고 AI가 곧 질문을 시작합니다.

2. 인터뷰 — 버튼으로 답하기

AI가 앱의 방향을 잡기 위해 몇 가지 질문을 드립니다. 대부분 선택지 버튼을 누르는 것으로 끝나고, 자유 답변을 직접 입력할 수도 있습니다. 이미 위자드에서 정한 것(형식·디자인)은 다시 묻지 않습니다.

3. 계획서와 첫 화면 모형 확인

질문이 끝나면 AI가 계획서를 완성합니다 — 앱 이름, 어떤 화면이 있는지, 어떤 기능이 있는지. 오른쪽에는 첫 화면 모형이 미리 그려져 있어서, "이대로 만들기"를 누르기 전에 느낌을 확인할 수 있습니다.

마음에 들지 않으면 왼쪽 대화로 계속 다듬을 수 있습니다. 만족스러우면 이대로 만들기를 누릅니다. 이때부터는 화면을 닫아도 제작이 계속 진행됩니다.

4. 제작 지켜보기

제작이 시작되면 오른쪽 화면이 코드 작성 현장으로 바뀝니다. 코드가 완성되면 바로 개발 미리보기로 전환되어, 빌드 전에도 앱을 직접 실행해 볼 수 있습니다.

• 단계 스트립 — 계획 확인 → 서버 준비 → 코드 만들기 → 이미지 만들기 → 배포. 지금 무엇을 하는지가 한 줄로 표시되고, 경과 시간과 진행률이 함께 올라갑니다.
• 라이브 코드 — AI가 파일을 하나씩 쓰는 과정이 실시간으로 보입니다. 왼쪽 파일 트리에서 다른 파일을 열어볼 수도 있습니다.
• 터미널 — 빌드 로그가 흘러갑니다.

제작 봇에 문제가 생기면 스스로 복구를 시도합니다 — 타임라인에 "자가 복구 (1/3)"처럼 몇 번째 시도인지 표시되고, 최대 3회까지 재시도합니다. 그래도 안 되면 실패 사유와 로그를 보여주고, 다시 만들기를 누를 수 있습니다.

코드가 완성되면 AI가 "이 버전으로 빌드할까요?" 승인 카드를 보여줍니다. 빌드가 끝나면 "이 버전을 배포할까요?" 카드가 이어집니다. 각 단계에서 직접 확인하고 진행하세요. (지금 하지 않고 나중에를 눌러도 됩니다.)

5. 완성 — 바로 써보기

코드가 완성되는 순간부터 미리보기에서 바로 실행해 볼 수 있습니다.

미리보기로 내 앱 확인하기

오른쪽 화면의 코드 / 미리보기 / 환경 변수 탭으로 언제든 오가며 확인할 수 있습니다. 미리보기는 진짜 브라우저처럼 생겼고, 똑같이 동작합니다.

• 이 부분 수정 — 미리보기에서 고치고 싶은 요소를 클릭하면 그 부분에 대한 수정을 바로 요청할 수 있습니다. "더 크게", "색 강조" 같은 추천 칩도 제공됩니다.
• 절전 — 미리보기는 30분간 사용하지 않으면 잠들고, 깨워서 보기 버튼으로 즉시 다시 켤 수 있습니다.

배포 후에는 운영 미리보기 프레임에 추가 도구가 생깁니다.

• 주소창 — 내 앱의 실제 주소가 표시됩니다.
• 새로고침 — 앱을 다시 불러옵니다. 수정 요청이 끝나면 미리보기도 자동으로 새로고침됩니다.
• 새 창에서 열기 — 별도 탭에서 큰 화면으로 써볼 수 있습니다.
• 화면 크기 토글 — 주소창 오른쪽의 아이콘(데스크톱 · 태블릿 · 모바일)으로 폭을 바꿔가며 확인합니다. 휴대폰 화면에서 깨지는지 미리 살펴볼 때 유용해요.

[!TIP] API·MCP 형식으로 만든 앱은 화면이 없는 대신, 미리보기 자리에 시험 콘솔이 열립니다. 앱이 제공하는 도구 목록이 스키마와 함께 나오고, 입력값을 폼에 채워 호출하면 결과를 정돈된 JSON으로 바로 확인할 수 있습니다.

배포하기 — 나만의 주소로 열기

미리보기로 충분히 확인했으면 배포하기를 눌러 실제 주소를 얻습니다. 배포는 완료된 빌드 버전만 반영되므로, 빌드를 먼저 완료해 주세요.

• 주소(슬러그) — my-app.vibe.inerit.dev 형태로 직접 정할 수 있습니다. (영문 소문자·숫자·하이픈, 중복 확인 지원)
• 버전 — 지금 빌드된 버전 또는 이전 버전으로 되돌리기 배포.
• 성능·환경변수 — CPU/메모리, 실행 수, 앱이 쓸 환경변수를 지정합니다. 환경변수는 환경 변수 탭에서 상시 관리할 수도 있습니다.

배포 후에는 새 창에서 열기로 접속하고, 푸터의 버튼으로 새로고침 · 이전 버전으로 되돌리기 · 배포 중지를 관리할 수 있습니다. 완성된 코드는 ZIP으로 다운로드할 수도 있습니다.

완성 후 계속 다듬기 — 대화로 수정 요청

완성된 앱은 왼쪽 대화에 계속 요청하면 됩니다. "버튼 색을 파랑으로 바꿔줘", "다크모드를 추가해줘"처럼 말하면:

1. AI가 요청을 문제 해결 / 새 기능 / 모양·문구 조정으로 자동 분류해 접수합니다.

2. 수정하는 동안 코드 화면이 다시 살아나 무엇을 고치는지 실시간으로 보입니다.

3. 끝나면 AI가 무엇을 바꿨는지(바뀐 파일과 커밋)로 답하고 미리보기가 자동으로 새로고침됩니다.

진행 중인 요청이 있을 때 또 요청해도 괜찮습니다 — 대기열에 순서대로 쌓였다가 앞의 요청이 끝나면 자동으로 시작됩니다.

프로젝트 관리

바이브 코딩 → 프로젝트 목록에서 내가 만든 앱을 관리합니다.

• 개인 / 그룹 탭 · 이름 검색
• 프로젝트 클릭 → 작업 화면(대화·코드·미리보기)으로 이동
• 삭제 — 깃 리포지토리, 배포, 데이터베이스, 저장소까지 전부 되돌릴 수 없게 정리합니다.

앱이 저장하는 데이터는 내 데이터베이스 메뉴에서 표로 확인하고 행 단위로 수정·삭제할 수 있습니다. 앱이 올린 파일은 내 스토리지 메뉴에서 확인·다운로드·삭제할 수 있습니다. (스토리지에 직접 파일을 올리는 기능은 없습니다 — 업로드는 앱 화면을 통해서만 가능합니다.)

다음 단계

• 시작 투어 — 전체 메뉴 둘러보기
• 그룹 & 공유 — 그룹 프로젝트로 함께 만들기