Craft CMS를 Next.js Headless로 마이그레이션

Craft CMS의 모놀리식 프론트엔드를 떠나야 하는 이유

Craft CMS 5는 진정 좋은 소프트웨어입니다. 콘텐츠 모델링은 유연하고, Matrix 필드는 강력하며, 제어판은 업계 최고 수준입니다. 하지만 Twig 기반 프론트엔드는 사이트를 뒤로 물러나게 하고 있습니다.

모든 페이지 요청이 PHP를 거칩니다. 모든 템플릿이 모놀리식 스택을 통해 서버 사이드에서 렌더링됩니다. Lighthouse 모바일 점수는 아무리 최적화해도 45-65 범위에 머물러 있습니다. TTFB는 1.2-2.5초로 기어갑니다. 개발자들은 Twig 템플릿과 필요한 JavaScript 사이에서 끊임없이 문맥을 전환합니다.

해결책은 Craft의 콘텐츠 모델을 포기하는 것이 아닙니다. 프론트엔드를 완전히 분리하는 것입니다.

Next.js로의 headless 마이그레이션은 Craft의 모든 장점 — Matrix 블록, 관계형 엔트리, 편집 워크플로우 — 을 보존하면서 렌더링 레이어를 실제로 성능하는 무언가로 교체합니다. 서버 컴포넌트, 엣지 캐싱, 증분 정적 재생성. 결과는 300ms 이하의 TTFB와 95 이상의 Lighthouse 점수입니다.

Craft CMS 사이트에서 우리가 본 실제 문제점

우리는 수십 개의 Craft 사이트를 마이그레이션했습니다. 불만은 놀랄 정도로 일관성이 있습니다:

성능 한계

CSS를 축소했고, 이미지를 lazy-load했으며, Redis 캐싱을 추가했고, nginx 설정을 튜닝했습니다. Lighthouse는 여전히 모바일에서 주황색을 표시합니다. 병목은 아키텍처적입니다 — PHP 렌더링은 엣지 캐시된 정적 페이지나 스트리밍 서버 컴포넌트와 경쟁할 수 없습니다. 그 문제를 해결하는 튜닝은 없습니다.

규모에서의 Matrix 필드 복잡성

Matrix 필드는 50개 페이지일 때는 훌륭합니다. 중첩된 Matrix 블록, 관계형 엔트리, eager-loading 요구사항이 있는 500개 이상의 페이지에서는 GraphQL 쿼리가 눈에 띄게 느려집니다. 템플릿 로직은 깊게 중첩된 Twig 조건문으로 변합니다. 새로운 블록 타입을 추가하려면 여러 템플릿 파일을 건드려야 합니다. 빠르게 복합됩니다.

개발자 채용

Twig/PHP를 능숙하게 다루면서도 좋은 CSS와 JavaScript를 작성하는 시니어 개발자를 찾기는 점점 더 어렵습니다. 시니어 React/Next.js 개발자를 찾기는 어렵지 않습니다. headless 아키텍처를 통해 채용 풀이 극적으로 확대됩니다.

호스팅 오버헤드

Craft는 PHP, MySQL/Postgres, 웹 서버, 그리고 보통 허용 가능한 성능을 위해 Redis 또는 Memcached를 필요로 합니다. 프로덕션 설정의 경우 최소 £40-120/월이며, 서버 유지보수 비용이 추가됩니다. Vercel의 Next.js 사이트는 $20/월에서 시작하며 서버 관리는 전혀 필요하지 않습니다.

플러그인 종속성

Craft 플러그인은 SEO, 양식, 리다이렉트, 이미지 변환 등을 처리합니다. 각각은 자신의 업데이트 주기, 호환성 매트릭스, 주요 Craft 업그레이드에서 깨질 가능성이 있는 종속성입니다. 누적됩니다.

새로운 아키텍처의 모습

우리는 단지 Twig를 React로 바꾸지 않습니다. 전체 스택을 다시 생각합니다:

