AI용 분할본 · 지도 1단계(준비·결정서) · 이 페이지 전에 읽을 페이지: PART 0 사용법·AI 시작 지침, PART 3 컨셉·디자인 · 코드 파일은 여기 없다 — 코드 자리의 줄을 따른다(폴더에 책 파일이 하나도 없는 처음이면 부록 A-2 의 curl 한 줄부터)
핵심 규칙 — AI 는 어느 페이지에서든 이것을 지킨다
node scripts/get-book-code.mjs 가 책 그대로 만든다(첫 실행은 부록 A-2 의 curl 한 줄). AI용 분할본의 코드 자리는 " 경로" 한 줄이다 — 그 파일을 cat 으로 읽는다. 고쳐도 되는 파일은 PART 0 [AI 시작 지침] 5-b 의 목록뿐이다.node scripts/verify-book-code.mjs 를 실행해 "불일치 0개" 출력을 그대로 보인다.이 장이 이 책의 심장입니다. 결정서 하나로 무엇을 만들지 고정하고, 마스터 스펙(부록 A)과 책 코드로 앱의 뼈대(가입·로그인·메모·보안·배포 파일)를 한 번에 받습니다.
(링크 모드에서는 PART 0의 [AI 시작 지침] 3~4번이 이 절과 PART 3의 공식을 하나의 흐름으로 자동 수행합니다. 수동 복사 모드에서는 아래 프롬프트 하나만 붙여넣으면 됩니다.) 바이브코딩이 어긋나는 가장 흔한 순간은 AI가 묻지도 않고 기능부터 만들 때입니다. 첫 코드 생성 전에 아래 항목을 결정하고, 그 답을 단 하나의 제작 결정서로 고정해 마스터 스펙 맨 위에 붙입니다. 승인은 이 결정서 전체에 대해 한 번만 받으며, 승인 후에는 추가 질문을 하지 않습니다. "고정"으로 표시된 항목은 묻지 않습니다 — 이 책의 경로(RIDM Apps + 앱 전용 DB + 책 코드)에서 답이 하나뿐이라 결정서에 그대로 적습니다. 정하지 않은 것을 임의로 확장하지 않고, 이미 답하거나 승인한 항목은 다시 묻지 않습니다.
| # | 결정 | 선택지 (장단점) | 초보자 기본값 |
|---|---|---|---|
| 1 | 화면 배치 | 두 칸형: 넓은 화면에서 왼쪽 목록 · 오른쪽 편집, 폰에서는 편집이 위·목록이 아래(책 코드 그대로) / 한 칸형: 넓은 화면에서도 편집 아래에 목록 — 글 쓰는 칸이 넓어짐, components/Notes.module.css 만 바꿈 | 두 칸형 |
| 2 | 누가 쓰나 (가입 방식·공개 범위) | RIDM Apps 주소는 누구나 열 수 있는 공개 주소라 로그인은 항상 만듭니다 — 로그인이 없으면 누구나 여러분의 DB에 글을 쌓을 수 있습니다. 여기서 묻는 것은 쓰임새입니다: 나 혼자·지인: 가입 화면은 두되 주소를 지인에게만 알림 · 불특정 다수: 가입을 열어 두고 요청 제한(7-2)을 그대로 유지 | 나 혼자·지인(주소를 아는 사람만 쓰는 작은 앱으로 시작 — 나중에 불특정 다수로 넓혀도 코드는 그대로) |
| 3 | 메모 항목 | 고정 — 제목(1~100자, 필수) + 내용(5,000자까지). 목록은 최근 수정순 50개씩 "더 보기". 회원마다 자기 메모만 보입니다(PART 6). 항목을 더하고 싶으면(태그·분류) 뼈대를 배포한 뒤 부록 E 로 새 테이블을 만듭니다 | 묻지 않음 |
| 4 | 배포 | 고정 — RIDM Apps. 콘솔에서 신청 → GitHub 연결 → 빌드가 성공하면 바로 <이름>.ridm.ai 공개(PART 8). 로컬에서만 돌려보는 것은 개발 과정이지 완료가 아닙니다 | 묻지 않음 |
| 5 | 모바일 우선 | 예: 세로 화면 기준으로 여백·글자 크기를 정함 / 아니오: 넓은 화면 기준 · 어느 쪽이든 390px 폭에서 가로 넘침 0 은 지킵니다 | 예 |
| 6 | 데이터 저장 | 고정 — 회원·세션·메모는 RIDM Apps가 붙여 주는 앱 전용 PostgreSQL(DATABASE_URL, 5-1 lib/db.ts가 첫 요청 때 테이블 생성). 파일·브라우저 저장소(localStorage)에 데이터를 두지 않습니다. 더 늘리고 싶을 때는 부록 E | 묻지 않음 |
| 7 | 관리자 페이지 (B-7) | 켬: 비밀 주소 + 비밀번호로 여는 관리자 화면 — 가입·메모 수 요약, 회원 검색·정지. 메모 내용은 관리자도 못 봄. 뼈대 배포 뒤 지도 6단계에서 켭니다 · 끔: 관리자 코드는 받아지지만 환경변수가 없어 꺼진 채(주소도 404) | 끔(뼈대부터 완성하고 필요할 때 켜기) |
| 8 | 로그인 방식 | 고정 — 아이디+비밀번호 가입, 가입 때 복구 코드 1회 표시(메일 발송 없음 — 비밀번호를 잊으면 복구 코드로 재설정). 외부 로그인 서비스(구글 로그인 등)는 이 책의 경로에 없습니다 | 묻지 않음 |
| 9 | 유료화 | 무료만: 결제 코드 없음 · 나중에 유료: 지금은 무료로 완성하고, 유료화할 때 PG사와 직접 계약해 붙임(9-2) | 무료만 |
| 여기부터 4가지는 창작 결정 — 선택지 대신 PART 3 공식으로 AI가 초안을 만들고 사용자가 확인·수정합니다 | |||
| 10 | 앱 이름 | 자유 입력. 예: 한줄서재 / 거래처노트 / 세줄일기 — 컨셉(11번)이 먼저 정해지면 AI가 어울리는 이름을 2~3개 제안. 앱 주소(이름.ridm.ai)용 영문 후보(소문자·숫자·하이픈)도 함께 제안 | 정하기 어려우면 컨셉을 먼저 정하고 그에 맞춰 AI가 제안 |
| 11 | 한 줄 컨셉 | 3-1 공식 [누구를 위한]+[어떤 순간에 쓰는]+[무엇을 남기는]으로 AI가 3-1의 예시 3개를 보여주고, 그대로 고르거나 직접 작성 | 3-1 예시 중 하나를 그대로 사용 |
| 12 | 화면 문구 | 메모를 부르는 말(메모·문장·일기…), 메모 화면 머리 문구, 브라우저 탭 제목·설명 — 컨셉에 맞춰 AI가 초안을 보여줌. 바꾸는 곳은 app/page.tsx·app/layout.tsx 뿐이고, 메모 목록·편집 안의 버튼 문구는 책 그대로입니다 | AI 초안 그대로 |
| 13 | 디자인 방향 | 문장으로 설명("크림 배경+먹색 세리프" 등) 또는 3-2 갤러리에서 캡처한 스크린샷 2~3장을 첨부 — 스크린샷이 있으면 AI가 분석해 무드를 한 줄로 요약. 네 도구에 디자인 스킬이 있으면 그것으로 구현. 적용하는 곳은 app/globals.css 의 디자인 토큰과 components/Notes.module.css | 컨셉에 맞는 무드를 AI가 한 줄로 제안 |
| 마지막 하나는 코드 보관 — 선택지에서 고릅니다 | |||
| 14 | 코드 보관 | GitHub Private 저장소: 컴퓨터가 고장 나도 코드가 남고 PART 8 웹 배포에 바로 연결 · 내 컴퓨터 git 만: 가입 없이 PART 7 까지 만들고 로컬에서 테스트 — RIDM Apps 는 GitHub 저장소에서만 코드를 가져가므로 PART 8 에서 가입(8-1), 그때까지 프로젝트 폴더를 가끔 다른 곳에 복사. 어느 쪽이든 GitHub 저장소는 반드시 Private(1-3) | GitHub Private |
한 가지 경로만 있습니다. 호스팅·DB·로그인·요청 제한이 전부 RIDM Apps와 여러분 앱 안에 있어서 고를 것이 적습니다. 로그인이 항상 들어가는 이유는 하나입니다: 공개 주소에 올린 앱은 서버가 사용자를 식별하지 못하면 "내 메모"라는 것이 성립하지 않고, 누구나 DB를 채울 수 있습니다.
기능 1:1 매핑 (결정서 → 화면 → 서버 라우트 → 확인) — 아래 표 밖의 조합은 만들지 않습니다.
| 기능 | 화면 | 서버 라우트 | 확인(7-5·8-3) |
|---|---|---|---|
| 가입·로그인·로그아웃·복구·탈퇴 (고정) | /signup·/login·/recover·첫 화면 맨 아래 탈퇴 (PART 5) | app/api/auth/*·app/api/me | 복구 코드 1회 / 로그아웃 뒤 401 / 실패 제한 429 / 다른 사이트 요청 403 / 탈퇴 뒤 401 |
| 메모 (고정) | / — components/Notes.tsx (PART 6) | app/api/notes/route.ts · app/api/notes/[id]/route.ts | 만들기 201 / 다른 회원의 메모 404 / Origin 없는 변경 403 / 비로그인 401 / 회원당 200개·하루 50개 429 |
| 관리자 (7번 "켬"일 때만 켬) | /<ADMIN_PATH> — components/AdminPanel.tsx (B-7) | app/[adminPath]/api/[...op]/route.ts | /admin 404 / 로그인 없이 숫자 401 / 틀린 비밀번호 401 |
[프롬프트 — 개발 전 필수 결정]
아직 코드를 만들지 마세요. 먼저 아래 항목을 한 메시지에 번호 목록으로, 항목마다 추천값과 이유를 붙여 한 번에 물어봐 주세요. 제가 일부만 답하면 나머지는 추천값으로 채워 주세요. "고정" 항목은 묻지 말고 결정서에 그대로 적어 주세요.
각 질문에는 선택지와 장단점, 그리고 초보자용 추천 기본값을 함께 보여 주세요. 10~13번은 선택지 나열 대신 초안을 직접 만들어 보여 주고 확인·수정을 받는 방식으로 진행해 주세요.
[기술]
1. 화면 배치: 두 칸형(목록|편집) / 한 칸형(편집 아래 목록) — 추천: 두 칸형
2. 누가 쓰나: 저 혼자·지인 / 불특정 다수 — 어느 쪽이든 아이디+비밀번호 로그인과 복구 코드는 만든다(공개 주소라서). 답은 안내 문구와 공개 범위에만 쓴다 — 추천: 저 혼자·지인(나중에 불특정 다수로 넓혀도 코드는 그대로)
3. 메모 항목: 고정 — 제목 1~100자 + 내용 5,000자, 최근 수정순 50개씩, 회원마다 자기 메모만. 묻지 않는다
4. 배포: 고정 — RIDM Apps (<이름>.ridm.ai). 묻지 않는다
5. 모바일 우선: 예 / 아니오 — 추천: 예
6. 데이터 저장: 고정 — 회원·세션·메모는 앱 전용 DB(DATABASE_URL). 묻지 않는다
7. 관리자 페이지(B-7): 켬 / 끔 — 추천: 끔(뼈대 배포 뒤 필요할 때 켠다). 켜면 가입·메모 수 요약과 회원 정지가 되고, 메모 내용은 관리자도 못 본다는 점을 설명한다
8. 로그인 방식: 고정 — 아이디+비밀번호, 가입 때 복구 코드 1회 표시, 메일 발송 없음. 묻지 않는다
9. 유료화: 무료만 / 나중에 유료(유료화할 때 PG사와 직접 계약해 붙임) — 추천: 무료만
[창작 4가지 — 이 책의 3-1·3-2 공식을 그대로 사용]
10. 앱 이름: 자유 입력 (예: 한줄서재 / 거래처노트 / 세줄일기). 주소용 영문 후보(소문자·숫자·하이픈 2~30자, 하이픈으로 시작·끝나거나 하이픈 두 개 연속 불가, 숫자만은 불가)도 2~3개 제안한다
11. 한 줄 컨셉: 3-1 공식 [누구를 위한]+[어떤 순간에 쓰는]+[무엇을 남기는]으로 예시 3개를 보여주고 고르거나 직접 쓰게 한다
12. 화면 문구: 메모를 부르는 말, 메모 화면 머리 문구, 브라우저 탭 제목·설명을 11번 컨셉에 맞춰 초안으로 보여준다(app/page.tsx·app/layout.tsx 에만 들어간다)
13. 디자인 방향: 문장 설명 또는 3-2 갤러리 스크린샷 첨부 중 하나로 받는다. 스크린샷이 있으면 무드를 한 줄로 요약해 확인받는다. 사용 중인 도구에 디자인 스킬이 있으면 구현 때 그것을 쓴다
[코드 보관]
14. 코드 보관: GitHub Private 저장소 / 제 컴퓨터 git 만 — 추천: GitHub Private(컴퓨터가 고장 나도 코드가 남고 PART 8 웹 배포에 바로 연결). 제 컴퓨터 git 만이면 PART 7 까지 로컬에서 만들고 테스트한 뒤 PART 8 에서 GitHub 에 가입한다(RIDM Apps 는 GitHub 저장소에서만 코드를 가져간다). 어느 쪽이든 GitHub 저장소는 반드시 Private
규칙:
- 제가 "추천대로"라고 답하거나 일부만 답하면 나머지는 추천 기본값으로 채운다(2번은 저 혼자·지인). 답하지 않은 것을 임의로 확장하지 않는다
- 이 책의 경로 밖 서비스(다른 호스팅·인증 서비스·DB 서비스·캐시·결제 대행·AI API)를 제안하지 않는다
- 답이 모두 모이면 아래 형식의 [제작 결정서] 단 하나를 출력하고, 사용자의 명시적 승인("승인", "이대로 진행")을 한 번만 받은 뒤에만 코드를 쓴다. 승인 후에는 이 결정서에 없는 추가 질문을 하지 않는다 — 이후 모든 작업에서 이 결정서를 유일한 스펙으로 취급한다
[제작 결정서]
- 화면 배치: 두 칸형 / 한 칸형 (components/Notes.module.css)
- 누가 쓰나: … (로그인·가입·복구 코드는 항상 — 5-1 lib/auth.ts)
- 메모 항목: 제목 1~100자 + 내용 5,000자, 최근 수정순 50개씩, 회원 격리 (고정)
- 배포: RIDM Apps — 앱 주소 후보: …
- 모바일 우선: …
- 데이터 저장: 앱 전용 DB(회원·세션·메모) (고정)
- 관리자 페이지(B-7): 켬 / 끔 (켬이면 지도 6단계에서 켠다)
- 로그인 방식: 아이디+비밀번호 + 복구 코드 (고정)
- 유료화: 무료만 / 나중에 유료(9-2)
- 앱 이름: …
- 한 줄 컨셉: …
- 화면 문구: … (메모를 부르는 말 / 머리 문구 / 탭 제목·설명)
- 디자인 방향: …
- 코드 보관: GitHub Private / 제 컴퓨터 git 만
- 저장소: (8-1 에서 기록)
제작 순서는 승인된 결정서를 따릅니다. 결정서 승인 → HRUM(흐름) 콘솔 가입·이메일 인증 → (결정서에서 GitHub 를 고른 경우) GitHub 가입·Private 저장소 → 책 코드 받기(node get-book-code.mjs — 가입·로그인·메모·보안·관리자 코드가 한 번에 생김, 부록 A-2) → git init -b main → 결정서대로 화면(app/page.tsx·app/layout.tsx·app/globals.css·components/Notes.module.css) 손보기 → 보안 점검·자동 테스트·로컬 스모크 → RIDM Apps 신청·배포 → 첫 배포가 뜬 뒤 실서버 스모크(scripts/smoke-live.mjs — 재로그인 뒤 메모 유지·다른 회원 격리 포함). 가입·로그인·복구·메모 화면을 빼놓고 "완료"라고 하면 실패입니다.
아래 칸은 전부 4-0에서 승인받은 단 하나의 [제작 결정서]에 이미 들어있습니다 — 새로 만들 것은 없고, 결정서에서 해당 줄을 그대로 옮겨 적기만 하면 됩니다.
{제품 결정서} — 4-0 결정서의 기술 항목(화면 배치~유료화). 이게 없으면 AI는 4-0부터 다시 시작해야 합니다{앱이름} — 결정서의 "앱 이름" 항목 (예: 한줄서재){한 줄 컨셉} — 결정서의 "한 줄 컨셉" 항목{화면 문구} — 결정서의 "화면 문구" 항목{디자인 방향} — 결정서의 "디자인 방향" 항목 (예: "크림 배경 + 먹색 세리프, 여백 넉넉한 원고지 무드")부록 A의 전문을 복사 → 칸 + 결정서 채우기 → AI에 붙여넣기 → 기다리기 (5~15분). 결정서 없이 붙여넣으면 AI가 4-0 질문부터 하도록 스펙에 적혀 있습니다
AI가 끝났다고 하면, 이렇게 물으세요:
다음을 순서대로 직접 실행해서 결과를 보여 주세요:
1. node scripts/verify-book-code.mjs ("불일치 0개"여야 함 — 책 코드를 손대지 않았다는 증거)
2. npm run build (에러 0이어야 함)
3. npx vitest run (전부 통과해야 함 — 7-5)
4. npm audit --audit-level=high (high 이상 0 이어야 함 — RIDM Apps 빌드 검사가 같은 것을 본다. 무엇이 나오든 package.json 은 고치지 않는다 — audit 결과를 완료 보고에 그대로 적고 책 개정(get-book-code --force)을 기다린다(8-0))
5. git check-ignore .env.local (경로가 나와야 함 — 로컬 DB 주소가 커밋되지 않는다는 증거)
6. grep -rn "localStorage\|document.cookie" app lib components (아무것도 안 나와야 함 — 로그인·메모를 브라우저에 저장하지 않는다는 증거)
1번과 6번이 이 책의 핵심입니다. 뭔가 어긋나면 PART 7로 직행하세요.
AI용 분할본 · 지도 1단계(준비·결정서) · 이 페이지 전에 읽을 페이지: PART 0 사용법·AI 시작 지침, PART 3 컨셉·디자인 · 코드 파일은 여기 없다 — 코드 자리의 줄을 따른다(폴더에 책 파일이 하나도 없는 처음이면 부록 A-2 의 curl 한 줄부터)