기술 스택 선택기: Next.js + Cloudflare Pages

프레임워크: Next.js

React 기반 프레임워크 중에서 Next.js를 선택했다. 이유는 간단하다.

• SSG 지원: 블로그 글은 빌드 타임에 정적으로 생성하면 된다. 속도가 빠르고 서버 비용이 없다.
• App Router: 파일 기반 라우팅이 직관적이다. /blog/[slug] 같은 동적 라우트도 쉽게 만들 수 있다.
• MDX 지원: 마크다운으로 글을 쓰면서 필요할 때 React 컴포넌트를 삽입할 수 있다.
• SEO: generateMetadata로 페이지별 메타데이터를 쉽게 관리할 수 있다.

Astro도 고려했지만, React 생태계를 그대로 쓸 수 있는 Next.js가 더 익숙하고 확장성도 좋았다.

호스팅: Cloudflare Pages

처음에는 Vercel을 생각했다. Next.js를 만든 회사니까 호환성이 최고다. 하지만 한 가지 문제가 있었다.

Vercel Hobby 플랜은 상업적 용도로 사용할 수 없다.

광고를 붙여서 수익화하려면 Pro 플랜(월 $20)이 필요하다. 아직 수익이 나기 전인데 매달 $20을 내기는 부담스러웠다.

그래서 찾은 대안이 Cloudflare Pages다.

• 무료 플랜에서 상업적 사용 제한 없음
• 대역폭 무제한
• 글로벌 CDN으로 속도도 빠름
• @cloudflare/next-on-pages로 Next.js 배포 지원

도메인도 Cloudflare Registrar에서 사면 DNS 설정까지 한 번에 해결된다.

스타일링: Tailwind CSS v4

CSS 프레임워크는 Tailwind CSS를 선택했다. v4부터는 별도의 tailwind.config.ts 없이 CSS 파일에서 직접 테마를 정의한다.

@import "tailwindcss";
 
@theme inline {
  --color-bg: #ffffff;
  --color-border: #e5e7eb;
  --color-text-primary: #23272f;
  --color-accent: #2563eb;
  --font-sans: "Pretendard", system-ui, sans-serif;
}

이전 버전보다 훨씬 직관적이고, CSS 변수와 자연스럽게 통합된다.

폰트: Pretendard

한글 웹 폰트로 Pretendard를 선택했다. 이유는 명확하다.

• Apple SD Gothic Neo와 비슷한 느낌이라 깔끔하다
• 웹 폰트 최적화가 잘 되어 있다
• CDN으로 쉽게 로드할 수 있다
• 한글 + 영문 모두 예쁘다

콘텐츠: MDX

블로그 글은 MDX로 작성한다. 마크다운의 편리함에 React 컴포넌트를 삽입할 수 있는 확장성을 더했다. next-mdx-remote를 사용해서 content/blog/ 디렉토리의 MDX 파일을 빌드 타임에 파싱한다.

코드 하이라이팅은 rehype-pretty-code + shiki를 사용한다. VS Code와 동일한 문법 강조를 웹에서도 볼 수 있다.

직접 겪은 일: Cloudflare를 고른 대가는 나중에 청구됐다

호스팅을 Cloudflare로 정한 이유는 위에 적은 대로다. 그런데 이 선택에는 그때 계산하지 않은 항목이 있었다.

Cloudflare에서 동적으로 도는 코드는 edge 런타임에서 돈다. 거기엔 fs가 없다. 파일을 읽어야 하는 코드는 빌드 시점에 미리 다 돌려놔야 한다는 뜻이다.

이 제약이 실제로 걸린 건 한참 뒤였다. 지금 이 사이트에서 export const runtime = "edge"를 붙여 둔 곳이 네 군데인데, 붙이는 걸 빠뜨리면 로컬 빌드는 통과하고 배포된 사이트만 깨진다. 로컬에는 Node가 있으니 당연히 통과한다.

빌드 스크립트도 평범하지 않다. npx @cloudflare/next-on-pages로 한 번 변환한 뒤 .vercel/output/static을 올린다. Vercel용 출력 폴더를 Cloudflare에 올리는 모양새라 처음 보면 어리둥절하다.

«무료에 빠르다»는 비교표에 나오는 항목이고, «파일을 못 읽는다»는 안 나온다. 스택을 고를 때 비교하기 어려운 건 대체로 후자 쪽이다.

정리