Grok Bot 으로 시작하는 바이브 코딩 가이드 2.0

머리말

이 문서는 바이브 코드로 앱/서비스를 개발할 때, 코딩 경험자 뿐만 아니라, 코딩 무경험자도 따라하실 수 있도록 만든 가이드입니다. 코딩 경험이 적은 주니어 개발자와 기획자도 이 순서대로 진행하면 안정적으로 결과물을 만들 수 있습니다.

⚠️ 시작 전에 꼭 확인하세요

이 가이드를 따라 하려면 아래 두 가지가 모두 있어야 합니다.

• Grok 및 Grok Bot 계정 ( Grok 프리미엄 구독 이상에 포함 ) — 여러분 대신 브라우저를 열고, 클릭하고, 작업을 진행할 AI 비서입니다.

• Claude 유료 구독 (Pro / Max / Team 등) — Claude Design과 Claude Code를 쓰려면 유료 플랜이 필요합니다.

0. 전체 흐름 요약

① 기획 Concept.md (나 + Grok Bot) ↓ ② 디자인 Claude Design (Grok Bot이 조작) ↓ ③ 개발 Claude Code (Grok Bot이 조작) ↓ ④ 저장 GitHub 커밋/브랜치 (Grok Bot이 관리) ↓ ⑤ 미리보기 Grok Build 배포 (Grok Bot이 링크 전달) ↓ ⑥ 테스트 내가 직접 링크 열어서 써보기 ↓ ⑦ 수정 요청 "여기 이렇게 고쳐줘" → Grok Bot ↓ └─ ②~⑦ 반복 (완성될 때까지)

1. Grok Bot 만들고 Claude에 로그인시키기

1-1. Grok Bot 만들기

먼저 Grok Bot을 하나 만듭니다. 봇이름이나 다른 설정같은거 할 필요 없습니다. 그냥 바로 쓰시고 나중에 익숙해지시면 이름도 붙여보고 하시면 됩니다. 이 가이드에서는 그냥 "Grok Bot"이라고 부릅니다.

봇이 만들어지면, 앞으로 이 프로젝트에 관한 이야기는 이 봇과의 대화창 하나에서 진행합니다.

1-2. Grok Bot에게 Claude 로그인 시키기

지금부터 너는 내 바이브 코딩 파트너야. 앞으로 Claude, Claude Design, Claude Code 를 내 대신 조작해줘.먼저 네 브라우저를 열고 https://claude.ai 에 접속해서 로그인 화면까지 열어줘. 로그인, 비밀번호 입력, 2단계 인증(2FA)은 내가 직접 할 거야. 로그인 화면이 준비되면 나에게 화면을 넘겨주고 "직접 로그인해주세요" 라고 알려줘. 내가 로그인을 끝냈다고 말하면, 로그인이 잘 됐는지 확인하고 현재 계정의 플랜으로 Claude Design 과 Claude Code 를 쓸 수 있는지 확인해서 알려줘.규칙:내 비밀번호나 인증 코드를 채팅으로 요구하지 마. 결제, 플랜 변경, 계정 설정 변경은 절대 하지 마. 확실하지 않은 화면이 나오면 추측하지 말고 나에게 물어봐.

Grok Bot이 로그인 화면을 띄워놓고 화면을 넘겨주면, 여러분이 직접 이메일/비밀번호를 넣고 2단계 인증까지 마치면 됩니다. 그다음 채팅으로 다음 진행을 전달합니다.

로그인 끝났어. 확인해줘.

💡 한 번 로그인해두면 Grok Bot의 브라우저에 로그인 상태가 남아 있어서, 다음부터는 매번 로그인할 필요가 없는 경우가 많습니다. 세션이 만료되면 Grok Bot이 다시 화면을 넘겨줄꺼라 걱정 안해도 됩니다.

2. 기획 — Concept.md 만들기

v1과 똑같이, 머릿속에 떠오른 아이디어를 2~3줄로 간단히 말하는 것부터 시작합니다. 다른 점은 이걸 Grok Bot에게 말하면, Grok Bot이 Claude에게 전달해서 문서를 받아오는 방식입니다.

프롬프트 예시

이런 걸 만들고 싶어: "우리 동네 소모임 사람들이 모임 일정을 올리고, 참석 여부를 투표하고, 회비 낸 사람을 체크할 수 있는 간단한 웹 서비스"Claude 에게 이 아이디어를 전달해서, 이걸 구현하기 위한 절차와 방법을 Concept.md 문서로 만들어 달라고 해줘. 다 만들어지면 Concept.md 내용을 나에게 보여주고, 파일로도 잘 보관해줘. 나중에 GitHub 저장소에 올릴 거야.

