실제로 배포하기
지금까지 만든 서비스는 내 컴퓨터에서만 도는 상태입니다. 주소창의 localhost:3000은 나만 볼 수 있는 주소죠. 이번 레슨에서는 이 소스를 GitHub에 올리고, GitHub에 올라간 소스를 Vercel이 자동으로 가져가 실제 인터넷 주소를 가진 웹사이트로 만들어 줍니다. 가족에게 링크를 보내면 바로 들어올 수 있게 되는 단계입니다.
이 레슨은 앞의 두 레슨과 달리 “설치와 설정”이 많습니다. Git 설치, 커밋, SSH 키, GitHub 저장소, Vercel 연결까지 낯선 용어가 줄줄이 나오는데 전부 이해할 필요는 없습니다. 한 번만 해 두면 다음부터는 “Commit & Push” 버튼 하나로 배포가 끝납니다. 지금은 이해보다 따라하기가 먼저입니다.
1. 배포의 큰 그림부터 잡기
배포는 세 단계로 흘러갑니다. 내 컴퓨터의 소스 코드를 소스 관리 사이트인 GitHub에 올리면, GitHub와 연결된 Vercel이 그 소스를 자동으로 가져가 웹사이트로 만들어 줍니다. 한 번 연결해 두면 이후에는 GitHub에 올리는 순간 사이트가 알아서 갱신됩니다.
2. 커서에서 소스 관리 메뉴 열기
커서 왼쪽 사이드바의 세 번째 버튼이 소스 관리(Source Control) 메뉴입니다. 눌러 보면 “Install Git, a popular source control system…”이라는 안내가 뜹니다. 아직 컴퓨터에 Git이 설치되어 있지 않다는 뜻이에요. 파란색 Download Git for Windows 버튼을 눌러 봅니다.
3. Git 내려받기
브라우저가 열리면서 git-scm.com의 다운로드 페이지로 이동합니다. 맨 위 “Click here to download”를 눌러 최신 버전을 내려받으세요. 커서가 “외부 사이트를 열까요?”라고 물으면 Open을 눌러 주면 됩니다.
4. Git 설치하기
내려받은 설치 파일을 실행합니다. 중간에 체크박스가 잔뜩 나오는 화면이 있는데, 여기서만 화면과 똑같이 체크해 두고 나머지 단계는 전부 기본값(Next)으로 넘어가세요. 체크를 더 하지 않아도 큰 문제는 없습니다.
설치가 끝나면 커서로 돌아와 소스 관리 패널에 있는 “Reload”를 눌러 주세요. 커서가 새로 로딩되어야 방금 설치한 Git을 인식합니다. 이걸 빼먹으면 계속 “Git이 없다”는 화면이 나옵니다.
5. 이 폴더를 Git 저장소로 만들기
다시 소스 관리 버튼을 누르면 아까와 다른 화면이 나옵니다. 첫 번째 파란 버튼 Initialize Repository는 “이 폴더를 Git 저장소로 초기화할까요?”라는 질문이에요. 눌러서 초기화합니다. 이게 바로 내 컴퓨터 안에 로컬 저장소를 만드는 작업입니다.
6. 보낼 파일을 무대(Stage) 위로 올리기
화면이 갑자기 복잡해집니다. 개발을 조금 해 본 분에게는 익숙하지만 처음이면 낯선 화면이에요. 지금은 그냥 따라해 보세요. Changes라고 된 부분의 + 버튼을 눌러 줍니다.
7. Changes와 Staged Changes의 차이
+ 를 누르면 변경된 파일들이 Changes에서 Staged Changes로 올라갑니다. 무대(Stage) 위에 올려 놓았다는 뜻이에요. GitHub에 보낼 수 있는 파일은 이렇게 무대에 올라온 파일들뿐입니다. 바꾼 파일을 전부 보내지 않고 골라서 보내고 싶을 때가 있으니까 이런 구조로 되어 있습니다.
8. 커밋(Commit)이라는 체크포인트 만들기
서버에 올리는 것을 푸시(Push)라고 하는데, 푸시하기 전에 반드시 커밋(Commit)을 해야 합니다. 커밋은 “무엇을 바꿨는지 메모를 남긴 체크포인트”예요. 푸시는 커밋된 내용만 올릴 수 있습니다. 메시지 칸에 First commit이라고 입력하고 Commit 버튼을 눌러 보세요.
9. 이름과 이메일을 설정하라는 오류 만나기
그랬더니 “Make sure you configure your user.name and user.email in git”이라는 팝업이 뜹니다. 커밋하려는 사람이 누구인지 표시를 남겨야 하는데 그게 아직 설정되지 않았다는 뜻이에요. 즉 나의 정체를 Git 환경설정에 넣어 주라는 겁니다.
10. Git Bash 터미널 열기
조금 전에 설치한 Git Bash 터미널을 열어서 이 작업을 합니다. 윈도우 시작 버튼을 눌러 Git Bash를 찾아 실행하세요. Git Bash는 윈도우에서 리눅스와 최대한 비슷하게 동작하도록 만들어 주는 터미널이라, 개발할 때는 PowerShell보다 Git Bash를 쓰는 편이 편합니다.
11. 이름과 이메일 등록하기
터미널에 아래 두 줄을 입력합니다. 제 이름과 이메일이 아니라 여러분의 이름과 이메일을 적으세요.
git config --global user.name "Vibe Coding"
git config --global user.email "your_email@example.com"그리고 커서로 돌아와 Commit을 다시 눌러 보면, 왼쪽 아래 패널에 First commit이라는 한 줄이 생깁니다. 다만 이건 체크포인트를 만든 것일 뿐 아직 서버에 올라간 것은 아닙니다.
12. 커서 터미널을 Git Bash로 열기
이제부터는 커서 안에서 터미널을 쓰겠습니다. 터미널 패널의 + 버튼 옆 화살표를 눌러 Git Bash를 선택하세요. 커서에 내장된 터미널을 PowerShell이 아니라 Git Bash로 쓰겠다는 뜻입니다. 터미널이 열리면 git status를 한 번 쳐서 지금 상태를 확인해 보는 습관을 들이면 좋습니다.
여기서부터가 이 레슨에서 제일 낯선 구간입니다. GitHub에 내 소스를 올리려면 보안 문제로 열쇠와 자물쇠 한 쌍을 먼저 발행해야 합니다. 이론을 설명하면 너무 길어지니 일단 무작정 따라해 보세요. 포기하지 말고 조금만 더 집중하면 됩니다.
13. 열쇠와 자물쇠(SSH 키페어) 발행하기
터미널에 아래 명령을 붙여 넣고 실행합니다. 중간에 뭔가 물어보는 화면이 나오면 전부 그냥 엔터를 치세요.
ssh-keygen -t ed25519 -C "your_email@example.com"14. 만들어진 두 개의 키 확인하기
아래 명령으로 홈 폴더 안의 .ssh 폴더를 들여다보면 파일이 두 개 보입니다. 하나는 열쇠, 하나는 자물쇠예요.
ls -la ~/.ssh- id_ed25519 (열쇠, Private Key) — 절대 잃어버리거나 남에게 주면 안 되는 파일입니다. 내 PC에만 두세요.
- id_ed25519.pub (자물쇠, Public Key) — pub은 public의 약자입니다. 건물 바깥에 걸어 두는 자물쇠처럼 어디에 보내도 상관없습니다.
자물쇠를 GitHub에 등록해 두면, 내 PC에 있는 열쇠로 내 GitHub를 마음대로 드나들 수 있게 됩니다.
15. 자물쇠(공개키) 내용 복사하기
cat은 파일 내용을 화면에 출력하는 명령입니다. 아래 명령을 실행해서 나온 한 줄을 통째로 복사하세요. 바로 붙여 넣기 어려우면 메모장에 잠깐 보관해 둬도 됩니다.
cat ~/.ssh/id_ed25519.pub16. GitHub의 SSH 키 메뉴로 이동하기
브라우저로 GitHub에 접속합니다. 오른쪽 위 프로필을 눌러 Settings로 이동한 다음, 왼쪽 메뉴에서 SSH and GPG keys를 선택하세요.
17. 자물쇠를 GitHub에 등록하기
New SSH key를 눌러 새로 추가합니다. Key 칸에 복사한 자물쇠 내용을 붙여 넣고, Title은 아무렇게나 적어도 됩니다. Add SSH key를 누르면 자물쇠 등록이 끝납니다.
18. 소스를 올릴 저장소 만들기
이제 내 소스를 올릴 새 저장소(Repository)를 하나 만듭니다. 어떤 곳은 프로젝트, 어떤 곳은 리포지토리라고 부르는데 “소스 저장소”라고 이해하면 됩니다. 이름을 적절히 정하고, 반드시 Private을 선택해 비공개로 만든 다음 Create repository를 누르세요.
Private을 꼭 확인하세요. Public으로 만들면 소스가 인터넷에 그대로 공개됩니다. 지금 프로젝트에는 Firebase 설정 같은 정보가 들어 있으니 비공개가 안전합니다.
19. 안내 화면에서 HTTPS를 SSH로 바꾸기
저장소를 만들면 “Quick setup” 안내 화면이 나옵니다. 로컬 저장소는 이미 만들어 두었으니 (5번에서 Initialize Repository를 누른 것이 바로 그것입니다) 두 번째 영역의 명령 세 줄만 쓰면 됩니다. 먼저 주소 위쪽의 HTTPS를 SSH로 바꿔 주세요. 주소가 git@github.com:… 으로 바뀝니다.
20. 원격 저장소 연결하기
첫 번째 줄을 복사해 커서 터미널에 붙여 넣고 실행합니다. 내 로컬 저장소가 어느 GitHub 저장소와 짝인지 알려 주는 명령이에요. 두 번째 줄(git branch -M main)은 사실 안 해도 됩니다.
git remote add origin git@github.com:<내계정>/<저장소이름>.git21. 실제로 업로드(Push)하기
이제 세 번째 명령으로 소스를 올립니다. 중간에 fingerprint를 물어보면 yes를 입력하고 엔터를 치세요. 처음 접속하는 서버가 맞는지 확인하는 절차입니다.
git push -u origin main22. GitHub에 올라갔는지 확인하기
GitHub로 이동해 새로 고침을 해 봅니다. 파일들이 쭉 올라와 있으면 성공입니다. 내 로컬 컴퓨터의 소스가 드디어 GitHub로 올라갔습니다.
23. Vercel에서 새 프로젝트 만들기
이제 GitHub에 올라간 소스를 Vercel로 보내서 실제 웹사이트가 나오도록 할 차례입니다. Vercel로 이동해 새 프로젝트를 만듭니다. Git 저장소에서 가져오는 방식(Import Git Repository)을 고르세요.
24. Vercel에 GitHub 접근 권한 주기
검은색 Install 버튼을 누르면 GitHub 사이트가 뜨면서 “Vercel을 설치할까요?”라는 팝업이 나옵니다. All repositories로 내 계정의 저장소 전체에 접근 권한을 주고 Install을 누릅니다.
25. 저장소 가져오기(Import)
그러면 내 GitHub 저장소 목록이 보입니다. 지금은 하나뿐이라 방금 만든 저장소가 바로 보이네요. Import 버튼을 눌러 가져옵니다.
26. .env.local 파일 다시 열기
Next.js 프로젝트라는 것까지는 Vercel이 알아서 인식합니다. 우리가 채워 줄 것은 환경 변수뿐이에요. 커서로 돌아가 지난 레슨에서 만든 .env.local 파일을 엽니다. 여기 들어 있는 값들이 바로 그 환경 변수입니다.
27. 환경 변수 넣고 Deploy 누르기
Environment Variables를 펼치고 .env.local의 키와 값을 하나씩 넣어 주세요. 다 채워지면 Deploy 버튼을 누르고 기다립니다. 시간이 조금 걸립니다.
환경 변수는 왜 소스에 안 넣고 여기에 따로 넣을까요? .env.local 파일은 GitHub에 올라가지 않도록 제외되어 있기 때문입니다. 키 같은 값이 소스와 함께 공개되면 안 되니까요. 그래서 배포하는 곳마다 따로 넣어 줘야 합니다.
28. 배포 실패 — 에러 로그 열어 보기
그런데 에러가 났습니다. Build Logs를 펼쳐 들여다보니 “Command npm run build exited with 1”이라고 되어 있네요. 내 컴퓨터에서는 잘 돌던 것이 배포용 빌드에서만 막힌 겁니다. 당황할 필요 없습니다. 빌드 명령이 문제라면 내 컴퓨터에서도 똑같이 재현할 수 있습니다.
29. 같은 에러를 내 컴퓨터에서 재현하기
커서 터미널에서 빌드 명령을 직접 실행해 봅니다. 똑같이 에러가 납니다. 이러면 배포 사이트를 오갈 필요 없이 여기서 고치고 확인할 수 있습니다. 터미널의 에러 위에 뜨는 Add to Chat 버튼을 눌러 AI에게 그대로 넘깁니다.
npm run build30. AI가 타입 오류 고치기
타입스크립트 에러였습니다. 개발 서버로 돌릴 때는 그냥 넘어가지만 배포용 빌드에서는 엄격하게 잡히는 종류예요. AI가 어떤 타입이 문제인지 짚어 내고 고쳐 줍니다. 파란 박스로 빌드를 한 번 해 보겠다고 하면 하라고 하세요.
31. 빌드 성공 확인하기
빌드가 끝까지 돌고 페이지 목록이 표로 출력되면 성공입니다. 이 상태라면 Vercel에서도 문제없이 빌드됩니다.
32. 고친 내용을 다시 스테이지에 올리고 커밋 메시지 쓰기
고친 내용을 다시 GitHub에 올려야 배포본에도 반영됩니다. 6~8번에서 했던 것과 똑같이 + 버튼으로 스테이지에 올리고, 무엇을 고쳤는지 커밋 메시지를 입력합니다.
33. Commit & Push 한 번에 하기
이번에는 Commit 버튼 옆 화살표에서 Commit & Push를 골라 커밋과 푸시를 한 번에 합니다. GitHub에 소스가 올라가는 순간 Vercel이 알아서 자동 배포를 시작합니다. 여기서부터가 한 번 연결해 두면 편해지는 지점이에요.
34. 배포 성공 확인하기
Vercel의 프로젝트로 이동해 Deployments 탭을 눌러 봅니다. Building을 거쳐 Ready로 바뀌면 배포가 성공한 것입니다.
35. 내 사이트 주소 열어 보기
배포가 끝나면 Vercel이 여러분의 사이트에 도메인을 하나 부여해 줍니다. 화면에 보이는 도메인을 클릭해 보세요.
36. 짜잔, 나만의 사이트
localhost가 아닌 진짜 인터넷 주소로 우리 서비스가 떴습니다. 이제 이 주소를 가족에게 보내면 누구나 접속할 수 있습니다.
37. 배포된 서비스에서 실제로 써 보기
마지막으로 배포된 사이트에서 새로 가입해 보고 메시지를 보내 봅니다. 다른 창에서도 실시간으로 잘 올라오면 끝입니다. 수고하셨습니다.
이번 레슨에서 몸에 익힐 것
- 배포는 GitHub와 Vercel을 잇는 일이다. 내 소스를 GitHub에 올리면 Vercel이 가져가 사이트로 만들어 줍니다.
- 커밋은 체크포인트, 푸시는 업로드. 스테이지에 올린 것만 커밋할 수 있고, 커밋된 것만 푸시할 수 있습니다.
- 공개키는 자물쇠, 개인키는 열쇠. .pub 파일만 GitHub에 등록하고, 열쇠는 내 PC에만 둡니다.
- 저장소는 Private으로. 소스에는 설정과 키가 섞여 있으니 비공개가 기본입니다.
- 환경 변수는 배포하는 곳마다 따로 넣는다. .env.local은 GitHub에 올라가지 않으므로 Vercel에 직접 입력해야 합니다.
- 배포 빌드는 개발 서버보다 엄격하다. 배포에서 에러가 나면 내 컴퓨터에서 npm run build로 똑같이 재현해 고치면 됩니다.
- 두 번째 배포부터는 버튼 하나. Commit & Push만 누르면 Vercel이 알아서 새로 배포합니다.
여기까지가 프롬프트 한 줄에서 시작해 실제로 서비스되는 웹사이트까지 가는 전 과정입니다. 설치와 설정이 많아 길게 느껴졌겠지만, 이 준비는 한 번뿐입니다. 다음 프로젝트부터는 만들고 다듬고 Commit & Push, 이 세 단계만 반복하면 됩니다.
영상으로 보고 싶다면
같은 과정을 처음부터 끝까지 촬영한 원본 영상은 인프런 유료 강의로 제공됩니다. Git 설치와 SSH 키 발행처럼 손이 많이 가는 구간은 영상으로 따라하는 편이 훨씬 수월합니다.
