Vercel 배포, 내 앱을 인터넷에 공개하는 법 — 바이브 코딩 시즌1 #3

📍 시리즈 위치

0편: 환경 세팅 ✓

→

1편: 첫 앱 완성 ✓

→

2편: 에러 공포 극복 ✓

→

▶ 3편: Vercel 배포 (지금)

🌍 배포가 뭔지부터 — 비개발자용 한 줄 설명

💡 이것만 기억하세요

배포는 어렵게 들리지만,
사실은 GitHub에 올린 프로젝트를
인터넷에서 열 수 있게 만드는 과정에 가깝습니다.

💬 지금 이런 상태라면

2편을 거쳐 에러도 극복하고 앱이 잘 작동하고 있습니다.

그런데 주소가 http://localhost:3000 입니다.
내 컴퓨터에서만 열립니다. 친구한테 이 주소를 보내면 아무것도 안 열립니다.

「배포」라는 말을 들었는데 뭔가 복잡해 보입니다.
서버 설정, 도메인, 클라우드 — 이런 단어들이 나와서 지레 포기했습니다.

Vercel을 쓰면 이 과정이 클릭 몇 번으로 끝납니다. 그리고 이번 편에서 배울 중요한 것이 하나 있습니다 — 내 앱을 먼저 파악하면 배포가 훨씬 쉬워진다는 것입니다.

배포 전체 구조 — 이 흐름만 이해하면 됩니다

💻

내 컴퓨터

VS Code에서
코드 작성

→

git push

🐙

GitHub

코드 저장소
(백업 + 배포 연결)

→

자동 감지

▲

Vercel

자동 빌드
+ 배포

→

공개

🌍

인터넷

누구나
URL로 접속

한 번 연결해두면 — 이후로는 git push만 해도 자동으로 배포됩니다.

GitHub은 코드를 저장하는 곳.
Vercel은 그 코드를 인터넷에서 열 수 있게 만드는 곳.
둘 다 무료 플랜으로 시작할 수 있습니다.

🔍 배포 전 가장 먼저 할 것 — 내 앱이 어떤 종류인지 확인

초기에 이런 정보가 없어 저 또한 당황했는데, 좀 더 복잡한 앱을 제작하고 배포 할 때 꼭 필요한 개념이기에 여기서 짚고 넘어 갑니다. GitHub과 Vercel 작업을 시작하기 전에 딱 한 가지를 먼저 파악해야 합니다.내 앱이 「정적 앱」인지, 「서버 기능이 있는 앱」인지입니다. 이 구분이 배포 난이도를 크게 바꿉니다.

📊 내 앱이 어느 쪽인지 확인해보세요

✅ 정적 앱 (Static App)

✓HTML/CSS/JS만 사용

✓메모·계산이 브라우저 안에서만 처리됨

✓DB(데이터베이스) 없음

✓로그인 기능 없음

✓외부 API 직접 중계 없음

✓Express가 파일만 제공하는 역할

→ Vercel에 변환 없이 바로 배포 가능
index.html만 있어도 배포됩니다 🎉

⚠️ 서버 기능이 있는 앱

!DB에 데이터 저장·조회

!로그인·회원가입 처리

!외부 API 키를 서버에서 중계

!파일 업로드·서버 저장

!서버에서 직접 계산·처리 후 응답

→ Vercel 서버리스 방식으로 변환 필요
AI에게 변환 요청 후 배포합니다

모르겠다면? AI에게 이렇게 물어보세요 → 「내 server.js 파일이 단순히 HTML 파일을 제공하기만 하는지, 아니면 DB나 API 처리 같은 서버 기능이 실제로 있는지 확인해줘」

정적 앱 vs 서버 앱 구조 비교 — 바이브 코딩 배포 전 앱 유형 확인

🟢 정적 앱이라면 — 변환 없이 바로 배포 가능합니다

이번 시리즈에서 함께 만든 메모 앱을 기준으로 설명합니다. 먼저 이 앱의 실제 구조를 확인해볼게요.

✅ 현재 메모 앱의 실제 구조

이 앱은 사실상 「정적 웹사이트」에 가깝습니다

✓메모 추가·삭제가 브라우저 내부(JavaScript)에서만 처리됩니다

