소개
YouTube + Supabase + Airtable 기반 LMS 테스트베드를 “바로 시연 가능한 상태”로 만드는 작업을 진행했습니다.
핵심은 빈 데이터 상태를 해결하고, 관리자 화면에서 원클릭으로 데모를 준비할 수 있게 만드는 것이었습니다. 소셜 풀을 처음부터 형성하는 과정에서 LMS사이트를 어느정도 구축해두고선 자유로운 소통이 오가는 커뮤니티를 만들고싶었습니다.
시도한 것 / 이유
신규 Supabase·GitHub·Vercel 세팅: 독립 테스트 환경 확보
배포/환경변수 안정화: 빌드 실패(
supabaseUrl is required) 제거관리자 데모 자동화: 클릭 몇 번으로 강의/수강생/진도/Airtable까지 준비
진행 방법
사용 도구
Cursor Agent + Shell
GitHub CLI (
gh)Supabase CLI (
supabase)Vercel CLI (
vercel --token)
핵심 프롬프트(요약)
프로젝트 맥락을 이해하고 파일 분석 후 질문해 달라
→ 환경변수/퍼센트/배포 세팅 반영
→ 비어있는 상태를 샘플 데이터로 채워 달라
→ 계속 이어서 진행해 달라
구현한 핵심 코드
// 관리자 원클릭 데모 준비 (요약)
// 1) 샘플 강의/레슨 2) 샘플 진도(계정 자동생성 포함) 3) Airtable 동기화
const commonHeaders = { 'x-sync-key': process.env.NEXT_PUBLIC_SYNC_API_KEY || '' }
await fetch('/api/admin/seed-sample', {
method: 'POST',
headers: commonHeaders,
})
await fetch('/api/admin/seed-progress', {
method: 'POST',
headers: commonHeaders,
})
await fetch('/api/sync/airtable', {
method: 'POST',
headers: commonHeaders,
})
// 샘플 수강생 자동 생성 (요약)
const samplePassword = process.env.SAMPLE_STUDENT_PASSWORD || 'Sample1234!'
const { data: created, error: createError } = await supabase.auth.admin.createUser({
email,
password: samplePassword,
email_confirm: true,
})
// 빌드 안정화: env 없는 시점에서 route import가 깨지지 않게 요청 시점 생성
function getSupabaseAdminClient() {
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY
if (!supabaseUrl || !serviceRoleKey) return null
return createClient(supabaseUrl, serviceRoleKey)
}
// 퍼센트 필드 보정: Airtable percent 타입은 0~1
'progress_pct': (p.progress_pct || 0) / 100,
'overall_pct': (stats.total > 0 ? Math.round(stats.completed / stats.total * 100) : 0) / 100,
결과와 배운 점
결과
GitHub 푸시 + Vercel 프로덕션 배포 완료
/admin에서 아래 기능 동작:🚀 원클릭 데모 준비🧪 샘플 데이터 생성📈 샘플 진도 생성(샘플 계정 자동 생성)🗑️ 샘플 데이터 초기화📊 Airtable 동기화
배포 주소:
https://lms-youtube-testbed.vercel.app
배운 점 / 팁
한글 사용자명으로
vercel login오류 시,VERCEL_TOKEN방식이 가장 빠름NEXT_PUBLIC_*는 클라이언트 노출 영역이므로 비밀키 금지API route에서 env 의존 객체를 top-level에서 만들면 빌드 시 깨질 수 있어 요청 시점 생성이 안전
데모 프로젝트는 “기능”보다 “시연 자동화”가 체감 완성도를 크게 올림
시행착오
일부 env 누락으로 빌드 실패
PowerShell/bsh 문법 차이로 커밋 명령 충돌
env 반영 후 재배포 누락 시 반영 안 된 것처럼 보임
이 모든것이 바이브로는 단숨에 되기 어렵지만 하나씩 원하는 방향을 향해 수렴하도록 노력하는대로 결과가 점차 보이기 시작함
앞으로 계획
관리자 CRUD UI 추가
쿼리 최적화(N+1 개선)
운영/데모 모드 분리
도움 받은 글 (옵션)
Vercel CLI 문서 (토큰 인증/배포)
Supabase CLI 문서 (프로젝트/마이그레이션)
Next.js 빌드/배포 에러 가이드
