내가 SNS스택을 사용하는 이유

해당 포스트는 제가 사용하고 있는 기술, 특히 Supabase, Nextjs, ShadCN을 왜 사용하는지에 대한 내용입니다.

• Supabase – 인증인가 + 데이터베이스 + 리얼타임 + 스토리지
• Nextjs – React 기반 풀스택 프레임워크
• Shadcn UI – Tailwind 기반 트렌디하고 유연한 UI 컴포넌트

이 밖에 사용하는 기술로는 typescript, react hook form, zustand, framer-motion 등이 있습니다.

---

Supabase : Firebase Alternative Backend as a Service

Supabase는 Firebase 대체제로 주목받고 있는 BaaS(Backend as a Service) 플랫폼이다.
프론트앤드 출신인 내가 혼자서 프로젝트를 개발할 수 있는 이유이다.

✅ PostgreSQL 기반

• SQL을 직접 사용할 수 있고, 관계형 DB에 익숙한 나에게 매우 직관적이다.
• View, Function, Row Level Security 등 PostgreSQL 고급 기능도 활용 가능하다.
• 요즘에는 쿼리작성에 AI를 활용하기 때문에 SQL의 기본적인 개념만 알면 쉽게 쿼리를 완성할 수 있다.

✅ RLS(Row Level Security)와 권한 관리

• Supabase는 PostgreSQL 기반으로, RLS를 통해 백엔드 코드를 작성하지 않아도 데이터 접근을 정교하게 제어할 수 있다.
• 로그인 유저 auth.uid()만 자신의 데이터를 볼 수 있게 하는 권한 설정도 SQL로 간단히 처리 가능하다.
• 단, RLS의 내용은 코드베이스에 적혀있지 않다보니 반드시 데이터를 가져오는 코드에 주석으로 달아놔야 나중에 헷갈리지 않는다.

✅ Auth + Realtime + Storage

• 사용자 인증(Auth), 실시간 데이터(Realtime), 파일 저장(Storage)기능을 자바스크립트로 제공한다.
• 특히 OAuth 연동이 매우 간편하고, Nextjs와의 궁합이 잘 맞다.
• Realtime은 살짝 문제가 있는 것으로 알지만 크게 문제는 없다. 이 문제는 나중에 기회가 되면 다뤄보도록 하겠다.
• Storage는 타 업체에 비해 요금이 비싸지만 규모가 작은 프로젝트의 경우 고려해볼만 하다.

---

Nextjs : 리액트 개발자라면 필수가 되어버린

사실 Nextjs는 "선택"이라기보다 "자연스러운 흐름"이었다.
리액트를 배웠다면, 현재 거의 필수가 되어버린 Nextjs다.

Nextjs의 App Router는 React Server Components(RSC) 와 함께 풀스택 웹 개발의 새로운 흐름을 제시했다.
특히 v13에서 도입되고, v14~16에서 안정화되면서 프론트 개발자에게 강력한 구조적 이점과 서버 기능 활용이 가능해졌다.

✅ 파일 기반 라우팅 구조

• 직관적인 routing 시스템
• 순정 리액트 사용시 react router를 사용해야만 했지만 next의 라우팅 방법이 훨씬 쉽고 직관적임

✅ React Server Components (RSC)

• 서버에서 컴포넌트를 렌더링하여 클라이언트에 HTML만 전달 → 번들 사이즈 감소
• 서버 컴포넌트 안에서 직접 data fetching

export default async function Page() {
  const data = await fetchData()
  return <div>{data.name}</div>
}

• 클라이언트 사이드 코드(DOM manipulation 등...)가 필요한 경우 use client 명시

"use client";

export default function LikeButton() {
  return <button onClick={() => console.log("like")}>LIKE</button>;
}

✅ Server Actions 지원

• 클라이언트에서 서버 함수 직접 호출 가능
• 별도 API Route 없이도 form 처리 가능

export async function createPost(formData: FormData) {
  'use server'
  const title = formData.get('title')
  await db.insert({ title })
}

