[2026] 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 + 마크다운

아래 코드는 text를 사용한 구현 예제입니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

글 작성 흐름:
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 코드: 다음은 javascript를 활용한 상세한 구현 코드입니다. 비동기 처리를 통해 효율적으로 작업을 수행합니다. 각 부분의 역할을 이해하면서 코드를 살펴보시기 바랍니다.

// 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는 빌드 스크립트로 처리해야 합니다. 아래 코드는 javascript를 사용한 구현 예제입니다. 필요한 모듈을 import하고, 비동기 처리를 통해 효율적으로 작업을 수행합니다. 코드를 직접 실행해보면서 동작을 확인해보세요.

// 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