바이브코딩으로 만든 걸 확인하고 배포하는 방법
이 시리즈는 일부 클로드 AI로 작성했다. 프로젝트 개발 이력을 살핀 뒤 클로드가 Key learning을 정리했다. 그리고 내가 실제 프로젝트 코드 안에 들어 있지 않은 의도, 시행착오, 맘에 들지 않았던 점등을 추가해 다듬었다.
개발 환경 이해하기 - 로컬 서버부터 배포까지
들어가며
클로드 코드로 사부작사부작 무언가를 만들었다. 근데 이걸 어떻게 실행하거나 확인할까? 다른 사람도 쓸 수 있게 하려면 어떻게 해야 하는 걸까?
처음엔 다 낯설었다. 개발 서버, 로컬, 배포... 그때 하나씩 알아간 과정을 정리해 본다.
개발 서버라는 걸 처음 알았을 때
코드를 만들었는데 "그래서 이걸 어떻게 보는 거지?" 싶었다. HTML 파일을 더블클릭해서 여는 것과는 달랐다. 웹 앱은 코드를 실행해 줄 서버라는 게 필요했다. 내 컴퓨터 안에서 작은 서버를 하나 띄우고, 거기에 접속해서 결과물을 확인하는 방식이었다.
npm run dev
이 명령어를 터미널에서 실행하면 내 컴퓨터에서 작은 서버가 돌아간다. 그리고 브라우저에서 이렇게 접속하면 결과물을 볼 수 있었다. AI에게 개발 서버를 띄워달라고 자연어로 말해도 된다.
그러면 예를 들어 이런 로컬 호스트 주소를 주며, 개발 서버가 실행 중이라고 알려준다.
로컬 호스트란 무엇일까?
localhost는 내 컴퓨터에서 돌리는 서버
localhost = 내 컴퓨터라는 뜻이었다. 인터넷 주소처럼 생겨서 처음에 "이 주소를 다른 사람한테 보내면 되겠다!" 할 수도... 그러나 이것은 내 컴퓨터에서만 열리는 주소다. 다른 사람이 `localhost:3000`을 치면 그 사람 컴퓨터의 서버로 접속하는 거지, 내 화면이 보이는 게 아니다.
포트 번호 (3000, 3001...)
`3000` 이 숫자는 포트 번호라는 거였다. 하나의 컴퓨터에서 여러 서버를 동시에 돌릴 수 있고, 포트 번호로 구분한다. 이미 3000번을 쓰고 있으면 다른 프로젝트는 3001번 서버에서 열린다.
로컬이랑 배포, 뭐가 다른가?
간단히 말하면 이렇다.
로컬 (Local)
- 내 컴퓨터에서만 돌아감
- `localhost:0000`으로 접속
- 나만 볼 수 있음
- 코드 수정하면 바로 반영됨
배포 (Production)
- 인터넷에 올라감
- `mysite.vercel.app` 같은 실제 URL이 생김
- 누구나 접속 가능
- 코드 수정하면 다시 배포해야 반영됨.
이런 흐름으로 개발을 한다.
로컬에서 개발 → 테스트 → 문제없으면 → 배포
처음엔 무식해서 용감했기 때문에... 만들면 바로 배포했다. 확인도 안 하고. 당연히 문제가 생겼다:
- 버그가 있는 코드가 바로 사용자한테 보였다
- 고치려면 또 배포해야 했다
- 배포할 때마다 시간이 걸렸다
로컬에서 충분히 확인하고, 괜찮을 때 서버에 배포를 하는 식이다.
웹에 내 서비스를 띄울 때
웹 서비스를 만들려면 생각보다 여러 가지가 필요했다. 처음엔 "코드만 짜면 끝 아닌가?" 싶었는데, 알고 보니 이런 것들이 각각 따로 있었다:
- 코드 저장소 — 내가 짠 코드를 안전하게 보관하고 버전을 관리하는 곳
- 서버/배포 — 그 코드를 인터넷에 올려서 다른 사람이 접속할 수 있게 해주는 곳
- 데이터베이스 — 사용자 정보나 게시글 같은 데이터를 저장하는 곳
그리고 이 역할들마다 어떤 서비스를 써야 하는지도 대략 AI에게 추천을 받았고.... 코드 저장소는 GitHub, Vercel, 데이터베이스는 Supabase나 Firebase 같은 서비스를 추천해 주었다. GitHub도 간단한 웹사이트를 띄울 수 있고(GitHub Pages), Vercel도 자체적으로 데이터를 다루는 기능이 있었다.
1. GitHub = 코드 저장소
나는 코드를 저장하고 버전을 관리하는 데에 쓰고 있다.
지금까지 개발한 걸 기록해 두고, 만약 중간에 뭐가 잘못되면 다시 git history를 뒤져서 복원하는 등의 용도로 쓰고 있다.
- 코드 백업 (컴퓨터 날아가도 안전)
- 버전 기록 (언제 뭘 바꿨는지)
- 협업 (여러 명이 같이 작업 가능)
2. Vercel = 배포 서비스
코드를 인터넷에 띄워주는 서비스. GitHub이랑 연동하면 push 할 때마다 자동으로 배포해 줬다.
- 코드를 서버에 올려줌
- URL을 만들어줌 (예: `mysite.vercel.app`)
- HTTPS 자동 적용
- 무료 티어가 넉넉하다.
- Vercel로 하고 나중에 내 개인 도메인(웹사이트 주소)을 연결하고 싶으면 다시 설정하면 된다. 나는 가비아에서 도메인을 사서 관리하고 있다.
둘을 연동하면 자동 배포가 된다.
1. 코드 수정
2. GitHub에 push
3. Vercel이 자동으로 감지
4. 새 버전 배포
또는 Vercel CLI로 직접 배포도 가능하다.
Vercel CLI
GitHub에 push 하면 자동 배포되는 게 기본 흐름이었지만, 급하게 확인하고 싶을 때는 **터미널에서 바로 배포**하는 방법도 있었다. Vercel에서 제공하는 명령어 도구를 쓰면 됐다.
Vercel은 웹 대시보드에서도 배포를 할 수 있다. 설치는.. AI에게 Vercel 설치해 달라고 하면 된다. 인간이 할 일은 요청과 의도 세우기, 권한 설정, 로그인 등.
둘 다 무료인가?
- GitHub: 공개/비공개 저장소 모두 무료. 개인 프로젝트에서 돈 낼 일은 거의 없었다.
- Vercel: 무료 플랜도 월 100GB 대역폭에 프로젝트 수 제한 없이 배포할 수 있었다. 개인 프로젝트엔 충분했는데, 기업이나 팀이 쓰려면 유료 플랜이 필요한 듯.
지금은 이렇게 하고 있다
처음엔 뒤죽박죽이었는데, 삽질을 반복하다 보니 나름의 흐름이 잡혔다.
1. 코드 수정
클로드 코드한테 기능 요청하거나 버그 수정 요청
2. 로컬 서버에서 확인
브라우저에서 `localhost:3000` 열고 잘 되는지 확인
3. 문제 있으면 다시 수정
- 화면이 이상하면 → 클로드 코드한테 수정 요청
- 에러가 나면 → 브라우저 콘솔 로그 확인 → 클로드 코드한테 에러 메시지 보여주기
4. 괜찮으면 GitHub에 push
클로드 코드한테 "커밋하고 푸시해 줘"라고 하는 식. 개발자인 친구는 그냥 터미널 켜고 명령하던데 나는 사사건건 클로드에게 요청하며 토큰을 아주 낭비하며 쓰고 있다.
5. Vercel 자동 배포
GitHub에 push 하면 Vercel이 알아서 배포해 줬다. 몇 분 기다리면 새 버전이 올라가 있었다.
내가 겪은 실수들
1. 로컬에서 안 보고 바로 배포.
배포하고 나서 버그 발견하면 식은땀이... 그 뒤로는 꼭 로컬에서 먼저 확인하게 됐다.
2. 배포 안 해놓고 한 줄. "내 컴퓨터에서는 되는데..."
로컬에서만 반영한 건데, 배포도 안 해놓고 변경사항을 반영 안 되었다고 당황했던 적이 있다.
3. Github을 공개로 해놓고 중요 정보를 안 가림.
Github에 이것저것 배포할 때 'Private' 프로젝트 설정을 안 하고, 내 api 키 같은 걸 포함해서 저장한 적이 있다. 이후에 좀 더 지식이 생기면서 식겁하고 다시 중요 정보들을 암호화하고 코드를 저장하고 Private 설정으로 돌렸다.
4. 환경변수 설정을 깜빡함
때로 개발하다 보면 AI가 Github, Vercel 또는 데이터베이스인 Supabase 등의 서비스에 직접 들어가서 환경변수를 설정해 달라고 한다. 그런 경우 직접 세팅해줘야 하는 부분들이 있다.
다음 글 예고
'내가 만들면 AI 스러운 디자인만 나오던데...' 그런 고민이 있다면 바이브코딩하며 디자인에 대한 고민을 했던 경험을 공유한다. 색상을 정하고, 컴포넌트를 만들고, 디자인 시스템을 구축하는 방법. AI 스러운 디자인, 탈피할 수 있다.
*이 글은 바이브코딩 시리즈의 두 번째 글입니다. 와조타 글쓰기 클럽 프로젝트 경험을 바탕으로 작성되었습니다.*