22년차 영어 학원 원장입니다. 학생 수준 테스트 결과 정리, 학부모 피드백 발송, 레벨별 교재 추천 등 반복 행정 업무가 수업 시간을 잠식하고 있었습니다. 기성 학원 관리 솔루션은 제 운영 방식과 맞지 않았고, 외주 개발은 수백만 원대 견적이 나왔습니다.
그래서 직접 만들기로 했습니다. Claude Code를 활용한 바이브 코딩 방식으로, 코딩 지식 없이 React + Node.js + Supabase 풀스택 웹앱을 Railway에 배포하는 것이 목표였습니다.
진행 방법
사용 도구: Claude Code (Claude Sonnet), Railway, Supabase, GitHub
진행 흐름:
자연어로 요구사항 설명 → Claude Code가 코드 생성 → 오류 발생 시 오류 메시지 그대로 붙여넣고 질문 → 수정 반복 → Railway 배포
실제 사용한 프롬프트 예시:
학원 자동화 시스템을 만들고 싶어요.
기능은 다음과 같습니다:
1. 학생 기본 정보 입력 및 저장
2. 레벨 테스트 결과 기록
3. 결과에 따른 자동 학부모 피드백 생성
4. 레벨별 교재 추천
React 프론트엔드, Node.js/Express 백엔드, Supabase DB로 구성해 주세요.
Railway에 배포할 예정입니다.아래 오류가 발생했어요. 원인과 해결 방법을 알려주세요.
[오류 메시지 전문 붙여넣기]
오류 ①: 로그인이 안 됩니다 (환경변수 누락)
앱을 만들고 처음 실행했을 때, 로그인 버튼을 눌러도 아무 반응이 없었습니다. 오류 메시지도 없었습니다. 그냥 가만히 있었습니다.
Claude에게 상황을 그대로 설명했습니다.
로그인 버튼을 눌러도 아무 일도 안 일어나요.
콘솔에는 아무 오류도 안 뜨는데, 로그인이 되지 않습니다.
Supabase 연동은 되어 있는 것 같고요.
돌아온 답은 간단했습니다. .env 파일의 Supabase URL과 anon key가 실제로 코드에 전달되고 있는지 확인하라는 것이었습니다.
확인해 보니 .env 파일은 만들었는데, Railway 배포 환경에는 해당 환경변수를 따로 등록하지 않은 상태였습니다. 로컬에선 되는데 배포 후엔 안 되는 전형적인 함정이었습니다.
오류 ②: 배포했더니 흰 화면만 나옵니다 (빌드 경로 문제) Railway에 배포 성공 메시지가 떴습니다. 설레는 마음으로 URL을 열었습니다. 흰 화면이었습니다. 배포는 성공했다고 뜨는데, 접속하면 흰 화면만 나와요. Railway 로그에는 별다른 오류가 없고요. Claude의 진단은 이랬습니다. React 빌드 결과물(build/ 폴더)을 Express 서버가 제대로 서빙하도록 설정이 되어 있지 않다는 것이었습니다. 백엔드는 올라갔는데 프론트엔드 파일을 찾지 못하는 상황이었습니다. 수정한 코드: javascript// server.js const path = require('path'); // React 빌드 파일 서빙 app.use(express.static(path.join(__dirname, 'client/build'))); // 모든 라우트를 React로 연결 app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'client/build', 'index.html')); });
💡 핵심 전략: 막히는 부분에서 오류 메시지를 그대로 복사해 Claude에게 붙여넣으면 원인 설명 + 해결책을 바로 받을 수 있었습니다.
📊 결과와 배운 점
결과: 22일 만에 React + Node.js + Supabase 풀스택 웹앱을 Railway에 배포 완료. 학생 정보 관리, 자동 피드백 발송, 교재 추천 기능 구현.
배운 점 & 꿀팁:
방향은 사람이, 코드는 AI가. 현장 경험이 많을수록 프롬프트가 정확해지고 결과물도 좋아집니다.
오류 메시지를 두려워하지 말 것. 그대로 Claude에게 붙여넣으면 해결됩니다.
AI가 생성한 코드도 반드시 검토 필요. 보안 설정, 예외 처리는 직접 확인했습니다.
시행착오:
Node.js v24 버전과 Create React App 호환 문제로 이틀 소요
Railway + GitHub 연동 시 Personal Access Token 설정 누락으로 배포 실패 반복
sql.js → Supabase 마이그레이션 과정에서 데이터 구조 재설계 필요
앞으로의 계획: 이 경험을 바탕으로 《0000의 00000》 시리즈(비개발자 업종별 8권)를 집필 중입니다. 같은 상황의 소상공인·학원장분들이 직접 자신의 업무 자동화 도구를 만들 수 있도록 돕는 것이 목표입니다.
도움 받은 글
Andrej Karpathy — 바이브 코딩 개념 원문
Railway 공식 문서
Supabase 공식 문서소개
여러 바이브 코딩 관련 서적들