✓DB(데이터베이스)가 없습니다 — 서버에 아무것도 저장하지 않습니다

✓로그인 기능이 없습니다

✓외부 API 호출이 없습니다

✓Express가 하는 일은 HTML/JS 파일을 브라우저에 전달하는 것뿐입니다

그래서 Vercel이 이 앱을 정적 사이트처럼 바로 배포할 수 있습니다. 별도의 서버리스 변환이 필요하지 않습니다. 💡 페이지를 새로고침하면 메모가 사라지는 것도 이 구조 때문입니다. 서버 저장이 없으니 브라우저를 닫으면 데이터가 초기화됩니다. 이건 나쁜 게 아니라 지금 단계에서 완전히 정상입니다.

처음에는 「정적 앱 배포」만 성공해도 충분합니다.
대부분의 초보 바이브 코딩 앱은 여기서 시작합니다.
DB·로그인은 다음 단계에서 배울 내용입니다.

이 사실을 먼저 이해하면 배포에 대한 공포감이 크게 줄어듭니다. 지금 단계의 메모 앱은 복잡한 변환 없이 GitHub에 올리고 Vercel로 클릭 몇 번이면 인터넷에 공개됩니다.

처음부터 Next.js로 만든 앱이라면? 변환 없이 바로 배포 가능합니다.
Vercel이 Next.js를 만든 회사라 궁합이 완벽합니다. 다음 단계로 바로 이동하세요.

⚠️ 서버 기능이 있는 앱이라면 — Express → 서버리스 변환

메모 앱이 아닌, DB 저장이나 로그인 등 실제 서버 기능이 있는 Express 앱을 Vercel에 올리려 한다면 변환이 필요할 수 있습니다. 이건 코드 실력 문제가 아닙니다.

⚠️ 서버 기능이 있는 Express 앱 — 이렇게 대응하세요

DB/API 처리가 있는 Express 앱은 Vercel 서버리스 방식으로 변환이 필요할 수 있습니다

Vercel은 서버리스(Serverless) 환경입니다. 항상 켜져 있는 일반 서버와 달리 요청이 올 때만 실행되는 방식입니다. DB 연결·로그인 처리 등 서버 기능이 있는 Express 앱이라면 AI에게 변환을 요청하면 대부분 해결됩니다. 단, 단순히 파일만 전달하는 Express 앱이라면 변환 없이도 됩니다. AI에게 먼저 확인을 요청하세요.

✅ 복붙용 — 서버 기능 확인 + 변환 요청 프롬프트

내 server.js 파일이야. 이 파일이 단순히 HTML 파일만 제공하는지, 아니면 DB 저장·로그인·API 중계 같은 실제 서버 기능이 있는지 먼저 알려줘. 서버 기능이 있다면, Vercel에 배포할 수 있도록 serverless 방식으로 변환해줘. vercel.json 설정 파일도 함께 만들어줘. 변환 후 로컬에서 테스트하는 방법도 알려줘.

🐙 GitHub 저장소 만들고 코드 올리기

Vercel은 GitHub 저장소와 연동해서 작동합니다. GitHub 계정이 없다면 먼저 만들어야 합니다. 무료입니다.

1

GitHub 계정 만들기

github.com 접속 → Sign up → 이메일·비밀번호·사용자명 입력 → 이메일 인증. 이미 계정이 있다면 이 단계는 건너뜁니다.

✅ 확인: github.com 에서 내 프로필 아이콘이 보이면 완료

2

새 저장소(Repository) 만들기

GitHub 로그인 후 오른쪽 상단 + 버튼 → "Create repository" 클릭. 아래 설정으로 입력합니다.

저장소 설정

Repository name: my-memo-app (영어·하이픈만, 공백 금지) Public / Private: Public 선택 (Vercel 무료 플랜에서 Public 필요) README 추가 여부: 체크 안 함 → "Create repository" 클릭

✅ 확인: 빈 저장소 페이지가 열리면 완료

3

.gitignore 파일 만들기 — node_modules·.env 제외

