Vercel에 3D 게임을 일요일 밤까지 출시: 48시간 배포 플레이북
금요일 저녁 아무것도 없는 상태에서 일요일 저녁 식사 시간까지 your-game.vercel.app 링크를 만들 수 있습니다. 스택은 Three.js, Cursor, Vibe Skills의 AI 스킬, 그리고 Vercel 무료 티어입니다. 주말 총 비용: $0. 직접 관리해야 하는 총 인프라: 역시 제로입니다.
이것은 "노트북에서 프로토타입을 만들고 끝내는 것"이 아닙니다. 이것은 전 세계 누구나 브라우저에서 열 수 있는 공개 URL이며, HTTPS, 엣지 캐싱, 그리고 원한다면 사용자 지정 도메인까지 제공합니다. AI 스킬은 Three.js 스캐폴딩과 작동하는 vercel.json을 제공합니다. Cursor는 반복 루프를 처리합니다. Vercel은 배포를 처리합니다. 여러분은 디자인을 담당합니다.
이 가이드는 인디 개발자, 바이브 코더, 해커톤 참가자, 그리고 절반만 완성된 localhost:5173 탭에 지친 모든 사람들을 위한 것입니다. 이 스택이 왜 작동하는지, 48시간 배포의 구조, 워크플로우를 위해 제작된 5가지 3D 게임 스킬, 그리고 금요일부터 일요일까지의 단계별 과정을 다룹니다.
왜 Vercel + Three.js + AI 스킬이 솔로 개발자 스택인가
Vercel은 Three.js 게임을 위한 가장 게으른 배포 대상입니다. GitHub에 푸시하면 Vercel이 이를 감지하고 프로젝트를 빌드하여 60초 안에 URL을 다시 제공합니다. 서버를 프로비저닝할 필요도 없고, Docker 파일도 없고, NGINX 구성도 없고, SSL 설정도 없습니다. Three.js 번들은 정적 HTML, JS, WebGL 애셋일 뿐이며, 이는 Vercel의 엣지 네트워크가 제공하도록 설계된 것과 정확히 일치합니다.
무료 티어는 주말 출시를 충분히 감당할 수 있습니다.
- 월 100GB 대역폭. 5MB Three.js 빌드를 10,000번 플레이하면 50GB입니다. 주말이 대역폭보다 먼저 소진될 것입니다.
- HTTPS 및
*.vercel.app하위 도메인을 갖춘 무제한 정적 배포. - 무료 티어에서 사용자 지정 도메인 지원 - 이미 소유하고 있다면
name-game.com을 사용하세요. 그렇지 않으면 무료vercel.appURL은 모든 소셜 플랫폼에서 공유할 수 있습니다. - 모든 커밋에 대한 미리보기 배포 - 모든 푸시는 자체 URL을 받으므로 친구와 빌드를 공유하고 중단 없이 반복할 수 있습니다.
Vibe Skills에서 AI 스킬을 추가하면 보일러플레이트도 사라집니다. Three.js 장면 설정, 플레이어 컨트롤러, 빌드 파이프라인, 그리고 Vercel 준비가 된 vercel.json이 하나의 명령으로 생성됩니다. 그런 다음 Cursor는 주말의 나머지 시간을 여러분이 원하는 게임 플레이를 설명하고 출력을 조정하는 채팅으로 만듭니다. 이것이 전체 스택입니다. 기반을 위한 마켓플레이스 스킬, 반복을 위한 AI 편집기, 그리고 배포를 위한 Vercel입니다. 솔로, 무료, 그리고 빠릅니다.
48시간 구조: 금요일 컨셉부터 일요일 배포까지
실제로 라이브되는 모든 주말 출시는 동일한 단계를 따릅니다. 요점은 일요일 오후가 아닌 금요일에 배포를 계획하여 마지막 6시간을 빌드 오류와의 싸움이 아닌 폴리싱에 사용할 수 있도록 하는 것입니다.
| 단계 | 시간 블록 | 할 일 | 단계 종료 시까지 배포되는 것 |
|---|---|---|---|
| 1단계: 컨셉 | 금요일 6pm - 10pm | 장르 선택, 1페이지 디자인 문서 작성, Vibe Skills 3D 게임 스킬 설치, 시작 파일을 GitHub에 푸시, Vercel에 연결 | 보일러플레이트 장면이 있는 라이브 name-game.vercel.app URL |
| 2단계: 빌드 | 토요일 9am - 8pm | 플레이스홀더를 핵심 메커니즘으로 교체, 레벨 1개 추가, 승리/패배 상태 작동 확인 | 동일한 Vercel URL에 플레이 가능한 빌드, 모든 푸시에 자동 배포 |
| 3단계: 폴리싱 | 일요일 10am - 4pm | 사운드, 주스, 튜토리얼 팝업, 버그 검사, 모바일 성능 확인 | 첫 60초 동안 어떤 기기에서도 오류가 발생하지 않는 빌드 |
| 4단계: 출시 | 일요일 4pm - 8pm | 사용자 지정 도메인 설정(선택 사항), GIF 녹화, itch.io 페이지 작성, 링크 게시 | 공개 URL + itch.io 페이지 + 소셜 미디어 출시 게시물 |
이것이 작동하는 이유는 금요일에 Vercel에 푸시하기 때문입니다. URL이 존재하면 토요일과 일요일의 모든 커밋은 자동으로 배포됩니다. "일요일 밤 배포 패닉"은 없습니다. 배포는 이미 금요일에 이루어졌고 주말 내내 자동 조종으로 실행되고 있었기 때문입니다.
Vercel에서 3D 게임을 "바이브 코딩"하는 모습
바이브 코딩은 일반 영어로 원하는 것을 설명하고 AI 편집기가 코드를 작성하도록 한 다음 출력을 반복하는 것을 의미합니다. Vercel의 Three.js 게임의 경우 루프가 비정상적으로 깔끔합니다. Cursor의 모든 변경 사항은 로컬 피드백을 위해 pnpm dev를, 라이브 미리보기 URL을 위해 git push를, 그리고 프로덕션에 대한 자동 배포를 위해 main을 필요로 합니다.
바이브 코딩된 Vercel 게임 주말은 다음과 같습니다.
- Cursor에서 스킬의 시작 폴더를 엽니다.
- 채팅으로 기능을 설명합니다: "200ms 이내에 두 번 스페이스를 누르면 더블 점프".
- Cursor가 컨트롤러 파일을 편집합니다. 저장합니다.
pnpm dev가 다시 로드됩니다. 브라우저에서 점프를 느낄 수 있습니다. - 괜찮다고 느껴지면
git push합니다. Vercel이 미리보기 URL을 빌드합니다. 친구에게 보냅니다. - 느낌이 고정되면
main으로 병합합니다. 프로덕션 URL이 60초 안에 업데이트됩니다.
AI는 타이핑을 담당합니다. Vercel은 배포를 담당합니다. 여러분은 느낌과 디자인을 담당합니다.
Vibe Skills에서 이것을 가능하게 하는 5가지 AI 3D 게임 스킬
이 스킬들은 Vercel + Three.js + Cursor 주말 워크플로우를 위해 제작되었습니다. 각 스킬은 Vite 기반 Three.js 프로젝트, 작동하는 vercel.json, Vercel이 엣지에서 제공할 수 있는 정적 번들을 생성하는 pnpm build, 그리고 테스트된 배포 경로를 제공합니다. 모두 Vibe Skills의 3D 게임 카테고리에 있습니다.
1. Three.js + Vercel 게임 스타터
기본 선택 사항입니다. 플레이어 컨트롤러, 3인칭 카메라, 조명 리그, 스카이박스, 충돌 기능이 있는 지면을 갖춘 Three.js 장면을 생성합니다. Three.js 애셋 번들에 대한 올바른 캐싱 헤더를 설정하는 vercel.json을 제공합니다. pnpm dev는 로컬에서 실행되며, Vercel 대시보드에서 한 번 클릭하면 GitHub 리포지토리가 연결되어 라이브 URL을 얻을 수 있습니다.
가장 적합한 대상: 순수 2D를 제외한 모든 장르. 무엇을 만들고 있는지 아직 모를 때 사용하세요.
2. 1인칭 Vercel 워커
발소리 훅, 헤드 밥, 포인터 잠금 CSP 헤더를 올바르게 처리하는 vercel.json을 갖춘 세련된 1인칭 컨트롤러(WASD + 마우스 포인터 잠금 + 중력 + 스프린트 + 점프)입니다. 이것은 많은 솔로 개발자들이 프로덕션에서 어려움을 겪는 부분입니다. 이 스킬이 여러분을 위해 해결해 줍니다.
가장 적합한 대상: 워킹 시뮬레이터, 호러 프로토타입, 내러티브 게임, 박물관 전시.
3. 브라우저 아레나 슈터 키트
Vercel에 최적화된 빌드를 갖춘 탑다운 아레나(트윈 스틱 컨트롤러, 웨이브 스포너, 기본 적 AI, 투사체 시스템, 점수 HUD)입니다. 이 빌드는 애셋을 gzipping하고, AI를 코드 분할하며, 음악을 지연 로드합니다. 멀티플레이어 훅이 포함되어 있습니다. 주말에는 싱글 플레이어를 제공합니다.
가장 적합한 대상: 아케이드 슈터, 탄막 슈팅, 모바일에서 빠르게 로드해야 하는 잼 참가작.
4. Vercel 퍼즐 플랫포머
체크포인트, Blender 또는 코드에서 편집할 수 있는 3개의 스텁 레벨, 그리고 리스폰 루프를 갖춘 3인칭 플랫포머(가변 점프, 코요테 타임, 엣지 감지)입니다. vercel.json은 즉각적인 엣지 캐시 레벨 리로드를 위해 구성되어 있어 휴대폰에서 플레이 테스트가 빠르게 느껴집니다.
가장 적합한 대상: 퍼즐 플랫포머, 파쿠르 프로토타입, 레벨 디자인 실험.
5. Vercel 드라이빙 샌드박스
낮은 폴리 카, 트랙 템플릿, 그리고 넓은 지형 메쉬에 최적화된 배포를 갖춘 아케이드 드라이빙 느낌(가속 곡선, 드리프트 물리, 카메라 지연)입니다. 사전 설정된 HTTP 헤더는 WebGL 컨텍스트가 Safari에서 더 빠르게 시작되도록 하여, 역사적으로 Three.js에 가장 느렸던 브라우저입니다.
가장 적합한 대상: 아케이드 레이싱, 오프로드 드라이빙, 포트폴리오용 차량 느낌 데모.
Vibe Skills에서 모든 3D 게임 스킬 찾아보기 →
금요일부터 일요일까지 단계별 안내
이것은 정확한 일정입니다. 시작 시간을 조정하되 순서는 유지하세요. 주요 마일스톤은 금요일 밤 Vercel 배포입니다. 그 이후의 모든 것은 반복입니다.
금요일 6pm - 8pm: 스킬 선택, GitHub 푸시, Vercel 연결
1단계: Vibe Skills에서 3D 게임 스킬을 선택합니다. 3D 게임 카테고리를 탐색하고 장르에 맞는 것을 선택한 다음 새 폴더에 시작 파일을 설치합니다. Cursor에서 엽니다. 7시까지 움직이는 플레이어가 있는 Three.js 장면을 볼 수 있어야 합니다.
2단계: GitHub 리포지토리를 생성하고 푸시합니다. git init, git remote add, git push. 게임의 슬러그를 리포지토리 이름으로 사용합니다 (crystal-runner, lunar-fishing 등). 리포지토리 이름은 종종 URL이 됩니다.
3단계: 리포지토리를 Vercel에 연결합니다. GitHub(무료)으로 Vercel에 로그인하고 "새 프로젝트 추가"를 클릭하고 리포지토리를 선택합니다. Vercel은 Vite를 자동으로 감지하고 빌드를 구성합니다. 배포를 클릭합니다. 60초 안에 crystal-runner.vercel.app URL을 얻습니다. 휴대폰에서 엽니다. 친구 한 명에게 공유합니다. 이제 주말 내내 배포 바가 제로입니다.
금요일 8pm - 10pm: 디자인 문서 작성
4단계: 다섯 가지 질문에 일반 영어로 답합니다. 리포지토리 내의 Notion 페이지 또는 마크다운 파일을 열고 답변합니다.
- 플레이어는 5초마다 무엇을 하고 있나요? (핵심 루프)
- 승리 조건과 패배 조건은 무엇인가요?
- 한 번의 플레이 또는 한 레벨의 길이는 얼마나 되나요?
- 시각적 후크는 무엇인가요? (팔레트, 조명, 스타일 참고)
- 30초 안에 기억에 남는 한 가지 기능은 무엇인가요?
5단계: 디자인 문서를 커밋합니다. 리포지토리에 푸시합니다. Vercel이 다시 배포합니다. 의미 있는 변경 사항을 푸시하는 습관은 라이브 URL을 정직하게 유지합니다.
토요일 9am - 1pm: 핵심 메커니즘 구축
6단계: 플레이스홀더 메커니즘을 한 가지 기능으로 교체합니다. 이것이 유일하게 중요한 기능입니다. Cursor 채팅을 사용하여 설명합니다 ("플레이어가 크리스탈을 얻으면 주변 적을 2초 동안 동결하고 징 소리를 재생"). pnpm dev로 로컬에서 반복합니다. 괜찮다고 느껴지면 푸시합니다.
7단계: 승리/패배 상태를 연결합니다. 실제 끝이 있는 60초 빌드는 게임처럼 느껴집니다. 끝이 없는 60분 빌드는 기술 데모처럼 느껴집니다. 항상 승리 화면을 먼저 연결하고 나머지는 그 다음에 합니다.
토요일 1pm - 8pm: 레벨 1개 추가
8단계: 세련된 레벨 1개를 만듭니다. 반쯤 구워진 3개 대신. 기하학적 구조에는 플레이스홀더 큐브를 사용합니다. 스킬의 스톡 캐릭터를 사용합니다. 느낌 조정 - 점프 높이, 카메라 지연, 파티클 강도.
9단계: 튜토리얼 오버레이를 추가합니다. 처음 시작 시 "WASD로 이동, 클릭으로 발사"라는 두 문장 팝업은 혼란스러운 플레이어가 8초 만에 포기하는 것을 방지합니다. Cursor는 30초 안에 React (또는 일반 DOM) 오버레이를 생성할 수 있습니다.
10단계: 매시간 푸시합니다. 각 푸시는 Vercel 미리보기 URL을 얻습니다. 친구에게 각각 보냅니다. 피드백 루프는 이 스택의 비밀 무기입니다.
일요일 10am - 4pm: 폴리싱
11단계: 사운드 3개 추가. 발소리 루프, 앰비언트 패드, 승리 징. 사운드 3개만으로도 주말 프로토타입이 크게 향상됩니다. 무료 소스: freesound.org, opengameart.org.
12단계: 주스 추가. 타격 시 파티클, 충돌 시 화면 흔들림, 점수 시 숫자 팝업. 주스는 48시간 빌드를 6개월 빌드처럼 보이게 만드는 것입니다. Cursor에게 "플레이어가 피해를 입을 때 150ms 동안 0.3 강도의 화면 흔들림 추가"라고 요청하세요. 5초 안에 카메라 흔들림 훅을 작성할 것입니다.
13단계: Lighthouse 패스를 실행합니다. 휴대폰에서 Vercel URL을 열고 Chrome 개발자 도구 Lighthouse를 실행합니다. Three.js 번들은 일반적으로 400KB에서 1.5MB입니다. 3MB를 초과하면 Cursor에게 무거운 모듈에 대한 코드 분할을 활성화하도록 요청하세요. Vercel의 gzip 및 brotli가 나머지를 처리합니다.
14단계: 버그 검사. 라이브 URL을 5번 연속 플레이합니다. 두 번 발생하는 모든 것을 수정합니다. 한 번 발생하는 것은 무시합니다.
일요일 4pm - 8pm: 출시
15단계: (선택 사항) 사용자 지정 도메인 설정. 사전에 name-game.com을 구매했다면 Vercel 프로젝트 설정에서 추가하세요. SSL은 자동입니다. 그렇지 않으면 *.vercel.app URL도 괜찮습니다. HTTPS이며 공유 가능하고 어디서나 로드됩니다.
16단계: 최고의 순간을 15초 GIF로 녹화합니다. 로컬 호스트가 아닌 라이브 URL을 사용합니다. GIF는 Twitter, Bluesky, Reddit에서 클릭을 유도하는 것입니다.
17단계: itch.io 페이지 만들기 (선택 사항이지만 효과적). 제목, 한 줄 태그라인, 스크린샷 3개, GIF, 컨트롤, 크레딧, 그리고 *.vercel.app iframe 포함(itch.io는 HTML5 게임에 iframe 포함을 지원합니다). 이제 캐주얼한 공유를 위한 URL과 게이머를 위한 URL, 두 개의 URL이 생깁니다.
18단계: 링크 게시. Twitter, Bluesky, 개발자 커뮤니티 Discord, r/IndieDev, r/threejs, r/WebGames. 항상 GIF로 시작합니다. 항상 URL을 포함합니다. Vibe Skills 스킬을 사용했다면 개발 로그 게시물에 언급하세요. 함께 읽는 다른 개발자들도 같은 시작 파일을 원할 것입니다.
가장 흔한 Vercel 배포 실패 3가지 방지 방법
거의 모든 Three.js + Vercel 주말 프로젝트에서 실패하는 세 가지가 있습니다. 이 모든 것은 금요일 밤에 발견하면 5분 만에 해결할 수 있고, 일요일 오후 7시에 발견하면 5시간짜리 복잡한 문제가 됩니다.
- 잘못된 빌드 출력 디렉토리. Vite의 기본값은
dist/입니다. Vercel은 Vite를 자동으로 감지하고dist/를 사용합니다. 출력을 사용자 지정한 경우vercel.json또는 프로젝트 설정에서outputDirectory를 설정해야 배포 시 404 오류가 발생하지 않습니다. - 로컬에서는 작동하지만 프로덕션에서는 404 오류가 발생하는 애셋 경로. 런타임에 로드되는 GLB, 텍스처 또는 오디오 파일에는 상대 경로 또는 Vite
import.meta.env.BASE_URL도우미를 사용하세요. 하드코딩된/assets/...경로는 일반적으로 작동하지만, 복사한 절대 Windows 경로는 절대 작동하지 않습니다. - 포인터 잠금 또는 오디오 컨텍스트를 차단하는 CSP 헤더. 1인칭 게임에는 포인터 잠금이 필요합니다. 오디오에는 사용자 제스처 활성화가 필요합니다. 3D 게임 카테고리의 모든 스킬은 이를 처리하기 위한 올바른
headers블록을vercel.json에 제공합니다. 직접 처음부터 작성했다면 스킬의 리포지토리에서 구성을 복사하세요.
금요일에 배포가 작동하므로 일요일에 실패하는 것은 항상 최근 변경 때문입니다. git bisect가 친구입니다. 더 좋습니다: 30분마다 푸시하여 커밋을 작게 만듭니다.
자주 묻는 질문
내 게임에 트래픽이 발생해도 Vercel 무료 티어가 실제로 버틸 수 있을까요?
예, 주말 출시와 처음 몇 주 동안은 가능합니다. 무료 티어는 월 100GB의 대역폭을 제공하며, 이는 5MB Three.js 빌드 20,000번의 플레이에 해당합니다. 이 한도에 도달하면 Pro 플랜은 월 $20이며 1TB로 증가합니다. 주말 출시에는 무료로도 충분합니다. Vibe Skills의 스킬은 번들 크기를 최소화하는 빌드 구성과 함께 제공되므로 무료 티어를 더 오래 사용할 수 있습니다.
Vercel 무료 티어에서 사용자 지정 도메인을 사용할 수 있나요?
예. 무료 티어는 자동 HTTPS를 갖춘 사용자 지정 도메인을 지원합니다. 도메인을 구매하고(Namecheap, Cloudflare Registrar, Porkbun) Vercel로 포인트하면 Vercel이 SSL 인증서를 처리합니다. 설정은 약 10분이 걸립니다. 도메인이 없다면 name-game.vercel.app URL은 모든 플랫폼에서 공유하기에 충분히 짧습니다.
이 스택은 게임 잼 제출에 적합한가요?
예, 게임 잼 제출에 가장 적합한 스택 중 하나입니다. 대부분의 잼(Ludum Dare, GMTK, js13k, GitHub Game Off)은 웹에서 플레이 가능한 모든 URL을 허용합니다. *.vercel.app 링크는 심사위원에게 itch.io URL과 똑같이 작동합니다. 많은 잼 우승자는 둘 다에 배포합니다. itch.io는 게이머를 대상으로 하고, Vercel은 빠르고 표준적인 URL로 사용합니다.
시작하기 전에 Three.js를 알아야 하나요?
Cursor가 작성한 내용을 읽고 값을 조정할 수 있을 정도의 JavaScript 지식이 필요합니다. Three.js를 처음부터 작성할 필요는 없습니다. Vibe Skills의 스킬은 엔진 설정, 카메라, 컨트롤러, 빌드 구성을 생성합니다. Cursor는 여러분의 설명에 따라 게임 플레이 코드를 처리합니다.
일요일 7시에 Vercel 빌드가 실패하면 어떻게 되나요?
가장 흔한 원인은 TypeScript 오류 또는 누락된 환경 변수입니다. Vercel은 실패한 줄이 강조 표시된 빌드 로그를 표시합니다. 대시보드에서 한 번 클릭하면 마지막으로 작동한 배포로 롤백하고 프로덕션으로 승격합니다. 모든 푸시가 미리보기 배포이므로 작동하는 빌드에서 한 번의 커밋만 벗어나면 됩니다. 그렇기 때문에 토요일과 일요일에 30분마다 푸시하는 것이 중요합니다.
Vibe Skills 3D 게임 스킬의 코드를 판매하거나 수정할 수 있나요?
예. Vibe Skills의 스킬은 Vercel, itch.io, Steam 또는 다른 곳에서 자체 게임으로 코드를 출시할 수 있는 상업적으로 친화적인 라이선스와 함께 제공됩니다. 제작자는 스킬의 IP를 보유하고, 여러분은 그 위에 구축된 게임의 IP를 보유합니다.
Cursor를 사용하고 싶지 않다면 어떻게 해야 하나요?
프로젝트 파일을 편집할 수 있는 모든 AI 편집기에서 작동합니다. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - 어떤 것이든 Vibe Skills의 3D 게임 스킬에서 Three.js 스캐폴딩을 반복할 수 있습니다. 스킬 자체는 편집기에 구애받지 않습니다.
이번 주말에 출시하세요
대부분의 솔로 개발자가 3D 게임을 출시하지 못하는 이유는 엔진, 장르 또는 스킬 수준 때문이 아닙니다. 그것은 "더 조사만 해야지"라고 생각하고 절대 시작하지 않는 금요일 밤 때문입니다. 다음 주말에 시간이 나면 4단계 계획을 따르세요. Vibe Skills 3D 게임 스킬을 설치하고, GitHub에 푸시하고, Vercel에 연결하고, 금요일 8시까지 배포한 다음, 토요일과 일요일에 라이브 URL을 반복하며 보내세요.
Vercel에 출시된 10개의 주말 게임 포트폴리오는 가상의 6개월짜리 드림 엔진 프로젝트보다 가치가 있습니다. 출시된 것이 항상 승리합니다. 무료 Vercel URL이 증거입니다.
Three.js 보일러플레이트 마라톤을 건너뛰세요. Vibe Skills에서 3D 게임 스킬 설치, Vercel에 푸시하고, 일요일 밤까지 라이브 URL을 확보하세요.