Next.js 기술 블로그를 Vercel로 무료 배포하고 운영 환경 구축한 후기

개인 수영 로그 블로그, Vercel로 무료 배포까지 해본 후기

혼자 쓰는 수영 로그라서 사실 로컬에서만 돌려도 되지만,
언제 어디서든 모바일로 바로 열어보고 싶고, 기록하는 과정도 조금 더 “서비스처럼” 느끼고 싶었다.
그래서 이번에는 단순히 만들고 끝나는 게 아니라, Next.js로 만든 내 수영 로그 블로그를 Vercel에 실제로 배포까지 해보기로 했다.
어차피 혼자 쓰는 서비스라서 완전 무료로 운영하는 것도 중요한 조건이었다.

스택 정리

현재 블로그의 기술 스택은 이렇게 구성되어 있다.

• 프론트/백엔드: Next.js 16 (app router)
• 인증: NextAuth + GitHub 로그인
• DB/스토리지: Supabase Free tier
• 스타일: Tailwind 기반 UI 컴포넌트
• 배포: Vercel Hobby(무료)

Next.js + Vercel 조합은 워낙 많이 쓰이는 조합이고,
특히 app router와 route handler 같은 최신 기능까지 자연스럽게 지원해 줘서
설정 단계에서 크게 막히지 않고 배포까지 갈 수 있었다.

진짜로 무료로 운영 가능한지 먼저 확인

배포를 결정하기 전에 제일 먼저 확인한 건 **“정말로 돈 안 나오는가?”**였다.

• Vercel Hobby 플랜
  • 개인/사이드 프로젝트 용도로는 충분한 자원
  • GitHub에 push만 하면 자동 빌드 + 배포
  • Preview 환경도 자동으로 생성
• Supabase Free 플랜
  • 혼자 수영 기록 남기는 정도의 트래픽과 데이터량이면 넉넉하다

주의해야 할 점은 딱 두 가지였다.

1. Pro/Team 같은 유료 플랜으로 업그레이드하지 않기
2. Vercel에서 Postgres, KV, Blob 같은 추가 유료 리소스를 함부로 생성하지 않기

이 두 가지만 조심하면,
“Next.js + Supabase + Vercel” 조합으로 개인 블로그를 사실상 완전 무료에 가깝게 운영할 수 있다.

환경 변수 정리: NEXTAUTH_URL, NEXTAUTH_SECRET

NextAuth를 쓰고 있어서, 배포 전에 환경변수를 한 번 정리해 줬다.

로컬 개발용 .env.local

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...

ADMIN_EMAIL=...
ADMIN_GITHUB=...

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=로컬에서 생성한 긴 랜덤 문자열

NEXTAUTH_URL과 NEXTAUTH_SECRET을 설정해 두면
콘솔에서 자주 보이는 NEXTAUTH_URL, NO_SECRET 경고도 깔끔하게 사라진다.

배포(Vercel) 환경 변수

배포 후에는 NEXTAUTH_URL만 실제 도메인으로 바꿔주면 된다.

NEXTAUTH_URL=https://내-프로젝트명.vercel.app
NEXTAUTH_SECRET=로컬과 동일한 시크릿 값

그리고 Supabase, GitHub OAuth 관련 값들도
로컬에서 쓰던 것과 똑같이 Vercel 프로젝트의 Environment Variables에 넣어줬다.

GitHub와 Vercel 연결해서 배포하기

배포 과정은 크게 어렵지 않았다. 전체 흐름은 이렇다.

1. GitHub에 코드 올리기
   • 로컬에서 작업하던 repo를 GitHub 새 저장소에 main 브랜치로 push
2. Vercel에서 Import
   • Vercel 대시보드 → “Add New Project” → GitHub repo 선택
   • 프레임워크는 자동으로 Next.js로 인식
3. 환경변수 입력
   • 위에서 정리한 값들(NEXTAUTH_URL, NEXTAUTH_SECRET, Supabase 키 등)을 그대로 입력
4. Deploy 버튼 클릭

조금 기다리면 빌드 로그가 쭉 올라가고,
마지막에 https://<프로젝트이름>.vercel.app처럼 새 도메인이 하나 생긴다.
이제 어떤 기기에서든 이 주소만 열면 내 수영 로그를 바로 볼 수 있게 됐다.

파비콘과 작은 디테일들

헤더에 쓰던 물결 모양 로고가 마음에 들어서,
이걸 바탕으로 파비콘도 같이 만들었다.

• 두 줄의 파형으로 수영 레인을 표현하는 작은 SVG 아이콘
• 어두운 네모 배경 위에 파란 물결선 두 줄
• src/app/icon.svg로 추가하면 Next.js app router에서 자동으로 파비콘으로 인식된다

브라우저 탭에 걸리는 작은 아이콘 하나만으로도
프로젝트가 훨씬 “서비스다운” 느낌이 나는 게 꽤 만족스러웠다.

실제로 써보면서 느낀 점

로컬에서만 쓰던 수영 로그를 Vercel에 올려 보니, 생각보다 체감이 크다.

• 수영장 가는 길에 휴대폰으로 지난 기록을 바로 확인할 수 있고
• 세션이 끝난 직후 락커룸에서 오늘 훈련 내용을 바로 정리할 수 있고
• 혼자 쓰는 서비스지만, 배포를 한 번 해두니 “진짜 제품”처럼 느껴진다

무엇보다도, “Next.js + Supabase + Vercel” 조합 하나만 익혀두면
비슷한 사이드 프로젝트 아이디어가 떠올랐을 때
“이걸 실제 서비스처럼 만들어볼까?”라는 생각을 부담 없이 실행으로 옮길 수 있다는 점이 좋았다.