node_modules 폴더는 수천 개의 파일이 들어있고 GitHub에 올릴 필요가 없습니다. .env는 API 키 등 비밀 정보가 담겨 있어 반드시 제외해야 합니다. VS Code에서 프로젝트 루트(최상위 폴더)에 .gitignore 파일을 새로 만들고 아래 내용을 붙여넣습니다.

⚠️ 반드시 알아야 할 규칙 — 줄바꿈(엔터)으로 구분해야 합니다. 이거 중요합니다.

❌ 이렇게 하면 안 됩니다

node_modules/.env.DS_Store*.log

한 줄에 붙여 쓰면 전체를 하나의 파일 이름으로 인식합니다. 아무것도 무시되지 않아 node_modules가 그대로 올라갑니다.

✅ 이렇게 해야 합니다

node_modules/
.env
.DS_Store
*.log

.gitignore는 한 줄에 하나씩 읽습니다. 각 항목을 엔터(줄바꿈)로 구분해야 정상 작동합니다.

.gitignore 파일 내용 — 복사해서 그대로 붙여넣기

node_modules/ .env .DS_Store *.log

🚨 이미 node_modules나 .env가 GitHub에 올라간 경우

이 실수 저도 처음 시작할때 뭣도 모르고 다 올렸는데 걱정하지 마세요. 지금 바로 제거할 수 있습니다 — 실제 파일은 삭제되지 않습니다

.gitignore를 만들기 전에 git add .를 실행했거나, 줄바꿈 없이 붙여 썼을 때 발생합니다. 아래 순서대로 실행하면 GitHub에서만 제거됩니다. 내 컴퓨터의 실제 파일은 그대로 유지됩니다.

1

Git 추적에서 제거 (--cached = 실제 파일은 건드리지 않음)

# node_modules 폴더 전체를 Git 추적에서 제거 git rm -r --cached node_modules # .env 파일을 Git 추적에서 제거 git rm --cached .env

실행 후 터미널에 파일 목록이 쭉 나오는 것은 정상입니다.

2

.gitignore 파일 확인 — 줄바꿈으로 구분되어 있는지 확인

# .gitignore 내용 — 한 줄에 하나씩 있는지 확인 node_modules/ .env .DS_Store *.log

3

변경사항 커밋 후 push

git add . git commit -m "node_modules, .env GitHub에서 제거" git push

4

GitHub 저장소 페이지 새로고침으로 확인

✅ node_modules 폴더가 사라져 있으면 완료

✅ .env 파일이 사라져 있으면 완료

📊 올라가면 안 되는 것 vs 올라가야 하는 것

파일·폴더

GitHub 업로드

이유

node_modules/

❌ 올리면 안 됨

용량 크고 npm install로 자동 생성됨

.env

❌ 올리면 안 됨

API 키 등 비밀 정보 포함

.DS_Store

❌ 올리면 안 됨

Mac 시스템 파일, 불필요

server.js

✅ 올려야 함

실제 앱 코드

package.json

✅ 올려야 함

의존성 목록 — Vercel이 이 파일로 npm install 실행

public/

✅ 올려야 함

HTML, CSS, JS 등 실제 앱 파일

.gitignore

✅ 올려야 함

제외 목록 파일 자체는 공유해도 됨

4

코드를 GitHub에 올리기 — 터미널 또는 GitHub Desktop 선택

두 가지 방법 중 편한 쪽을 선택하면 됩니다. 결과는 완전히 동일합니다.

⌨️

방법 A — 터미널 (명령어)

VS Code 터미널에서 git 명령어를 직접 입력합니다. AI와 협업하거나 실무에서 자연스럽게 쓰이는 방식입니다.

개발자 방향으로 성장하고 싶다면 추천

또는

🖥️

방법 B — GitHub Desktop (클릭)

별도 앱을 설치해서 버튼 클릭만으로 업로드합니다. 명령어 없이도 되고 Git도 자동 설치됩니다.

지금 당장 배포에 집중하고 싶다면 추천

📖

관련 글

비개발자가 바이브 코딩을 시작하면 GitHub를 가장 먼저 배워야 하는 이유 — GitHub 입문

터미널 방식과 GitHub Desktop 설치·기본 사용법이 설명되어 있습니다. 아래에서 기본 적인 사항만 정리합니다. 다음 편에 GitHub 사용에 대해 설명 예정입니다.