• 아이디어가 구체적이지 않아도 됩니다. "누가 쓰는지 / 뭘 할 수 있는지 / 왜 필요한지" 정도만 있으면 충분합니다.

• Concept.md를 받아보고 마음에 안 드는 부분이 있으면 그냥 그록봇에게 지시하세요. "회비 기능은 빼고, 대신 사진 앨범을 넣어줘" 같은 식으로요. Grok Bot이 Claude에게 다시 요청해서 고쳐옵니다.

3. 디자인 — Claude Design으로 UI 먼저 만들기

v1에서는 Design.md라는 문서로 디자인 기준을 먼저 정했죠. 2.0에서는 더 쉬우면서 직관적으로, Claude Design에서 실제로 조작해 볼 수 있는 화면을 먼저 만들고 그걸 기준으로 개발합니다.

3-1. 서비스 설명하고 첫 화면 만들기

Claude Design 을 열고, 방금 만든 Concept.md 내용을 바탕으로 아티팩트로 이 서비스의 UI 를 만들어줘.요구사항:먼저 꼭 필요한 화면 목록을 정리해서 나에게 보여줘 (예: 메인, 모임 상세, 참석 투표, 관리자 화면 등) 화면 목록을 내가 확인하면, 각 화면을 실제로 클릭해볼 수 있는 프로토타입으로 만들어줘 모바일에서도 보기 좋게 만들어줘

3-2. 참고 사이트가 있다면 — v1의 Design.md 프롬프트 재활용

마음에 드는 실제 서비스가 있다면, v1에서 썼던 디자인 분석 프롬프트를 그대로 활용하세요. (예: linear.app, stripe.com, toss.im 등) Figma 등으로 직접 만든 디자인이 있다면 이미지를 Grok Bot에게 주고 "이 디자인을 기준으로 해줘"라고 해도 됩니다.

Claude 에게 https://linear.app 사이트의 디자인을 분석해서 Design.md 문서를 작성해달라고 해줘. 다음 항목을 반드시 포함해:전체 레이아웃 구조 (헤더/사이드바/본문/푸터 배치) 컬러 팔레트 (Primary, Secondary, Background, Text 색상을 HEX 코드로) 타이포그래피 (폰트 종류, 크기 체계, 굵기) 여백과 간격 규칙 (spacing scale) 버튼, 카드, 입력폼 등 주요 컴포넌트의 스타일 다크모드 지원 여부와 색상 매핑 Design.md 가 완성되면, Claude Design 에서 UI 를 만들 때 이 문서를 기준으로 만들어줘.

💡 "이 사이트처럼 만들어줘" 라고만 하면 매번 결과가 달라집니다. 문서로 고정해야 일관성이 유지돼요. 이 Design.md는 나중에 Claude Code로 개발할 때도 그대로 기준이 됩니다.

3-3. 테스트 링크 받아오기

화면이 어느 정도 나오면, 직접 눌러볼 수 있는 링크를 받아옵니다. Claude Design에는 디자인을 공유하거나 내보내는(배포하는) 기능이 있는데, 어떤 방식이 가장 적합한지는 Grok Bot이 화면을 보고 판단하게 하면 됩니다.

Claude Design 에서 만든 프로토타입을 내가 내 휴대폰과 PC 브라우저에서 직접 눌러볼 수 있도록, 공유/배포 기능을 이용해서 테스트용 URL 을 만들어줘.어떤 방식으로 공유했는지, 그 링크를 누가 볼 수 있는지(나만 / 링크가 있는 사람 / 전체 공개)도 같이 알려줘 공개 범위는 가능하면 "링크가 있는 사람" 정도로 해줘 URL 을 이 대화창에 가져다줘

3-4. 직접 써보고 고쳐달라고 하기 (디자인 루프)

이제 직접 링크를 열어서 진짜 사용자가 된 것처럼 이것저것 눌러보며 테스트 합니다. 그리고 마음에 안 드는 걸 그대로 그록봇에게 지시하면 됩니다.

테스트해봤어. 아래 내용 고쳐줘:메인 화면에서 "모임 만들기" 버튼이 너무 작아서 잘 안 보여. 화면 아래쪽에 크게 고정해줘 참석 투표 화면에서 "참석/불참" 말고 "미정"도 선택할 수 있게 해줘 전체적으로 글씨가 너무 작아. 모바일 기준으로 한 단계 키워줘 다 고치면 같은 방식으로 새 테스트 URL 을 가져다주고, 무엇을 바꿨는지 짧게 정리해줘.

