ChanghyukBan내가 만든 도구를
전 세계에 공개하기
"제가 만든 사이트 보실래요?" 한 마디의 무게
🎊 시리즈의 마지막 관문
지금까지 만든 모든 것을 인터넷에 띄워서
친구·가족·전 세계 누구나 접속할 수 있게 만듭니다.
🎯 이번 강의의 목표
"내 컴퓨터에서만" 돌던 프로그램을 https://내-도구.vercel.app 같은 인터넷 주소로 만들어, 카톡으로 링크를 보낼 수 있는 진짜 웹사이트로 만듭니다. 무료로요.
📌 이번 편 순서
- 최종 점검 — 코드 정리 (10분)
- GitHub 가입 + 코드 업로드 (15분)
- 백엔드 배포 — Railway (15분)
- 프론트엔드 배포 — Vercel (10분)
- 백엔드-프론트엔드 연결 (10분)
- 완성 점검 + 도메인 (선택, 10분)
- 시리즈 정리 + 다음 여정
잠깐, 핵심 개념부터
이번 편에 새로 나오는 4가지 개념입니다.
📦 GitHub
전 세계 개발자가 코드를 보관하는 구글 드라이브의 코드 버전. 우리 코드도 여기 올려놓으면 배포 서비스들이 자동으로 가져갑니다.
🚂 Railway
백엔드를 인터넷에 띄워주는 서비스. 우리의 FastAPI 서버를 받아서 24시간 돌게 해줍니다. 월 $5 무료 크레딧으로 시작.
▲ Vercel
프론트엔드를 인터넷에 띄워주는 서비스. 우리의 React 화면을 받아서 빠른 웹사이트로 만들어줍니다. 완전 무료 플랜으로 충분.
🌐 도메인
인터넷 주소(예: naver.com). Vercel이 무료로 .vercel.app 주소를 주고, 본인 도메인이 있으면 연결 가능.
💡 전체 그림: 내 컴퓨터 → GitHub(코드 보관소) → Railway(백엔드 배포) + Vercel(프론트엔드 배포) → 친구 카톡 링크. 이 흐름만 이해하면 됩니다.
STEP 1. 최종 점검 — 코드 정리
배포 전에 두 가지를 확인합시다.
1-1. 로컬에서 마지막 동작 확인
백엔드(터미널 1) + 프론트엔드(터미널 2) 둘 다 실행 → 브라우저 localhost:5173 접속 → 005930 조회 → 차트와 AI 분석이 정상 표시되는지 확인. 안 되면 배포해도 안 됩니다.
1-2. .gitignore 만들기 — 매우 중요!
API 키가 들어있는 .env 파일이 GitHub에 올라가면 큰일 납니다. Claude Code 실행 후:
.gitignore 파일을 만들어줘. .env 파일, node_modules, __pycache__, .venv, dist 등 GitHub에 올리면 안 되는 것들을 모두 제외해줘. 백엔드와 프론트엔드 양쪽 모두 고려해서.
⚠️ 절대 GitHub에 올리면 안 되는 것
.env 파일 — 안에 든 DART API Key, Claude API Key가 전 세계에 공개됩니다. 누군가 본인 돈으로 Claude를 마구 쓸 수 있고 키 폐기 후 재발급해야 합니다.
STEP 2. GitHub 가입 + 코드 업로드
2-1. GitHub 회원가입
🔗 github.com → Sign up. 무료. 이메일 인증까지 마치세요.
2-3. 저장소(Repository) 만들기
GitHub Desktop 실행 → [File] → [Add Local Repository] → stock-analyzer 폴더 선택.
"이 폴더는 Git 저장소가 아닙니다" 메시지가 뜨면 "create a repository" 링크 클릭 → Create Repository.
2-4. 첫 커밋 + 푸시
좌측 하단 Summary에 "Initial commit" 입력 → Commit to main 버튼 클릭 → 상단 Publish repository → "Keep this code private" 체크 (코드 비공개 추천) → Publish Repository.
✅ 확인하기
github.com 본인 계정 페이지에서 stock-analyzer 저장소가 보이고, 그 안에 backend·frontend 폴더가 있으면 성공. .env 파일이 보이면 안 됩니다. 보이면 .gitignore 잘못된 것 — Claude에게 다시 요청.
STEP 3. 백엔드 배포 — Railway
3-1. Railway 가입
🔗 railway.app → Login with GitHub로 가입 (GitHub 계정 그대로 사용).
3-2. 배포 준비 — Procfile 만들기
Railway가 "어떻게 서버를 실행할지" 알려주는 파일. Claude Code에:
1.
Procfile — uvicorn 실행 명령 (PORT 환경변수 사용)2.
requirements.txt — 사용 중인 모든 패키지 (fastapi, uvicorn, anthropic, requests, yfinance, python-dotenv 등)3.
runtime.txt — Python 3.11 명시그리고 main.py의 CORS 설정에서
allow_origins를 환경변수 FRONTEND_URL로 받게 수정해줘. 없으면 "*"로 fallback.
3-3. GitHub에 변경사항 푸시
GitHub Desktop에서 변경된 파일 확인 → Summary에 "Add deployment config" 입력 → Commit to main → 우상단 Push origin.
3-4. Railway에서 프로젝트 생성
- Railway 대시보드 → New Project
- Deploy from GitHub repo → stock-analyzer 선택
- 프로젝트 설정 → Settings → Root Directory를
backend로 설정 (백엔드 폴더만 배포) - 자동으로 빌드 시작
3-5. 환경변수 등록 — 핵심!
Railway 프로젝트 → Variables 탭 → 아래 변수들을 하나씩 추가.
ANTHROPIC_API_KEY=본인_Claude_키
FRONTEND_URL=* (일단 임시, 나중에 Vercel 주소로 바꿈)
변수 추가하면 Railway가 자동으로 서버를 다시 시작합니다.
3-6. 백엔드 주소 받기
Railway 프로젝트 → Settings → Networking → Generate Domain 클릭. xxx.up.railway.app 같은 주소를 줍니다. 메모장에 복사해두세요.
✅ 백엔드 배포 확인
브라우저에서 https://본인주소.up.railway.app/docs 접속. FastAPI 문서 화면이 뜨면 성공! 인터넷에서 누구나 백엔드에 접근할 수 있게 되었습니다.
STEP 4. 프론트엔드 배포 — Vercel
4-1. 프론트엔드 백엔드 주소 변경
지금 프론트엔드 코드는 localhost:8000을 보고 있습니다. Railway 주소로 바꿔야 합니다. Claude Code에:
1.
.env.example 파일 만들기: VITE_API_URL=http://localhost:80002.
.env 파일도 같은 내용으로 만들기 (로컬 개발용)3. 모든 API 호출 코드에서
http://localhost:8000을 import.meta.env.VITE_API_URL로 교체4. .gitignore에 frontend/.env도 추가
4-2. GitHub에 푸시
GitHub Desktop에서 Summary "Use env for API URL" → Commit to main → Push origin.
4-3. Vercel 가입
🔗 vercel.com → Sign Up with GitHub로 가입.
4-4. 프로젝트 생성
- Vercel 대시보드 → Add New Project
- Import Git Repository → stock-analyzer 선택
- Root Directory 옆 Edit 클릭 →
frontend선택 - Framework Preset: Vite 자동 감지됨
- Environment Variables에 추가:
VITE_API_URL=https://본인주소.up.railway.app
4-5. Deploy 클릭!
1~2분 기다리면 https://stock-analyzer-xxx.vercel.app 같은 주소를 줍니다.
STEP 5. 백엔드-프론트엔드 연결 (CORS 마무리)
마지막 한 단계 남았습니다. 백엔드가 프론트엔드 주소를 허용하게 만들어야 합니다.
5-1. Railway 환경변수 업데이트
- Railway → 프로젝트 → Variables 탭
FRONTEND_URL값을*에서 Vercel 주소로 변경
예:https://stock-analyzer-xxx.vercel.app- Railway가 자동 재시작 (1~2분)
✅ 최종 동작 확인
Vercel 주소(https://stock-analyzer-xxx.vercel.app) 접속 → 005930 조회 → 차트와 AI 분석이 정상 표시되면 완전 성공!
🎊 진짜 완성!
이제 카톡으로 친구한테 링크 보낼 수 있습니다.
"내가 만든 사이트야. 종목 코드 하나 입력해봐."
STEP 6. 도메인 연결 (선택)
stock-analyzer-xxx.vercel.app 대신 본인 도메인을 쓰고 싶다면.
6-1. 도메인 구입
가비아·후이즈·Namecheap 등에서 .com 도메인 연 1~2만원 정도. 예: mystock.com
6-2. Vercel에 연결
Vercel 프로젝트 → Settings → Domains → 도메인 입력. Vercel이 보여주는 DNS 레코드를 도메인 구입처에 등록하면 끝. 보통 10~30분 후 적용.
자주 발생하는 에러 해결법
❌ Railway 빌드 실패 "ModuleNotFoundError"
→ requirements.txt에 빠진 라이브러리. "backend/requirements.txt에 현재 코드에 import된 모든 라이브러리를 빠짐없이 추가해줘" Claude에게 요청.
❌ Vercel 사이트는 뜨는데 차트 조회 시 에러
→ CORS 에러일 가능성. Railway의 FRONTEND_URL을 정확한 Vercel 주소(끝에 / 없이)로 다시 확인. F12 Console에서 빨간 글씨 확인.
❌ Vercel 빌드 시 "VITE_API_URL is undefined"
→ Vercel 환경변수 설정 빠짐. Vercel 프로젝트 → Settings → Environment Variables에서 추가 후 → Deployments → 최신 빌드 → ··· → Redeploy.
❌ AI 분석만 안 됨 (차트는 됨)
→ Railway에 ANTHROPIC_API_KEY 등록 누락. Variables 탭에서 확인.
❌ Railway 크레딧 소진 알림
→ Railway 무료 $5는 한 달 정도. 가벼운 트래픽이면 충분하지만 부족하면 Hobby 플랜($5/월)으로 업그레이드. 또는 백엔드를 Render.com(무료) 같은 다른 곳으로 옮길 수도 있습니다.
앞으로의 유지보수
배포 후엔 어떻게 코드를 수정할까요? 아주 간단합니다.
- VS Code에서 코드 수정 (또는 Claude Code로 자연어 명령)
- 로컬에서
localhost로 정상 동작 확인 - GitHub Desktop → Commit → Push
- Railway와 Vercel이 자동으로 감지해서 재배포
💡 이게 진짜 마법입니다. GitHub에 푸시만 하면 인터넷 사이트가 자동으로 업데이트됩니다. 개발자들이 "CI/CD"라고 부르는 시스템을 이미 쓰고 계신 겁니다.
시리즈 전체 정리 — 우리가 6주간 만든 것
📚 1편 — 바이브코딩 개념과 전체 로드맵
🚀 2편 — 첫 데이터 받아오기 (터미널)
📊 3편 — 첫 차트 그리기 (웹브라우저)
📈 4편 — 진짜 분석 대시보드
🤖 5편 — AI 분석 코멘트 자동 생성
🌐 6편 — 인터넷에 무료 배포 (지금 이 편)
시리즈를 처음부터 따라온 분이라면, 비개발자에서 "AI로 진짜 서비스 만드는 사람"으로 변신하셨습니다. 단순 ChatGPT 사용자와는 완전히 다른 차원입니다.
이제 무엇을 할 수 있을까?
이번 시리즈로 익힌 기술을 응용하면 만들 수 있는 것들:
💼 본업과 결합한 도구
예: 부동산 시세 + AI 평가, 학원 상담 챗봇, 거래처 단가표 자동 비교, 본인 사업의 KPI 대시보드.
🤖 개인 자동화
예: 매일 아침 관심 종목 자동 분석해서 카톡으로 전송, 뉴스 요약 봇, 자동 일정 관리.
💰 부수입 / 사이드 프로젝트
우리가 만든 수준의 도구는 시중에서 월 1~3만원 구독료 받고 팝니다. 작은 시장이라도 시작해보세요.
바이브코딩의 진짜 본질
6주의 여정을 정리하면, 우리가 배운 건 코딩이 아닙니다.
🎯 진짜 배운 것 3가지
- 명확하게 설명하는 능력 — Claude에게 잘 시키려면 본인 머릿속이 명확해야 함
- 결과를 검증하는 안목 — AI가 만든 결과의 옳고 그름을 판단
- 작은 단위로 쪼개는 사고 — 거대한 목표를 손에 잡히는 단계로 분해
이 세 가지는 코딩에만 쓰는 게 아닙니다. 사업, 마케팅, 교육, 인간관계, 어디에나 쓰입니다. AI 시대의 진짜 핵심 역량입니다.
마지막 메시지
6주 전까지만 해도 "코딩은 나랑 상관없어"라고 생각하셨을 겁니다. 지금은 인터넷에 본인 사이트를 띄운 사람이 되셨습니다.
이게 바로 AI 시대의 의미입니다. 도구가 사람을 대체하는 게 아니라, 도구가 사람의 한계를 없애주는 것. 코딩을 못해도 만들고 싶은 게 있다면 만들 수 있는 세상.
앞으로 만들고 싶은 게 떠오를 때마다, Claude를 열고 "이런 거 만들고 싶어"라고 말하세요. 답은 그 안에 있습니다.
🚀 여기까지 오신 모든 분께
진심으로 축하드립니다.
이제 여러분은 만드는 사람입니다.
📌 마지막 미션
완성한 사이트 링크를
가족·친구 3명에게 보내세요.
"내가 만든 사이트야"라는 한 마디의 무게를
꼭 경험해보시길 바랍니다.
📺 다음 시리즈는?
이번 시리즈를 마치신 분들이 가장 많이 물어보는 것:
· 본업과 결합한 자동화 도구 만들기
· n8n 워크플로우로 매일 아침 카톡 알림 받기
· 모바일 앱으로 만들기 (React Native)
관심 있는 주제를 댓글로 알려주세요. 다음 시리즈 주제 선정에 반영합니다.
🏆 실전 구축기 시리즈 완결
ATOZAI · 비개발자를 위한 바이브코딩 완성반