방법 A 터미널 방식 — git 명령어로 올리기

⚙️ 먼저 확인 — Git이 설치되어 있나요?

VS Code 터미널에서 아래 명령어를 입력해보세요

git --version

✅

이렇게 나오면 — 설치 완료, 바로 다음으로

git version 2.44.0.windows.1 (버전 숫자는 달라도 됩니다)

❌

이렇게 나오면 — Git 미설치, 아래에서 설치

'git'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. (Windows) 또는 command not found: git (Mac)

🔽 Git 설치 방법 — OS별

🪟 Windows

1

git-scm.com 접속 → "Download for Windows" 클릭

2

다운로드된 .exe 파일 실행 → 설치 옵션은 모두 기본값(Next)으로 진행

3

설치 완료 후 VS Code를 완전히 종료했다가 다시 실행

4

터미널에서 git --version 다시 입력 → 버전 숫자가 나오면 완료

💡 설치 중 "Git Bash", "Git GUI" 선택 화면이 나와도 기본값 그대로 Next만 누르면 됩니다.

🍎 Mac

1

터미널에서 xcode-select --install 입력

2

팝업이 뜨면 "설치" 클릭 → 완료까지 대기 (수 분 소요)

3

git --version 다시 입력 → 버전 숫자가 나오면 완료

💡 Homebrew가 설치되어 있다면 brew install git으로도 설치 가능합니다.

🪪 Git 최초 설치 후 딱 한 번만 — 사용자 정보 등록

Git이 처음 설치된 상태라면 아래 두 줄을 한 번 실행해두어야 합니다. commit에 이름과 이메일이 기록됩니다. GitHub 계정과 동일한 이메일을 사용하는 것을 권장합니다.

# 본인 이름과 이메일로 교체해서 입력 git config --global user.name "홍길동" git config --global user.email "your@email.com" # 잘 등록됐는지 확인 git config --global user.name 홍길동 ← 이렇게 나오면 완료

이 설정은 컴퓨터에 한 번만 하면 됩니다. 다음번 프로젝트에서는 다시 할 필요가 없습니다.

💡 git 명령어 — 이렇게 이해하면 됩니다

git add .

→

업로드할 파일 선택 (변경된 파일들을 보따리에 담기)

git commit

→

저장 시점 기록 ("이 상태로 저장"이라고 이름 붙이기)

git push

→

GitHub에 올리기 (보따리를 인터넷 창고에 전송)

STEP 1

Git 저장소 초기화 — 이 폴더를 Git이 관리하게 선언

현재 프로젝트 폴더에서 Git을 시작하겠다고 선언하는 명령어입니다. 프로젝트마다 처음 한 번만 실행합니다.

git init

실행 후 이런 메시지가 나오면 정상

Initialized empty Git repository in C:/Users/.../my-memo-app/.git/

💡 폴더 안에 숨긴 폴더 .git이 생성됩니다. 이 폴더가 변경 이력을 전부 기록합니다. 건드리지 않아도 됩니다.

STEP 2

파일 전부 선택 — 보따리에 담기

업로드할 파일들을 선택하는 단계입니다. 점(.) 하나가 「현재 폴더의 모든 파일」을 뜻합니다.

git add .

아무 메시지도 안 나오면 — 정상입니다

아무것도 출력되지 않음 ← 이게 정상

💡 .gitignore에 적힌 파일(node_modules, .env 등)은 자동으로 제외됩니다.

STEP 3

저장 시점 기록 — 이름 붙여서 저장

지금 이 상태를 이름을 붙여 저장하는 단계입니다. -m 뒤의 따옴표 안이 저장 이름(메시지)입니다. 한글도 괜찮습니다.

git commit -m "첫 번째 커밋: 메모 앱 완성"

실행 후 이런 메시지가 나오면 정상

[main (root-commit) a1b2c3d] 첫 번째 커밋: 메모 앱 완성 5 files changed, 120 insertions(+)

⚠️ Author identity unknown 에러가 나면 — Git 설치 안내의 사용자 정보 등록(git config) 단계를 먼저 완료한 뒤 다시 실행하세요.

STEP 4

GitHub 저장소와 연결 — 어디에 올릴지 주소 등록

