블로그를 왜 만들기 시작했나

개발 일을 오래 하다 보면 어느 순간부터 내가 해결한 문제들이 시간 속에 묻혀 사라지는 느낌이 들기 시작한다.

프로젝트가 바뀌면 문서는 사라지고, 코드는 리포지토리 깊숙이 묻히고, 어떤 흐름으로 문제를 해결했는지 남길 공간도 점점 줄어든다.

특히 프론트엔드 개발자는 기술 변화 속도가 워낙 빠르기 때문에 한 번 이해했던 개념이나 패턴도 시간이 지나면 다시 찾아보고 다시 정리해야 한다. 그러다가 자연스럽게 이런 생각이 들었다.

내가 해결했던 문제들
기술적 결정을 내렸던 이유
UI/UX를 실험하며 얻은 경험
인프라나 빌드 환경에서 배운 지식

이런 것들을 언제든 돌아와 다시 참고할 수 있는 공간이 필요하다는 것.

그래서 “남에게 보여주기 위한 블로그”가 아니라

미래의 나에게 도움이 되는 지식 저장고를 만들기로 했다.

단순한 포스트 모음이 아니라,

내가 실제 사용하는 기술 스택으로 만든 작은 실험실 같은 블로그를 만들고 싶었다.

Next.js 16 + shadcn/ui + TailwindCSS를 선택한 이유

블로그를 다시 만들기로 했을 때 가장 먼저 고민한 건 “어떤 스택으로 구축할 것인가”였다.

단순히 글을 보여주는 수준이 아니라, 프론트엔드 개발자로서 실험할 수 있는 플랫폼이 되어야 했다.

그 기준을 모두 만족한 조합이 바로:

Next.js 16
shadcn/ui
TailwindCSS

이었다.

Next.js 16 — 서버 중심 아키텍처의 안정감

Next.js 16의 App Router는 정적 콘텐츠와 동적 콘텐츠가 섞인 블로그 구조에 매우 적합하다.

Server Component 기반 렌더링

→ MDX 데이터를 클라이언트로 넘기지 않아 성능이 안정적

유연한 라우팅 구조

→ /blog/[...slug] 를 사용해 깊은 폴더 구조도 자연스럽게 처리

자동화된 메타데이터 처리

→ generateMetadata로 SEO/OG 정보를 글마다 자동 생성

OG 이미지 생성 라우트 내장

→ 블로그 운영에 필요한 미리보기 이미지까지 자체 생성

프레임워크 차원에서 블로그에 필요한 기능이 대부분 준비돼 있어 선택이 자연스러웠다.

shadcn/ui — “기성 + 커스텀”의 이상적 조합

UI 라이브러리 선택 기준은 단 하나였다.

디자인을 망치지 않으면서 마음대로 뜯어고칠 수 있는가?

shadcn/ui는 컴포넌트를 “라이브러리에서 가져다 쓰는 방식”이 아니라

소스 코드를 프로젝트로 들여온 뒤 직접 수정하며 사용하는 방식이라 이를 완벽하게 충족했다.

Tailwind 기반이라 디자인 토큰도 자연스럽게 통합되고,

Typography · Card · Header 같은 컴포넌트도 블로그에 맞게 재정비하기 쉬웠다.

TailwindCSS — 텍스트 중심 레이아웃의 강력한 도구

블로그는 결국 글이 중심이다.

그래서 타이포그래피와 여백을 세밀하게 조절할 수 있는 Tailwind는 최적의 선택이었다.

일관된 텍스트 스타일 구성
빠른 레이아웃 빌드
라이트/다크 모드 토큰 관리 용이
반응형 구성도 직관적

UI 전체를 통일감 있게 조절할 수 있어 블로그 구축 속도를 크게 높여줬다.

Next.js 16 기반 블로그 라우팅 및 구조 설계

블로그는 Next.js 16 App Router를 그대로 활용해 도메인 단위 라우팅 + 동적 세그먼트 + 서버 컴포넌트 중심으로 구조화했다.

app
 ├─ about
 ├─ actions
 ├─ api
 ├─ blog
 │   ├─ [...slug]
 │   │    └─ page.tsx
 │   ├─ category
 │   ├─ new
 │   └─ page.tsx
 ├─ rss.xml
 ├─ sitemap.xml
 └─ tags
      └─ [tag]
          └─ page.tsx

`/blog`

전체 글 리스트를 보여주는 메인 페이지.

`/blog/[...slug]`

하위 폴더가 몇 단계든 자동으로 라우팅되는 상세 페이지.

`/blog/category`

메타데이터에서 생성되는 카테고리 구조를 표시.

`/tags/[tag]`

태그별 포스트 자동 분류.

`/rss.xml` / `/sitemap.xml`

검색 엔진을 위한 정적 리소스 자동 생성.

카테고리 트리 기반의 자동 라우팅

이 블로그의 핵심 중 하나는 카테고리를 폴더로 관리하지 않는다는 것이다.

대신 아래처럼 코드로 정의한 카테고리 트리(Category Tree) 로 모든 라우팅이 자동 생성된다.

export type CategoryNode = {
  label: string;
  value: string;
  children?: CategoryNode[];
};

export const RAW_CATEGORIES = [
  {
    label: '개발',
    value: 'dev',
    children: [
      {
        label: '프론트엔드',
        value: 'frontend',
        children: [
          {label: 'React', value: 'react'},
          {label: 'Next', value: 'next'},
        ],
      },
      {label: '인프라', value: 'infra'},
      {label: '백엔드', value: 'backend'},
      {label: '기타', value: 'etc'},
    ],
  },
  {
    label: '공인중개사',
    value: 'realtor',
    children: [
      {label: '개인 공부', value: 'study'},
      {label: '부동산 이론', value: 'theory'},
      {label: '기타', value: 'etc'},
    ],
  },
  {
    label: '일상',
    value: 'life',
    children: [{label: '맛집', value: 'food'}],
  },
] satisfies CategoryNode[];

카테고리 → URL 자동 변환

MDX의 frontmatter에 아래처럼 category 값을 넣으면:

title: "Next.js 16 구조 정리"
category: ["dev", "frontend", "next"]

다음과 같은 URL이 자동 생성된다.

/blog/dev/frontend/next/nextjs-architecture

1 depth: dev
2 depth: frontend
3 depth: next
slug: 파일명

카테고리 트리가 곧 URL 구조가 되는 아키텍처다.

덕분에:

카테고리 UI
카테고리 페이지
Slug 라우팅
Sitemap / RSS
OG 이미지 경로

모두 같은 기준으로 자동 생성된다.

정리

이 블로그는 단순한 글 모음이 아니라,

Next.js 16 + shadcn/ui + TailwindCSS 기반의 실험적 FE 아키텍처 위에 구축된 작은 플랫폼이다.

파일 기반 MDX 구조
카테고리 트리 기반 라우팅
자동화된 메타데이터/SEO
동적·정적 콘텐츠 통합
생산성과 유지보수성이 높은 UI 시스템

덕분에 앞으로 더 확장해도 구조적으로 흔들리지 않는,

“내가 개발자로서 장기적으로 사용할 수 있는 공간”이 되었다.

Next.js16으로 블로그 개발하기