[나의 앱개발기] Next.js·Vercel·Supabase·GitHub 무료 개발 스택, 초보자도 이해하는 완전 정리

"웹사이트 하나 만들려면 서버비가 얼마나 들어요?" 회사 후배가 이렇게 물어보더라고요. 사이드 프로젝트를 시작하고 싶은데 월 몇만 원씩 나갈까 봐 시작도 못 하고 있다는 겁니다. 그 마음, 저도 알죠. 저 역시 처음엔 '서버 = 돈'이라는 공식이 머릿속에 박혀 있었거든요.

그런데 직접 아이 공부용 웹앱을 만들어서 돌려보니, 결제 카드 한 번 안 긁고 실제 서비스가 돌아가더라고요. 비결은 Next.js + Vercel + Supabase + GitHub라는 조합입니다. 요즘 개발자들 사이에서는 거의 '국민 무료 스택'으로 불리는 구성이죠. 오늘은 이 네 가지 도구가 각각 무슨 역할을 하는지, 어떻게 연결되는지, 그리고 대체재까지 초보자 눈높이로 정리해 봤습니다.

1. 이 조합, 왜 다들 쓰는 걸까

2. Next.js — 웹사이트의 뼈대를 세우는 프레임워크

3. Vercel — 클릭 몇 번이면 끝나는 배포

4. Supabase — 서버 없이 DB와 로그인까지

5. GitHub — 내 코드의 클라우드 금고

6. 네 가지를 연결하면 이런 흐름이 됩니다

7. 대체할 만한 도구들, 뭐가 있을까

8. 무료 플랜의 함정과 주의사항

* 이 조합, 왜 다들 쓰는 걸까.

이유는 단순합니다. 돈이 안 들고, 서로 궁합이 좋거든요. 식당에 비유하면 이해가 빠릅니다. Next.js는 요리 레시피와 주방 설비, Vercel은 손님이 찾아오는 매장, Supabase는 식자재 창고와 회원 명부, GitHub는 레시피를 보관하는 금고입니다.

예전에는 이 네 가지를 전부 직접 차려야 했습니다. 서버 컴퓨터를 빌리고, 데이터베이스를 설치하고, 로그인 기능을 처음부터 코딩하고요. 그 비용과 시간이 만만치 않았죠. 지금은 각 분야의 전문 서비스가 무료 구간을 열어놓고 있어서, 개인 프로젝트 수준이면 월 0원으로 전부 해결됩니다. 게다가 이 넷은 서로 공식 연동을 지원해서, 연결 작업도 클릭 몇 번이면 끝나는 셈이죠.

서버비 0원
연동은 거의 자동
아이디어만 있으면 오늘 시작 가능!

* Next.js — 웹사이트의 뼈대를 세우는 프레임워크.

Next.js는 한 마디로 "웹사이트를 만드는 데 필요한 골치 아픈 것들을 미리 다 세팅해 놓은 조립 키트"입니다. 리액트(React)라는 인기 라이브러리를 기반으로, 페이지 이동·검색엔진 최적화(SEO)·이미지 최적화 같은 기능을 기본으로 깔아주죠.

가구로 치면 원목을 직접 자르는 게 아니라 이케아 조립 키트를 받는 느낌입니다. 설명서대로 끼우기만 하면 그럴듯한 결과물이 나오거든요. 2016년에 처음 나왔고, Vercel이라는 회사와 오픈소스 커뮤니티가 함께 개발하는 무료(MIT 라이선스) 프레임워크입니다. 2025년 10월에 16 버전이 나왔고, 2026년 5월 기준 16.2.6까지 업데이트되며 활발하게 관리되고 있죠.

1. 사용법.

터미널에 명령어 한 줄이면 시작입니다.

npx create-next-app@latest 내프로젝트이름

이 한 줄이 폴더 구조부터 설정 파일까지 전부 만들어 줍니다. 이후에는 app 폴더 안에 페이지 파일을 추가하는 식으로 화면을 늘려가면 되죠. 요즘은 AI 코딩 도구한테 "Next.js로 ○○ 페이지 만들어줘"라고 시키는 분들도 많더라고요.

* Vercel — 클릭 몇 번이면 끝나는 배포.

코드를 다 짰다고 끝이 아닙니다. 내 컴퓨터에서만 보이는 사이트를 전 세계 누구나 접속하게 만들어야 하죠. 이 과정을 '배포'라고 하는데, Vercel은 "코드만 올리면 전 세계에 자동으로 공개해 주는 호스팅 서비스"입니다.