내 컴퓨터의 프로젝트와 아까 만든 GitHub 저장소를 연결하는 단계입니다. 저장소 주소(URL)는 GitHub 저장소 페이지에서 복사합니다.

📋 GitHub 저장소 주소 복사하는 방법

1GitHub 저장소 페이지 접속

2초록색 "<> Code" 버튼 클릭

3"HTTPS" 탭 선택 → 주소 복사 아이콘 클릭

복사된 주소 형태: https://github.com/내아이디/my-memo-app.git

# 아래 주소를 본인 저장소 주소로 교체 git remote add origin https://github.com/사용자명/my-memo-app.git

아무 메시지도 안 나오면 — 정상입니다

아무것도 출력되지 않음 ← 이게 정상

💡 origin은 GitHub 저장소를 부르는 별명입니다. 관례적으로 origin이라고 씁니다.

STEP 5

GitHub에 업로드 — 보따리를 인터넷 창고에 전송

지금까지 준비한 파일들을 GitHub에 실제로 올리는 단계입니다. -u origin main은 처음 push할 때만 붙입니다. 이후에는 git push만 해도 됩니다.

git push -u origin main

실행 후 이런 메시지가 나오면 정상

Enumerating objects: 8, done. Counting objects: 100% (8/8), done. Branch 'main' set up to track remote branch 'main' from 'origin'.

🎉 GitHub 저장소 페이지를 새로고침하면 내 파일들이 보입니다

⚠️ error: src refspec main does not match any 에러가 나면 → git push -u origin master 로 바꿔서 실행해보세요. (Git 버전에 따라 기본 브랜치 이름이 다를 수 있습니다)

✅ 확인: GitHub 저장소 페이지에서 내 파일(server.js, package.json 등)이 보이면 완료

🔐 처음 push 시 GitHub 로그인 창이 뜨면

1

브라우저 창이 자동으로 열리고 GitHub 로그인 페이지가 나타납니다 — 정상입니다

2

GitHub 계정으로 로그인 → "Authorize" 클릭

3

브라우저를 닫으면 VS Code 터미널에서 push가 자동으로 완료됩니다

한 번 인증하면 이후에는 로그인 창이 다시 뜨지 않습니다.

방법 B GitHub Desktop 방식 — 클릭으로 올리기

GitHub Desktop은 git 명령어 없이 버튼 클릭만으로 GitHub에 코드를 올릴 수 있는 공식 앱입니다. Git이 별도로 설치되어 있지 않아도 GitHub Desktop 설치 시 자동으로 포함됩니다.

STEP 1

GitHub Desktop 설치

desktop.github.com 접속 → "Install for Windows" 또는 "Install for macOS" 클릭 → 설치 파일 실행 → 설치 완료 후 앱 자동 실행

✅ 앱이 열리면 완료. Git 별도 설치 불필요.

💡 앱 설치 후 GitHub 계정으로 로그인하면 저장소 목록이 자동으로 연동됩니다.

STEP 2

GitHub 계정으로 로그인

앱 실행 후 "Sign in to GitHub.com" 클릭 → 브라우저에서 GitHub 계정으로 로그인 → "Authorize desktop" 클릭 → 앱으로 자동 복귀

✅ 앱 왼쪽 상단에 내 GitHub 아이디가 보이면 완료

STEP 3

내 프로젝트 폴더를 GitHub Desktop에 추가

두 가지 방법 중 하나를 선택합니다.

방법 1 — 드래그 앤 드롭

VS Code에서 열려 있는 프로젝트 폴더를 GitHub Desktop 창으로 드래그

방법 2 — 메뉴에서 추가

GitHub Desktop 상단 메뉴 File → Add Local Repository → 프로젝트 폴더 선택 → "Add Repository" 클릭

💡 "This directory does not appear to be a Git repository" 메시지가 뜨면 → "create a repository" 링크 클릭 → "Initialize Repository" 클릭

✅ 왼쪽 패널에 변경된 파일 목록이 보이면 완료

STEP 4

첫 번째 커밋 — 저장 시점 기록

앱 왼쪽 하단에 커밋 입력창이 있습니다.

Summary (필수)

