Claude로 바이브 코딩하기: Claude 채팅, Claude Code, Claude에서 앱 만들기

Claude로 바이브 코딩하는 방법은 세 가지입니다. Claude 채팅은 대화 안에서 작은 단일 페이지 앱을 만듭니다. Claude Code는 내 컴퓨터나 클라우드에서 실제 프로젝트를 편집하는 에이전트로, 코드베이스에 익숙한 사람을 위한 것입니다. 그리고 Claude와 MCP로 연결한 앱 빌더는 Claude 대화를 떠나지 않고도 데이터베이스가 있는 풀스택 앱을 빌드, 미리보기, 게시하게 해 줍니다. 어느 것이 맞는지는 무엇을 만들고 있고 설정을 얼마나 직접 소유하고 싶은지에 따라 다릅니다.

이 가이드는 세 가지 방법을 모두 다루며, 각각의 프롬프트와 한계를 설명합니다. 이 모든 것의 기본 아이디어는 바이브 코딩이란 무엇인가를 참고하세요.

방법 1: 작은 도구를 위한 Claude 채팅

일반 Claude 앱에서 대화형으로 무언가를 요청하면, Claude가 대화 바로 옆에서 실행되는 코드로 작성합니다. 계산기, 플래시카드 드릴, 작은 게임, 붙여 넣은 데이터의 차트 같은 것들입니다. 답장으로 바꿀 수 있습니다.

여기서 좋은 프롬프트는 그 자체로 완결되어 있습니다.

비용 목록을 붙여 넣으면(한 줄에 하나, "금액, 카테고리") 카테고리별 원형 차트와 합계를 보여 주는 대화형 도구를 만들어 줘. 바로 작동하도록 샘플 목록도 포함해 줘.

잘 맞는 경우: 내가 직접 쓰거나 링크로 공유하는 빠른 단일 페이지 도구, 그리고 학습. 모든 부분을 설명해 달라고 할 수 있기 때문입니다.

어디서 멈추나: 이들은 Claude의 환경 안에서 실행됩니다. 내 데이터베이스가 지속되지 않고, 사용자 계정도 없으며, 커스텀 도메인도 없고, 서버를 돌릴 곳도 없습니다. 아이디어가 한 페이지를 넘어서면 다음 두 방법 중 하나가 필요합니다.

방법 2: 실제 코드베이스를 위한 Claude Code

Claude Code는 Anthropic의 코딩 에이전트입니다. 터미널, VS Code나 JetBrains 같은 편집기, 데스크톱 앱, 웹에서 작동합니다. 일상 언어로 작업을 주면 프로젝트를 읽고, 파일을 편집하고, 명령과 테스트를 실행한 뒤 무엇이 바뀌었는지 보여 줍니다. 이 글을 쓰는 시점에는 Claude의 유료 플랜에 포함되어 있고 API로도 사용할 수 있습니다. 최신 플랜은 Anthropic 사이트에서 확인하세요.

일반적인 바이브 코딩 세션은 다음과 같습니다.

현재 사용자의 예약 내역을 최신순으로 보여 주는 /bookings 페이지를 추가해 줘. 수업 시작 2시간 전부터는 취소 버튼이 비활성화되어야 해. 기존 인증 헬퍼를 사용하고, 끝나면 테스트를 실행해 줘.

잘 맞는 경우: 이미 프로젝트가 있고, 스택을 완전히 통제하고 싶으며, 직접 실행하고 배포하는 것을 감수할 수 있는 개발자와 기술 창업자. 여러 파일에 걸친 변경과 기존 코드베이스의 관례를 따르는 데 강합니다.

더 많은 작업이 필요한 부분: 개발 환경을 갖춰야 하고, Claude Code는 아무것도 호스팅하지 않습니다. 데이터베이스, 비밀 값, 배포, 도메인은 직접 준비해야 합니다. 다른 개발자 도구와의 비교는 Cursor vs Windsurf vs Claude Code를 참고하세요.

Claude Code와 잘 맞는 습관

• 큰 변경 전에 계획을 요청하세요. "단계와 건드릴 파일을 개요로 정리하고 기다려 줘."
• 프로젝트 메모 파일을 두세요. Claude Code는 관례를 위해 프로젝트 메모 파일(CLAUDE.md)을 읽으므로 같은 내용을 반복할 필요가 없습니다.
• diff를 검토하세요. 바이브 코딩을 하더라도, 인증, 결제, 사용자 데이터처럼 민감한 부분은 변경된 내용을 훑어보세요.
• 자주 커밋하세요. 작은 커밋은 잘못된 단계를 되돌리기 쉽게 만듭니다.

방법 3: Mythex로 Claude에서 빌드하고 게시하기

Claude에서 작업하는 것을 좋아하지만 최종적으로 실제 앱(데이터베이스, 로그인, 파일 저장소, 공개 URL)을 원한다면, MCP를 통해 Claude를 AI 앱 빌더에 연결할 수 있습니다. MCP는 Claude가 다른 곳에서 호스팅되는 도구를 사용할 수 있게 해 주는 프로토콜입니다. (MCP란 무엇인가에서 쉽게 설명합니다.)