서버리스 인프라 기반으로 웹앱을 호스팅·배포하며, 특히 Next.js에 최적화되어 설계됐습니다. 당연한 게, Next.js를 만든 회사가 바로 Vercel이거든요. 친정이 같으니 궁합이 좋을 수밖에요.

1. 사용법.

놀랄 만큼 간단합니다. GitHub에 코드를 푸시하면 자동으로 빌드되고 배포됩니다. 처음에 GitHub 계정으로 Vercel에 가입하고, 내 저장소를 한 번 연결해 두면 끝이에요. 이후로는 코드를 수정해서 올릴 때마다 1~2분 안에 사이트가 자동 갱신됩니다. 무료 도메인(내이름.vercel.app)도 주고, 따로 산 도메인 연결도 됩니다. 저도 가비아에서 산 도메인을 Vercel에 붙여서 쓰고 있는데, 설정에 10분도 안 걸렸습니다.

* Supabase — 서버 없이 DB와 로그인까지.

웹사이트가 회원가입을 받거나 데이터를 저장하려면 '백엔드'가 필요합니다. 원래는 이게 개발의 가장 어려운 부분이었어요. Supabase는 "백엔드 전체를 통째로 빌려주는 서비스"입니다. 데이터베이스, 인증(로그인), 그 외 백엔드 기능을 한 번에 제공하죠.

구체적으로는 PostgreSQL이라는 검증된 데이터베이스에, 이메일·구글·카카오 로그인 기능, 파일 저장소, 실시간 데이터 동기화까지 들어 있습니다. 직접 만들면 몇 주 걸릴 기능들을 대시보드에서 클릭으로 켜는 셈이죠.

1. 사용법.

supabase.com에서 GitHub 계정으로 가입하고 새 프로젝트를 만들면, 데이터베이스 주소와 API 키를 줍니다. 이 두 가지를 Next.js 프로젝트의 환경변수에 넣으면 연결 끝이에요. 참고로 기존의 anon 키 방식은 2026년 말까지만 쓰이고, 이후엔 publishable 키와 secret 키 방식으로 바뀌니 새로 시작하는 분은 처음부터 새 키 방식을 쓰는 게 깔끔합니다.

* GitHub — 내 코드의 클라우드 금고.

GitHub는 "코드를 위한 클라우드 + 타임머신"입니다. 네이버 클라우드에 사진을 백업하듯 코드를 백업하는데, 단순 백업이 아니라 모든 수정 이력이 기록됩니다. "3일 전 버전으로 되돌리고 싶다" 같은 게 가능하다는 얘기죠.

이 스택에서 GitHub의 진짜 역할은 '중앙 허브'입니다. 내 컴퓨터에서 코드를 수정해 GitHub에 올리면, Vercel이 그 변화를 감지해서 자동으로 새 버전을 배포합니다. 즉 GitHub가 없으면 이 자동화 파이프라인 자체가 성립하지 않아요. 개인 저장소도 무료라서 비공개 프로젝트도 부담 없이 관리할 수 있습니다.

1. 사용법.

github.com 가입 후 저장소(Repository)를 만들고, 터미널에서 git push 명령으로 코드를 올립니다. 명령어가 부담스러우면 GitHub Desktop이라는 무료 앱으로 마우스 클릭만으로도 가능합니다. 처음엔 commit(저장)과 push(업로드), 이 두 동작만 알아도 충분하더라고요.

* 네 가지를 연결하면 이런 흐름이 됩니다.

이제 퍼즐을 맞춰 보죠. 전체 흐름은 이렇게 한 줄로 요약됩니다.

코드 작성(Next.js) → 업로드(GitHub) → 자동 배포(Vercel) → 데이터 처리(Supabase)

실제 순서로 풀면 이렇습니다. 먼저 GitHub와 Supabase 계정을 만들고, Next.js 프로젝트를 생성합니다. 여기서 꿀팁 하나. Vercel의 Supabase 스타터 템플릿을 쓰면 배포 과정에서 Supabase 계정·프로젝트 생성까지 안내해 주고, 연동에 필요한 환경변수가 전부 자동으로 설정됩니다. 초보자라면 맨땅에서 시작하지 말고 이 템플릿으로 시작하는 걸 추천합니다.

