MDX 개발자 우선 웹사이트 — CMS 종속성 없음

콘텐츠가 다른 사람의 데이터베이스에 갇혀서는 안 됩니다

독점 CMS에 콘텐츠를 커밋할 때마다, 당신은 도박을 하고 있는 것입니다. 공급업체가 가격을 인상하지 않을 것이고, 기능을 중단하지 않을 것이며, 당신의 워크플로우에 관심이 없는 회사에 인수되지 않을 것이라고 도박을 거는 것입니다. 대부분의 경우, 당신은 그 도박에서 집니다.

MDX는 모델을 뒤집습니다. 당신의 콘텐츠는 JSX 컴포넌트로 향상된 마크다운 파일로 저장소에 살아 있습니다. 버전 관리되고, 이식 가능하며, 전적으로 당신이 소유하고 있습니다. 새벽 2시에 만료되는 API 키도 없고, 마이그레이션의 악몽도 없으며, 공급업체가 콘텐츠를 인질로 잡고 있는 상황도 없습니다.

Social Animal에서 우리는 MDX로 구동되는 웹사이트를 구축하여 개발팀에 콘텐츠 아키텍처에 대한 완전한 제어 권한을 제공하면서도 저작 경험을 깔끔하고 빠르게 유지합니다.

MDX란 무엇이며 왜 중요한가요?

MDX는 컴포넌트 시대를 위한 마크다운입니다. 표준 마크다운을 작성하고 React(또는 JSX 호환) 컴포넌트를 콘텐츠 파일에 직접 포함할 수 있게 합니다. 개발자 도구와 콘텐츠 저작 사이의 다리라고 생각하면 됩니다.

일반적인 MDX 파일은 다음과 같습니다:

# 제품 출시 공지

오늘 새로운 대시보드를 출시합니다.

<FeatureGrid features={launchFeatures} />

전체 변경 로그는 [여기](/changelog)에서 읽으세요.

<CallToAction variant="primary" />

이것은 Git 저장소의 .mdx 파일에 살고 있는 실제 콘텐츠와 실제 컴포넌트입니다. CMS 관리 패널도 필요 없고, 제목을 렌더링하기 위한 REST API 호출도 필요 없습니다.

개발자가 MDX를 선호하는 이유

• Git 네이티브 워크플로우: 콘텐츠는 코드와 동일한 PR, 검토 및 배포 파이프라인을 거칩니다
• 타입 안전 컴포넌트: 콘텐츠 컴포넌트는 런타임이 아닌 빌드 시간에 검증됩니다
• 런타임 비용 없음: MDX는 정적 HTML로 컴파일됩니다 — 클라이언트 측 마크다운 구문 분석이 없습니다
• 완전한 JSX 능력: 대화형 차트, 포함된 데모, 동적 테이블 — 모두 문장과 함께 인라인으로 표현됩니다
• 공급업체 의존성 없음: 프레임워크를 전환하면 .mdx 파일이 당신과 함께 옵니다

공급업체 종속성 문제는 실제입니다

우리는 고객들을 Contentful, Prismic, Sanity, WordPress에서 마이그레이션했습니다 — 때로는 같은 분기에 모두 해야 했습니다. 패턴은 항상 같습니다:

1. 팀이 데모에서 좋아 보인다고 CMS를 선택합니다
2. 독점 콘텐츠 모델 주위에 깊게 결합된 템플릿을 구축합니다
3. CMS가 가격을 변경하거나 API 버전을 중단하거나 주요 변경 사항을 도입합니다
4. 마이그레이션은 기능 작업을 차단하는 여러 스프린트 프로젝트가 됩니다

MDX를 사용하면 마이그레이션은 문제가 아닙니다. 당신의 콘텐츠는 파일입니다. 파일은 폴더에 살아 있습니다. 폴더는 Git에 살아 있습니다. Next.js에서 Astro로 이동하나요? 당신의 MDX 파일은 신경 쓰지 않습니다 — 둘 다에서 작동합니다.

"공급업체 종속성 없음"이 실제로 의미하는 것

CMS 반대라는 의미는 아닙니다. 당신의 콘텐츠 계층이 당신이 제어하지 않는 단일 장애 지점을 가지지 않는다는 의미입니다. 구체적으로:

• 독점 콘텐츠 모델 없음 — 스키마는 공급업체의 대시보드가 아니라 코드로 정의됩니다
• 빌드를 위한 API 의존성 없음 — 콘텐츠는 로컬이고 빌드는 빠르고 결정적입니다
• 사용자당 가격 책정 놀라움 없음 — 콘텐츠에 첨부된 SaaS 청구서는 없습니다
• 마이그레이션 세금 없음 — 프레임워크나 호스트를 전환해도 콘텐츠를 다시 플랫폼화할 필요가 없습니다

MDX 우선 아키텍처에 대한 우리의 접근 방식