Mythex는 MCP 서버를 운영합니다. 연결되면 Claude는 Mythex 프로젝트를 만들고, 비공개 클라우드 샌드박스에서 코드를 작성하고, 실시간 미리보기를 시작하고, 데이터베이스와 파일 저장소를 붙이고, 앱을 게시할 수 있습니다. 모든 결과에는 Mythex에서 프로젝트를 실시간으로 볼 수 있는 링크가 포함됩니다.

연결하는 방법

1. Mythex에서 계정 설정을 열고 MCP URL을 복사합니다: https://mcp.mythex.ai/mcp.
2. Claude에서 설정 → 커넥터 → 사용자 지정 커넥터 추가로 가서 URL을 붙여 넣고 연결을 클릭합니다.
3. Mythex 페이지가 열립니다. 필요하면 로그인하고 접근 허용을 선택하세요. 복사할 API 키는 없습니다.
4. Claude로 돌아와 원하는 것을 요청하세요.

어떤 플랜에서든 누구나 연결할 수 있습니다. 샌드박스 도구는 Mythex Pro($25/월)가 필요합니다. Claude 사용량은 Claude 플랜에 남고, 샌드박스 시간, 미리보기, 호스팅은 Mythex 크레딧에서 차감됩니다. 전체 절차는 Claude, Cursor, Codex에서 Mythex 앱 만들기에 있습니다.

시도해 볼 첫 프롬프트

Mythex를 사용해서 새 프로젝트를 만들어 줘. 내 작은 디자인 스튜디오를 위한 간단한 CRM이야. 연락처는 이름, 회사, 이메일, 전화번호, 단계(잠재 고객, 진행 중, 과거), 메모를 가져. 단계별로 연락처를 열 사이로 끌어다 놓을 수 있는 보드 뷰와 검색창이 필요해. 데이터가 유지되도록 데이터베이스를 추가하고, 나만 볼 수 있도록 로그인도 넣어 줘. 미리보기를 시작하고 실행되면 링크를 보내 줘.

그다음, 같은 대화에서 한 번에 하나씩 반복하세요.

Mythex 프로젝트에서 연락처에 "다음 후속 연락" 날짜를 추가하고, 홈 화면에 이번 주에 후속 연락할 목록을 보여 줘. 미리보기에서 확인해 줘.

CRM을 게시하고 라이브 URL을 알려 줘.

잘 맞는 경우: Claude에서 가장 잘 생각하고, 서버를 설정하지 않고도 데이터베이스가 있는 호스팅 결과를 원하는 사람. 방향을 바꿀 수도 있습니다. Claude에서 시작해 Mythex 채팅에서 이어 가거나, 반대로 해도 같은 프로젝트이기 때문입니다.

어떤 것을 써야 할까?

Claude에서 더 중요해지는 프롬프트 팁

Claude는 상세한 지시를 꼼꼼히 따르며, 이는 양날의 검입니다.

• 바꾸지 말아야 할 것을 말하세요. "레이아웃과 색은 유지하고, 폼 검증만 바꿔 줘."
• 완료의 정의를 주세요. "완료란 새 연락처가 저장되고, 보드에 나타나고, 새로고침 후에도 남아 있는 것이다."
• 작업 결과를 확인하게 하세요. Claude Code에서는 테스트를 실행하는 것이고, Mythex에서는 실시간 미리보기를 확인하거나 브라우저 테스트를 실행하는 것입니다.
• 이해되지 않는 변경은 쉬운 말로 설명해 달라고 하세요. 앱이 무엇을 하고 있는지 가장 빨리 배우는 방법입니다.

세 가지 설정 모두에서 작동하는 30개의 프롬프트는 바이브 코딩 프롬프트 치트 시트에 있습니다.

세 가지 모두에 대한 안전 메모

• Claude 대화에 실제 API 키나 비밀번호를 붙여 넣지 마세요. Mythex에서는 비밀 값을 프로젝트의 비밀 설정에 넣으며, Claude는 이름은 볼 수 있어도 값은 볼 수 없습니다.
• 게시하기 전에 누가 무엇을 볼 수 있는지 확인하세요. "로그인한 사용자가 다른 사용자의 기록을 열 수 있나?"가 첫 번째로 물어볼 질문입니다.
• 민감한 코드는 검토하세요. Claude는 유능한 코더이지만, 바이브 코딩은 모든 줄을 읽지 않는다는 뜻이므로 중요한 줄을 골라서 확인하세요. 바이브 코딩은 안전한가?를 참고하세요.

ChatGPT도 함께 쓴다면 동반 가이드인 ChatGPT와 Codex로 바이브 코딩하기를 참고하세요. 전체 설정을 건너뛰고 싶다면 AI 앱 빌더를 열고 거기서 앱을 설명해 보세요.

자주 묻는 질문