배포까지 — Vercel로 세상에 공개하는 법

이 시리즈의 글

1. 바이브 코딩이 뭔데?
2. HTML, CSS, JavaScript — AI와 함께 처음부터 이해하기
3. 프롬프트의 기술 — AI에게 잘 부탁하는 법
4. 포트폴리오 사이트 — AI와 함께 직접 만들기
5. 지금 읽고 있는 글 배포까지 — Vercel로 세상에 공개하는 법

---

"배포"가 뭔가요?

지금까지 localhost:3000에서 내 사이트를 봤죠? 그건 내 컴퓨터에서만 보이는 거예요. 다른 사람이 보려면 인터넷에 올려야 해요. 이걸 **배포(deploy)**라고 해요.

---

왜 Vercel인가요?

배포 서비스는 여러 가지가 있어요.

Next.js를 쓰고 있다면 Vercel이 가장 좋은 선택이에요. Next.js를 만든 회사이기 때문에 최적화가 완벽하고, 설정이 거의 필요 없어요.

---

단계 1: GitHub에 코드 올리기

배포하려면 먼저 코드를 GitHub에 올려야 해요.

GitHub 저장소 만들기

1. github.com에 로그인
2. 오른쪽 위 + → New repository
3. 이름 입력 (예: my-portfolio)
4. Create repository 클릭

코드 올리기

터미널에서 프로젝트 폴더로 이동한 후:

git init
git add .
git commit -m "첫 번째 커밋: 포트폴리오 사이트"
git branch -M main
git remote add origin https://github.com/내아이디/my-portfolio.git
git push -u origin main

각 명령어의 뜻을 정리하면:

---

단계 2: Vercel 연결하기

가입 & 프로젝트 연결

1. vercel.com에 접속
2. Sign Up → Continue with GitHub (GitHub 계정으로 로그인)
3. Add New Project 클릭
4. 방금 올린 저장소(my-portfolio)를 찾아서 Import

설정 확인

Import 하면 설정 화면이 나와요. Next.js 프로젝트는 대부분 자동 감지되기 때문에 건드릴 게 거의 없어요.

Framework Preset: Next.js  ← 자동 선택됨
Root Directory: ./         ← 그대로
Build Command: next build  ← 그대로
Output Directory: .next    ← 그대로

Deploy 버튼을 누르면 끝이에요!

---

단계 3: 배포 완료!

1~2분 기다리면 축하 화면과 함께 URL이 나와요.

https://my-portfolio-abc123.vercel.app

이 주소를 브라우저에 입력하면 전 세계 누구나 내 포트폴리오를 볼 수 있어요!

---

환경변수 설정하기

만약 사이트에서 외부 API를 사용한다면 (예: Supabase, OpenAI 등), 환경변수를 Vercel에도 설정해야 해요.

1. Vercel 대시보드 → 프로젝트 → Settings → Environment Variables
2. .env.local에 있는 키-값을 하나씩 추가

NEXT_PUBLIC_SUPABASE_URL = https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY = eyJhbG...

주의: NEXT_PUBLIC_으로 시작하는 변수는 브라우저에서 보여요. 비밀 키는 절대 NEXT_PUBLIC_을 붙이면 안 돼요!

---

내 도메인 연결하기

my-portfolio-abc123.vercel.app보다 myname.com이 훨씬 멋지겠죠?

도메인 구매

Vercel에 도메인 연결

1. Vercel 대시보드 → Settings → Domains
2. 구매한 도메인 입력 (예: myname.com)
3. Vercel이 알려주는 DNS 설정을 도메인 서비스에서 입력

Type: CNAME
Name: @
Value: cname.vercel-dns.com

설정이 전파되는 데 최대 24시간 걸리지만, 보통 10분이면 돼요.

---

자동 배포의 마법

Vercel의 가장 좋은 점은 자동 배포예요.

1. 코드 수정
2. git add . → git commit -m "수정" → git push
3. Vercel이 자동으로 새 버전을 배포

코드를 GitHub에 올리기만 하면 알아서 업데이트돼요. 별도의 배포 명령이 필요 없어요!

AI에게 코드를 수정시킨 후 이 3줄만 치면 바로 반영돼요.

git add .
git commit -m "프로젝트 카드 디자인 수정"
git push

---

배포 후 체크리스트

사이트를 공개했으면 이것들을 확인하세요:

• 모바일 확인: 실제 폰으로 접속해서 레이아웃 확인
• 속도 테스트: Google PageSpeed Insights에서 점수 확인
• 링크 확인: 모든 외부 링크가 제대로 작동하는지
• OG 이미지: SNS에 공유했을 때 미리보기가 잘 뜨는지

AI에게 이렇게 요청하면 OG 태그도 만들어줘요:

내 사이트의 OG(Open Graph) 메타 태그를 설정해줘.
제목: "김디자인 포트폴리오"
설명: "UI/UX 디자이너 김디자인의 작업물 모음"

---

시리즈를 마치며

이 시리즈를 통해 여러분은:

1. 바이브 코딩이 뭔지 이해했고
2. HTML, CSS, JavaScript의 기본을 알게 됐고
3. AI에게 잘 요청하는 법을 배웠고
4. 포트폴리오 사이트를 직접 만들었고
5. 전 세계에 공개하는 것까지 해냈어요

디자이너가 코딩까지 할 수 있다는 건 엄청난 경쟁력이에요. 그리고 AI 덕분에 그 문턱이 정말 낮아졌어요.

다음 시리즈에서는 AI 코딩 도구들의 차이점을 자세히 비교해볼게요. IDE, AI 모델, 에이전트 — 뭐가 다르고 뭘 골라야 하는지. 기대해주세요!

Designer × Code 커뮤니티에서 여러분의 포트폴리오를 공유해주세요. 함께 피드백하고 성장해요.