지금까지 만든 건 내 컴퓨터를 켜야만 돌아간다. 노트북을 닫으면 아무도 못 쓴다. 이걸 남들이 인터넷에서 24시간 쓰게 만드는 게 오늘의 이야기다.
이 글 3줄 요약
- 프로그램은 손님이 보는 화면(프론트엔드=홀)과 뒤에서 처리·저장하는 부분(백엔드=주방)으로 나뉘고, 둘은 항상 짝으로 움직인다.
- 인터넷에 올리려면 주소(도메인=간판)와 자리(호스팅=건물)가 필요하고, 주소를 자리에 연결하는 순간 사이트가 열린다.
- 배포는 내 노트북 속 프로그램을 남의 컴퓨터에 올려 24시간 돌리는 것. 버튼 몇 번과 무료 티어로 시작되고, 잘못되면 되돌릴 수 있어 무섭지 않다.
이 글은 AI 바이브코딩 강의 12부작 시리즈의 7편이다. 처음 보는 분은 1편부터 읽으면 흐름이 잡힌다. 바이브코딩이란 코드를 한 줄 한 줄 손으로 쓰는 대신, AI에게 말로 시켜 프로그램을 만드는 방식을 말한다.
오늘 답할 질문 — "내 노트북에서만 열리는 이걸, 어떻게 남들이 쓰게 하지?"
지금까지 만든 프로그램은 한 가지 한계가 있다. 내 컴퓨터를 켜야만 돌아간다는 것이다. 노트북을 닫으면 그 순간 아무도 못 쓴다. 나 혼자 화면에 띄워 보는 데까진 왔는데, 이걸 어떻게 남들이 인터넷에서 쓰게 만드느냐 — 이번 편은 그 다리를 놓는 이야기다.
답할 질문은 딱 세 가지다. 첫째, 손님이 보는 화면과 뒤에서 일하는 부분은 어떻게 나뉘는가. 둘째, 인터넷 주소와 자리는 어디서 얻는가. 셋째, "배포한다"가 실제로 무슨 일인가. 이 세 개만 잡으면 내 프로그램이 처음으로 "내 것"에서 "서비스"로 넘어간다.
개념 하나 — 프론트엔드는 홀, 백엔드는 주방
가장 먼저 알아야 할 건, 프로그램이 통짜 하나가 아니라 둘로 나뉜다는 사실이다. 프론트엔드와 백엔드다.
프론트엔드(사용자의 화면에 그려지는 부분)는 손님이 보는 곳이다. 화면, 버튼, 글씨, 색깔처럼 눈에 보이고 만지는 모든 것이 여기 속한다. 식당으로 치면 홀이다. 손님이 앉는 자리, 메뉴판, 주문받는 곳. "예쁘다"거나 "불편하다"는 평가는 전부 이 홀에서 결정된다.
백엔드(눈에 안 보이는 처리·저장 담당)는 손님이 못 보는 곳이다. 주문을 실제로 처리하고 데이터를 저장하는 부분으로, 식당의 주방과 장부에 해당한다. 재료 계산, 조리, 매출 기록이 여기서 돈다. 로그인, 결제, 데이터 저장이 전부 백엔드의 일이다. 손님은 주방을 못 보지만, 주방이 없으면 애초에 장사가 안 된다.
핵심은 이거다. 홀만 예뻐도 안 되고, 주방만 좋아도 안 된다. 둘이 짝이다. 이 한 가지만 기억하면 나머지는 따라온다.
실전 예시 — 신청 폼을 누르면 뒤에서 벌어지는 일
말로만 들으면 감이 안 오니, 실제로 돌아가는 사이트 하나로 보자. 방문자가 신청 폼을 누르는 순간 무슨 일이 일어나는지 따라가 보면 프론트와 백엔드가 한 몸으로 일하는 모습이 그대로 드러난다.
| 단계 | 구분 | 하는 일 | 손님 눈에 |
|---|---|---|---|
| 신청 폼 | 프론트 | 방문자가 이름·연락처를 채우고 "신청"을 누르는 화면 | 보인다 |
| 클라우드 DB | 백엔드 | 제출된 내용을 한 줄씩 안전하게 저장하는 장부 | 안 보인다 |
| 알림 | 백엔드 | 운영자에게 "새 신청 도착"을 즉시 딩동 보낸다 | 안 보인다 |
여기서 DB란 데이터베이스, 즉 정보를 차곡차곡 쌓아 두는 디지털 장부를 말한다. 방문자가 실제로 만지는 건 맨 앞의 폼 하나뿐이다. 나머지 두 칸(저장과 알림)은 손님 눈에 안 보이게 뒤에서 조용히 돕는다. 손님은 "이름 넣고 버튼 눌렀다"밖에 모르지만, 그 한 번의 클릭에 백엔드 두 개가 동시에 움직인 것이다. 이게 프론트와 백엔드가 짝으로 일한다는 말의 실제 모습이다.
개념 둘 — 도메인은 간판 주소, 호스팅은 건물 임대
프로그램을 인터넷에 올리려면 두 가지가 더 필요하다. 주소와 자리다. 이 둘을 각각 도메인과 호스팅이라 부른다.
도메인(인터넷 주소)은 간판에 적는 주소다. 사람들이 찾아오는 도로명주소라고 보면 된다. 가게 간판에 "○○로 12길 5"가 적혀 있어야 손님이 찾아오듯, 인터넷 주소가 있어야 방문자가 내 프로그램을 찾아온다. 이 주소는 매년 임대료(등록비)를 내고 빌려 쓴다.
호스팅(프로그램이 올라가 돌아가는 컴퓨터 자리)은 건물 임대다. 내 프로그램이 실제로 올라가 돌아가는 컴퓨터를 빌리는 것으로, 남의 튼튼한 건물 한 칸을 월세로 빌린다고 보면 된다. 주소만 있고 건물이 없으면 장사를 못 한다. 몸 담을 자리, 그게 호스팅이다.
이 둘을 연결하면 마법이 일어난다. 주소(도메인)를 건물(호스팅)에 이어 붙이면, 그 주소를 친 사람은 내 건물로 안내된다. 이 연결이 곧 "사이트가 열린다"의 정체다. 어렵게 들리지만, 실은 주소 하나를 자리 하나에 묶는 일이다.
개념 셋 — "배포한다"는 가게를 오픈하는 것
이제 오늘의 핵심 단어다. 배포. 무겁게 들리는 이 단어를 한 문장으로 바꾸면 이렇다. 내 주방의 레시피를, 24시간 무인 매장에 옮겨 설치하는 것.
내 노트북(집 주방)에서만 되던 걸, 남이 빌려준 건물(클라우드)에 그대로 복사해 올려서, 내가 자는 동안에도 손님을 받게 만드는 일 — 이게 배포다. 여기서 클라우드란 누군가 대신 관리해 주는, 절대 안 꺼지는 컴퓨터를 말한다. 내 노트북은 닫으면 죽지만, 클라우드는 밤에도 돌아간다.
배포가 끝나면 도메인 주소를 친 전 세계 누구나 내 프로그램을 쓸 수 있다. 바로 이 순간부터 "내 것"이 "서비스"가 된다. 가게로 치면 문을 열고 간판에 불을 켜는 순간, 지나가던 누구나 들어올 수 있게 되는 것과 똑같다.
실전 배포 — 코드를 밀어 넣으면 몇 분 뒤 사이트가 바뀐다
배포를 한 번 해두고 나면, 그다음 수정은 놀랄 만큼 간단하다. 실제로 사이트를 고칠 때 어떻게 돌아가는지 세 단계로 보자.
| 단계 | 명령/작업 | 무슨 일이 벌어지나 |
|---|---|---|
| 1 | git push | 고친 코드를 인터넷 창고에 "올려" 한 줄 명령 |
| 2 | 자동 배포 | 배포 서비스(Vercel 등)가 알아서 새 버전으로 교체 |
| 3 | 사이트 반영 | 몇 분 뒤, 방문자 화면에 수정본이 자동으로 뜬다 |
여기서 git push란 내가 고친 코드를 인터넷 창고에 올리는 명령어 한 줄이다(Git은 시리즈 앞 편에서 다룬, 코드의 버전을 저장하고 되돌리는 도구다). Vercel은 그렇게 올라온 코드를 받아 자동으로 사이트에 반영해 주는 배포 서비스의 이름이다.
글씨 하나를 고치려고 서버실에 들어가거나 파일을 손으로 옮기지 않는다. 코드를 고치고 git push 한 줄이면 끝이다. 배포 서비스가 알아서 새 버전을 만들어 몇 분 뒤 실제 사이트에 반영하고, 그 사이 나는 커피를 마신다. "배포"라는 무거운 단어가, 실제로는 버튼 누르고 기다리는 일로 바뀐 것이다. 이게 AI 시대 배포의 감각이다.
흔한 오해 — 배포를 겁내게 만드는 두 가지 생각
배포를 무섭게 만드는 오해가 둘 있다. 짚고 넘어가자.
첫 번째 오해는 "배포하려면 서버 컴퓨터를 사서 직접 관리해야 한다"는 것이다. 비싼 장비를 사고, 24시간 켜두는 전기세를 내고, 고장 나면 밤에 뛰어가는 상상. 실제는 다르다. 남의 건물을 빌리면 되고, 관리는 그쪽이 한다. 클라우드 업체가 장비도 전기도 고장도 다 책임진다. 나는 자리만 빌린다.
두 번째 오해는 "배포는 전문가만 하는 복잡하고 위험한 작업"이라는 것이다. 한 번 잘못 누르면 다 날아갈 것 같은 두려움. 실제는 버튼 몇 번이면 시작되고, 되돌리기도 된다. 잘못돼도 이전 버전으로 한 번에 복구할 수 있다(앞 편에서 배운 Git 덕분이다). 게다가 대부분 무료 티어로 공짜로 시작할 수 있다. 여기서 무료 티어란, 소규모 사용은 돈을 안 받고 열어주는 공짜 등급을 말한다.
두 오해를 걷어내면 배포는 더 이상 무섭지 않다. 코드를 창고에 올리고 연결 한 번이면 나머지는 배포 서비스가 대신하고, AI에게 "이거 배포하게 도와줘"라고 시키면 된다. Vercel이나 Netlify 같은 서비스는 소규모는 무료라 0원으로 세상에 오픈할 수 있다. 한 번 배포해 두면 이후 수정은 git push 한 줄이고, 잘못돼도 되돌린다. 완벽하게 만들고 올릴 필요가 없다는 뜻이다. 배포는 책으로 배우는 게 아니라 작은 걸 한 번 실제로 올려 보면 끝나는, 그런 종류의 실력이다.
딱 세 줄만 가져가기
- 프론트엔드는 홀(손님이 보는 화면), 백엔드는 주방(뒤에서 처리·저장). 둘은 항상 짝이다. 신청 폼(프론트)이 눌리면 저장·알림(백엔드)이 뒤에서 돈다.
- 도메인은 간판 주소, 호스팅은 건물 임대. 주소를 건물에 연결하면 "사이트가 열린다". 둘 다 남에게 빌려 쓴다.
- 배포는 내 레시피를 24시간 무인 매장에 옮겨 설치하는 가게 오픈. 남의 컴퓨터(클라우드)에 올려 내가 자도 돌아가고, 버튼 몇 번과 무료 티어면 시작된다.
오늘 기억할 건 하나면 충분하다. 배포는 남의 컴퓨터에 내 프로그램을 올려 24시간 돌리는 것. 이 한 문장이면 된다.
다음 편에서는 배포를 하다 보면 반드시 만나는 빨간 글씨, 에러 메시지를 다룬다. 무서워하지 않고 어디서·뭐가·왜 났는지를 읽어내 AI에게 제대로 던져 고치게 하는 법이다.
다음 편 — 바이브코딩 강의 8편