이렇게 직접 스스로 만족하는 수준까지 반복합니다. 이 단계에서 충분히 다듬을수록 뒤의 개발이 편해집니다.

• 스크린샷을 찍어서 "여기 이 부분" 이라고 표시해서 보내면 훨씬 정확하게 고쳐줍니다.

• 한 번에 너무 많이 요청하기보다 3~5개씩 묶어서 요청하는 게 결과가 좋습니다.

3-5. 디자인 확정하기

디자인 이 정도면 좋아. 이 버전으로 확정할게.최종 화면 목록과 각 화면 설명을 Design.md 에 정리해줘 (기존 Design.md 가 있다면 업데이트) 최종 테스트 URL 도 Design.md 맨 위에 적어줘 나중에 Claude Code 로 개발할 때 이 디자인을 그대로 넘길 수 있도록 준비해줘. Claude Design 에서 Claude Code 로 넘기는 기능이 있다면 그걸 쓰는 게 좋은지도 알려줘

4. GitHub — Grok Bot이 직접 가입하고 저장소 만들기

v1에서 가장 많은 분들이 멈췄던 부분이 바로 여기죠. Git 설치, VS Code 설치, clone, commit, push, 브랜치…

2.0에서는 이걸 전부 Grok Bot이 합니다. 여러분은 기본 개념만 기억하는 수준이면 됩니다.

• 저장소(Repository) = 프로젝트 하나를 담는 클라우드 폴더

• main 브랜치 = 항상 잘 동작하는 완성본 진열대

• 작업 브랜치 = main을 복사해서 만든 공사장. 여기서 마음껏 부수고 만들어도 main은 안전

• 커밋(commit) = 게임의 세이브 포인트. 언제든 그 시점으로 돌아갈 수 있음

4-1. Grok Bot 전용 이메일 준비하기

Grok Bot은 자기만의 이메일 주소(받은편지함)를 가질 수 있습니다. 이 주소로 GitHub에 가입하면, 인증 메일도 Grok Bot이 직접 확인할 수 있어요.

너의 Grok Bot 전용 이메일 주소가 있는지 확인해줘. 없으면 만들어줘. 주소 이름은 만들기 전에 나에게 먼저 물어봐.

Grok Bot이 원하는 주소 이름을 물어보면 정해주고, 확인 창이 뜨면 승인해주세요.

💡주의 !!!! : 그록봇의 이메일은 여러분 계정 1개당 하나의 이메일 주소만 만들 수 있습니다. 봇을 여러개 만든다고, 봇마다 이메일이 생기는게 아니니 신중하게 이름 정해서 만드십시요

4-2. GitHub 가입하고 저장소 만들기

너의 Grok Bot 이메일 주소로 https://github.com 에 가입해줘.가입 중에 캡차(로봇 확인)가 나오면 나에게 화면을 넘겨줘. 내가 풀게. 인증 메일은 네 받은편지함에서 직접 확인해서 처리해줘. 안 오면 알려줘.

가입이 끝나면 이 프로젝트용 저장소를 하나 만들어줘.이름: 영문 소문자와 하이픈으로 (예: my-first-app). 몇 가지 후보를 먼저 보여줘 공개 범위: Private (비공개) README 파일 포함 지금까지 만든 Concept.md, Design.md 를 저장소에 올리고 "기획 문서 추가" 라는 메시지로 main 에 커밋해줘. 저장소 주소를 나에게 알려줘. Github 계정 비밀번호는 안전하게 만들어서 나에게만 알려줘. 결제나 유료 플랜 가입은 하지 마.

4-3. ⚠️ Github 계정 비밀번호는 직접 관리하십시요

💡직접 Github 에 들어가셔서 비밀번호를 본인이 원하는 비밀번호로 다시 변경하는게 좋습니다.

5. 설계 — 기술 스택, 관리자 대시보드, ToDo.md

디자인이 확정됐으니, 이제 이 화면을 실제로 동작하게 만들 설계도를 그립니다. v1의 설계 프롬프트를 그대로 가져오되, 이번에는 "확정된 Claude Design을 기준으로" 라는 조건이 붙습니다.

5-1. 기술 스택 결정 추천 트리

만들려는 서비스 형태에 따라 스택을 먼저 확정하고 시작합니다.

