바이브코딩 실습 6편 — 내 앱에 주소 달기: Vercel 배포

지금까지 만든 앱은 내 컴퓨터에서 더블클릭해야만 열렸다. 오늘 그 파일에 진짜 인터넷 주소를 달면, 같은 앱이 폰에서 열리고 링크 한 줄로 가족에게 건네진다.

이 글 3줄 요약

• 배포(deploy)는 내 컴퓨터 안에만 있던 파일을 항상 켜져 있는 남의 컴퓨터(인터넷 서버)에 올려, 주소만 알면 누구나 열 수 있게 만드는 일이다. 오늘의 주인공 단어다.
• GitHub에 올리고 → Vercel에 연결하고 → Deploy 버튼 한 번. 클릭 5단계면 https://내이름.vercel.app 주소가 생긴다. 새로 설치할 프로그램은 없고, 만드는 계정은 Vercel 하나뿐이며 무료다.
• 한 번 연결해두면 그다음부터는 "GitHub에 올려줘" 한마디로 사이트가 저절로 갱신된다. 창고에 넣으면 매장이 알아서 진열하는, 현업 개발자들이 실제로 일하는 방식 그대로다.

이 글은 AI 바이브코딩 실습 시리즈 9부작의 6편이다. 코드를 한 줄도 몰라도 AI에게 말로 시켜 실제로 돌아가는 프로그램을 만드는 과정을 다룬다. 지난 실습 5편에서는 미니 ERP에 차트와 재고 탭까지 붙여 대시보드를 완성했다. 그런데 그 대시보드는 아직 내 컴퓨터 안에서만 열린다. 오늘은 거기에 세상에 하나뿐인 주소를 달아준다. 이론으로 더 깊이 알고 싶다면 짝이 되는 이론 7편을 함께 보면 좋다.

오늘 만드는 것 — 40분 뒤 폰에서 열리는 내 앱

지금까지 만든 대시보드를 여는 방법은 하나뿐이었다. 내 컴퓨터에서 파일을 더블클릭하는 것. 주소창에는 file:///C:/Users/나/my-ledger/index.html 같은 게 떠 있었다. 이건 "내 컴퓨터 안의 파일"이라는 뜻이다. 남에게 보여주려면? 방법이 없다. 파일을 통째로 보내도 상대방은 열기 번거롭다.

오늘 이걸 바꾼다. 40분 뒤, 같은 앱이 https://my-ledger.vercel.app 같은 진짜 주소로 열린다. 폰 카메라로 QR을 찍거나 주소를 직접 입력하면 내 폰 화면에 대시보드가 그대로 뜬다. 가족이나 직원에게 링크만 보내면 그 사람 폰에서도 열린다. 앱스토어에 올리는 것도, 서버를 사는 것도 아니다. 전부 무료로 된다.

이 두 화면(내 컴퓨터 안의 파일 → 전 세계에서 열리는 주소)의 차이를 만드는 단어가 오늘의 주인공이다. 배포(deploy). 뜻은 지금 외우지 않아도 된다. 아래 5단계를 몸으로 밟고 나면 저절로 알게 된다.

준비물 — 새로 설치할 건 없다

이번 편은 지난 실습들보다 준비가 가볍다. 새로 깔 프로그램이 없기 때문이다.

여기서 한 가지 궁금증. 이거 정말 공짜인가? 개인이나 취미 수준이라면 Vercel 무료 플랜으로 평생 무료다. 카드도 넣지 않는다. 회사가 큰 트래픽으로 상업 운영을 할 때만 유료 구간이 열린다. 우리 실습에는 해당되지 않는다.

오늘의 지도 — 클릭 5단계가 전부다

오늘 할 일 전체를 한눈에 그리면 이렇다. 터미널 명령은 거의 없고, 대부분 화면의 버튼을 누르는 일이다.

1. STEP 1 — GitHub에 올리기: 최신본을 창고에 넣는다.
2. STEP 2 — Vercel 가입: GitHub 계정으로 바로 로그인한다.
3. STEP 3 — Deploy: 저장소를 고르고 버튼 한 번 누른다.
4. STEP 4 — 폰에서 접속: 내 주소로 진짜 열어본다.
5. STEP 5 — 자동 배포: 앱을 고치면 사이트가 저절로 바뀌는 걸 체험한다.

오늘 딱 한 문장만 몸에 익히면 된다. 창고(GitHub)에 넣으면 → 매장(Vercel)에 자동 진열. 이 감각만 잡으면 앞으로 뭘 만들든 그대로 재사용한다.