우리는 MDX 파일을 /content 폴더에 드롭하고 완료라고 부르지 않습니다. 우리는 확장되는 적절한 콘텐츠 아키텍처를 구축합니다.

Frontmatter 검증을 통한 콘텐츠 스키마

모든 MDX 파일은 Zod 또는 유사한 런타임 검증자를 사용하여 검증된 frontmatter 스키마를 가집니다. 당신의 콘텐츠는 CMS를 부과할 필요 없이 구조가 강제됩니다 — 필수 필드, 타입이 지정된 날짜, 검증된 슬러그.

const postSchema = z.object({
  title: z.string().max(70),
  date: z.coerce.date(),
  tags: z.array(z.string()),
  draft: z.boolean().default(false),
});

형식이 잘못된 콘텐츠 파일을 푸시하면 빌드가 명확한 오류로 실패합니다. 이것은 대부분의 CMS 플랫폼이 제공하는 것보다 더 나은 검증입니다.

사용자 정의 컴포넌트 라이브러리

우리는 당신의 콘텐츠 필요에 맞춘 재사용 가능한 MDX 컴포넌트 집합을 구축합니다. 일반적인 예시:

• <Callout> — 스타일이 지정된 팁, 경고 및 정보 블록
• <CodeDemo> — 구문 강조 표시가 있는 라이브 코드 예제
• <ComparisonTable> — 구조화된 기능 비교
• <VideoEmbed> — 적절한 종횡비를 가진 반응형, 지연 로드 비디오
• <PricingCard> — 데이터 계층에서 가져오는 동적 가격 책정 컴포넌트

이러한 컴포넌트는 문서화되고, 테스트되며, 콘텐츠와 함께 버전이 지정됩니다.

콘텐츠 컬렉션 및 타입 안전성

Astro의 Content Collections 또는 사용자 정의 로더가 있는 Next.js를 사용하여 완전히 타입이 지정된 콘텐츠 API를 만듭니다. 당신의 IDE는 콘텐츠 필드를 자동 완성합니다. TypeScript는 배포 전에 깨진 참조를 포착합니다. 솔직히 말해서, DX는 내가 사용해본 모든 CMS GraphQL 탐색기를 능가합니다.

비개발자 저작 옵션

MDX는 모든 사람이 VS Code에서 살아야 한다는 의미는 아닙니다. 필요할 때 가벼운 편집 계층을 추가합니다:

• Prose Mirror 또는 TinaCMS — Git 지원 저장소를 통한 시각적 편집
• Decap CMS (이전의 Netlify CMS) — 저장소에 커밋하는 간단한 관리 UI
• GitHub의 내장 편집기 — 빠른 수정을 위한 미리보기 워크플로우
• 사용자 정의 관리 대시보드 — MDX 파일을 프로그래밍 방식으로 커밋하는 서버 작업 사용

콘텐츠는 Git에 머물러 있습니다. 편집 환경은 누가 글을 쓰는지에 맞게 조정됩니다.

기술 스택

우리의 MDX 빌드는 일반적으로 다음에서 실행됩니다:

• Next.js 14+ — App Router 통합을 위한 next-mdx-remote 또는 @next/mdx
• Astro — 네이티브 MDX 지원 및 정적 우선 사이트를 위한 Content Collections
• Rehype 및 Remark 플러그인 — 구문 강조 표시, 목차 생성, 링크 처리 및 이미지 최적화
• Tailwind CSS — 디자인 토큰을 사용한 컴포넌트 스타일링
• Vercel 또는 Netlify — 즉시 롤백을 통한 배포 (콘텐츠가 Git에 있으므로 모든 배포는 되돌릴 수 있습니다)

얻을 수 있는 것

우리가 MDX 우선 웹사이트를 제공할 때, 당신은 다음으로 떠납니다:

• 완전히 배포된 사이트(로드 시간 1초 미만)
• 검증을 통한 문서화된 콘텐츠 스키마
• 사용자 정의 MDX 컴포넌트 라이브러리
• 미리보기 배포가 있는 Git 기반 콘텐츠 워크플로우
• 월간 CMS 비용 없음
• 모든 콘텐츠 파일, 컴포넌트 및 구성에 대한 완전한 소유권
• 존재하지 않는 마이그레이션 경로 — 마이그레이션할 것이 없기 때문입니다

이것이 적합한 사람들

MDX 우선 아키텍처는 다음에 매우 적합합니다:

• 개발자 도구 회사 — 하나의 스택에서 문서, 블로그 및 마케팅 페이지를 원하는 회사
• 스타트업 — 수익이 있기 전에 CMS에 $300/월을 지출하고 싶지 않은 회사
• 에이전시 — 수십 개의 클라이언트 사이트에서 CMS 통합을 유지하는 데 지쳤다
• 엔지니어링팀 — 콘텐츠를 타사 대시보드가 아닌 모노레포에 원하는 팀

당신의 팀이 Git에 편하고 단기 편의보다 장기 소유권을 중시한다면, MDX가 올바른 선택입니다.