🚀 NextJS + Gemini CLI로 웹 개발 시작하기

🔄 2회차: 배포의 이해 (60분)

1. 배포란 무엇인가? (10분)

지금까지 우리는 "로컬 환경"에서 작업했습니다. 즉, 내 컴퓨터에서만 웹사이트를 볼 수 있는 상태죠.

배포(Deploy)란 이 웹사이트를 인터넷에 올려서 전 세계 누구나 접속할 수 있게 만드는 과정입니다.

배포 과정 한눈에 보기

필요한 서비스들

각 서비스의 역할을 이해해봅시다:

서비스	역할	비용
GitHub	코드 저장소	무료
Vercel	배포 플랫폼	무료
Gabia	도메인 구입	유료 (연 1~2만원)
Cloudflare	DNS 관리	무료
Firebase	백엔드 서비스	소개만 (향후 확장용)

Firebase란?

데이터베이스, 인증, 서버 기능을 제공하는 서비스
지금 강의에서는 다루지 않지만, 향후 사용자 로그인이나 데이터 저장이 필요할 때 활용할 수 있습니다

2. 개발 워크플로우 이해하기 (15분)

실제 개발은 다음과 같은 사이클로 진행됩니다.

개발 사이클 예시

1단계: Gemini CLI에 요청

# Gemini CLI 실행
gemini

# 프롬프트에서 요청
> 오목 게임의 기본 UI를 만들어줘. 15x15 보드판이 필요해.

2단계: 필요시 개발 서버 재시작

코드가 수정되면 대부분 자동으로 반영되지만, 가끔 재시작이 필요할 때가 있습니다:

# Ctrl+C로 서버 종료 후
npm run dev

3단계: 브라우저에서 확인

http://localhost:3000에서 변경사항을 확인합니다.

4단계: 만족할 때까지 반복!

3. Git 기본 명령어 (필수!)

코드를 GitHub에 올리기 위해 알아야 할 세 가지 명령어입니다.

# 1. 변경된 파일 추가
git add .

# 2. 변경사항 저장 (커밋)
git commit -m "오목 게임 기본 UI 추가"

# 3. GitHub에 업로드
git push

자동 배포의 마법

GitHub에 push하면 → Vercel이 자동으로 감지 → 1-2분 안에 배포 완료!

4. 계정 생성하기 (10분)

배포에 필요한 계정들을 만들어봅시다.

Vercel 계정

Vercel 접속
"Sign Up" 클릭
"Continue with GitHub" 선택
GitHub 계정으로 로그인

Cloudflare 계정

Cloudflare 접속
무료 계정 가입
이메일 인증 완료

비용 안내

Vercel: 무료 (개인 프로젝트)
Cloudflare: 무료
도메인만 유료: 연간 약 1~2만원

5. 실습: 배포 환경 구축 (25분)

이제 실제로 우리의 웹사이트를 인터넷에 공개해봅시다!

체크리스트

단계별로 따라하면서 체크해보세요:

도메인 구입 (Gabia)
Cloudflare DNS 설정
GitHub 저장소 생성
Vercel 프로젝트 연결
도메인 연결 및 확인

Step 1: 도메인 구입 (5분)

Gabia에서 도메인 구입하기

Gabia 접속
원하는 도메인 검색 (예: my-omok-game.com)
구입 가능한 도메인 확인
결제 진행

도메인 선택 팁

.com 도메인 추천 (가장 보편적)
짧고 기억하기 쉬운 이름
특수문자 피하기

Step 2: Cloudflare DNS 설정 (5분)

Cloudflare 대시보드에서 "Add a Site" 클릭
구입한 도메인 입력
Free 플랜 선택
Cloudflare 네임서버 주소 확인

Gabia에서 네임서버 변경

Gabia 로그인 → My 가비아
도메인 관리 → 네임서버 변경

Cloudflare 네임서버 입력:

aden.ns.cloudflare.com
liz.ns.cloudflare.com

주의: 네임서버 변경은 최대 24시간이 걸릴 수 있습니다. 보통 1-2시간이면 적용됩니다.

Step 3: GitHub 저장소 생성 (5분)

새 Repository 만들기

GitHub 로그인
우측 상단 "+" → "New repository"
Repository 이름: my-omok-game
Public으로 설정
"Create repository" 클릭

로컬 프로젝트 연결하기

명령 프롬프트에서:

cd my-omok-game

# Git 초기화
git init

# 모든 파일 추가
git add .

# 첫 커밋
git commit -m "Initial commit"

# GitHub 저장소 연결 (본인의 URL로 변경)
git remote add origin https://github.com/본인아이디/my-omok-game.git

# 업로드
git branch -M main
git push -u origin main

Step 4: Vercel 배포 (5분)

프로젝트 연결하기

Vercel 대시보드 접속
"Add New..." → "Project" 클릭
"Import Git Repository" 선택
GitHub에서 my-omok-game 선택
"Deploy" 클릭

배포가 시작됩니다! 1-2분 정도 기다리면...

✓ Deployment completed
🎉 https://my-omok-game.vercel.app

자동으로 생성된 URL로 접속해보세요!

Step 5: 커스텀 도메인 연결 (5분)

Vercel에서 도메인 추가

Vercel 프로젝트 설정 → Domains
구입한 도메인 입력 (예: my-omok-game.com)
"Add" 클릭

Cloudflare DNS 레코드 설정

Vercel이 제공하는 값을 Cloudflare에 입력합니다:

Cloudflare → DNS → Records
다음 레코드 추가:

Type: CNAME
Name: @
Content: cname.vercel-dns.com
Proxy status: Proxied (오렌지 구름)

Type: CNAME  
Name: www
Content: cname.vercel-dns.com
Proxy status: Proxied

HTTPS 적용 확인

5-10분 정도 기다린 후 https://본인도메인.com으로 접속해보세요!

자물쇠 아이콘이 보이면 성공입니다! 🔒

🎓 마무리 및 다음 단계

축하합니다! 오늘 우리는:

✅ Node.js, Git, Gemini CLI 설치 완료
✅ NextJS 프로젝트 생성 및 실행
✅ 개발 워크플로우 이해
✅ 실제 도메인으로 배포 완료

자주 발생하는 에러 해결법

1. npm run dev 실행 시 에러

# node_modules 폴더 삭제 후 재설치
rm -rf node_modules
npm install

2. 포트가 이미 사용 중일 때

# 다른 포트로 실행
npm run dev -- -p 3001

3. Git push 실패

# 인증 정보 다시 입력
git config --global credential.helper manager

추가 학습 자료

다음 단계

이제 기본 환경이 갖춰졌으니, 다음 강의에서는:

Gemini CLI로 오목 게임 개발하기
컴포넌트 구조 설계
게임 로직 구현
반응형 디자인 적용

를 배울 예정입니다!

💬 질문이 있나요?

댓글로 자유롭게 질문해주세요. 함께 해결해나가요! 🚀

다음 강의가 기대되신다면 구독과 좋아요 부탁드립니다! ⭐

저작자표시 (새창열림)

물개발자 이야기

🚀 NextJS + Gemini CLI로 웹 개발 시작하기 - 2일차 강의