GROQ는 GraphQL과 어떻게 다릅가요?

GROQ는 콘텐츠 쿼리에 특화된 질의 언어이고, Sanity 스튜디오·클라이언트와 잘 맞습니다. 뷰·필드 projection이 단순한 프로젝트엔 GROQ가 읽기 쉬운 경우가 많습니다.

실시간 구독(listen)은 언제 쓰나요?

에디터 프리뷰·협업·대시보드처럼 문서가 자주 갱신될 때 유용합니다. 공개 사이트 전체에 실시간을 켜는 건 비용·보안·부하를 함께 봐야 합니다.

이미지·리치 텍스트는 CDN과 어떻게 연동하나요?

에셋 파이프라인·imageUrl·트랜스폼 툴이 함께 쓰입니다. Next/Image 등과 연동 시 도메인·최적화 옵션을 맞춥니다.

스키마 마이그레이션은 어떻게 관리하나요?

콘텐츠 호환·기본값·deprecated 필드 전략을 팀 룰로 정합니다. 기존 문서에 null이 생기는 경로를 GROQ·프론트에서 방어합니다.

Sanity CMS 완벽 가이드 | Headless CMS·구조화된 콘텐츠·GROQ·실시간·실전 활용

2026년 4월 7일 · 3분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Sanity CMS로 유연한 콘텐츠 관리를 구현하는 완벽 가이드. Schema 정의, GROQ 쿼리, 실시간 업데이트, Next.js 통합까지 실전 예제로 정리. Sanity·CMS·Headless CMS 중심으로 설명합니다.

이 글의 핵심

Sanity CMS로 유연한 콘텐츠 관리를 구현하는 완벽 가이드입니다. Schema 정의, GROQ 쿼리, 실시간 업데이트, Next.js 통합까지 실전 예제로 정리했습니다.

실무 경험 공유: WordPress에서 Sanity로 전환하면서, 콘텐츠 관리가 자유로워지고 개발자 경험이 크게 향상된 경험을 공유합니다.

들어가며: “CMS가 불편해요”

실무 문제 시나리오

시나리오 1: 스키마가 고정돼 있어요

WordPress는 제한적입니다. Sanity는 완전히 커스터마이징 가능합니다. 시나리오 2: 개발자 경험이 나빠요

기존 CMS는 불편합니다. Sanity는 개발자 친화적입니다. 시나리오 3: 실시간 협업이 필요해요

동시 편집이 어렵습니다. Sanity는 실시간 협업을 지원합니다.

1. Sanity란?

핵심 특징

Sanity는 구조화된 콘텐츠 플랫폼입니다. 주요 장점:

유연한 스키마: 완전히 커스터마이징
GROQ: 강력한 쿼리 언어
실시간: 실시간 업데이트
Portable Text: 리치 텍스트
이미지 처리: 자동 최적화

2. 프로젝트 설정

설치

npm create sanity@latest

프로젝트 구조

my-sanity-project/
├── sanity/
│   ├── schemas/
│   │   ├── post.ts
│   │   └── author.ts
│   ├── sanity.config.ts
│   └── sanity.cli.ts
└── app/

3. Schema 정의

Post Schema

// sanity/schemas/post.ts
import { defineField, defineType } from 'sanity';
export default defineType({
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (Rule) => Rule.required().min(10).max(100),
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'title',
        maxLength: 96,
      },
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'author',
      title: 'Author',
      type: 'reference',
      to: [{ type: 'author' }],
    }),
    defineField({
      name: 'mainImage',
      title: 'Main image',
      type: 'image',
      options: {
        hotspot: true,
      },
    }),
    defineField({
      name: 'categories',
      title: 'Categories',
      type: 'array',
      of: [{ type: 'reference', to: { type: 'category' } }],
    }),
    defineField({
      name: 'publishedAt',
      title: 'Published at',
      type: 'datetime',
    }),
    defineField({
      name: 'body',
      title: 'Body',
      type: 'blockContent',
    }),
  ],
});

4. GROQ 쿼리

기본 쿼리

// lib/sanity.ts
import { createClient } from '@sanity/client';
export const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
  apiVersion: '2024-01-01',
  useCdn: true,
});
// 모든 포스트
const posts = await client.fetch(`*[_type == "post"]`);
// 필터링
const publishedPosts = await client.fetch(`
  *[_type == "post" && publishedAt < now()] | order(publishedAt desc)
`);
// 특정 필드만
const posts = await client.fetch(`
  *[_type == "post"] {
    title,
    slug,
    publishedAt
  }
`);

Join (Reference)

