MindLog 직접 만들고 배포하기

이 Part는 실제로 진행한 제작 과정을 그대로 따라갑니다. 코드를 한 줄도 직접 쓰지 않고, 프롬프트 7개와 터미널 한 줄로 계획 → 목업 → 구현 → 테스트 → 배포까지 갑니다.

4.0 전체 로드맵

이 Part의 작업 방식 — Claude 데스크톱 앱이 기본 실행자입니다

4.1 준비물과 작업 폴더 연결 (5분)

• Claude 데스크톱 앱 설치 후 로그인 — claude.ai/download
• Node.js 22 이상 — 배포 단계에서 필요합니다 (node -v로 확인)
• 계정: Cloudflare(무료), OpenRouter(소액 크레딧, 약 $1로 워크숍 내내 충분)
• 휴대폰에 Expo Go 설치 (App Store / Google Play), 노트북과 같은 Wi-Fi

준비가 끝나면 다음 두 단계로 작업 공간을 만드세요.

1. MindLog 작업 폴더를 만듭니다.

   mkdir -p ~/projects/mobile/mindlog

2. Claude 앱에서 프로젝트를 만들고 폴더를 연결합니다. 새 프로젝트를 만든 뒤 방금 만든 ~/projects/mobile/mindlog 폴더를 선택하세요.

4.2 1단계 — 아이디어를 계획 문서로 (10분)

코드부터 시키지 않습니다. 먼저 3시간 안에 끝낼 수 있는 계획을 문서로 받습니다. 이 문서가 이후 모든 작업의 기준이 됩니다.

모바일 앱을 만들 거예요. 내 일상을 기록하는 앱이에요.
생각나는 것들, 기억하고 싶은 것들, 일상에서 일어나는 소소한 일들을 남기는 앱이요.
기록하기 쉬워야 해서 모바일 앱으로 정했고, 글로 쓰기 힘들 때도 많으니
음성 같은 쉬운 입력 방법도 있으면 좋겠어요.

3시간 바이브 코딩 워크숍 안에 완성된 제품을 만들고 싶어요.
그래서 처음에는 기능이 많으면 안 됩니다.

3시간에 끝낼 수 있는 계획을 자세히 세워 주고, 어떤 기술을 쓸지도 정리해서
문서로 만들어 주세요.

돌아오는 것: 계획 문서 한 편. 목표와 MVP 범위(반드시 넣을 것 / 넣으면 좋은 것 / 이번엔 안 할 것), 화면 구성, 기술 스택, 데이터 모델, 3시간 타임라인, 단계별 프롬프트, 리스크와 대안까지 들어 있습니다.

4.3 2단계 — 요구사항 좁히기 (5분)

계획이 나온 뒤에 "이 앱만의 것"을 정합니다. 범용 챗봇이 아니라 역할과 말투 규칙이 이 제품의 핵심입니다.

DB는 Cloudflare를 쓸 거예요.
간단한 기록도 하고, AI와 대화할 수 있는 기능도 넣으면 좋겠어요.

AI는 모든 질문에 답하는 범용이 아니라, 대답하는 사람의 페르소나를 유저가 고르게 해 주세요.
예를 들면 상담자, 철학자, 인문학자, 심리학자. 기본은 상담자.
각자 전문가가 이야기하듯 답하면 됩니다.

판단해서 구체적인 답이 필요 없는 경우에는, 유저의 말을 간략하게 요약하고
"그런 일이 있었군요, 다른 얘기 나눌 것이 있을까요?"처럼 되물어 주세요.

모델은 OpenRouter의 google/gemini-3.5-flash-lite를 씁니다.
유저가 글, 음성, 사진으로 대화할 수 있어야 해요.

이 한 번의 프롬프트로 계획 문서에 페르소나 표, 응답 규칙, 시스템 프롬프트 초안, 음성·사진 입력 처리 방식이 추가됩니다.

4.4 3단계 — 근거 있는 답 설계하기 (10분)

전문가처럼 답하려면 근거가 필요합니다. 그런데 LLM은 그럴듯한 가짜 인용을 만들어 냅니다 — 존재하지 않는 책, 실제로 하지 않은 말. 기록 앱에서 이것은 치명적입니다.

페르소나가 답할 때 전문가의 의견처럼 근거를 들어 주면 좋겠어요.
철학자라면 어떤 철학자의 글을 인용하고,
인문학자라면 관련된 책과 그 책에서 인용된 문구를,
심리학자라면 심리학 이론에 기초해서 답하게요.
독자에게 실제로 도움이 될 문구를 인용해 주세요.

그리고 모델이 인용을 지어내지 않게 막는 방법도 함께 설계해 주세요.

