Astro + Cloudflare Pages 블로그 스택 분석 | Vercel·Netlify·WordPress 비교

들어가며

기술 블로그를 시작할 때 “어떤 스택으로 만들지”는 단순한 취향 문제가 아닙니다. 속도·비용·유지보수·SEO·확장성이 모두 스택에 따라 달라지기 때문입니다.

이 글은 Astro + Cloudflare Pages로 블로그를 실제로 운영하며 느낀 장단점을 정리하고, Next.js + Vercel, Hugo + Netlify, WordPress, Ghost 등 대안과 비교합니다. “왜 이 스택을 선택했는지” 또는 “언제 다른 스택이 나은지”를 판단하는 기준을 제시합니다.

Astro 블로그 구축 방법은 Astro로 기술 블로그 만들기에서, Cloudflare Pages 배포는 Cloudflare Pages 완벽 가이드를 참고하세요.

---

목차

1. Astro + Cloudflare Pages 장점
2. 단점과 트레이드오프
3. 다른 스택과 비교
4. 실전 운영 경험
5. 선택 기준
6. 정리

---

1. Astro + Cloudflare Pages 장점

1-1. 속도: Zero JS + 글로벌 CDN

Astro는 기본이 Zero JavaScript입니다. 빌드 시 HTML만 남고, 인터랙션이 필요한 곳만 컴포넌트를 아일랜드로 추가합니다.

결과:

• TTFB(Time to First Byte): Cloudflare CDN 300+ 도시 → 대부분 50ms 이하
• FCP(First Contentful Paint): JS 파싱 없음 → 1초 이내
• Lighthouse 점수: 90~100점 (모바일 포함)

비교:

• Next.js: React 하이드레이션 → 초기 JS 번들 100KB+
• WordPress: PHP 렌더링 + 플러그인 → TTFB 500ms~2초

1-2. 비용: 무료 대역폭 무제한

항목	Cloudflare Pages	Vercel	Netlify
대역폭	무제한	100GB/월	100GB/월
빌드	500회/월	6,000분/월	300분/월
요청	무제한	무제한	무제한

실제 비용 (월 10만 방문자 기준):

• Astro + Cloudflare: $0 (무료 플랜)
• Next.js + Vercel: $0~20 (대역폭 초과 시)
• WordPress + VPS: $5~20 (서버 비용)

1-3. 보안: 서버 없음

정적 사이트는 공격 표면이 작습니다.

• PHP·DB 취약점 없음
• 플러그인 업데이트 불필요
• DDoS는 Cloudflare가 자동 방어

WordPress 비교: 매달 플러그인·테마 보안 패치 필요, SQL Injection·XSS 위험.

1-4. 개발자 경험: Git + 마크다운

글 작성 흐름:
1. 로컬에서 마크다운 작성
2. Git commit·push
3. 자동 빌드·배포
4. 프리뷰 URL 확인

장점:

• 버전 관리 (Git)
• 코드 리뷰 (PR)
• 롤백 쉬움 (이전 커밋 배포)
• 로컬 프리뷰 (npm run dev)

WordPress 비교: 웹 에디터, 버전 관리 플러그인 필요, 롤백 복잡.

1-5. 확장성: Edge Functions + D1/R2

Cloudflare Pages는 Workers 기반 Functions로 서버 로직을 Edge에서 실행할 수 있습니다.

예시:

• 조회수 API (D1 SQLite)
• 댓글 시스템 (KV)
• 이미지 리사이징 (R2 + Workers)
• 검색 API

코드:

// functions/api/views.js
export async function onRequest(context) {
  const db = context.env.DB;
  const slug = new URL(context.request.url).searchParams.get('slug');
  
  await db.prepare('UPDATE views SET count = count + 1 WHERE slug = ?')
    .bind(slug)
    .run();
  
  const result = await db.prepare('SELECT count FROM views WHERE slug = ?')
    .bind(slug)
    .first();
  
  return new Response(JSON.stringify({ views: result.count }));
}

---

2. 단점과 트레이드오프

2-1. 비개발자 편집 어려움