const postsWithAuthor = await client.fetch(`
  *[_type == "post"] {
    title,
    slug,
    author->{
      name,
      image
    }
  }
`);

파라미터

const post = await client.fetch(
  `*[_type == "post" && slug.current == $slug][0] {
    title,
    body,
    author->{name}
  }`,
  { slug: 'my-post' }
);

5. Next.js 통합

포스트 목록

// app/blog/page.tsx
import { client } from '@/lib/sanity';
async function getPosts() {
  return await client.fetch(`
    *[_type == "post"] | order(publishedAt desc) {
      _id,
      title,
      slug,
      publishedAt,
      author->{name}
    }
  `);
}
export default async function BlogPage() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post._id}>
          <a href={`/blog/${post.slug.current}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

포스트 상세

// app/blog/[slug]/page.tsx
import { client } from '@/lib/sanity';
import { PortableText } from '@portabletext/react';
async function getPost(slug: string) {
  return await client.fetch(
    `*[_type == "post" && slug.current == $slug][0] {
      title,
      body,
      author->{name, image},
      mainImage
    }`,
    { slug }
  );
}
export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return (
    <article>
      <h1>{post.title}</h1>
      <PortableText value={post.body} />
    </article>
  );
}

6. 이미지 최적화

next-sanity

npm install next-sanity

import imageUrlBuilder from '@sanity/image-url';
import { client } from './sanity';
const builder = imageUrlBuilder(client);
export function urlFor(source: any) {
  return builder.image(source);
}
// 사용
<img
  src={urlFor(post.mainImage).width(800).height(400).url()}
  alt={post.title}
/>

7. 실시간 업데이트

'use client';
import { useEffect, useState } from 'react';
import { client } from '@/lib/sanity';
export default function RealtimePosts({ initialPosts }) {
  const [posts, setPosts] = useState(initialPosts);
  useEffect(() => {
    const subscription = client
      .listen(`*[_type == "post"]`)
      .subscribe((update) => {
        if (update.type === 'mutation') {
          setPosts((prev) => {
            // 업데이트 로직
            return [...prev];
          });
        }
      });
    return () => subscription.unsubscribe();
  }, []);
  return (
    <ul>
      {posts.map((post) => (
        <li key={post._id}>{post.title}</li>
      ))}
    </ul>
  );
}

정리 및 체크리스트

핵심 요약

Sanity: Headless CMS
유연한 스키마: 완전히 커스터마이징
GROQ: 강력한 쿼리 언어
실시간: 실시간 업데이트
Portable Text: 리치 텍스트
이미지 처리: 자동 최적화

구현 체크리스트

같이 보면 좋은 글

Next.js App Router 가이드
Astro 완벽 가이드
Contentful 완벽 가이드 | Headless CMS 실전 활용

이 글에서 다루는 키워드

Sanity, CMS, Headless CMS, GROQ, Content, Next.js, Backend

자주 묻는 질문 (FAQ)

Q. WordPress와 비교하면 어떤가요?

A. Sanity가 훨씬 유연하고 개발자 친화적입니다. WordPress는 더 많은 플러그인을 제공합니다.

Q. Contentful과 비교하면 어떤가요?

A. Sanity가 더 유연하고 실시간 기능이 좋습니다. Contentful은 더 성숙합니다.

Q. 무료로 사용할 수 있나요?

A. 네, 무료 플랜이 있습니다. 3 사용자, 10K 문서까지 무료입니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, Nike, Figma 등 많은 기업에서 사용합니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「Sanity CMS 완벽 가이드 | Headless CMS·구조화된 콘텐츠·GROQ·실시간·실전 활용」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「Sanity CMS 완벽 가이드 | Headless CMS·구조화된 콘텐츠·GROQ·실시간·실전 활용」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

이 글의 핵심

이 글의 핵심

들어가며: “CMS가 불편해요”

실무 문제 시나리오

동시 편집이 어렵습니다. Sanity는 실시간 협업을 지원합니다.

1. Sanity란?

핵심 특징

2. 프로젝트 설정

설치

프로젝트 구조

3. Schema 정의

Post Schema

4. GROQ 쿼리

기본 쿼리

Join (Reference)

파라미터

5. Next.js 통합

포스트 목록

포스트 상세

6. 이미지 최적화

next-sanity

7. 실시간 업데이트

정리 및 체크리스트

핵심 요약

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

Q. WordPress와 비교하면 어떤가요?

Q. Contentful과 비교하면 어떤가요?

Q. 무료로 사용할 수 있나요?

Q. 프로덕션에서 사용해도 되나요?

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

이 글이 도움이 되셨나요?