✅ SEO 및 메타데이터 설정

• 페이지마다 metadata 객체로 메타 태그 쉽게 설정 가능

export const metadata = {
  title: '블로그 글 제목',
  description: 'SEO 설명입니다',
}

❗ 단점도 있다

• 러닝커브 존재 : 서버 클라이언트 / 클라이언트 컴포넌트 구분 필요
• 복잡한 캐싱 : 지속적으로 제기되는 넥스트의 캐싱 기능, 15버젼에서는 그래도 많이 단순해졌다고 한다.
• Vercel 의존성 : vercel 사용시 딸깍이지만 자체 서버 구성 시 손이 많이 감
• 다양한 약속 파일들 : layout.tsx, template.tsx, not-found.tsx, loading.tsx 등...

---

ShadCN UI : 요즘 제일 핫한 UI 라이브러리

ShadCN은 tailwind 기반의 radix ui를 기반으로 한 UI 라이브러리다.
워낙 사용성이 뛰어나고 완성도가 좋아 개발 유투버들 사이에서 초창기부터 많이 언급이 되었다.
나도 이전에는 Ant Design, Daisy UI, Material UI 등을 사용해왔으나 ShadCN을 접한 후로는 이것만을 사용하고 있다.

✅ 이유 있는 인기

• Tailwind 기반이라 디자인 커스터마이징이 유연하고, 코드 일관성도 좋다
• Radix UI 기반 컴포넌트 → 이미 UI는 완성도가 높으며 기타 접근성(a11y) 걱정 없이 사용 가능
• 소스 코드 직접 복사 방식 → 필요한 컴포넌트만 가져와 사용가능하며 커스터마이징이 쉽다.
• Theme, Dark mode 설정들이 쉽다 - 공식 홈페이지가 워낙 잘되어있다보니 그냥 따라만하면 된다.

---

전통적인 서버-클라이언트 아키텍쳐와 비교

항목	Nextjs + Supabase (Serverless)	M(P)ERN 스택 (전통적인 백엔드)
아키텍처	서버리스 (무상태 함수, 엣지 기능)	전통적 서버-클라이언트 구조
백엔드	Supabase	Express + Node.js 직접 구축
데이터베이스	Postgres	MongoDB or Postgres
API 통신	Supabase SDK로 직접 DB 접근 (REST/SQL/GraphQL)	REST API 직접 작성
인증/인가	내장된 Supabase Auth + 쿠키 기반 세션	JWT 등 직접 구현 필요
데이터보안	RLS 기반의 DB 레벨 보안	인증/인가를 직접 미들웨어로 구성
서버 유지관리	불필요 (Supabase가 관리)	자체 서버 관리 필요 (배포, 스케일링 등)
배포 및 인프라	Vercel + Supabase로 풀스택 배포 완료	프론트, 백엔드, DB 따로 배포 필요
러닝커브	백엔드 부담 적음, 빠른 MVP에 적합	더 유연하지만 세팅 복잡
확장성, 비용	자동 스케일링, 사용량 기반 과금	수동 확장, 비용 고정 or VM 관리
유연성	Supabase 기능 내에서만 제한적	원하는 대로 구현 가능 (자유도 높음)

추천 유튜브채널

Supabase Official - Jon Meyers 영상 강추
Daily Web Coding - 싱가폴 개발자, 초기 supabase 설명이 좋지 못할 때 도움이 많이 됐음
Byte Grad - 유튜브에서 Nextjs에대한 이해도가 가장 높다고 생각함
Codevolution - Next강의 추천

마무리

어떤 스택이 더 좋다고 단정짓기는 어렵습니다.
중요한 건 내가 개발을 지속할 수 있는 환경과 프로젝트의 목적에 맞는 선택을 하는 것이죠.
백엔드 지식이 부족하거나 MVP를 빠르게 만들고 싶다면 Nextjs + Supabase 조합이 훌륭한 선택입니다.
저 처럼 프론트엔드 중심의 1인 개발자라면 SNS스택은 정말 큰 조력자가 될 것입니다.