서버(Backend) 공통 원칙

• 어느 로컬 환경에서든 CLI에서 바로 설치하고 실행할 수 있어야 합니다.

• 언어/런타임은 Node.js 또는 Python 으로 구성합니다.

• 패키지/실행 환경은 안정적인 배포와 모든 OS 지원이 검증된 도구를 씁니다.Python → uv Node.js → npm

데이터베이스 선택 기준

개발 지식이 있는 경우 — 세부 지정 프롬프트

Claude 에게 아래 내용을 전달해서 ToDo.md 를 작성하게 해줘. 저장소에 있는 Concept.md, Design.md 와 확정된 Claude Design 화면을 반드시 참고하라고 해줘.이 프로젝트는 웹앱이야. Frontend는 React로 구성하고, 로컬에서 npm run dev 로 바로 테스트할 수 있어야 하고, 배포까지 안정적으로 가능한 구조로 잡아줘. Backend는 Node.js로 구성하고, DB는 관계형이 필요하니 MariaDB를 사용해. 로컬 개발환경에서 CLI로 바로 설치/실행 가능한 setup 스크립트도 포함해줘. 확정된 Claude Design 의 화면 구성을 그대로 구현하는 것을 전제로, 세부 기술 구현을 위한 ToDo.md 문서를 작성해줘.

💡"저는 위 내용을 하나도 모르는 비개발자인걸요?"

그럼, 그냥 이렇게 통째로 맡기면 됩니다.

Claude 에게 아래 내용을 전달해서 ToDo.md 를 작성하게 해줘. 저장소에 있는 Concept.md, Design.md 와 확정된 Claude Design 화면을 반드시 참고하라고 해줘.이 프로젝트를 어떻게 실행해야 할지 잘 모르겠으니 추천해줘. 웹이 좋은지, OS에 설치하는 방식이 개발할 때 확인이 편한지, 모바일 앱으로 빌드하는 게 좋은지 추천해줘. 만약 웹브라우저에서 보여질 수 있다면 Frontend는 React로 구성하고, 모바일 앱으로 서비스해야 한다면 Flutter로 Frontend를 구성해줘. 만약 별도로 로컬에 설치해서 사용해야 하는 방식이면, CLI로 손쉽게 배포하고 설치할 수 있는 npm 이나 uv 방식으로 구성해줘. 배포까지도 안정적으로 가능한 구조로 잡아줘. Backend가 필요할지 모르겠는데, 필요하다면 Node.js 처럼 배포와 설치가 안정적인 구조로 잡아주고, DB가 필요하다면 관계형이 필요한 경우 MariaDB를, 단순 키-값 방식이면 AWS DynamoDB를 로컬에서 사용해서 개발하고 AWS에 손쉽게 배포할 수 있도록 구성해줘. 로컬 개발환경에서 CLI로 바로 설치/실행 가능한 형식이라면 setup 스크립트도 모두 포함해줘. 이런 세부 구현 기술 스택을 추천해주고, 확정된 디자인 화면을 그대로 구현하는 것을 전제로 세부 기술 구현을 위한 ToDo.md 문서를 작성해줘.그리고 Grok Bot, 너는 Claude 가 추천한 기술 스택을 내가 이해할 수 있게 쉬운 말로 3줄로 요약해서 알려줘.

💡 v1에서는 Concept.md를 직접 첨부하거나 복사해서 붙여넣어야 했지만, 이제는 문서가 GitHub 저장소에 있고, Grok Bot이 알아서 Claude에게 전달합니다.

5-2. 관리자 대시보드 — 서버가 있다면 필수

서버가 있는 서비스인지 잘 모를 수 있지만, 만든 사람이 전체 앱의 구동 상태를 직접 파악하려면 관리자 대시보드를 같이 만드는 게 좋습니다.

대시보드에 최소한 들어가야 할 것:

• 서버 구동 상태 (health check)

• 주요 데이터 현황 (가입자 수, 처리 건수 등 핵심 지표)

• 최근 에러/로그 확인

• 주요 작업(배치, 큐 등)의 처리 진행 상황

프롬프트 예시

Claude 에게 이렇게 전달해줘:이 서비스에 서버가 포함된다면, 관리자 대시보드도 함께 개발 계획에 포함해줘. 대시보드에서 서버 상태, 핵심 지표, 최근 로그/에러를 확인할 수 있어야 해. 처음 관리자 계정은 admin / 12345 로 설정하고, 관리자 대시보드에서 비밀번호를 바꿀 수 있도록 개발 내용에 포함해줘. 관리자 화면이 Claude Design 에 없다면, Design.md 의 스타일을 따라서 만들어줘. ToDo.md 문서를 확인해서, 이 부분이 필요하다고 판단되면 개발 계획에 포함해줘.

