Kim JeongHyeonFrontend Focused Fullstack Developer
블로그를 만드는 방법은 수십 가지가 있습니다. WordPress, Ghost, 정적 사이트 생성기(Hugo, Jekyll) 등 검증된 옵션이 많죠. 그럼에도 불구하고 Next.js + Supabase 조합을 선택한 이유는 명확합니다:
src/
├── app/ # Next.js App Router
│ ├── (home)/ # 홈 페이지
│ ├── posts/ # 블로그 목록 + 상세
│ ├── admin/ # 어드민 대시보드
│ └── api/ # API Routes
├── components/
│ ├── layout/ # Navigation, Footer
│ ├── posts/ # PostCard, PostEditor
│ └── ui/ # Button, Input 등
├── lib/
│ └── supabase/ # 클라이언트 설정
├── types/ # TypeScript 타입
└── styles/ # CSS Modules + 토큰핵심은 app/ 디렉토리의 라우트 구조입니다. Next.js 15의 App Router는 파일 시스템 기반 라우팅을 제공하므로, 폴더 구조가 곧 URL 구조가 됩니다.
supabase.com/dashboard에서 새 프로젝트를 생성합니다. Region은 Northeast Asia (ap-northeast-1)을 선택하면 한국에서의 응답 속도가 가장 빠릅니다.
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...주의:
SUPABASE_SERVICE_ROLE_KEY는 RLS를 우회하므로 절대 클라이언트에 노출하면 안 됩니다.
CREATE TABLE posts (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
title TEXT NOT NULL,
slug TEXT NOT NULL UNIQUE,
content TEXT NOT NULL DEFAULT '',
content_type TEXT NOT NULL DEFAULT 'markdown'
CHECK (content_type IN ('markdown', 'richtext')),
excerpt TEXT DEFAULT '',
cover_image TEXT DEFAULT '',
tags TEXT[] DEFAULT '{}',
category TEXT DEFAULT 'General',
published BOOLEAN DEFAULT false,
view_count INTEGER DEFAULT 0,
created_at TIMESTAMPTZ DEFAULT now(),
updated_at TIMESTAMPTZ DEFAULT now()
);여기서 주목할 점은 content_type 컬럼입니다. Markdown과 Rich Text(Tiptap) 두 가지 에디터를 지원하기 위해, 저장 시점에 어떤 형식인지를 함께 기록합니다.
Supabase의 강점 중 하나는 Row Level Security입니다. 테이블 레벨에서 접근 제어를 설정할 수 있어, API 코드에서 일일이 권한 체크를 하지 않아도 됩니다.
-- 공개 포스트는 누구나 읽기 가능
CREATE POLICY "Published posts are viewable"
ON posts FOR SELECT
USING (published = true);
-- 인증된 사용자만 전체 접근
CREATE POLICY "Authenticated full access"
ON posts FOR ALL
USING (auth.role() = 'authenticated');이렇게 설정하면 anon 키로 접근하는 일반 사용자는 published = true인 글만 볼 수 있고, 어드민은 모든 글에 접근할 수 있습니다.
기본적인 프로젝트 뼈대가 잡혔습니다. 다음 편에서는 실제로 포스트를 작성할 수 있는 에디터 UI를 만들어 보겠습니다. Markdown 에디터와 Tiptap Rich Text 에디터를 모두 구현하고, 실시간 미리보기까지 추가합니다.