Hun's DEV

직접 만든 블로그, 직접 운영하는 플랫폼

개발자 블로그는 많습니다. 근데 대부분 정적 사이트 생성기를 쓰거나, 워드프레스에 테마를 입히거나, 노션을 블로그처럼 쓰거나. 저는 블로그 자체를 하나의 프로덕트로 만들고 싶었습니다.

Hun's DEV는 블로그 글 하나 쓰는 것부터 프로젝트를 소개하고, 나중에는 디지털 제품을 판매하는 것까지 — 개인 브랜드에 필요한 모든 걸 하나의 플랫폼으로 만든 프로젝트입니다.

왜 직접 만들었나요?

세 가지 이유입니다.

첫째, 에디터 경험. Markdown으로 글을 쓰고 프리뷰를 따로 보는 게 싫었습니다. Novel(Tiptap 기반) 에디터를 붙여서 워드프로세서처럼 바로 쓰고 바로 보이는 환경을 만들었습니다. Slash 커맨드(/)로 제목, 리스트, 코드 블록을 빠르게 삽입합니다.

둘째, 성능과 SEO. Next.js 15의 App Router + unstable_cache로 1시간 서버 캐싱을 걸고, 글을 수정하면 revalidateTag로 즉시 무효화합니다. OG 이미지도 동적으로 생성하고, RSS 피드, sitemap, robots.txt까지 자동 생성됩니다.

셋째, 확장성. 블로그만 만들 거면 Gatsby나 Hugo를 쓰면 됩니다. 하지만 프로젝트 쇼케이스, 스토어, 뉴스레터까지 한 플랫폼에서 관리하려면 풀스택으로 직접 만드는 게 맞았습니다.

구조

블로그

Novel 에디터로 글을 작성하면 JSON과 HTML이 동시에 저장됩니다. JSON은 나중에 에디터에서 다시 편집할 때 쓰고, HTML은 프론트엔드에서 바로 렌더링합니다. sanitize-html로 XSS를 방지하면서도 이미지, 비디오, 스타일 속성은 허용합니다.

카테고리, 태그, 시리즈 기능으로 글을 체계적으로 분류합니다. 시리즈 글은 순서를 지정해서 연속 읽기가 가능하고, 목차(TOC)는 헤딩 태그에서 자동 생성되어 스크롤 네비게이션으로 동작합니다.

프로젝트 쇼케이스

각 프로젝트의 상태(active/building/paused), 기술 스택, MRR, 사용자 수를 관리합니다. Remotion으로 만든 프로젝트 소개 영상을 임베드할 수 있고, 상세 페이지에서는 프로젝트의 스토리를 풀어냅니다.

관리자 패널

/admin에서 모든 콘텐츠를 관리합니다. Supabase의 Row Level Security(RLS)로 일반 사용자와 관리자의 데이터 접근을 분리하고, Server Actions로 안전하게 데이터를 변경합니다.

뉴스레터

Resend + React Email로 구독자에게 새 글 알림을 보냅니다. 구독/해지 API가 있고, 이메일 템플릿은 React 컴포넌트로 작성합니다.

기술적 특징

Supabase 3-Tier 클라이언트

Supabase 연결을 세 가지로 나눠서 씁니다:

• Public — 캐싱 호환 읽기 전용
• Server — 쿠키 기반 인증 컨텍스트
• Admin — Service Role로 RLS 우회 (관리자 전용)

캐싱 전략

unstable_cache → 1시간 TTL → revalidateTag로 즉시 무효화. 어드민에서 저장하면 자동으로 캐시가 풀리고, 외부에서는 /api/revalidate 엔드포인트로 수동 무효화할 수 있습니다.

동적 OG 이미지

/og/[slug] 라우트에서 글 제목, 카테고리, 날짜를 포함한 OG 이미지를 동적으로 생성합니다. SNS 공유 시 자동으로 예쁜 미리보기가 나옵니다.

기술 스택

• Next.js 15 — App Router + React 19 + Turbopack
• Supabase — PostgreSQL + Auth + Storage + RLS
• Tailwind CSS v4 — shadcn/ui + Radix UI 컴포넌트
• Novel — Tiptap 기반 WYSIWYG 에디터
• Remotion — 프로젝트 소개 영상 생성
• Resend — 트랜잭셔널 이메일 + 뉴스레터
• Vercel — 배포 + Analytics + Serverless Functions