이 글에는 쿠팡 파트너스 링크가 있으며, 구매 시 일정액의 수수료를 받습니다.
클로드 코드 버셀 배포 방법, 깃허브에 올리고 잘못되면 롤백
클로드 코드 버셀 배포는 클로드 코드에게 "깃허브에 올리고 버셀로 배포해 줘" 한 문장으로 시작할 수 있습니다. 이 글은 그렇게 내 서비스를 인터넷 주소로 띄운 다음, 자동 배포 때문에 잘못 만든 것까지 올라갔을 때 직전 배포로 되돌리는 롤백까지 정리했습니다. 영상이 말하지 않은 계정 연결, 롤백 메뉴 위치, 배포 전에 걸러 주는 검사 장치 만드는 법은 글 끝 편집자 정리에 따로 넣었습니다.
클로드 코드로 만든 서비스, 올린 다음이 문제
채널 마일드코드의 47초 쇼츠입니다. 클로드 코드로 만든 서비스가 아직 내 컴퓨터에서만 돌아간다면, 클로드 코드에게 한 문장만 말해서 깃허브(코드를 인터넷에 저장하고 버전을 관리하는 서비스)에 올리고 버셀(Vercel, 웹 서비스를 인터넷 주소로 띄워 주는 호스팅 서비스)로 배포할 수 있다는 내용입니다. 화자는 올리는 건 금방이고 "진짜 문제는 올린 다음이거든요."라고 말합니다.
영상 후반은 화자 본인 강의 홍보입니다. 이해관계가 있는 영상이라는 점을 알고 읽어 주세요.
준비물
- 클로드 코드로 만든 내 서비스. 아직 내 컴퓨터에서만 돌아가는 상태
- 클로드 코드 (자막에는 "클러드 코드"로 적혀 있습니다)
- 깃허브 계정과 버셀 계정. 영상에는 나오지 않지만 둘 다 있어야 올리고 배포할 수 있습니다. 버셀은 깃허브 계정으로 가입할 수 있습니다.
- 비용은 발화에 나오지 않습니다. 두 서비스 모두 개인용 무료 플랜이 있지만 조건은 바뀔 수 있으니 공식 요금 안내를 확인해야 합니다.
1단계. 깃허브에 올리고 버셀로 배포하기
클로드 코드에게 아래 문장을 입력합니다.
이거 깃허브에 올리고 버셀로 배포해 줘
- 위치: 내 서비스 폴더에서 연 클로드 코드 입력창. 어느 창에 입력하는지는 영상에 나오지 않지만, 서비스 파일이 있는 폴더에서 클로드 코드를 열어야 그 폴더를 올립니다.
- 확인: 친구한테 보낼 수 있는 내 주소가 생깁니다. 보통
프로젝트이름.vercel.app꼴의 주소이고, 클로드 코드가 작업 끝에 알려 줍니다. - 참고: 문장은 더보기란 표기를 따랐습니다. 자막 원표기는 "이거 기터브에 올리고 버셀로 배포해 줘"입니다.
- 참고: 화자 말로는 이후 새로운 기능을 추가할 때마다 알아서 다시 배포됩니다.
- 주의: 처음이라면 중간에 깃허브·버셀 로그인을 요구할 수 있습니다. 로그인하는 순서는 편집자 정리에 적었습니다.
자동 배포의 함정
'올린 다음'의 문제로 화자가 든 것이 이 자동 배포입니다. 알아서 배포된다는 건, 잘못 만든 것도 그대로 올라간다는 뜻입니다.
- 주의: 화자가 든 예는 이렇습니다. 버튼 하나를 고쳤는데, 잘 쓰고 있던 사람들의 화면이 통째로 깨질 수 있다고 합니다.
2단계. 버셀에서 직전 배포로 되돌리기 (롤백)
순서 고정: 1단계로 버셀 배포가 된 뒤에만 할 수 있습니다.
버셀에서 직전 배포로 되돌립니다.
- 위치: 버셀. 어느 화면, 어느 버튼인지는 영상에 나오지 않아 편집자 정리에 단계별로 적었습니다.
- 확인: 직전 배포 상태로 돌아갑니다. 화자는 "되돌리시면 돼요"까지만 말했습니다. 내 주소를 새로고침해서 깨지기 전 화면이 나오는지 보면 됩니다.
- 참고: 이 동작을 "롤백"이라고 부릅니다.
버셀 배포 뒤 막혔을 때
- 증상: 기능을 고쳤더니 쓰던 사람들의 화면이 통째로 깨졌다
- 원인: 자동 배포라서 잘못 만든 것도 그대로 올라간다
- 해결: 버셀에서 직전 배포로 되돌린다(롤백). 그다음 클로드 코드에서 잘못된 수정을 고친 뒤 다시 올린다.
최종 체크리스트
- 클로드 코드에게 깃허브 업로드와 버셀 배포를 요청했다
- 친구에게 보낼 수 있는 내 주소가 생겼다
- 화면이 깨지면 버셀에서 직전 배포로 되돌릴(롤백) 수 있다는 걸 안다
모아 둘 문장
자막 원문 그대로 옮깁니다.
- "진짜 문제는 올린 다음이거든요."
- "알아서 배포가 된다는 건 저희가 잘못 만든 것도 그대로 올라간다는 거예요."
강의 홍보 부분 (이해관계)
후반부는 화자 본인 강의 소개입니다. 화자는 "모두의 클러드 코드"(자막 표기, 더보기란에는 "모두의 클로드 코드")라는 강의에서 한 단계 더 나아가, 잘못 만든 게 있으면 아예 배포조차 하지 않게 막는 "검문소"를 코딩을 몰라도 직접 만든다고 말합니다. 그래서 고칠 때마다 마음 졸이지 않고(자막: "마음 조리지") 서비스를 운영할 수 있다고 합니다.
검문소를 만드는 구체적인 방법은 영상에 나오지 않습니다. 발화의 마지막은 프로필 링크에서 강의를 살펴보라는 권유입니다. 이 글에는 강의 링크를 옮기지 않았습니다. 같은 역할을 하는 일반적인 방법은 편집자 정리에 적었습니다.
더보기란·고정 댓글에서 확인한 것
아래는 발화가 아니라 채널이 설명란에 쓴 글입니다.
- 더보기란 본문은 발화와 같은 내용의 원고입니다. 도구 이름 표기("깃허브", "버셀", "클로드 코드")와 입력 문장 "이거 깃허브에 올리고 버셀로 배포해 줘."는 여기서 확인했습니다 (더보기란)
- 해시태그: #클로드코드 #클로드코드강의 #바이브코딩 #AI코딩 #ClaudeCode (더보기란)
- 강의 홍보 문구가 있고, 프로필 링크에서 강의를 살펴보라는 안내가 있습니다. 강의 홍보라는 이해관계가 있습니다 (더보기란)
- 고정 댓글과 채널 주인 댓글은 없습니다.
영상에 없는 배경 (편집자 정리)
여기부터는 영상에서 다루지 않은 내용입니다. 실제로 따라 해 보려면 알아야 하는 것들을 따로 정리했습니다. 메뉴 이름은 서비스 업데이트에 따라 바뀔 수 있으니 깃허브·버셀 공식 문서와 함께 보세요.
1단계 전에 깃허브·버셀 로그인하기
클로드 코드는 보통 깃허브 명령줄 도구(gh)와 버셀 명령줄 도구(vercel)를 써서 올리고 배포합니다. 처음이면 로그인이 필요합니다. 터미널에서 직접 하거나, 클로드 코드가 실행하다가 브라우저 로그인 창을 띄우면 그 창에서 허용합니다.
gh auth login
vercel login
- 확인: 각 명령이 로그인 완료 메시지를 보여 줍니다.
gh나vercel명령이 없다고 나오면 클로드 코드에 "깃허브 CLI와 버셀 CLI 설치를 도와줘"라고 요청합니다.- 다른 방법도 있습니다. 클로드 코드로 깃허브에만 올린 뒤, 버셀 웹사이트에서 새 프로젝트 만들기(Add New → Project)를 누르고 그 깃허브 저장소를 가져오기(Import)로 연결해도 됩니다. 이렇게 연결하면 깃허브에 새 코드가 올라갈 때마다 버셀이 자동으로 다시 배포합니다. 화자가 말한 "알아서 다시 배포"가 이 구조입니다.
올리기 전에 비밀번호·키 확인
.env처럼 API 키나 비밀번호가 든 파일은 깃허브에 올리면 안 됩니다. 1단계 문장 앞에 이렇게 덧붙이면 안전합니다.
깃허브에 올리기 전에 API 키나 비밀번호가 든 파일이 있는지 확인하고, 있으면 .gitignore에 넣어서 올라가지 않게 해 줘. 그런 값은 버셀 환경 변수로 넣는 방법을 알려 줘.
2단계, 버셀 화면에서 롤백하는 순서
- 버셀 웹사이트에 로그인하고 내 프로젝트를 엽니다.
- 위쪽 메뉴에서 배포 목록(Deployments)을 엽니다.
- 확인: 배포 기록이 최신순으로 보입니다.
- 화면이 깨지기 전, 정상이던 운영(Production) 배포를 찾습니다.
- 그 줄 오른쪽의 점 세 개(⋯) 메뉴를 엽니다.
- 즉시 롤백(Instant Rollback) 또는 이 배포를 운영으로 올리기(Promote) 항목을 누르고 확인합니다.
- 확인: 내 주소를 새로고침하면 예전 화면이 나옵니다.
- 클로드 코드로 돌아가 잘못된 수정을 고칩니다. 롤백은 주소가 가리키는 배포만 바꾸고 코드는 그대로라, 고치지 않고 다시 올리면 같은 문제가 또 나옵니다.
명령줄로 하려면 버셀 CLI의 vercel rollback 명령이 있습니다. 롤백 뒤에는 새 배포가 운영 주소에 자동으로 반영되지 않게 바뀔 수 있으니, 다시 배포할 때 버셀 공식 문서의 롤백 안내를 확인합니다.
코드도 되돌리고 싶을 때
클로드 코드에 아래처럼 요청하면 깃(코드 변경 기록을 관리하는 도구)의 기록을 보고 문제를 만든 수정을 되돌려 줍니다.
방금 배포에서 화면이 깨졌어. 최근 커밋 기록을 보여 주고, 버튼을 고친 커밋을 git revert로 되돌린 다음 깃허브에 다시 올려 줘.
화자가 말한 "검문소"를 비슷하게 만드는 방법
잘못 만든 것이 배포되지 않게 막는 장치는 보통 두 가지를 섞어 만듭니다.
- 미리보기 배포: 버셀은 기본 브랜치(main)가 아닌 다른 브랜치에 올린 코드를 별도 미리보기 주소로 띄워 줍니다. 새 기능은 다른 브랜치에서 만들어 미리보기 주소로 확인한 뒤 main에 합치면, 실제 사용자 화면은 그동안 그대로입니다.
- 자동 검사: 깃허브 액션(GitHub Actions, 코드가 올라올 때 자동으로 검사를 돌리는 기능)으로 빌드와 테스트를 돌리고, 실패하면 main에 합치지 못하게 막습니다.
클로드 코드에 이렇게 요청해 시작할 수 있습니다. 편집자가 만든 예시입니다.
앞으로는 새 기능을 main이 아닌 새 브랜치에서 만들고, 버셀 미리보기 주소로 확인한 다음 합치고 싶어.
그리고 깃허브에 코드가 올라올 때 빌드와 테스트를 자동으로 돌리는 깃허브 액션을 만들어 줘.
테스트가 없으면 지금 화면에서 꼭 지켜야 할 기능 3개를 골라 간단한 테스트도 같이 만들어 줘.
용어 풀이
- 배포: 내 컴퓨터에서만 돌던 서비스를 인터넷 주소로 누구나 접속할 수 있게 올리는 일.
- 롤백: 문제가 생긴 배포를 버리고 직전의 정상 배포로 되돌리는 일.
- 브랜치: 원래 코드를 건드리지 않고 따로 고쳐 볼 수 있게 갈라 둔 작업 줄기.
자주 묻는 질문
클로드 코드로 버셀 배포하려면 무엇이 필요한가요?
클로드 코드, 깃허브 계정, 버셀 계정이 있으면 됩니다. 처음에는 깃허브와 버셀에 로그인하는 과정이 한 번 필요하고, 그다음부터는 "깃허브에 올리고 버셀로 배포해 줘" 같은 요청으로 진행할 수 있습니다.
버셀 롤백은 어디서 하나요?
버셀 프로젝트의 배포 목록(Deployments)에서 정상이던 이전 배포를 찾아 메뉴의 즉시 롤백(Instant Rollback)이나 Promote를 누르면 됩니다. 메뉴 이름은 바뀔 수 있으니 버셀 공식 문서를 확인합니다.
롤백하면 코드도 원래대로 돌아가나요?
아닙니다. 롤백은 주소가 예전 배포를 가리키게 할 뿐이고, 깃허브에 올라간 코드는 그대로입니다. 잘못된 수정을 고치거나 git revert로 되돌린 뒤 다시 배포해야 같은 문제가 반복되지 않습니다.
자동 배포를 꺼야 하나요?
꼭 끌 필요는 없습니다. 새 기능은 다른 브랜치에서 만들어 미리보기 주소로 확인하고, 자동 검사를 통과한 것만 main에 합치면 실제 화면이 깨질 위험을 크게 줄일 수 있습니다.
이 글은 유튜브 자동 자막을 바탕으로 정리했으며 화면은 대조하지 못했습니다. 원 영상은 마일드코드 채널의 47초 쇼츠이고, 영상에 나온 동작은 배포 요청과 롤백, 2개뿐입니다. 로그인 명령, 롤백 메뉴 위치, 검사 장치는 편집자가 덧붙인 일반 설명이며, 자막의 "클러드 코드", "기터브"는 클로드 코드, 깃허브로 옮겼습니다.
출처: youtube.com/…