localhost는 내 컴퓨터 안에서만 보이는 주소입니다. 배포는 내가 만든 웹앱을 인터넷 주소로 올려 친구의 스마트폰에서도 열리게 만드는 과정입니다.
DAY 1 · 6교시 · 60분
Vercel 원클릭 배포로 모바일 연동
➔
➔
📚1단계: 주요 개념 설명
이번 단원의 목표
Vercel 플랫폼을 통해 웹 코드를 호스팅 배포하고 스마트폰으로 접속한다.
🗂️강의 슬라이드
슬라이드 1 / 10
인터넷 세상에 웹 사이트 배포하기
- localhost:3000은 내 컴퓨터 안에서만 바로 확인하는 주소입니다.
- 배포를 하면 친구 스마트폰에서도 열 수 있는 인터넷 주소가 생깁니다.
- Vercel은 Next.js 웹앱을 쉽게 올릴 수 있는 배포 플랫폼입니다.
🛠️2단계: 따라하기 실습
🛠 따라 만들기 · AI 바이브 코딩
인터넷에 배포해서 폰으로 접속하기지금까지 내 컴퓨터에서만 열리던 앱을, 누구나 접속할 수 있게 Vercel에 배포합니다. 배포는 코딩보다 '순서와 보안'이 중요하니, 막힐 때 AI에게 묻는 법도 함께 익힙니다.
🎯 완성 결과: https 주소로 발급되어 폰에서도 열리는 나의 쇼츠 생성기
1배포 전 보안 점검
API 키가 실수로 공개되지 않도록 확인합니다.
🤖 AI에게 이렇게 시켜보세요
이 Next.js 프로젝트를 Vercel에 배포할 거야. .gitignore에 .env.local이 들어 있는지 확인하고, 없으면 추가해줘. 그리고 배포 전에 점검할 보안 체크리스트를 알려줘.
💡 핵심 코드 설명
- .env.local(내 API 키)은 절대 GitHub에 올라가면 안 됩니다 — .gitignore에 있는지 꼭 확인합니다.
- 한 번이라도 공개된 키는 바로 폐기(재발급)하는 것이 원칙입니다.
2GitHub에 올리고 Vercel에 연결
코드를 올리고 Vercel과 연동해 자동 배포합니다.
💡 핵심 코드 설명
- Vercel은 GitHub 저장소를 연결하면 코드가 바뀔 때마다 자동으로 다시 배포해 줍니다.
- 복잡한 서버 설정 없이 클릭 몇 번으로 공개 주소(https)가 발급됩니다.
3환경변수 넣기 (막히면 AI에게)
배포된 앱에 API 키를 안전하게 넣습니다.
🤖 AI에게 이렇게 시켜보세요
Vercel에 배포했더니 대본 생성에서 401 오류가 나. Vercel 프로젝트 설정에서 OPENAI_API_KEY 환경변수를 추가하는 방법을 단계별로 알려줘.
💡 핵심 코드 설명
- 로컬의 .env.local은 배포에 포함되지 않습니다. 그래서 Vercel 설정의 Environment Variables에 키를 따로 넣어야 합니다.
- 값을 넣고 재배포하면 반영됩니다. 이렇게 '에러 메시지를 그대로 AI에게 물어보는 것'이 가장 빠른 디버깅입니다.
✓실습 미션 체크리스트
우측 Git 보안 자가진단 리스트에서 배포 전 반드시 제외해야 할 로컬 비밀키 설정 파일(.env.local)을 검증하여 무사 통과 합격 점수를 얻어 배포 프로세스를 완료해 보세요.
Vercel 배포 트리거 설정
# vercel 로그인 인증 npx vercel login # 프로젝트 기본 설정 및 클라우드 배포 실행 npx vercel --prod
💡 코딩 중 막히나요? 모범 솔루션 코드
🧩3단계: 개념 검증 퀴즈
검증 챌린지 미션
웹 서버 배포 무결성 심사가 완료되고 최종 Vercel 접속 도메인이 보안 에러 없이 무사 생성되는지 확인합니다.
📝 객관식 개념 확인 (2문항)
Q1. Vercel 배포 시 API 비밀키를 다루는 올바른 방법은?
Q2. '빌드(build)'가 하는 일로 옳은 것은?
🔬 인터랙티브 체험 (선택)— 개념을 직접 조작하며 확인해 보세요
Vercel 클라우드에 배포할 파일을 골라보세요. API Key 유출 위험이 있는 파일은 반드시 제외해야 합니다.
내 컴퓨터 주소
localhost:3000
내 컴퓨터에서만 바로 확인하는 주소입니다.
배포 주소
https://my-app.vercel.app
친구 스마트폰에서도 열 수 있는 공유 주소입니다.
🛡️