첫 번째 커밋: 메모 앱 완성

Description (선택)

바이브 코딩 시즌2 — 메모 앱 완성본

Commit to main

✅ 하단 커밋 버튼을 클릭하면 로컬 저장 완료

STEP 5

GitHub 저장소 만들고 업로드 (Publish)

커밋 후 상단에 "Publish repository" 버튼이 나타납니다.

Name

my-memo-app

Keep this code private

☐ 체크 해제 (Public으로 설정 — Vercel 무료 플랜)

Publish Repository

✅ GitHub 저장소 페이지에서 파일이 보이면 완료

💡 이후 코드 수정 시에는 Changes 탭에서 변경 파일 확인 → Summary 입력 → Commit → Push origin 버튼 클릭 — 이 세 단계만 반복하면 됩니다.

🔄 이후 코드 수정 → 재배포 흐름 (GitHub Desktop)

코드 수정 후 저장

→

Changes 탭 확인

→

Summary 입력 + Commit

→

Push origin 클릭

→

Vercel 자동 배포

터미널 방식의 git add → git commit → git push와 완전히 동일한 과정입니다.

GitHub 저장소에 바이브 코딩 앱 파일 업로드 완료 화면

▲ Vercel 연동 — 클릭 5번으로 배포 완성

GitHub에 코드가 올라갔습니다. 이제 Vercel과 연결해서 실제 URL을 만들 차례입니다.

1

Vercel 가입 — GitHub 계정으로 바로 로그인

vercel.com 접속 → "Sign Up" → "Continue with GitHub" 클릭. 별도 가입 없이 GitHub 계정으로 바로 로그인됩니다.

✅ 확인: Vercel 대시보드가 열리면 완료

2

새 프로젝트 추가

Vercel 대시보드에서 "Add New Project" → "Import Git Repository" → 아까 만든 GitHub 저장소(my-memo-app)를 선택합니다.

💡 GitHub 저장소가 보이지 않는다면 → "Adjust GitHub App Permissions" 클릭 → 해당 저장소 접근 권한 허용

3

프로젝트 설정 확인 후 Deploy

Vercel이 자동으로 프레임워크를 감지합니다. 정적 앱의 경우 대부분 기본 설정 그대로 두면 됩니다.

확인할 설정

Framework Preset: Other (정적 앱·Express) / Next.js (Next.js의 경우) Root Directory: ./ (기본값 그대로) Build Command: 비워둬도 됨 (정적 앱은 빌드 불필요) Output Directory: public (정적 파일 폴더) → "Deploy" 버튼 클릭

⚠️ 설정이 헷갈린다면 AI에게 "내 package.json 보고 Vercel 배포 설정값 알려줘"라고 물어보세요.

4

빌드 완료 대기 — 1~2분

Vercel이 자동으로 코드를 빌드하고 배포합니다. 진행 로그가 실시간으로 표시됩니다.

✅ "Congratulations!" 화면이 나오면 배포 완료

💡 빌드 에러가 났다면 → 로그 전체 복사 → AI에게 "Vercel 배포 중 이 에러가 났어, 원인 설명해줘" 전달

5

URL 확인 — 실제 인터넷 주소 생성 완료

Congratulations! 화면이 나왔다면 배포는 이미 완료된 것입니다. URL은 이 화면에서 바로 안 보일 수 있습니다. 아래 두 가지 방법으로 확인하세요.

🔍 배포된 URL 찾는 방법

방법 1

Congratulations! 화면에서 아래로 스크롤

화면을 아래로 내리면 "Visit" 버튼 또는 배포된 URL이 나타납니다. 클릭하면 실제 앱이 열립니다.

또는

방법 2 (가장 확실)

Vercel 대시보드에서 확인

1브라우저 주소창에 vercel.com/dashboard 입력

2방금 배포한 프로젝트 카드 클릭

3프로젝트 페이지 상단에 실제 URL 표시됨

📺 Vercel 대시보드에서 URL이 표시되는 위치

vercel.com/arahant74s-projects/my-memo-app

my-memo-app

🌐 배포 URL my-memo-app.vercel.app ← 여기!

Ready — 배포 완료

생성된 URL 형태

https://my-memo-app.vercel.app