WordPress는 웹 에디터로 누구나 글을 쓸 수 있지만, Astro는 마크다운 + Git이 필수입니다.

해결책:

• Headless CMS: Contentful, Strapi, Sanity 연동
• Git 기반 CMS: Tina CMS, Decap CMS (구 Netlify CMS)
• Notion API: Notion을 CMS로 쓰고 빌드 시 가져오기

트레이드오프: CMS 추가 시 복잡도 증가, 무료 플랜 제한.

2-2. 플러그인 생태계 부족

WordPress는 5만+ 플러그인이 있지만, Astro는 직접 구현하거나 npm 패키지를 써야 합니다.

예시:

• SEO: 직접 메타 태그 작성 (WordPress는 Yoast SEO)
• 폼: Cloudflare Workers 또는 외부 서비스 (WordPress는 Contact Form 7)
• 분석: Google Analytics 스크립트 직접 추가 (WordPress는 플러그인)

장점: 불필요한 기능 없음, 가벼움.
단점: 초기 설정 시간.

2-3. 빌드 시간 (대량 페이지)

1,000개 이상 글이 있으면 빌드가 5~15분 걸릴 수 있습니다.

페이지 수	Astro	Hugo	Next.js
100개	30초	5초	1분
1,000개	5분	30초	10분
10,000개	50분	5분	100분+

해결책:

• 증분 빌드: .astro 캐시 활용
• 병렬 렌더링: build.concurrency 설정
• OG 이미지 캐시: 변경된 글만 재생성

Hugo 비교: Hugo는 Go로 작성되어 빌드가 압도적으로 빠르지만, MDX·컴포넌트 유연성은 Astro가 높습니다.

2-4. 실시간 기능 제한

정적 사이트는 실시간 댓글·채팅·알림이 기본으로 없습니다.

해결책:

• 댓글: Giscus (GitHub Discussions), Utterances
• 조회수: Cloudflare Workers + D1
• 검색: Pagefind (정적 인덱스) 또는 Algolia

WordPress 비교: WordPress는 DB 기반이라 실시간 기능이 기본.

---

3. 다른 스택과 비교

3-1. Next.js + Vercel

항목	Astro + Cloudflare	Next.js + Vercel
속도	⭐⭐⭐⭐⭐ (Zero JS)	⭐⭐⭐⭐ (React 하이드레이션)
비용	⭐⭐⭐⭐⭐ (무료 대역폭)	⭐⭐⭐⭐ (100GB 제한)
DX	⭐⭐⭐⭐	⭐⭐⭐⭐⭐ (매끄러움)
유연성	⭐⭐⭐⭐ (아일랜드)	⭐⭐⭐⭐⭐ (React 생태계)
SSR	⭐⭐⭐ (Workers)	⭐⭐⭐⭐⭐ (ISR, 서버 컴포넌트)
학습 곡선	⭐⭐⭐	⭐⭐⭐⭐ (React 필수)

Astro를 선택하면 좋은 경우:

• 콘텐츠가 정적이고, 인터랙션이 적을 때
• 빌드 시 HTML 완성으로 CDN 캐시 히트율을 최대화하고 싶을 때
• 대역폭 비용을 아끼고 싶을 때
• React 없이 가볍게 시작하고 싶을 때

Next.js를 선택하면 좋은 경우:

• 대시보드·인터랙티브 UI가 많을 때
• ISR(Incremental Static Regeneration)로 콘텐츠를 자주 업데이트할 때
• React 생태계(라이브러리, 컴포넌트)를 적극 활용할 때
• Vercel Analytics·Speed Insights를 쓸 때

3-2. Hugo + Netlify

항목	Astro + Cloudflare	Hugo + Netlify
빌드 속도	⭐⭐⭐⭐ (5분/1K 페이지)	⭐⭐⭐⭐⭐ (30초/1K 페이지)
컴포넌트	⭐⭐⭐⭐⭐ (React·Vue)	⭐⭐ (Go 템플릿만)
학습 곡선	⭐⭐⭐	⭐⭐ (Go 템플릿 문법)
대역폭	⭐⭐⭐⭐⭐ (무제한)	⭐⭐⭐⭐ (100GB)

