구글 시트 3개 → 실제 운영 대시보드로 바뀐 이야기
🎯 바쁘시면 이것만 읽어도 돼요
참여진 41명 원고 상태를 구글 시트가 아닌 웹앱 하나에서 관리하게 됐어요
Claude Code에 PRD 문서 넘기면 Next.js + Supabase + Vercel 배포까지 한 세션에 끝나요
구글 시트 3개 → DB 임포트 스크립트 → 참여진 데이터 분류까지 전부 Claude Code가 잡아줬어요
👀 이런 분들께 도움돼요
소모임이나 글쓰기 활동에서 구글 시트로 참여자 관리하다가 한계 느낀 분
"나도 운영 도구 하나 갖고 싶은데 코딩은 잘 몰라요"라는 분
Claude Code로 PRD 기반 웹앱 개발 흐름이 실제로 어떻게 돌아가는지 궁금한 분
Supabase + Vercel 첫 배포를 해보고 싶은 분
😮 Before: 구글 시트 3개로 원고 접수 현황 추적했어요
소모임 웹진 운영을 하면서 테마별 참여진을 시트로 관리하고 있었어요. 1차 신청 시트, 2차 신청 시트, 선착순 시트 — 각각 따로 있고, 어느 필자가 어떤 테마에 몇 개 참여인지 한눈에 안 보였어요. 마감까지 며칠 남았는지, 누가 연락이 필요한지, 원고를 받았는지 — 다 시트 탭 바꿔가며 눈으로 확인해야 했어요.
✨ After: 참여진 41명이 대시보드 하나에 다 들어왔어요
Claude Code에 PRD 문서랑 UI 프로토타입 넘기고 "Next.js + Supabase + Vercel로 만들어줘" 한 마디 했어요. 세션 하나에 앱 개발 → 구글 시트 데이터 일괄 임포트 → 배포까지 전부 됐어요. 이제 로그인하면 41명 참여진 상태를 한 화면에서 볼 수 있고, 필자별로 메모 남기고 원고 링크 붙여두고 체크리스트도 관리돼요.
🛠️ 이번에 만든 웹진 운영앱이 하는 것
``` ① 참여진 대시보드 — 필자명 / 테마명 / 장르 / 원고 제목 / 상태 / 마감 D-day
② 상태 관리 (7단계) 미제출 → 접수 → 중간점검 → 수정요청 → 퇴고 → 발행 / 연락필요
③ 필자 상세 패널 — 메모 추가, 원고 링크 등록, 5단계 체크리스트 (원고접수/제목/필자명/최종본/발행가능)
④ 테마 필터 + D-day 알림 — 연락 필 요 필자는 빨간 사이드 테두리로 강조 — 마감 3일 이내는 행 전체 노란색 배경
🔨 이번에 한 것
1단계 — PRD 기반 앱 생성
/show-me-the-prd로 아이디어 브리프 → PRD 4종 문서 만들고, kkirikkiri로 팀 빌딩 후 Claude Code에 개발 위임했어요. Next.js 15 App Router + Supabase + Tailwind + shadcn/ui 스택으로 진행했어요.
2단계 — Supabase 설정 + Google OAuth
Supabase 프로젝트 생성 → SQL Editor에서 테이블 5개 생성 → RLS 정책 적용 → Google OAuth 연동까지 했어요. Google Cloud Console 리다이렉트 URI 등록이 빠지면 로그인 에러 나는 것도 이번에 배웠어요.
3단계 — 구글 시트 3개 파싱 → DB 임포트
Claude Code가 구글 시트를 직접 읽어서 41명 분의 데이터를 분석해줬어요. 한 필자가 테마 여러 개 참여하면 행을 나눠서 넣고, 이메일 없는 필자는 "SNS 문의"로 채우는 것까지 처리했어요. scripts/import-contributors.mjs 스크립트로 한 번에 전부 넣었어요.
4단계 — Vercel 배포
.env.local을 Vercel 환경변수로 임포트하고 배포했어요. webzine-app.vercel.app에서 실제로 운영 중이에요.
📊 결과
항목
Before (구글 시트)
After (운영앱)
상태 확인 방법
탭 3개 넘기며 눈으로
대시보드 한 화면
D-day 알림
❌ 없음
✅ 색상으로 강조
연락 필요 필자
🟡 수동 체크
✅ 빨간 테두리 자동 표시
메모 / 원고 링크
🟡 시트 셀에 흩어짐
✅ 필자별 패널 통합
테마 필터
❌ 없음
✅ 드롭다운 필터
임포트 결과: - 성공: 41명 / 실패: 0명 - 테마별 분리 행: 동일 필자가 여러 테마 참여 시 각각 개별 행으로
💡 효과적이었던 것
구글 시트를 그냥 넘겨줘도 분석이 됐어요
"시트 3개가 있고 이런 구조야" 하고 공유 링크 넘기니까 필자-테마-장르 매핑을 알아서 파악하고 임포트 스크립트까지 만들어줬어요. 구조를 설명하는 시간이 거의 없었어요.
PRD 문서가 있으면 대화가 짧아져요
PRD 없이 자연어로만 설명하면 주고받는 횟수가 늘어나는데, PRD 파일 하나 넘기니까 Claude Code가 기획 의도를 먼저 읽고 코드를 쓰더라고요. 이 차이가 생각보다 컸어요.
⚠️ 이런 건 아쉬웠어요
Node.js 버전 이슈가 있었어요:
--env-file플래그가 Node.js 25에서 REPL을 여는 문제가 있었어요. Claude Code가 스크립트 안에서.env.local을 직접 파싱하는 방법으로 우회했는데, 이런 버전 이슈는 미리 알기가 어려워요Supabase + Google OAuth 설정 단계가 생각보다 많아요: SQL, RLS, Google Cloud Console, Vercel 환경변수까지 단계가 꽤 있어서 처음엔 어디서 뭘 찾아야 하는지 헷갈렸어요
📋 따라하려면
1. 아이디어 브리프 작성 → /show-me-the-prd 로 PRD 4종 생성 2. kkirikkiri 로 개발 팀 구성 → 앱 생성 위임 3. Supabase 프로젝트 생성 → SQL로 테이블 + RLS 세팅 4. Google Cloud Console 에서 OAuth 앱 등록 + Supabase에 연동 5. Vercel에 배포 → .env.local 환경변수 임포트 6. 데이터 임포트 스크립트 작성 → node scripts/import.mjs 실행
내 다음 목표
연락 이력을 메모에 연결해서 "언제 연락했는지" 기록 남기기
마감 알림 자동화 (D-3 이하 연락필요 필자에게 연락 초안 자동 생성)
웹진 발행 후 회차별 아카이브 기능 추가
도움 받은 글 (옵션)
https://www.gpters.org/nocode/post/completed-everything-prd-vercel-IK8afrXq4ZNAzPU