STEP 1 — GitHub에 최신본 올리기

실습 3편에서 했던 그대로다. 터미널의 claude에게 말로 시키면 커밋·푸시를 알아서 한다.

지금까지 작업한 걸 GitHub에 올려줘

왜 배포 전에 이걸 먼저 하는가. 배포는 '우리 집 냉장고의 반찬'을 '가게 진열대'로 옮기는 일이다. 진열대에는 손님에게 보여줄 것만 올려야 한다. 그래서 올리기 전에 한 번 점검한다.

여기서 꼭 짚고 갈 주의점이 있다. 장부에 진짜 개인 돈이나 집 전화번호를 적어뒀다면 지우거나 가짜 숫자로 바꾼 뒤 올려라. 공개(public) 저장소에 올려서 배포하면 그건 곧 전 세계 공개다. 연습이라면 처음부터 가짜 숫자로 채워두면 마음이 편하다.

체크포인트. claude가 커밋 완료 · 푸시 완료 비슷한 메시지를 보여주고, GitHub 저장소 페이지를 새로고침했을 때 방금 파일이 보이면 성공이다.

STEP 2 — Vercel 가입

이제 크롬을 켠다. 새 아이디와 비밀번호를 만들 필요가 없다는 게 핵심이다.

1. 크롬 주소창에 vercel.com을 그대로 입력해 접속한다.
2. **"Continue with GitHub"**를 클릭한다. 새 아이디·비밀번호를 만들지 않고 GitHub 계정으로 로그인하는 방식이다.
3. GitHub 화면이 뜨면 **Authorize(승인)**를 누른다. Vercel과 GitHub을 연결하겠다는 허락이다.

이 단계는 사실 창고(GitHub)와 매장(Vercel)을 직결하는 계약을 맺는 일이다. 이 계약이 맺어지는 순간, 창고에 물건을 넣으면 매장에 자동으로 진열되는 구조가 만들어진다. STEP 5의 마법이 여기서 준비된다.

체크포인트. 가입이 끝나면 Vercel 대시보드(Overview) 화면이 뜬다. 여기까지 오면 계약 완료다.

STEP 3 — 프로젝트 가져오고 Deploy

이제 내 앱을 실제로 인터넷에 올린다. 여기가 '배포' 그 자체다.

1. 대시보드 우측 상단에서 Add New ▸ Project를 누른다.
2. 내 저장소(예: my-ledger) 옆의 Import를 누른다. 실습 5편 앱이 담긴 그 저장소다.
3. 설정은 전부 기본값 그대로 두고 바로 Deploy를 누른다.

설정을 왜 안 건드리는가. 우리 앱은 정적 HTML(index.html 하나로 열리는 페이지)이라 빌드(재료를 조립하는 과정) 설정이 필요 없다. 그래서 손댈 게 없다. 기본값이 정답이다. 괜히 옵션을 바꾸면 오히려 배포가 깨진다.

체크포인트. 폭죽(🎉) 그림과 함께 "Congratulations!" 화면, 그리고 Visit 버튼이 뜨면 배포 끝이다. 이 과정은 1~2분 걸릴 수 있으니 화면을 닫지 말고 기다린다.

STEP 4 — 내 주소로 폰에서 접속

오늘의 하이라이트다. 방금 만든 주소를 진짜로 폰에서 열어본다.

1. Visit을 눌러 https://…vercel.app 주소를 확인한다. 이게 세상에 하나뿐인 내 주소다.
2. 폰 카메라로 QR을 찍거나, 그 주소를 폰 브라우저에 직접 입력한다. 컴퓨터 화면의 주소를 폰에 그대로 타이핑해도 된다.
3. 내 폰 화면에 대시보드가 그대로 뜬다.

축하한다. 여러분은 방금 **배포(deploy)**를 했다. 다시 정의하면 이렇다. 배포란 내 컴퓨터 안에만 있던 파일을, 항상 켜져 있는 남의 컴퓨터(인터넷 서버)에 올려, 주소만 알면 누구나 열 수 있게 만드는 것이다. 지금 폰에서 열린 그 화면이 증거다. STEP 3의 첫 문단에서 미뤄뒀던 뜻이 이제 몸으로 이해된다.

STEP 5 — 자동 배포 체험

마지막으로, 오늘의 진짜 하이라이트를 체험한다. 앱을 조금 고치고 다시 올렸을 때 사이트가 저절로 바뀌는 걸 눈으로 확인하는 것이다. 컴퓨터로 돌아가 claude에게 이 두 문장을 차례로 시켜본다.