Hugo를 선택하면 좋은 경우:

• 10,000개 이상 페이지 (문서 사이트)
• 빌드 속도가 최우선일 때
• 단순한 템플릿만 필요할 때

Astro를 선택하면 좋은 경우:

• MDX로 인터랙티브 예제를 넣고 싶을 때
• React·Vue 컴포넌트를 재사용하고 싶을 때
• JavaScript 생태계가 익숙할 때

3-3. WordPress

항목	Astro + Cloudflare	WordPress
속도	⭐⭐⭐⭐⭐ (정적 HTML)	⭐⭐⭐ (PHP·DB)
비용	⭐⭐⭐⭐⭐ (무료)	⭐⭐⭐ ($5~20/월)
보안	⭐⭐⭐⭐⭐ (서버 없음)	⭐⭐ (취약점 많음)
편집	⭐⭐ (마크다운·Git)	⭐⭐⭐⭐⭐ (웹 에디터)
플러그인	⭐⭐ (직접 구현)	⭐⭐⭐⭐⭐ (5만+)
SEO	⭐⭐⭐⭐⭐ (정적 HTML)	⭐⭐⭐⭐ (플러그인)

WordPress를 선택하면 좋은 경우:

• 비개발자가 글을 쓸 때
• 플러그인으로 빠르게 기능을 추가하고 싶을 때
• 댓글·회원·결제가 필요할 때

Astro를 선택하면 좋은 경우:

• 개발자 블로그 (코드 예제 많음)
• 속도·보안·비용이 우선일 때
• Git으로 버전 관리하고 싶을 때

3-4. Ghost

Ghost는 Node.js 기반 블로그 플랫폼으로, WordPress보다 가볍고 현대적입니다.

항목	Astro + Cloudflare	Ghost
속도	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
편집	⭐⭐	⭐⭐⭐⭐⭐ (Markdown 에디터)
비용	⭐⭐⭐⭐⭐	⭐⭐⭐ ($9~29/월)
회원	⭐⭐ (직접 구현)	⭐⭐⭐⭐⭐ (기본 제공)

Ghost를 선택하면 좋은 경우:

• 뉴스레터·유료 구독 모델
• 웹 에디터 + 마크다운
• 팀 협업 (여러 작성자)

---

4. 실전 운영 경험

4-1. 장점 (실제로 느낀 것)

1. 빌드 후 걱정 없음

정적 HTML이라 트래픽 급증해도 서버 다운이 없습니다. Cloudflare CDN이 알아서 처리합니다.

2. 비용 예측 가능

월 100만 방문자여도 $0입니다. WordPress는 트래픽 증가 시 서버 업그레이드 필요.

3. Git으로 글 관리

• 브랜치로 초안 관리
• PR로 리뷰
• 커밋 히스토리로 변경 추적
• 롤백 쉬움 (git revert)

4. 코드 예제 강함

MDX로 실행 가능한 예제를 넣을 수 있습니다.

import CodePlayground from '../components/CodePlayground.jsx';

<CodePlayground code="console.log('Hello')" />

4-2. 단점 (실제로 겪은 것)

1. 빌드 시간

1,000개 글 → 빌드 5~10분. 오타 수정 후 배포까지 기다려야 합니다.

해결: 로컬에서 npm run dev로 프리뷰, 중요한 글만 먼저 푸시.

2. 실시간 기능 구현 복잡

댓글·조회수·검색을 직접 구현해야 합니다.

해결:

• 댓글: Giscus (GitHub Discussions)
• 조회수: Cloudflare Workers + D1
• 검색: Pagefind (정적 인덱스)

3. 비개발자와 협업 어려움

마크다운·Git을 모르면 글 작성이 어렵습니다.

해결: Tina CMS, Decap CMS 같은 Git 기반 CMS 추가 (복잡도 증가).

4. 이미지 최적화 수동