📱 스마트폰에서도 열림 💬 카카오톡으로 공유 가능 🌍 전 세계 어디서든 접속 가능

✅ URL 클릭 후 내 앱 화면이 보이면 — 배포 완전 성공

💡 URL 형태가 my-memo-app-git-master-arahant74s-projects.vercel.app처럼 길게 나와도 정상입니다. 대시보드에서 짧은 주소(Alias)를 따로 확인할 수 있습니다.

📱 진짜 공개됐는지 확인하는 3가지 방법

배포 성공 화면만 보지 말고 — 직접 체감해보세요

📱

스마트폰으로 URL 직접 접속와이파이를 끄고 LTE로 접속해보세요. 내 컴퓨터와 완전히 무관하게 열립니다.

💬

카카오톡으로 지인에게 URL 전송"내가 만든 앱인데 한번 열어봐줘" — 상대방 화면에서 열리면 진짜 배포 완료입니다.

💻

VS Code를 완전히 종료하고 URL 접속로컬 서버(npm run dev)가 꺼진 상태에서도 URL이 열리면 Vercel 배포가 정상 작동 중입니다.

여기까지 확인됐다면 — 내 앱은 지금 이 순간 인터넷에 존재합니다 🌍

❌ Build Failed가 떠도 괜찮습니다

Vercel 배포 실패 — 이렇게 대응하세요

배포 중 에러가 나는 경우는 주로 세 가지입니다. 로그를 복사해서 AI에게 전달하면 됩니다.

Build Failed — npm install error

→ package.json이 없거나 의존성 오류. AI에게 package.json 확인 요청.

Cannot GET /

→ 서버 라우팅 설정 문제. vercel.json 설정을 AI에게 재작성 요청.

Function failed to respond / 504 Timeout

→ 서버리스 변환이 필요한 경우. AI에게 Express → serverless 변환을 다시 요청.

✅ 복붙용 — 배포 실패 시 AI 전달 템플릿

Vercel 배포 중 Build Failed가 떴어. 아래가 Vercel 빌드 로그야. [Vercel 빌드 로그 전체 복사해서 붙여넣기] 원인 먼저 설명해줘. 그다음에 수정 방법 알려줘.

Vercel 바이브 코딩 앱 배포 완료 화면 — 실제 URL 생성

🔄 자동 재배포 — 코드 수정 후 git push만 하면 끝

Vercel 연동의 가장 큰 장점은 이후 배포가 자동이라는 점입니다. 코드를 수정하고 GitHub에 올리면 Vercel이 자동으로 감지해서 새 버전을 배포합니다.

✅ 코드 수정 후 재배포 흐름 — 이 세 줄이 전부입니다

코드 수정 + 저장(Ctrl+S)

→

git add . → git commit → git push

→

Vercel 자동 빌드 (1~2분)

→

URL에 반영 완료

Vercel 대시보드나 별도 배포 명령어는 필요 없습니다. git push 한 번으로 전 과정이 자동 처리됩니다.

코드 수정 후 재배포 — 매번 이 세 줄만 실행

git add . git commit -m "메모 삭제 버튼 스타일 수정" git push → 1~2분 후 vercel.app URL에서 변경사항 확인

🔑 환경변수(.env) 배포 환경에 적용하기

지금 앱에 .env 파일이 없다면? 이 섹션은 건너뛰어도 됩니다.
API 키를 처음 다루는 5편에서 다시 설명합니다.

🔑 API 키(.env)를 사용하는 앱이라면 — 여기를 펼치세요

.env 파일은 보안상 .gitignore로 GitHub에서 제외됩니다. Vercel 대시보드에서 직접 입력해야 API가 작동합니다.

🔑 Vercel에 환경변수 입력하는 방법

.env 없이 배포하면 API가 작동하지 않습니다

로컬에서는 .env 파일로 API 키를 읽었지만, Vercel 환경에는 그 파일이 없습니다. 아래 순서로 직접 입력해야 합니다.

1

Vercel 대시보드 → 해당 프로젝트 클릭

2

상단 탭 "Settings" 클릭

3

왼쪽 메뉴 "Environment Variables" 클릭

4

.env 파일의 KEY=VALUE 내용을 한 줄씩 입력 후 Save

