글: head77x (@brandonchung75) · 2026-10-13 게시
원문 링크: https://x.com/brandonchung75/status/2110018445081518117
비개발자도 Grok Bot을 현장감독으로
바이브 코딩 가이드 2.0 정리와 AX 컨설턴트의 리뷰
안녕하세요, 시니어 AX 컨설턴트 찰리초이입니다. 코딩을 모르는 분들이 가장 자주 하시는 질문이 "그래서 저는 어디까지 해야 하나요?"예요. 이번에 소개할 가이드는 그 질문에 꽤 시원한 답을 줍니다. 발품은 봇에게 맡기고, 나는 판단에만 집중하자는 거죠.
1. 한눈에 보는 핵심
1.0 버전이 "문서를 먼저 잘 만들자"였다면, 2.0은 한 걸음 더 나갑니다. 사람이 하던 클릭, 로그인 화면 열기, 깃허브 정리, 배포 링크 만들기를 Grok Bot이 대신 돌아다니며 처리하고, 사람은 결과를 보고 "OK / 고쳐줘"만 말하는 구조예요. 영화 매트릭스의 모피어스 장면을 패러디한 마무리도 재미있습니다.
- Grok / Grok Bot 계정 (Grok premium+)
- Claude 유료 플랜 (Pro / Max / Team) → Claude Design과 Claude Code 사용
2. 7단계 반복 루프
| 순서 | 할 일 | 누가 움직이나 |
|---|---|---|
| 1 | Concept.md로 기획 정리 | 나 + Grok Bot |
| 2 | Claude Design으로 화면 디자인 | 봇이 조작 |
| 3 | Claude Code로 개발 | 봇이 조작 |
| 4 | GitHub에 커밋·브랜치로 저장 | 봇이 관리 |
| 5 | Grok Build로 미리보기 배포 | 봇이 링크 전달 |
| 6 | 링크 열어서 직접 테스트 | 나 |
| 7 | 고칠 점을 봇에게 요청 | 나 |
2~7번을 계속 돌리면서 서비스를 키워 가는 방식이에요.
3. 단계별로 쓱 훑어보기
① 봇과 첫 만남: 프로젝트당 채팅 하나
프로젝트마다 채팅방을 하나만 씁니다. 봇이 claude.ai 로그인 화면을 열어 주면, 비밀번호와 2단계 인증은 사람이 직접 입력해요. 로그인 상태는 봇의 브라우저에 남습니다. 기본 규칙은 세 가지예요.
- 채팅으로 비밀번호를 요구하지 않는다
- 결제나 플랜 변경은 하지 않는다
- 모르면 추측하지 말고 먼저 묻는다
② 기획: 아이디어 2~3줄이면 충분
예를 들어 "동네 모임의 일정, 참석 투표, 회비를 관리하는 웹서비스"처럼 짧게 던지면 됩니다. Concept.md에는 누가 / 무엇을 / 왜만 적고, 수정은 대화로 해요.
③ 디자인: 문서보다 '눌러지는 화면'부터
1.0에서는 Design.md를 먼저 썼지만, 2.0은 순서를 바꿨어요. 화면 목록 → 클릭되는 프로토타입 → 모바일 화면 순서로 만든 뒤, 마음에 드는 모습을 Design.md로 고정합니다. linear.app, stripe.com, toss.im 같은 참고 사이트를 봇이 분석해서 레이아웃, HEX 컬러, 글꼴, 간격, 버튼·카드·입력창 스타일, 다크모드까지 문서에 담아요.
- 테스트 URL은 링크 소유자만 볼 수 있게 공유
- 수정 요청은 3~5개씩 묶어서, 스크린샷과 함께 보여 달라고 하기
- 최종 URL은 Design.md 맨 위에 적어 두고, Design → Code 핸드오프까지 염두에 두기
④ 깃허브: 쉬운 비유로 이해하기
봇 전용 이메일을 만들고(계정당 하나), 봇이 깃허브에 가입합니다. 캡차는 사람이 풀어 주고요. 비공개 repo와 README를 만들어 Concept, Design 문서를 첫 커밋으로 올립니다. 유료 플랜은 금지, 가입 후엔 비밀번호를 바꿔 두는 것이 권장돼요.
⑤ 기술 스택과 ToDo.md
어디서든 CLI로 돌릴 수 있는 구성(Node + npm 또는 Python + uv)을 권합니다. 개발자용 프롬프트는 React, Node, MariaDB와 설치 스크립트를 지정하고, 비개발자용은 "웹/설치형/모바일 중 추천해 줘, React나 Flutter, MariaDB나 로컬 DynamoDB 중 골라 줘"처럼 봇에게 묻는 형태예요.
서버가 있는 서비스라면 관리자 대시보드가 필수입니다. 헬스체크, 핵심 지표, 최근 오류와 로그, 배치·큐 상태를 볼 수 있어야 해요. 임시 계정(admin/12345)은 반드시 바꾸라고 합니다. 그리고 개발 전에 ToDo.md에 모듈 계획(모듈 구조, 입출력, 의존 순서 체크박스, DB 스키마, 비기술자용 테스트 절차)을 만들어 두고 점점 다듬어 가요.
⑥ 개발: 모듈 하나씩, 보고는 3줄로
Claude Code 웹에는 이 repo만 연결하고 모듈을 하나씩 만들게 합니다. 끝나면 README에 테스트 방법을 적고, ToDo를 체크하고, 작업 브랜치에 push해요. 봇은 Claude의 어려운 질문을 쉬운 말로 번역해 주고, 모듈마다 무엇을 / 어느 브랜치에 / 무엇을 테스트할지 3줄로 보고합니다.
main에서 직접 개발 금지 · 작업은 feature/xxx 브랜치에서 · 3줄 요약을 보고 내가 OK 할 때만 merge · 충돌은 봇이 해결 · 배포는 main에서
⑦ 배포: 실패하면 오류를 그대로 전달
Grok Build가 repo를 가져와 브랜치를 배포합니다. 공개 범위는 '나만' 또는 '링크 소유자'. 실패하면 오류 메시지를 요약하지 말고 그대로 Claude Code에 넘겨요. 결과로는 URL, 테스트 목록, 관리자 로그인 정보를 받고, 원본은 항상 GitHub입니다.
⑧ 테스트와 수정 루프
"사파리에서 가입 버튼이 안 눌려요", "날짜순으로 정렬해 주세요", "버튼 밖으로 글자가 넘쳐요" 같은 식으로 오류 원문이나 스크린샷과 함께 전달합니다. 마음에 들면 "main에 merge하고 다음 ToDo 모듈 진행해"라고 말하면 돼요. 큰 UI 변경은 다시 Claude Design에서 합니다.
- 모든 브랜치가 merge되었는가
- ToDo가 전부 완료되었는가
- 관리자 비밀번호를 바꿨는가
- 코드에 하드코딩된 비밀번호나 API 키가 없는가
- 승인 후 main을 배포했는가
⑨ 프롬프트 팁 7가지
| 하지 말 것을 적기 | 금지 사항을 명시해 사고를 막아요 |
| 모듈 하나씩 | 한 번에 크게 시키지 않아요 |
| 오류는 그대로 | 내 말로 바꾸지 말고 원문 전달 |
| 모호하면 묻게 하기 | 추측 대신 질문하도록 요청 |
| 기억 말고 문서 | "Design.md대로 해줘" |
| 보고 형식 고정 | URL, 3줄 변경 요약, 테스트 목록 |
| 민감한 일은 직접 | 로그인, 인증, 결제는 사람이 |
부록으로 Git 기초(설치, config, VS Code clone, add/commit/push/pull, 브랜치, PR)와 무료 강의(노마드코더 git-for-beginners) 안내도 있어요. 깃이 낯선 분은 여기서 시작하셔도 좋습니다.
4. 찰리초이의 리뷰
- 문서 중심이라 흔들리지 않아요. 바이브 코딩은 대화가 길어지면 길을 잃기 쉬운데, 문서가 기준점이 되어 줍니다.
- 디자인을 먼저 보고 문서로 고정하는 순서가 비개발자의 눈높이에 잘 맞아요.
- 안전 규칙이 분명해요. 로그인·결제·2FA는 사람이, merge는 승인 후, 하드코딩된 키는 점검까지 챙깁니다.
- 보고 형식이 고정되어 있어서 비개발자는 판단에만 집중할 수 있어요.
- 비용과 사용량 한도 언급이 없어요. Claude Design과 Claude Code 웹은 쓰다 보면 한도에 닿을 수 있어서, 초보자에겐 미리 알려 주는 편이 좋겠습니다.
- 브라우저로 Claude 웹 화면을 조작하는 방식은 느리고, 화면이 바뀌면 쉽게 헤매요. 저는 Grok Bot의 자체 클라우드 컴퓨터에 Claude Code와 Codex CLI(구독 버전)를 설치해서 쓰는데, 이쪽이 훨씬 빠르고 안정적이었습니다.
- admin/12345와 봇이 만든 GitHub 계정은 초보자가 그대로 따라 하면 보안 위험이 될 수 있어요. 임시 값이라도 처음부터 강한 비밀번호와 2단계 인증을 권합니다.
- DB 선택 기준이 이미지로만 제공되어 글로 따라가기 어려웠어요.
5. AX 컨설팅에서는 이렇게 쓸 수 있어요
- 사회적기업 실무자(비개발자)를 위한 실습 커리큘럼 뼈대로 거의 그대로 쓸 수 있습니다. 기획 → 디자인 → 개발 → 배포 → 수정이라는 흐름이 교육 순서로 딱 맞아요.
- Google ADK 에이전트와 짝을 이룹니다. 이 방식으로 사용자가 보는 화면을 만들고, 그 뒤에 ADK 에이전트를 두뇌로 붙이는 거죠.
- 제가 쓰는 Grok Bot 안의 Claude Code + Codex 구성은 여기서 한 단계 더 나아간 형태예요. 현장감독(Grok Bot)이 작업자 둘을 한 사무실에서 부리는 셈입니다.
※ 이 글은 head77x(@brandonchung75)님의 X 아티클을 요약하고 개인 의견을 더한 리뷰입니다. 정확한 프롬프트와 세부 내용은 원문을 참고해 주세요.
댓글
댓글 쓰기