Vercel의 Next.js 15 프론트엔드

App Router와 React Server Components입니다. 페이지는 100ms 이내의 엣지에서 렌더링됩니다. 증분 정적 재생성은 전체 재빌드 없이 콘텐츠 업데이트가 몇 초 내에 표시됨을 의미합니다. 이미지 최적화는 next/image를 통해 기본 제공됩니다. nginx 튜닝, PHP-FPM 워커, 캐시 무효화 문제가 없습니다.

콘텐츠용 Headless CMS

필요에 따라 콘텐츠를 Sanity, Contentful, Payload CMS로 마이그레이션하거나 headless 모드에서 Craft 5를 계속 실행합니다. 편집자가 Craft의 제어판을 좋아한다면 유지하면 됩니다 — 단지 Twig 프론트엔드를 제거하고 Craft의 기본 GraphQL API를 통해 콘텐츠를 쿼리합니다.

애플리케이션 데이터용 Supabase

사용자 인증, 양식 제출, 동적 데이터, 실시간 기능 — Supabase는 CMS가 처리해서는 안 되는 것을 처리합니다. Postgres 데이터베이스, Edge Functions, Row Level Security, 그리고 넉넉한 무료 계층. 비콘텐츠 기능을 위해 사용하던 Craft 플러그인들의 잡동사니를 대체합니다.

호스팅 및 엣지 네트워크용 Vercel

Git에서 자동 배포. 모든 PR에 대한 미리보기 배포. 100개 이상의 글로벌 PoPs 전체의 엣지 캐싱. 기본 제공 분석 및 속도 인사이트. 인프라 비용은 감소하고 성능은 기하급수적으로 개선됩니다.

우리의 마이그레이션 프로세스

우리는 구조화된 5단계 마이그레이션을 실행합니다. 놀람도 없고, 범위 확대도 없습니다.

1단계: 콘텐츠 감사 및 URL 매핑 (1주차)

우리는 Screaming Frog로 기존 Craft 사이트를 크롤링하고 전체 콘텐츠 구조를 내보냅니다. 모든 섹션, 엔트리 타입, Matrix 블록 설정, 그리고 자산 볼륨이 문서화됩니다. 모든 기존 URL을 새로운 Next.js 동등물로 매핑하고 구조 변경을 플래그합니다.

이 단계는 두 가지 산출물을 생성합니다: 콘텐츠 마이그레이션 명세와 완전한 301 리다이렉트 맵입니다.

2단계: 아키텍처 및 스키마 설계 (2주차)

새로운 콘텐츠 스키마를 설계합니다 — headless 모드용 재구성된 Craft 섹션이든 Sanity/Contentful/Payload에서의 새로운 스키마든. Matrix 블록은 명시적 스키마가 있는 타입화된 콘텐츠 블록으로 매핑됩니다. 관계형 엔트리는 적절한 참조가 됩니다.

Supabase 테이블은 애플리케이션 데이터(사용자, 양식, 동적 콘텐츠)에 맞게 설계됩니다. API 계약은 Next.js와 모든 데이터 소스 간에 정의됩니다.

3단계: 프론트엔드 개발 (3-5주차)

Next.js 컴포넌트는 디자인 시스템에서 구축됩니다. 각 Matrix 블록 타입은 TypeScript 인터페이스가 있는 React 컴포넌트가 됩니다. 우리는 CMS 블록 타입을 컴포넌트에 동적으로 매핑하는 BlockRenderer 패턴을 사용합니다 — 나중에 새로운 블록 타입을 추가하는 것은 단일 파일 추가입니다.

GraphQL 쿼리는 페이지 컴포넌트와 colocate됩니다. 데이터 페칭은 Next.js 캐싱을 적절한 재검증 간격으로 사용합니다. 이미지는 next/image를 통해 적절한 srcset 생성으로 이동합니다.

4단계: 콘텐츠 마이그레이션 및 301 구현 (5-6주차)