⚠️ admin / 12345 는 테스트용 임시 비밀번호입니다. 링크를 다른 사람에게 공유하거나 실제로 운영하기 전에는 반드시 바꿉니다. Grok Bot에게 "공개 배포 전에 관리자 비밀번호 바꿨는지 꼭 확인해줘" 라고 미리 말해두면 좋습니다.

5-3. ToDo.md 마무리하기 — 모듈 단위 개발 계획서

프로그래밍의 기본은 모듈화입니다. 코드를 쓰기 전에 모듈 단위로 잘게 나눠두면, 나중에 고치기 쉬운 좋은 구조가 만들어집니다.

프롬프트 예시

Claude 에게 ToDo.md 를 아래 가이드에 따라 점검하고 보완하게 해줘:전체 시스템을 객체지향 설계로 모듈화가 되도록 설계해줘 각 모듈마다 역할, 입출력, 데이터 구조를 명확히 해서 최대한 캡슐화되도록 명세해줘 구현 순서를 체크박스 목록으로 만들어줘 (의존성이 없는 모듈부터) DB 스키마 설계를 포함해줘 비기술자가 테스트를 편하게 할 수 있는 시점과 방법을 함께 서술해줘 완성되면 ToDo.md 를 저장소에 "개발 계획 추가" 라는 메시지로 main 에 커밋해줘.

완성된 ToDo.md에 들어 있어야 할 것 (Grok Bot에게 "이 항목들 다 들어갔는지 확인해줘"라고 시키면 됩니다)

1. 프로젝트 개요 (한 문단)

2. 확정된 기술 스택 (5-1의 결과)

3. 모듈 목록과 각 모듈의 세부 기술 명세 — 모듈 이름과 역할, 입력/출력(API라면 엔드포인트와 요청/응답 형식), 데이터 구조/DB 테이블 설계, 다른 모듈과의 의존 관계 (비기술자는 이 부분이 어려울 수 있어요. 괜찮습니다.)

4. 구현 순서 (체크박스 형태, 의존성 순서대로)

5. 각 테스트 방법이 내가 이해할 수 있는 수준으로 쓰여 있는지

중요

ToDo.md를 반드시 직접 다 읽고 검토할 필요는 없습니다. 완벽하게 준비하면 잘될 것 같지만, 바이브 코딩의 핵심은 먼저 결과물을 만들어두고, 내가 원하는 모습으로 조금씩 고쳐가는 과정이에요. 그게 제일 가치 있고 재미있습니다.

6. 개발 — Grok Bot이 Claude Code로 실제 개발하기

드디어 개발입니다. 저장소에 문서 3종(Concept.md / Design.md / ToDo.md)이 준비됐고, Claude Design 화면도 확정됐습니다. 이제 Grok Bot이 Claude Code를 열고 개발을 시킵니다.

6-1. Claude Code와 GitHub 저장소 연결하기

Claude Code(웹)는 GitHub 저장소에 연결해서 작업합니다. 연결 과정에는 GitHub 쪽 권한 승인 화면이 나올 수 있으니, 이런 경우는 대신 연결 작업을 해주세요.

Claude Code 를 열고, 우리 GitHub 저장소(저장소 이름)에 연결해줘.GitHub 권한 승인 화면이 나오면, 가능하면 이 저장소 하나만 접근을 허용하는 방식으로 진행해줘 내 확인이 필요한 화면이 나오면 나에게 넘겨줘 연결이 끝나면, Claude Code 가 저장소의 Concept.md, Design.md, ToDo.md 를 읽을 수 있는지 확인해줘

6-2. 개발 시작 프롬프트

v1의 개발 시작 프롬프트를 거의 그대로 씁니다. 차이는 Grok Bot이 Claude Code에게 전달하고, 진행 상황을 여러분에게 쉬운 말로 보고한다는 점입니다.