5

저장 후 git push로 재배포 → 환경변수 적용 확인

📌 핵심 요약

• 🔍배포 전에 내 앱이 「정적 앱」인지 「서버 기능 앱」인지 먼저 확인하는 것이 핵심입니다. 이 구분 하나가 배포 난이도를 크게 바꿉니다.
• 🟢DB·로그인·API 없는 정적 앱은 Express가 있어도 Vercel에 변환 없이 바로 배포 가능합니다. 이번 메모 앱이 바로 이 경우입니다.
• ⚠️DB 저장·로그인·API 중계 등 서버 기능이 실제로 있는 Express 앱은 Vercel 서버리스 방식으로 변환이 필요할 수 있습니다. AI에게 먼저 확인을 요청하세요.
• 🐙GitHub 업로드 시 .gitignore에 node_modules/와 .env 반드시 포함. 용량과 보안 모두를 위해서입니다.
• ▲Vercel 연동은 GitHub 저장소 선택 → Deploy 클릭이 전부. 1~2분 후 vercel.app 주소가 생성됩니다.
• 🔄이후 코드 수정은 git add . → git commit → git push 세 줄만 실행하면 자동으로 재배포됩니다.
• 🌱처음에는 정적 앱 배포 성공만으로도 충분합니다. DB·로그인은 이후 단계에서 자연스럽게 배우게 됩니다.

❓ 자주 묻는 질문

바이브 코딩으로 만든 메모 앱(DB 없음)은 Vercel에 바로 배포할 수 있나요?

네, 가능합니다. 메모를 브라우저 안에서만 처리하고 DB·API·로그인이 없는 앱은 사실상 정적 웹사이트입니다. Express가 파일만 제공하는 역할이라면 변환 없이 Vercel에 바로 배포할 수 있습니다. index.html만 있어도 배포 가능합니다. 모르겠다면 AI에게 「내 server.js가 정적 파일만 제공하는지 확인해줘」라고 먼저 물어보세요.

Express 앱이면 무조건 Vercel 서버리스 변환이 필요한가요?

아닙니다. Express가 단순히 HTML 파일을 제공(serve)하는 용도라면 변환 없이도 Vercel이 정적 사이트로 배포해줍니다. DB 저장, 로그인 처리, 외부 API 중계 같은 서버 기능이 실제로 있을 때만 서버리스 변환이 필요합니다. AI에게 「내 server.js가 정적 파일만 제공하는지, 아니면 서버 기능이 있는지 확인해줘」라고 먼저 물어보세요.

Vercel 배포 후 코드를 수정하면 어떻게 다시 배포하나요?

GitHub에 push만 하면 자동으로 재배포됩니다. Vercel은 연결된 GitHub 저장소의 main 브랜치에 변경이 생기면 자동으로 빌드하고 배포합니다. git add . → git commit → git push 세 줄이면 1~2분 안에 변경사항이 공개 URL에 반영됩니다. Vercel 대시보드를 따로 열 필요가 없습니다.

Vercel 배포 후 .env 환경변수는 어떻게 설정하나요?

.env 파일은 보안상 GitHub에 올라가지 않으므로 Vercel 대시보드에서 직접 입력해야 합니다. Vercel 프로젝트 페이지 → Settings → Environment Variables 메뉴에서 키와 값을 입력하면 됩니다. 입력 후 재배포(git push)하면 배포 환경에서도 환경변수가 적용됩니다.

여기까지 왔습니다 — 대단합니다 🎉

앱을 완성하고 (1편)
에러를 극복하고 (2편)
인터넷에 공개하는 것까지 (3편) 해냈습니다.

다음 단계는 「AI가 코드를 망쳐도 되돌릴 수 있는 상태」를 만드는 것입니다.
4편에서는 GitHub 백업 흐름과 commit 습관을 익힙니다.

▶ 다음 편 — 4편(업로드 예정)

GitHub 백업 흐름, 바이브 코딩 작업물 잃지 않는 법

commit·push 흐름, AI 수정 전 백업 습관 만들기

이전 편

시즌 2 2편 — 에러가 나도 괜찮습니다 . 빨간 화면 공포 극복 가이드