ChatGPT로 바이브 코딩하기: 캔버스, Codex, ChatGPT에서 앱 만들기

ChatGPT로 바이브 코딩하는 방법은 세 가지입니다. 채팅에서 작은 앱을 요청하고 캔버스에서 미리보기를 하거나, 실제 코드베이스의 작업을 OpenAI의 코딩 에이전트 Codex에 맡기거나, Mythex 같은 AI 앱 빌더를 연결해 ChatGPT가 데이터베이스가 있는 완전한 앱을 빌드, 호스팅, 게시하게 할 수 있습니다. 첫 번째는 단일 페이지 도구에 가장 빠르고, 두 번째는 개발자에게 맞으며, 세 번째는 ChatGPT를 떠나지 않고 로그인과 데이터가 있는 실시간 앱을 얻게 해 줍니다.

각 방법의 작동 방식, 각각의 프롬프트, 그리고 어디서 한계에 부딪히는지 살펴보겠습니다. 용어의 배경이 궁금하다면 바이브 코딩이란 무엇인가를 읽어 보세요.

방법 1: ChatGPT 채팅과 캔버스

간단한 도구라면 그냥 요청하세요. ChatGPT가 코드를 작성하고, 캔버스에서는 간단한 HTML과 React 페이지를 보여 줘서 직접 클릭해 보고 변경을 요청할 수 있습니다.

단일 페이지 팁 계산기를 작성해 줘. 금액 입력, 팁 비율(10, 15, 20 버튼과 직접 입력 칸), 인원 수 입력을 넣어 줘. 입력하는 동안 팁과 1인당 금액을 보여 주고, 휴대폰에서도 깔끔하게 보여야 해.

잘 맞는 경우: 계산기, 간단한 게임, 랜딩 페이지 초안, 학습. "이 파일을 코딩 초보자처럼 설명해 줘"라고 물으면 빠르게 배울 수 있습니다.

어디서 멈추나: 백엔드가 없습니다. 입력한 내용은 다른 사용자에게 저장되지 않으며, 로그인도 없고, 공유하려면 코드를 어딘가에 복사해 직접 호스팅해야 합니다. "팀이 볼 수 있도록 저장해 줘"라고 말하는 순간 채팅으로는 부족해집니다.

복사 붙여넣기 바이브 코딩

많은 사람이 ChatGPT에 코드를 요청하고, 그것을 컴퓨터의 파일이나 호스팅 서비스에 붙여 넣는 것으로 시작합니다. 작은 정적 사이트에는 통하지만 금방 무너집니다. 변경할 때마다 올바른 파일을 찾고, 올바른 부분을 붙여 넣고, 바꾼 것에 무엇이 의존했는지 모른 채 기대해야 합니다. 이런 일을 몇 번 넘게 하고 있다면 다음 두 방법 중 하나로 옮겨 가세요.

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

Codex는 OpenAI의 소프트웨어 작업용 에이전트입니다. 일상 언어로 작업을 주면 저장소에서 작업합니다. 코드를 읽고, 여러 파일에 걸쳐 변경하고, 명령과 테스트를 실행한 뒤, 검토할 결과를 줍니다. OpenAI는 ChatGPT 안에서, 명령줄 도구로, 편집기 확장으로 제공합니다. 어떤 플랜에 포함되는지와 현재 한도는 OpenAI 사이트에서 확인하세요.

작업형 프롬프트가 가장 잘 맞습니다.

이 저장소의 주문 페이지에 CSV 내보내기 버튼을 추가해 줘. 현재 필터링된 주문을 날짜, 고객, 합계, 상태 열로 내보내야 해. 내보내기 함수에 테스트를 추가하고 테스트 스위트를 실행해 줘.

잘 맞는 경우: 기존 프로젝트가 있고 에이전트에게 작업 전체를 맡기고 싶은 개발자와 기술 창업자. 여러분의 스택과 관례를 따릅니다.

여전히 직접 처리할 것: 앱이 어디서 실행되는지, 데이터베이스, 비밀 값, 배포, 도메인. Codex는 코드를 바꾸는 도구이지 호스트가 아닙니다.

Codex와 Mythex 함께 쓰기

Codex는 MCP 서버, Mythex의 MCP 서버를 포함해 연결할 수도 있습니다. Codex에 사용자 지정 MCP 서버로 https://mcp.mythex.ai/mcp를 추가하고, Mythex에서 접근을 승인하면 Codex가 클라우드 샌드박스에서 Mythex 프로젝트를 작업할 수 있습니다. 미리보기, 데이터베이스, 게시는 Mythex가 처리합니다. 자세한 절차는 Claude, Cursor, Codex에서 Mythex 앱 만들기 글에서 설명합니다.

방법 3: Mythex로 ChatGPT에서 완전한 앱 만들기