Claude Code 에서 새 작업을 시작하고 아래 내용을 그대로 전달해줘:이 프로젝트를 개발해줘. 저장소에 있는 다음 문서를 기준으로 진행해:Concept.md : 만들려는 앱에 대한 설명 ToDo.md : 모듈 단위 개발 계획 (이 순서대로 구현해) Design.md : 디자인 기준 (모든 UI는 이 문서와 확정된 Claude Design 화면을 따라) 작업 규칙:ToDo.md 의 구현 순서대로 한 번에 한 모듈씩 진행해 테스트 가능한 단위가 완성되면, 실행/테스트 방법을 README 에 초보자도 알 수 있게 적어줘 완료된 항목은 ToDo.md 에 체크 표시해 작업은 작업 브랜치에서 하고, 알아보기 쉬운 커밋 메시지로 push 해 불명확한 부분이 있으면 추측하지 말고 질문해 그리고 Grok Bot, 너는:Claude Code 가 질문하면 내가 답할 수 있게 쉬운 말로 바꿔서 나에게 물어봐 모듈 하나가 끝날 때마다 "무엇이 완성됐는지 / 어떤 브랜치에 올라갔는지 / 내가 뭘 테스트하면 되는지" 를 3줄로 보고해줘

💡 Claude Design에서 Claude Code로 디자인을 바로 넘기는 기능이 있다면, Grok Bot이 그걸 활용하는 게 화면을 가장 정확하게 옮기는 방법입니다. 3-5에서 물어봤던 내용을 Grok Bot이 기억하고 있을겁니다. 제대로 전달이 안되는것 같다면, 직접 테스트 할 때 사용했던 URL을 참고하라고 함께 전달하면 됩니다.

6-3. 브랜치는 Grok Bot이 관리합니다

v1에서는 브랜치 확인하고, 받아오고, PR 만들고, merge하는 걸 다 직접 했죠. 이제는 원칙만 정해주고 Grok Bot에게 맡깁니다.

앞으로 GitHub 브랜치 관리는 네가 해줘. 규칙은 이거야:main 은 항상 잘 동작하는 완성본만 둔다. main 에서 직접 개발하지 않는다. 기능 단위로 작업 브랜치를 나눈다. (예: feature/login, feature/vote) 작업 브랜치에서 개발하고, 미리보기로 내가 테스트해서 "좋아" 라고 하면 그때 main 으로 merge 하고 push 한다. merge 하기 전에 무엇이 바뀌는지 3줄로 요약해서 나에게 확인받는다. 충돌(conflict)이 나면 직접 해결하고, 어떻게 해결했는지 쉬운 말로 설명해줘. 다 쓴 작업 브랜치는 merge 후에 정리해줘. 배포는 항상 main 기준으로 한다. 단, 테스트용 미리보기는 작업 브랜치로 해도 된다.

이 규칙 덕분에 main은 언제나 "배포 가능한 상태"로 유지됩니다. 뭔가 크게 망가져도 main으로 돌아가면 항상 동작하는 버전이 있는겁니다.

7. 미리보기 — Grok Build로 배포하고 테스트하기

코드가 만들어졌으면 직접 테스트하는게 좋습니다. v1에서는 작업 브랜치를 내 PC로 받아서 직접 실행해야 했는데, 이게 비개발자에게는 꽤 어려운 일이었습니다. 2.0에서는 Grok Build 에 GitHub 저장소를 불러와서 배포하고, 링크로 바로 확인합니다.

7-1. Grok Build 연결하고 저장소 불러오기

Grok Build 를 열고, 우리 GitHub 저장소(저장소 이름)를 불러와서(import) 연결해줘.GitHub 권한 승인이나 로그인 화면이 나오면, 내 확인이 필요한 부분은 나에게 넘겨줘 저장소를 불러오는 방식이 여러 가지라면, 어떤 방식인지 나에게 먼저 알려줘 연결이 끝나면 Grok Build 에서 이 프로젝트가 실행되는지 확인해줘

7-2. 배포하고 미리보기 링크 받기

Grok Build 에서 이 프로젝트를 배포해서, 내가 휴대폰과 PC 에서 바로 테스트할 수 있는 미리보기 URL 을 만들어줘.지금 테스트할 브랜치는 (작업 브랜치 이름 또는 main) 이야 공개 범위는 "나만" 또는 "링크가 있는 사람" 으로 해줘. 전체 공개는 내가 말할 때만 해 배포가 실패하면 에러 내용을 그대로 Claude Code 에 전달해서 고치게 하고, 다시 배포해줘 성공하면 URL 과 함께 "이번에 테스트할 것" 목록을 정리해서 알려줘 관리자 화면이 있다면 관리자 화면 주소와 테스트용 로그인 방법도 알려줘

💡 Grok Build에서 수정한 내용이 생기면, GitHub 저장소에도 반영되어야 다음 개발이 꼬이지 않습니다. Grok Bot에게 이렇게 지시하면 됩니다.