커스텀 마이그레이션 스크립트는 실제 콘텐츠 전송을 처리합니다. Matrix 필드 데이터, 자산 파일, 관계형 엔트리 — 모든 것이 데이터 무결성 검증과 함께 새로운 스키마로 이동합니다.

301 리다이렉트는 정적 리다이렉트의 경우 next.config.js에서, 패턴 기반 규칙의 경우 Vercel의 엣지 미들웨어에서 구현됩니다. 우리는 자동화된 테스트로 모든 리다이렉트를 검증합니다.

// next.config.js - 예제 리다이렉트 구조
const redirects = async () => [
  { source: '/blog/:slug', destination: '/articles/:slug', permanent: true },
  { source: '/services/:path*', destination: '/what-we-do/:path*', permanent: true },
  // Craft URL 감사에서 생성된 전체 맵
];

5단계: 테스트, 출시, 모니터링 (6-7주차)

우리는 병렬 테스트를 실행합니다 — 구 사이트와 신규 사이트를 나란히. Core Web Vitals는 목표에 대해 검증됩니다 (LCP < 2.5s, CLS < 0.1, INP < 200ms). 모든 301 리다이렉트가 검증됩니다. Google Search Console은 크롤 오류를 모니터링합니다.

출시는 DNS 전환을 통해 다운타임 없이 발생합니다. 우리는 출시 후 30일 동안 검색 성능을 모니터링합니다.

SEO 보존 전략

SEO는 대부분의 마이그레이션이 잘못되는 곳입니다. 우리는 추측을 없애는 프로세스를 구축했습니다:

100% URL 커버리지. 모든 인덱싱된 URL은 301 리다이렉트를 받습니다. 예외는 없습니다. Google Search Console 데이터, Screaming Frog 크롤, sitemap.xml을 교차 참조하여 모든 URL을 포착합니다.

메타데이터 마이그레이션. 제목 태그, 메타 설명, Open Graph 데이터, 구조화된 데이터(JSON-LD)가 페이지별로 마이그레이션되고 검증됩니다. Craft의 SEOmatic 플러그인을 사용하던 경우 정확히 그 출력을 복제합니다.

내부 링크 무결성. 모든 내부 링크가 새로운 URL로 업데이트됩니다. 리다이렉트 체인 없음. 깨진 링크 없음.

XML 사이트맵 생성. CMS 콘텐츠에서 생성된 동적 사이트맵, 출시 당일 Google Search Console에 제출됨.

정규 태그 및 hreflang. 정확히 그대로 보존 — 또는 잘못 구성된 경우 개선됨.

우리 고객은 일반적으로 마이그레이션 중 유기 트래픽 변동이 3% 미만이며, 4-6주 내 회복 및 성장을 봅니다.

타임라인 및 가격

투명한 가격책정. 발견 비용 없음, 숨겨진 비용 없음.

소규모 사이트 (50페이지 미만): £8,000-£15,000 / $10,000-$18,000. 4-5주 타임라인.

중규모 사이트 (50-500페이지): £15,000-£35,000 / $18,000-$42,000. 6-8주 타임라인.

대규모 사이트 (500페이지 이상): £35,000-£80,000 / $42,000-$95,000. 8-12주 타임라인.

가격은 콘텐츠 복잡성(Matrix 블록 타입 수, 관계형 깊이, 다국어 요구사항)과 커스텀 기능(Supabase 통합, 인증, e-commerce)으로 확장됩니다.

마이그레이션 후 지속적인 호스팅 비용: Vercel Pro $20/월, Supabase Pro $25/월, headless Craft를 유지하는 경우 CMS 호스팅 또는 CMS 구독. 총 인프라는 일반적으로 $50-100/월입니다 — 종종 현재 Craft 호스팅 단독보다 적습니다.

모든 프로젝트는 무료 마이그레이션 감사로 시작합니다. 우리는 현재 Craft 사이트를 검토하고, 콘텐츠 복잡성을 추정하고, 48시간 내 고정 가격 견적을 제공합니다.