Headless CMS — SvelteKit과 컨텐츠 관리 시스템 연동

개발자는 코드에 집중하고, 컨텐츠 관리는 CMS에 맡기자 — 이 분리가 Headless CMS의 핵심입니다.

개념 정의

Headless CMS 는 컨텐츠 관리 백엔드만 제공하고 프론트엔드는 API로 데이터를 가져와 자유롭게 구성하는 CMS입니다.

Markdown 기반 (파일 시스템)

가장 간단한 Headless CMS는 마크다운 파일을 직접 읽는 것입니다.

JAVASCRIPT

// src/lib/posts.js
import { parse } from 'yaml';

export async function getPosts() {
  const modules = import.meta.glob('/content/blog/*.md', { eager: true, query: '?raw', import: 'default' });

  return Object.entries(modules).map(([path, content]) => {
    const [, frontmatter, body] = content.match(/---\n([\s\S]*?)\n---\n([\s\S]*)/);
    const metadata = parse(frontmatter);
    const slug = path.split('/').pop().replace('.md', '');

    return { slug, ...metadata, content: body };
  }).sort((a, b) => new Date(b.date) - new Date(a.date));
}

JAVASCRIPT

// src/routes/blog/+page.server.js
import { getPosts } from '$lib/posts';

export async function load() {
  const posts = await getPosts();
  return { posts };
}

Sanity 연동

BASH

npm install @sanity/client

JAVASCRIPT

// src/lib/sanity.js
import { createClient } from '@sanity/client';

export const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  useCdn: true,
  apiVersion: '2024-01-01',
});

JAVASCRIPT

// src/routes/blog/+page.server.js
import { client } from '$lib/sanity';

export async function load() {
  const posts = await client.fetch(`
    *[_type == "post"] | order(publishedAt desc) {
      _id,
      title,
      slug,
      summary,
      publishedAt,
      "author": author->name,
    }
  `);

  return { posts };
}

CMS 선택 가이드

CMS	특징	적합한 경우
마크다운 파일	무료, Git 관리	개인 블로그, 문서
Sanity	실시간 편집, GROQ	팀 프로젝트, 복잡한 컨텐츠
Strapi	자체 호스팅, REST/GraphQL	컨트롤이 필요한 경우
Contentful	CDN 내장, 확장성	대규모 서비스

ISR(Incremental Static Regeneration) 패턴

JAVASCRIPT

// +page.server.js
export const config = {
  isr: {
    expiration: 60, // 60초마다 재생성
  }
};

export async function load() {
  const posts = await fetchFromCMS();
  return { posts };
}

면접 포인트

"Headless CMS의 장점은?": 프론트엔드 기술에 독립적이어서, 같은 컨텐츠를 웹, 모바일, IoT 등 여러 채널에서 재사용할 수 있습니다. 컨텐츠 팀과 개발팀이 독립적으로 작업할 수 있습니다.
"마크다운 vs API 기반 CMS?": 소규모 개인 프로젝트는 마크다운이 간단하고 무료입니다. 비개발자가 컨텐츠를 관리해야 하거나 실시간 미리보기가 필요하면 Sanity/Strapi 같은 CMS가 적합합니다.

정리

SvelteKit의 load 함수와 Headless CMS는 자연스럽게 결합됩니다. 파일 기반 마크다운부터 Sanity, Strapi 같은 전문 CMS까지, 프로젝트 규모와 팀 구성에 맞는 CMS를 선택하면 됩니다.