Grok Build 쪽에서 코드가 바뀌면 반드시 GitHub 저장소에도 반영해줘. 항상 GitHub 저장소가 최신 원본이어야 해.

8. 전체 프로세스 확인 — 테스트하고 수정 요청하기

전체 내용을 한 바퀴 다시 정리해 봅니다.

1. 기획 — 무엇을 만들지 말한다 (Concept.md)

2. 디자인 — Grok Bot이 Claude Design으로 화면을 만들고 테스트 링크를 가져온다

3. 개발 — Grok Bot이 Claude Code로 기능을 구현한다

4. 저장 — Grok Bot이 GitHub 작업 브랜치에 커밋한다

5. 미리보기 — Grok Bot이 Grok Build로 배포하고 URL을 가져온다

6. 테스트 — 내가 직접 링크를 열어서 써본다

7. 수정 요청 — 고칠 점을 Grok Bot에게 말한다 → 2번 또는 3번으로 돌아가 반복

8. 완성 — 다 마음에 들면 Grok Bot이 main에 merge하고 main 기준으로 배포한다

8-1. 수정 요청 프롬프트

테스트해보고 문제가 있으면 이렇게 보냅니다.

미리보기 테스트해봤어. 고칠 점:회원가입 버튼을 누르면 아무 반응이 없어 (휴대폰 사파리에서) 모임 목록이 날짜순이 아니라 뒤죽박죽이야. 가까운 날짜부터 보여줘 [스크린샷 첨부] 이 화면에서 글자가 버튼 밖으로 삐져나와 화면 디자인 문제는 Claude Design 기준(Design.md)에 맞게, 기능 문제는 Claude Code 로 고쳐줘. 같은 작업 브랜치에서 고치고, 다시 미리보기 배포해서 URL 가져다줘. 뭘 고쳤는지도 짧게 알려줘.

에러 메시지가 화면에 보이면, 요약하지 말고 그대로 복사하거나 스크린샷으로 보내주세요.

8-2. 다음 단계로 넘어가기

문제가 없으면 이렇게만 말하면 됩니다.

좋아, 이번 기능은 완벽해. main 에 merge 해주고, ToDo.md 의 다음 모듈 개발 계속 진행해줘.

8-3. 화면 자체를 크게 바꾸고 싶을 때

개발 중간에 "아, 화면 구성을 바꾸고 싶다" 싶으면 디자인 단계로 돌아갑니다. 코드를 바로 고치게 하는 것보다 이게 깔끔해요.

화면 구성을 바꾸고 싶어. 개발은 잠시 멈추고, Claude Design 으로 돌아가서 (바꾸고 싶은 내용) 을 반영해줘. 새 테스트 URL 을 가져다주고, 내가 확정하면 Design.md 를 업데이트한 다음 Claude Code 에 반영해줘.

8-4. 최종 배포

모든 기능이 완성됐어. 최종 점검해줘:모든 작업 브랜치가 main 에 merge 됐는지 ToDo.md 체크리스트가 다 끝났는지 관리자 비밀번호가 기본값(12345)에서 바뀌었는지 코드나 설정 파일 안에 비밀번호나 API 키가 그대로 적혀 있지 않은지 점검 결과를 알려주고, 내가 승인하면 main 기준으로 배포해줘.

9. 프롬프트 작성 요령 — Grok Bot 버전

바이브 코딩의 품질은 프롬프트 품질에 비례합니다. 이제 대화 상대가 Grok Bot이 됐으니, v1의 요령을 조금 편하게 지시해도 됩니다.

1. 하지 말아야 할 것도 편하게 명시합니다 — "내가 승인하기 전까지 main 에 merge 하지 마", "라이브러리 추가하지 말고 기존 스택으로만", "결제나 계정 설정은 건드리지 마"

2. 한 번에 하나의 모듈 — 전체 앱을 한 프롬프트로 시키면 품질이 떨어집니다. ToDo.md 순서대로 잘게 시키세요.

3. 에러는 그대로 전달하세요 — 에러 메시지를 요약하지 말고, 화면에 보이는 그대로 복사하거나 스크린샷을 찍어서 Grok Bot에게 주세요.

4. 애매하면 물어보게 하세요 — "불명확한 부분이 있으면 추측하지 말고 나에게 질문해" 를 꼭 넣으세요. Grok Bot에게는 "Claude 가 질문하면 쉬운 말로 바꿔서 나에게 물어봐" 도 함께요.