ChatGPT 대화를 벗어나지 않고 실제 호스팅 앱을 얻고 싶다면 Mythex를 연결하세요. Mythex는 ChatGPT 안에서 앱으로 작동합니다. ChatGPT가 MCP를 통해 Mythex의 도구를 사용합니다. MCP는 어시스턴트가 다른 곳에서 호스팅되는 도구를 쓸 수 있게 해 주는 오픈 프로토콜입니다(MCP란 무엇인가).

연결되면 ChatGPT는 Mythex 프로젝트를 만들고, 비공개 클라우드 샌드박스에서 코드를 작성하고, 실시간 미리보기를 시작하고, 데이터베이스와 파일 저장소를 추가하고, 앱을 공개 URL에 게시할 수 있습니다. 결과에는 링크가 함께 와서 Mythex에서 프로젝트를 열고 미리보기를 지켜볼 수 있습니다.

연결하는 방법

1. Mythex에서 계정 설정을 열고 MCP 주소를 복사합니다.
2. ChatGPT에서 앱 또는 커넥터 설정으로 가서 그 주소로 Mythex를 추가합니다. ChatGPT의 메뉴는 가끔 바뀌므로, 이름이 다르면 앱 추가에 관한 OpenAI 도움말 페이지를 따르세요.
3. Mythex 페이지가 열립니다. 로그인하고 접근 허용을 선택하세요. 붙여 넣을 키는 없습니다.
4. 대화를 시작하고 요청에서 Mythex를 언급하세요.

연결은 어떤 Mythex 플랜에서든 가능합니다. 샌드박스 도구(빌드, 미리보기, 게시)는 Mythex Pro($25/월)가 필요하며, 샌드박스 시간과 호스팅은 Mythex 크레딧에서 차감됩니다. ChatGPT 사용량은 OpenAI 플랜에 그대로 남습니다.

시도해 볼 첫 프롬프트

Mythex를 사용해서 나를 위한 구직 지원 추적기를 만들어 줘. 회사, 직무, 링크, 지원 날짜, 상태(지원함, 면접, 합격, 불합격), 메모를 입력하는 지원서를 추가할 수 있어야 해. 상태별로 카드를 끌어다 놓을 수 있는 보드와, 주별 지원서 수를 보여 주는 간단한 차트를 넣어 줘. 모든 것을 데이터베이스에 저장하고 로그인으로 보호해 줘. 미리보기를 시작하고 링크를 알려 줘.

그다음, 한 번에 하나씩 변경하세요.

Mythex 프로젝트에서 각 지원서에 리마인더 날짜를 추가하고, 리마인더가 오늘이거나 기한이 지난 카드는 강조해 줘.

게시하고 라이브 URL을 보내 줘.

잘 맞는 경우: ChatGPT에서 계획하고 생각하는 것에 익숙하면서, 호스팅 방법을 배우지 않고도 데이터가 유지되는 결과물을 라이브로 원하는 사람. 일반적인 Mythex 프로젝트이므로 언제든 Mythex 채팅에서 이어서 작업할 수 있습니다.

무엇을 만들지에 따른 선택

ChatGPT에서 효과적인 프롬프트 습관

• 사용하고 싶은 도구를 명시하세요. "Mythex를 사용해서…"라고 하면 일반적인 답변이 아니라 여러분의 프로젝트를 위한 요청이라는 것이 분명해집니다.
• 메시지마다 변경 하나. 편집 목록이 길어질수록 부작용 목록도 길어집니다.
• 큰 단계 전에 계획을 요청하세요. "무엇이든 바꾸기 전에 무엇을 바꿀지 나열하고 내 승인을 기다려 줘."
• 오류는 그대로 붙여 넣으세요. 전체 오류 텍스트가 어떤 설명보다 가치가 있습니다.
• 무엇이 바뀌었는지 물어보세요. "최근 세 번의 변경을 쉬운 말로 요약해 줘"라고 하면 코드를 읽지 않아도 방향을 잃지 않습니다.

더 많은 프롬프트는 바이브 코딩 프롬프트 치트 시트에 있습니다.

안전하게 유지하기

• 실제 비밀번호나 API 키를 ChatGPT 대화에 붙여 넣지 마세요. 앱에 키가 필요하다면 프로젝트의 비밀 설정에 저장하세요. Mythex의 도구는 비밀 값이 아니라 비밀의 이름만 보고합니다.
• 게시하기 전에 사용자가 서로의 데이터를 볼 수 없는지, 브라우저에서 실행되는 코드에 키가 들어가 있지 않은지 확인하세요. 바이브 코딩은 안전한가? 가이드는 붙여 넣을 수 있는 프롬프트와 함께 점검 항목을 나열합니다.

Claude도 사용하고 있다면, 동반 가이드인 Claude와 Claude Code로 바이브 코딩하기를 참고하세요. 모델별 비교는 앱 제작을 위한 ChatGPT vs Claude vs Gemini를 보세요.

자주 묻는 질문