Vercel 대시보드에서 New Project를 누르고 템플릿을 고르면, 내 GitHub 계정에 저장소가 자동 생성되고 빌드·배포까지 한 번에 진행됩니다. 솔직히 처음 해보면 "이게 끝이라고?" 싶을 정도예요. 10년 전 서버 세팅하던 시절을 생각하면 격세지감이죠.

역할	도구	비유하자면	비용
프레임워크	Next.js	이케아 조립 키트	무료
배포	Vercel	손님 받는 매장	무료
DB / 인증	Supabase	창고 + 회원 명부	무료
코드 저장소	GitHub	타임머신 금고	무료

네 도구 모두 무료 구간이 있고, 유료 전환 없이도 개인 프로젝트나 소규모 서비스는 충분히 운영됩니다.

* 대체할 만한 도구들, 뭐가 있을까.

이 조합이 표준에 가깝긴 하지만, 유일한 정답은 아닙니다. 각 자리마다 쟁쟁한 대체재가 있거든요.

자리	기본 선택	대체재	이런 분께
프레임워크	Next.js	Astro / SvelteKit / Nuxt	블로그형 사이트(Astro), 가벼움 선호(Svelte), Vue 사용자(Nuxt)
배포	Vercel	Netlify / Cloudflare Pages	무료 트래픽을 더 넉넉하게 쓰고 싶을 때(Cloudflare)
DB / 인증	Supabase	Firebase / Neon / PocketBase	구글 생태계 선호(Firebase), DB만 필요(Neon)
코드 저장소	GitHub	GitLab / Bitbucket	사내 정책상 GitHub 사용이 어려운 경우

표를 보면 알 수 있듯, 대체재가 없어서 이 조합을 쓰는 게 아닙니다. 자료와 커뮤니티가 압도적으로 많아서죠. 막혔을 때 검색하면 한국어 자료까지 줄줄이 나오는 건 Next.js 진영이 거의 유일하거든요. 초보자에게는 이 '검색했을 때 답이 나오는 환경'이 성능보다 훨씬 중요하다고 봅니다.

한 가지 짚자면, Firebase는 구글이 만든 서비스라 안정적이지만 데이터 구조가 NoSQL이라 나중에 일반적인 SQL 데이터베이스로 갈아타기가 번거롭습니다. 반면 Supabase는 표준 PostgreSQL이라 나중에 다른 곳으로 이사 가기도 수월한 구조예요. 저는 이 점 때문에 Supabase 쪽 손을 들어주고 싶더라고요.

* 무료 플랜의 함정과 주의사항.

무료라고 마냥 장밋빛은 아닙니다. 알아둬야 할 제약이 몇 가지 있어요.

1. Supabase 휴면 정지.

무료 플랜은 7일 이상 프로젝트에 요청이 없으면 자동으로 일시 중지됩니다. 방문자가 뜸한 초기 사이트라면 어느 날 갑자기 DB가 잠들어 있을 수 있다는 얘기죠. 해결책으로 GitHub Actions로 일정 간격마다 자동 요청(ping)을 보내 활성 상태를 유지하는 방법이 널리 쓰입니다. 대시보드에서 버튼 한 번이면 다시 깨울 수도 있고요.

💡 팁: Vercel 무료(Hobby) 플랜은 개인·비상업 용도가 원칙입니다. 광고 수익이 본격화되거나 상업 서비스로 키울 계획이라면 유료 플랜 전환을 염두에 두는 게 안전합니다.

2. 무료 용량의 한계.

Supabase 무료 플랜의 DB 용량과 Vercel의 월간 트래픽에는 상한이 있습니다. 개인 프로젝트엔 충분하지만, 사용자가 수천 명 단위로 늘면 유료 전환이 필요해집니다. 다만 이건 함정이라기보다 '잘 됐을 때 내는 성공 비용'에 가깝죠. 그 정도 규모면 월 몇만 원이 아깝지 않을 테니까요.

* 마무리 정리.

정리하면 이렇습니다. Next.js로 뼈대를 만들고, GitHub에 코드를 보관하고, Vercel이 자동으로 배포하고, Supabase가 데이터와 로그인을 책임집니다. 이 네 가지면 0원으로 회원가입 되는 실제 웹서비스를 띄울 수 있습니다.

저는 이 조합으로 실제 서비스를 운영해 보면서 느낀 게 하나 있습니다. 이제 개발의 진입장벽은 돈이 아니라 '시작하느냐 마느냐'더라고요. 아이디어가 있다면 이번 주말에 템플릿 하나 띄워보는 것부터 추천합니다.