5. 문서를 기준으로 대화하세요 — "아까 말한 것처럼" ❌ → "Design.md 디자인대로" ✅. 대화 기억보다 저장소에 있는 문서가 훨씬 안정적입니다.

6. 누가 할 일인지 분명하게 — "Claude 에게 이렇게 전달해줘" (Claude가 할 일) 와 "너는 이걸 나에게 요약해줘" (Grok Bot이 할 일) 를 구분해서 말하면 훨씬 정확하게 움직입니다. 물론 Grok Build 에게도 코딩 수정을 시킬 수도 있습니다.

7. 보고 형식을 정해주세요 — "끝나면 URL, 바뀐 점 3줄, 내가 테스트할 것 목록으로 알려줘" 처럼 정해두면, 매번 긴 설명을 읽지 않아도 됩니다.

8. 로그인·인증·결제는 내가 — 비밀번호와 인증 코드는 채팅에 쓰지 말고, Grok Bot이 화면을 넘겨줄 때 직접 입력하세요.

맺음말

v1에서는 "문서를 먼저 만들고 개발하자" 를 이야기했다면, 2.0에서는 거기에 하나를 더했습니다. "실무를 Grok Bot에게 맡기고, 나는 판단에 집중하자."

Git 명령어를 몰라도, 터미널을 한 번도 안 열어봐도 괜찮습니다. 무엇을 만들고 싶은지 말하고, 링크를 눌러서 써보고, 마음에 안 드는 걸 그대로 표현하는 것. 그게 이제 여러분이 하는 "개발"입니다.

첫 프로젝트는 어설퍼도 괜찮습니다. 몇 번만 진행해보면, 쉽게 내 서비스가 상품으로 탄생하는 경험을 하게 될겁니다.

끄읕.

옛 선인인 모피어스께서 말씀하셨습니다.

"네오. 내가 널 데려오는 건 문지방 앞까지다. 적어도 문 정도는 니 손목으로 여세요."

…2.0에서는 문까지 Grok Bot이 열어드립니다. 들어가는 건 여러분 몫입니다. 🚪

부록. Git을 직접 배워보고 싶은 분을 위한 짧은 요약

Grok Bot에게 맡겨도 충분하지만, 원리를 알고 싶거나 내 PC에서 직접 만져보고 싶은 분을 위해 v1의 내용을 짧게 줄여뒀습니다. 기초부터 차근차근 배우고 싶다면 무료 강의도 추천합니다:

https://nomadcoders.co/git-for-beginners

A-1. 설치할 것 두 가지

• Git — 버전 관리 도구 (세이브 포인트를 만들어주는 프로그램)Windows: https://git-scm.com/download/win 에서 받아 설치. 옵션은 기본값 그대로 "Next". Mac: 터미널에서 git --version 입력. 설치 안내 팝업이 뜨면 "설치" 클릭. 확인: git --version 을 입력해서 버전이 나오면 성공.

• VS Code — 코드 편집기. https://code.visualstudio.com 에서 받아 설치. (Mac은 응용 프로그램 폴더로 옮겨서 실행)

A-2. 내 이름 등록 (최초 1회)

git config --global user.name "홍길동" git config --global user.email "내GitHub가입이메일@example.com"

A-3. 저장소를 내 PC로 가져오기 (clone)

1. GitHub 저장소 페이지에서 초록색 Code 버튼 → HTTPS 주소 복사

2. VS Code에서 Ctrl+Shift+P (Mac은 Cmd+Shift+P) → "Git: Clone" → 주소 붙여넣기

3. 저장할 폴더를 고르고 "열기"

A-4. 꼭 알아야 할 명령어 네 개

git add . # 바뀐 파일 전부 담기 git commit -m "무엇을 했는지" # 내 PC에 세이브 git push # GitHub에 올리기 git pull # GitHub에서 내려받기

A-5. 브랜치 다루기

git branch # 지금 어떤 브랜치인지 확인 (* 표시) git fetch # GitHub의 최신 브랜치 목록 가져오기 git checkout 브랜치이름 # 그 브랜치로 전환

⚠️ 브랜치를 바꾸면 폴더 안의 파일이 통째로 그 브랜치 상태로 바뀝니다. 파일이 사라진 것처럼 보여도 놀라지 마세요. 다른 브랜치에 그대로 있어요.

A-6. 기억할 순서 하나

작업 브랜치에서 개발 → 테스트 → Pull Request로 main에 병합 → main에서 배포