앱 제목을 '우리가게 7월 장부'로 바꿔줘

지금 바뀐 걸 GitHub에 올려줘

이게 왜 중요한가. 이것이 현업 개발자들이 일하는 방식 그대로이기 때문이다. 창고에 넣으면 매장이 알아서 갱신한다. 여러분은 Vercel 화면을 다시 열지도 않았는데 사이트가 바뀐다. 앞으로 뭘 만들든 이 파이프라인을 그대로 재사용한다. 오늘 배운 게 평생 쓰는 습관이 된다.

체크포인트. GitHub에 올리고 12분 뒤, 폰 브라우저를 새로고침하면 제목이 '우리가게 7월 장부'로 저절로 바뀌어 있다. Vercel에 아무것도 안 했는데도 그렇다. 아직 그대로라면 배포가 즉시가 아니라서 그렇다. 12분 더 기다린 뒤 다시 새로고침해본다.

꼭 알고 갈 것 — 데이터는 각자 브라우저에 남는다

여기서 반드시 짚고 넘어갈 게 하나 있다. 배포한 뒤 폰에서 장부에 새 기록을 입력하고, 컴퓨터에서 같은 주소를 열어보면 그 기록이 안 보인다. 반대도 마찬가지다. "어? 이상한데?" 싶은 게 정상이다. 고장이 아니다.

이 장부 앱은 데이터를 '보는 사람의 브라우저' 안에 각자 따로 저장한다(localStorage 방식). 그래서 이렇게 갈린다.

• 내 폰에서 입력한 기록 → 내 폰에만 남는다.
• 컴퓨터에서 넣은 기록 → 폰에는 안 보인다.

배포는 화면(프로그램)을 세상에 내보낸 것이지, 데이터를 한곳에 모은 게 아니기 때문이다. 모두가 같은 데이터를 함께 보려면 서버와 데이터베이스(DB, 데이터를 한곳에 모아 저장하는 창고)가 필요하다. 그건 이 실습 과정의 범위 밖이고, 짝이 되는 이론 6편에서 따로 다룬다. 지금은 "데이터는 기기별로 각자 저장된다"만 알면 충분하다.

골라서 더 해보기

오늘 배운 배포 방법은 이 앱에만 쓰는 게 아니다. 방법은 전부 똑같다. claude에게 "GitHub에 올려줘"를 시키고 → Vercel에서 그 저장소를 Import → Deploy. 지금까지 실습에서 만든 걸 주소 있는 진짜 페이지로 바꾸기만 하면 된다.

• 나만의 명함 주소: 실습 1편의 자기소개 페이지를 배포한다. 생긴 주소를 카톡 프로필에 링크로 걸어두면, 나를 소개하는 진짜 웹페이지가 된다.
• 단톡방 메뉴 룰렛: 실습 2편에서 만든 메뉴 뽑기 룰렛을 배포한다. 링크를 단톡방에 뿌리면 다들 각자 폰에서 룰렛을 돌린다.
• 카톡으로 보내는 초대장: 모임 초대장 페이지를 배포하고, 주소만 톡으로 전송한다. 받는 사람은 링크만 눌러도 초대장이 열린다.

같은 절차를 두세 번 반복하면, 배포는 더 이상 특별한 일이 아니라 손에 익은 습관이 된다.

막혔을 때

배포 과정에서 자주 나오는 세 가지 상황과 대처다. 이 화면이 나와도 놀라지 않아도 된다.

대원칙은 하나다. 뭐가 안 되면 claude에게 그대로 물어봐라. Vercel 화면의 에러 메시지를 복사해서 "이거 왜 이래?"라고 붙여넣으면, 대개 원인과 해결책을 짚어준다.

오늘 손에 익힌 단어 4개

오늘 여러분은 "내 컴퓨터 안의 파일"을 "전 세계 서비스"로 바꾸는 경험을 했다. 클릭 5단계로 주소를 만들었고, 그 주소를 폰에서 열었으며, 앱을 고치니 사이트가 저절로 바뀌는 것까지 봤다. "왜 남의 컴퓨터(서버)에 올려야 하는가"라는 질문의 답을 머리가 아니라 몸으로 겪은 셈이다.

다음 편에서는 지금까지와 결이 다른 걸 만든다. 처음으로 '알아서 도는' 프로그램, 매일 아침 뉴스를 정리해주는 비서다. Python과 API 키가 처음 등장하는 회차다.

다음 편 — 실습 7편