AI 코딩 도구라면: 아래 '단계 지도'부터 따른다. 이 위쪽은 사람을 위한 소개다.
HRUM(흐름) · 바이브코딩 시리즈 01 · 무료 공개 전자책
코드 한 줄 몰라도 됩니다. AI 코딩 도구에게 시작 문장 한 줄을 건네면, AI 가 이 책을 단계별로 읽으며 앱을 만들고 RIDM Apps(앱 호스팅)에 올려 내앱.ridm.ai 주소로 공개합니다.
https://console.hrum.ai/sajuEbook/tarot/ 을 열고, 그 지도의 단계 순서대로 해당 페이지만 읽으며 [AI 시작 지침]대로 나와 함께 타로앱을 만들어줘. 코드는 내가 제작 결정서를 승인한 뒤에만 써.
HRUM·GitHub(고른 경우) 가입, 약관 동의, API 키 같은 비밀값 입력은 여러분이 직접 합니다. AI 가 대신 가입하거나 결과를 보장하지는 않습니다. AI 도구에 HRUM MCP 를 등록하면 가입 신청과 키 저장은 AI 가 하고, 여러분은 메일로 온 승인 화면에서 숫자 하나를 눌러 승인합니다(1-1).
npm run check 한 번에 책 코드 대조 → 빌드 → 테스트 → npm audit이 책을 쓰면서 RIDM Apps 에 실제로 올려 가입·상담·재로그인까지 검증한 코드입니다. AI 는 이 코드를 옮겨 쓰지 않고 책 그대로 받습니다.
만들기 전에 써보고 싶다면 같은 HRUM 엔진으로 만든 인타 앱 — App Store · Google Play · inta.do/app
여기부터 AI용 지도 — AI 코딩 도구는 이 아래를 따른다
핵심 규칙 — AI 는 어느 페이지에서든 이것을 지킨다
node scripts/get-book-code.mjs 가 책 그대로 만든다(첫 실행은 부록 A-2 의 curl 한 줄). AI용 분할본의 코드 자리는 " 경로" 한 줄이다 — 그 파일을 cat 으로 읽는다. 고쳐도 되는 파일은 PART 0 [AI 시작 지침] 5-b 의 목록뿐이다.node scripts/verify-book-code.mjs 를 실행해 "불일치 0개" 출력을 그대로 보인다.이 지도는 AI 코딩 도구가 읽는 분할본의 첫 페이지입니다. 아래 단계 순서대로, 지금 단계에 적힌 페이지만 열어 읽습니다. 다음 단계 페이지는 지금 단계의 "끝났다는 증거"(명령 출력)를 사용자에게 보인 뒤에 엽니다. 각 페이지 머리에 핵심 규칙과 "이 페이지 전에 읽을 페이지"가 있습니다.
node scripts/verify-book-code.mjs 부터 실행한다. 규칙을 잊지 않도록 0단계 PART 0 사용법·AI 시작 지침 는 다시 읽는다.| 단계 | 읽을 페이지 | 끝났다는 증거(명령 출력) | 다음 |
|---|---|---|---|
| 0. 규칙 | PART 0 사용법·AI 시작 지침 | 명령 없음 — 핵심 규칙과 [AI 시작 지침] 0~7 을 읽었다(사용자에게 보낼 첫 메시지는 1단계 페이지를 읽은 뒤의 0.5 질문) | 1단계 |
| 1. 준비·결정서 | PART 1 계정 준비 PART 2 기본기 PART 3 컨셉·페르소나 PART 4 결정서·마스터 스펙 PART 9 원가·가격·결제 | 0.5 질문 → 4-0 결정 항목을 한 메시지로 → [제작 결정서]에 대한 사용자의 명시적 승인("승인"·"이대로 진행")과 PROGRESS.md 의 결정서 사본. 유료화는 9-4 대로 결정서에 적는다. 계정 게이트(PART 1)는 사용자의 "완료" 답(MCP 경로면 hrum_issue_key 의 saved: true·gitignored: true 출력) | 2단계 |
| 2. 코드 받기 | 부록 A 스펙·코드 받기(A-2) | node -v → v22.12 이상 · 빈 폴더에서 A-2 의 curl 한 줄 → git init -b main → node scripts/verify-book-code.mjs → "불일치 0개" · npm install 오류 없음 | 3단계 |
| 3. 화면 | PART 5 타로 뽑기 화면 PART 6 상담 채팅 부록 C API 요약표 | 수정 허용 파일만 결정서대로 고친 뒤 npm run build 에러 0 · npx vitest run 전부 통과 · node scripts/verify-book-code.mjs → "불일치 0개" | 4단계 |
| 4. 보안·테스트 | PART 7 보안·테스트 | npm run check 전부 통과 + DB 테스트 한 줄(5-f) · node scripts/smoke-live.mjs http://localhost:3000 --quick 실패 0개 · grep -r "float_live_" app/ components/ lib/ 출력 없음 | 5단계 |
| 5. 배포 | PART 8 배포 | curl -s -A "Mozilla/5.0" https://이름.ridm.ai/api/health 의 commit = git rev-parse HEAD · node scripts/smoke-live.mjs https://이름.ridm.ai 실패 0개 | 6단계(결정서에 선택 기능이 없으면 완료 보고 5-f) |
| 6. 선택 기능 — 결정서에 고른 것만 | 부록 B 레시피 B-4 부록 B-7 관리자 페이지 (결정서에 테이블 추가·가족 원국·리포트 보관이 있으면) 부록 E 앱 DB 테이블 늘리기 | 고른 레시피마다 그 레시피의 완료 기준 · 다시 npm run check 통과 · push 뒤 health commit 일치 · node scripts/smoke-live.mjs https://이름.ridm.ai 실패 0개(B-2 를 붙였으면 --compat) | 완료 보고(PART 0 5-f) |
| 7. 운영·개정 — 필요할 때만 | 부록 D 트러블슈팅 부록 E 앱 DB 테이블 늘리기 | 개정: verify 가 "다름"이면 PART 0 지침 5-b 의 네 단계(옛 판에서 이어 오면: 예전 책대로 lib/db.ts 의 SCHEMA 에 덧붙인 테이블은 lib/schema-extra.ts 로 옮기고(부록 E), 프록시·app/api/history 에 넣었던 기능(원국 여러 개·대화 기록 저장)은 lib/app-hooks.ts 로 옮긴다(부록 E-0·E-1).) → npm run check 통과 → push. 막힘: 부록 D 조치 뒤 그 단계의 증거를 다시 보인다. 테이블 추가: 부록 E 뒤 npm run check(테스트 DB 가 있으면 TEST_DATABASE_URL 과 함께) | 해당 단계로 돌아간다 |
본문이 "8-2 참조"처럼 다른 섹션을 가리키면 이 표로 페이지를 찾는다. [AI 시작 지침] 0~7(5-b 개정 절차·5-f 완료 보고 포함)은 PART 0 사용법·AI 시작 지침 에 있다.
| 번호 | 섹션 | 페이지 |
|---|---|---|
| 1-1 | HRUM 콘솔 가입과 API 키 발급 | PART 1 계정 준비 |
| 1-2 | HRUM 키를 안전하게 저장 — 값은 사용자만 입력 | PART 1 계정 준비 |
| 1-3 | 도구 선택 — 셋 중 하나면 충분 | PART 1 계정 준비 |
| 1-4 | 코드 보관 고르기 — GitHub 는 선택 | PART 1 계정 준비 |
| 1-5 | RIDM Apps — 여러분 앱이 올라갈 곳 (미리 알아두기) | PART 1 계정 준비 |
| 2-1 | 바이브코딩이 실패하는 세 가지 이유 | PART 2 기본기 |
| 2-2 | 마법의 문장들 (불평 사전) | PART 2 기본기 |
| 3-1 | 컨셉 한 줄 공식 | PART 3 컨셉·페르소나 |
| 3-2 | 페르소나 설계 공식 (앱 캐릭터의 기준) | PART 3 컨셉·페르소나 |
| 3-3 | 완성 페르소나 예시 3종 (그대로 써도 됨) | PART 3 컨셉·페르소나 |
| 3-4 | 디자인 고르기 — 갤러리에서 훔쳐오는 법 | PART 3 컨셉·페르소나 |
| 4-0 | 개발 전 필수 결정 — AI가 코드를 치기 전에 반드시 물어야 하는 것들 (기술 + 창작 4 + 코드 보관) | PART 4 결정서·마스터 스펙 |
| 4-1 | 붙여넣기 전에 채울 것 (4-0의 결정서 하나에서 그대로 옮겨 담기) | PART 4 결정서·마스터 스펙 |
| 4-2 | 마스터 스펙 프롬프트 (부록 A에 전문 — 여기선 실행) | PART 4 결정서·마스터 스펙 |
| 4-3 | 나왔는지 검증 (완료 기준 체크) | PART 4 결정서·마스터 스펙 |
| 5-0 | 모든 화면이 쓰는 호출 헬퍼와 이 앱의 주제 | PART 5 타로 뽑기 화면 |
| 5-1 | 타로 뽑기 화면 | PART 5 타로 뽑기 화면 |
| 6-1 | 두 가지 상담 모드 (앱 성격에 따라 선택) | PART 6 상담 채팅 |
| 6-2 | 사주 상담 채팅 [메인 레시피] | PART 6 상담 채팅 |
| 6-3 | 페르소나를 채팅에 입히기 | PART 6 상담 채팅 |
| 6-4 | 흔한 함정 | PART 6 상담 채팅 |
| 7-1 | 실화 하나 | PART 7 보안·테스트 |
| 7-2 | 3중 방어선 | PART 7 보안·테스트 |
| 7-3 | 셀프 보안 점검 (배포 전 3분) | PART 7 보안·테스트 |
| 7-3-1 | 배포 전 보안 점검표 — 프록시·입력·한도 (3분) | PART 7 보안·테스트 |
| 7-3-2 | AI에게 코드를 시킬 때 같이 붙여 넣을 보안 지시문 · 검수 체크리스트 | PART 7 보안·테스트 |
| 7-4 | 그래도 유출됐다면 (1분 응급처치) | PART 7 보안·테스트 |
| 7-5 | 자동 테스트 — 타임아웃·동시 중복 요청·로그인 (브라우저 쓰로틀 금지) | PART 7 보안·테스트 |
| 7-6 | 배포 전 기록·격리 체크 (3분) | PART 7 보안·테스트 |
| 8-0 | 배포 파일 — 저장소 루트에 둔다 | PART 8 배포 |
| 8-1 | GitHub에 올리기 — 웹 배포에 필요 | PART 8 배포 |
| 8-2 | RIDM Apps 신청과 연결 | PART 8 배포 |
| 8-3 | 배포 후 스모크 테스트 | PART 8 배포 |
| 8-4 | 앱 운영하기 | PART 8 배포 |
| 8-5 | 출시 방법 고르기 — 웹 · 앱 · 토스 미니앱 (선택 · 결정서 범위 밖) | PART 8 배포 |
| 8-6 | 내 도메인으로 열기 — 연결 또는 구매 (선택 · 결정서 범위 밖) | PART 8 배포 |
| 9-1 | 상담 1회 원가 (실측 기준) | PART 9 원가·가격·결제 |
| 9-2 | 크레딧 관리 | PART 9 원가·가격·결제 |
| 9-3 | 수익화 아이디어 3단계 | PART 9 원가·가격·결제 |
| 9-4 | 결제 붙이기 — PG사와 직접 계약 | PART 9 원가·가격·결제 |
| 9-5 | 대성공하면? — 이 구조가 버티는 범위와 증축 시점 | PART 9 원가·가격·결제 |
| A-2 | 나머지 뼈대 파일 ([완전 코드] — 한 페이지형 예시) | 부록 A 스펙·코드 받기(A-2) |
| B-4 | 페르소나 갈아끼우기 (같은 앱, 다른 장사) | 부록 B 레시피 B-4 |
| B-7 | 관리자 페이지 (회원 관리·정지·요약 숫자) | 부록 B-7 관리자 페이지 |
| E-1 | 대화 기록을 우리 DB에도 남기기 (기억 "불필요"를 고른 앱만) | 부록 E 앱 DB 테이블 늘리기 |
| E-3 | 용량과 점검 | 부록 E 앱 DB 테이블 늘리기 |
| E-4 | 이 구조의 숨은 장점 | 부록 E 앱 DB 테이블 늘리기 |