WordPress는 업로드 시 자동 리사이징·WebP 변환하지만, Astro는 빌드 스크립트로 처리해야 합니다.

// scripts/optimize-images.mjs
import sharp from 'sharp';

await sharp('public/images/photo.jpg')
  .resize(1200)
  .webp({ quality: 80 })
  .toFile('public/images/photo.webp');

---

5. 선택 기준

5-1. 질문으로 판단하기

질문	Yes →	No →
개발자 혼자 운영?	Astro + Cloudflare	WordPress·Ghost
월 10만+ 방문자?	Astro + Cloudflare	어디든 OK
인터랙티브 UI 많음?	Next.js + Vercel	Astro + Cloudflare
빌드 속도 최우선?	Hugo + Netlify	Astro + Cloudflare
회원·결제 필요?	Ghost·WordPress	Astro (직접 구현)
10,000개+ 페이지?	Hugo	Astro (빌드 느림)

5-2. 시나리오별 추천

개인 기술 블로그 (코드 예제 많음):

• ✅ Astro + Cloudflare Pages
• 이유: 속도, 무료, Git 관리, MDX

팀 블로그 (비개발자 포함):

• ✅ Ghost 또는 WordPress
• 이유: 웹 에디터, 권한 관리

문서 사이트 (수천 페이지):

• ✅ Hugo + Netlify
• 이유: 빌드 속도

제품 블로그 (마케팅·뉴스레터):

• ✅ Ghost 또는 Next.js + Vercel
• 이유: 회원·구독, 이메일 통합

포트폴리오 + 블로그:

• ✅ Astro + Cloudflare Pages
• 이유: 프로젝트 페이지(정적) + 블로그 한 사이트

---

6. 마이그레이션 고려사항

6-1. WordPress → Astro

장점:

• 속도 10배+ 향상
• 호스팅 비용 $0
• 보안 걱정 없음

단점:

• 글 변환 작업 (HTML → 마크다운)
• 플러그인 기능 재구현
• 이미지 경로 수정

도구:

• wordpress-export-to-markdown (npm)
• 이미지는 public/images/로 이동

6-2. Next.js → Astro

장점:

• 빌드 산출물 단순 (HTML)
• 클라이언트 JS 감소
• Cloudflare Pages 무료 대역폭

단점:

• React 컴포넌트 재작성 (일부)
• ISR → SSG 전환 (캐시 전략 변경)

언제 고려?:

• 블로그가 대부분 정적 콘텐츠일 때
• Vercel 대역폭 비용이 부담될 때

---

7. 정리

핵심 요약

Astro + Cloudflare Pages는:

• 개발자 블로그에 최적화
• 속도·비용·보안에서 압도적
• Git + 마크다운 워크플로
• MDX·컴포넌트로 유연성 확보

트레이드오프:

• 비개발자 편집 어려움
• 플러그인 생태계 부족
• 대량 페이지 빌드 시간
• 실시간 기능 직접 구현

추천 시나리오

상황	추천 스택
개인 기술 블로그 (코드 많음)	⭐ Astro + Cloudflare
팀 블로그 (비개발자 포함)	WordPress, Ghost
제품 블로그 (마케팅)	Next.js + Vercel, Ghost
문서 사이트 (대량 페이지)	Hugo + Netlify
포트폴리오 + 블로그	⭐ Astro + Cloudflare

최종 판단 기준

1. 편집자가 개발자인가? → Yes: Astro, No: WordPress·Ghost
2. 인터랙션이 많은가? → Yes: Next.js, No: Astro·Hugo
3. 대역폭 비용이 걱정되는가? → Yes: Cloudflare, No: Vercel·Netlify
4. 빌드 속도가 최우선인가? → Yes: Hugo, No: Astro

다음 단계

스택 선택 후 구현 가이드:

• Astro로 기술 블로그 만들기
• Cloudflare Pages 완벽 가이드
• 기술 블로그 방문자 늘리기
• Node.js + GitHub Actions CI/CD

참고 자료:

• Astro vs Next.js 공식 비교
• JAMstack 아키텍처
• Cloudflare Pages vs Vercel