4.5 4단계 — 목업으로 화면을 먼저 봅니다 (10분)

코드로 만들기 전에 눌러 볼 수 있는 목업을 받습니다. 이 단계에서 고치면 몇 분, 구현 후에 고치면 몇십 분이 듭니다.

좋아요. 이 계획을 기초로 디자인을 하죠.
전체적으로 인터페이스와 사용자 화면이 어떻게 보이는지
제가 확인하고 점검할 수 있는 목업 디자인을 만들어 주세요.

여기서 실제로 두 번 고쳤습니다. 수강생도 같은 눈으로 목업을 보세요 — 빠진 화면을 찾는 것이 목적입니다.

유저가 처음 보는 홈 화면은 어떻게 되나요? 홈 화면도 보여 주세요.
유저의 여정대로 화면을 순서대로 보여 주고, 인터랙티브한 목업으로 만들어 주세요.
제가 직접 흐름까지 눌러 보게요.

과거의 기록을 보거나, 과거에 AI와 나눈 대화를 보는 화면이 없는 것 같은데
그런 기능도 추가해 주세요.

4.6 5단계 — 구현과 자동 테스트 (20분)

이제 한 번에 시킵니다. 중요한 것은 "만들어 줘"가 아니라 "만들고, 테스트하고, 고쳐 줘"라고 말하는 것입니다.

계획대로 구현해 주세요.
필요한 Cloudflare 프로젝트를 만들고, 필요한 것들은 알아서 만들어 주세요.
가짜 AI 서버와 브라우저 자동화를 써서 철저히 테스트하고,
실패하면 고친 다음, 화면 스크린샷으로 결과를 보여 주세요.
완성된 모바일 앱을 만들어 주세요.

Claude가 연결된 폴더에 만드는 것:

자동 테스트가 실제로 잡아낸 문제들입니다. 수강생 화면에서도 비슷한 것이 나옵니다:

4.7 6단계 — 키 만들고 Cloudflare에 배포 (10분)

6a. OpenRouter 키 (주황 — 내가 직접)

키 값은 대화창에 붙여넣지 말고, 프로젝트 폴더의 api/.secrets.env 파일에 아래 형식으로 직접 저장합니다(이 파일은 git에 올라가지 않습니다).

OPENROUTER_API_KEY=sk-or-v1-...여기에 붙여넣기...

6b. 배포 한 줄 (주황 — 내가 직접)

cd ~/projects/mobile/mindlog
bash scripts/deploy.sh

스크립트가 순서대로 처리합니다: 패키지 설치 → Cloudflare 로그인(브라우저에서 "허용" 클릭) → D1 데이터베이스 mindlog-db 생성 → 테이블 생성 → 웹 앱 빌드 → Worker 배포(비밀값 포함) → 휴대폰 앱용 mobile/.env 작성 → 상태 확인.

끝나면 이런 줄이 나옵니다:

웹 앱:   https://mindlog.<내-서브도메인>.workers.dev
DEPLOY_OK https://mindlog.<내-서브도메인>.workers.dev

그 주소를 휴대폰 브라우저에서 바로 열면 앱이 동작합니다. 마이크는 HTTPS에서만 열리는데 workers.dev는 HTTPS라 그대로 됩니다.

6c. 실제 모델로 검증 (파랑 — Claude에게)

배포된 주소로 실제 모델을 써서 테스트해 주세요.
페르소나 4명의 답이 규칙대로인지(털어놓는 말에는 조언 금지),
인용 카드가 검증된 목록에서만 나오는지,
음성 받아쓰기가 한국어로 되는지 확인하고 결과를 요약해 주세요.

6d. 휴대폰에서 네이티브 앱으로 (선택)

bash scripts/start-app.sh      # QR 코드가 뜨면 Expo Go로 스캔
bash scripts/start-app.sh --tunnel   # 같은 Wi-Fi가 아닐 때

스토어 배포는 이 워크숍 범위 밖입니다. 개념은 Part 3에서 다뤘습니다.

4.8 마무리 & 확장 아이디어 (5분)

숙제로 해볼 확장 아이디어

1. 인용 목록을 페르소나마다 10~20개로 늘리고 번역문 검수하기
2. 나만의 페르소나 추가하기 (예: 시인, 운동 코치) — personas.ts에 한 벌 더
3. Cloudflare Cron Trigger로 일요일 밤에 "이번 주 기록 요약" 만들어 두기
4. 기록 검색 (한 달 전 그 생각이 언제였는지)
5. 사진을 D1 대신 R2에 저장해 용량 늘리기
6. 로그인 붙이기 — 지금은 토큰 하나로만 보호되는 1인용 앱입니다

자주 막히는 지점