EmDash 딥다이브
— WordPress 다음 세대를 노리는 TypeScript·서버리스 CMS

1프로젝트 한줄 요약

EmDash는 Astro와 Cloudflare 위에 TypeScript로 처음부터 다시 짠 풀스택 CMS다. 공식 슬로건은 "the spiritual successor to WordPress(워드프레스의 정신적 후계자)". 즉 워드프레스가 잘했던 것(확장성·관리자 UX·플러그인 생태계)은 가져오되, 늙은 PHP 구조 대신 타입 안전·서버리스 토대 위에 다시 세운 것이다.

2왜 주목받는가

이 프로젝트가 화제가 된 결정적 이유는 "누가 만들었나"다. EmDash는 개인 사이드 프로젝트가 아니라 Cloudflare가 AI 코딩 에이전트로 약 2개월간 개발한 결과물이다. "AI 에이전트로 워드프레스를 통째로 다시 짠다"는 시도 자체가 2026년적 화두였다.

경쟁/비교 대상 대비 강점

3기술 스택 전체 지도

언어 구성 (GitHub Linguist 기준)

※ 비율은 GitHub 표기 기준의 근사치이며 커밋에 따라 변동한다. WordPress가 PHP 중심인 것과 정반대로, EmDash는 위아래 전 계층이 TypeScript 하나로 통일돼 있다는 점이 핵심.

프레임워크 / 핵심 런타임

데이터 / 스토리지 / 세션 (전부 어댑터로 교체 가능)

인프라 / 빌드

4아키텍처 심화 분석

시스템 구조도

핵심 설계 패턴 ①: 플랫폼 추상화 (의존성 역전)

EmDash 아키텍처에서 가장 흥미로운 부분은 "인프라를 갈아끼울 수 있게 만든 추상화"다. Cloudflare에 배포하다가 AWS나 자체 서버로 옮기고 싶을 때, 설정 한 줄만 바꾸면 동작한다.

핵심 설계 패턴 ②: 권한 기반(capability) 플러그인 격리

핵심 설계 패턴 ③: Live Collections — API 없이 직접 쿼리

보통 헤드리스 CMS는 별도 REST API 서버를 띄우고 프론트가 그걸 호출한다. EmDash는 그 단계를 없앴다. Astro 콘텐츠 레이어에 CMS가 통합돼 있어 코드에서 직접 콘텐츠를 가져온다.

핵심 설계 패턴 ④: Portable Text — HTML이 아닌 JSON 트리

WordPress가 HTML을 DB에 통째로 박아두는 것과 정반대로, EmDash는 콘텐츠를 구조화된 JSON으로 저장한다. 같은 글을 웹·앱·음성비서 등 여러 매체가 각자 다르게 렌더링할 수 있고, AI가 의미를 역추론할 필요도 없다.

핵심 설계 패턴 ⑤: MCP 서버 내장 — AI 네이티브 운영

모든 EmDash 인스턴스는 자체 원격 MCP 서버를 제공한다. "이번 주 신상품 5개 블로그 글 써줘"를 Claude에게 시키면, Claude가 직접 EmDash에 접속해 글을 쓰고 미디어를 올린다. 사람의 클릭 없이 콘텐츠가 흐른다.

5디렉토리 구조 해부

EmDash는 모노레포(여러 패키지를 한 저장소에서 관리)다. 관심 분야만 골라 읽을 수 있다. 실제 루트에는 packages/ 외에도 apps/, templates/, demos/, docs/, e2e/ 등이 더 있다. 아래는 핵심인 packages/ 내부만 발췌한 것이다.

패키지 이름만 봐도 EmDash의 야심이 보인다 — 인증·에디터·인프라 어댑터·마이그레이션·마켓플레이스·결제까지 CMS 한 채에 필요한 모든 조각을 따로 패키지로 분리해 두었다. 처음 본다면 core/(전체 흐름) → cloudflare/(어댑터 패턴) → auth/(Passkey 구현) 순서로 읽는 걸 권한다.

6학습 포인트 (기술별)

EmDash는 "쓰는 도구"이자 "읽고 배우는 교본"이다. 잘 쓰인 오픈소스를 정독하면 직접 쓸 일이 없어도 좋은 구조가 머리에 남는다.

A. 풀스택 TypeScript 모노레포 설계

배울 것: 위아래 전 계층을 하나의 타입 시스템으로 묶는 법. pnpm 워크스페이스로 18개+ 패키지를 분리하고 의존성을 관리하는 실전 구조. 스키마에서 타입을 뽑아내는 npx emdash types 같은 코드 생성 흐름.

B. 인터페이스 기반 인프라 추상화 (DIP)

배울 것: packages/cloudflare/가 핵심 교본. D1·R2·Worker Loader를 어떻게 인터페이스 뒤로 숨겨 SQLite ↔ PostgreSQL ↔ D1을 교체 가능하게 만들었는지. Kysely로 SQL 방언 차이를 흡수하는 패턴.

C. 권한 기반 플러그인 샌드박싱

배울 것: Worker isolate에서 남의 코드를 안전하게 실행하는 보안 모델. 매니페스트로 권한을 선언하고 런타임이 강제하는 capability-based security. "남의 코드를 내 시스템에서 돌릴 때"의 정석.

D. Passkey/WebAuthn 인증

배울 것: packages/auth/는 Passkey 우선 + OAuth/매직링크 폴백의 완전한 구현체. 비밀번호 없는 인증(WebAuthn 스펙)을 실제로 어떻게 붙이는지 학습하기 좋다.

E. 구조화 콘텐츠 모델링 (Portable Text)

배울 것: 콘텐츠를 HTML이 아닌 JSON 트리로 저장하는 발상의 전환. packages/blocks/에서 블록 타입 정의를, TipTap 에디터에서 입력 → Portable Text 직렬화 흐름을 볼 수 있다.

F. AI 통합 (MCP 서버) & 생태계 마이그레이션

배울 것: 앱에 MCP 서버를 붙여 AI 에이전트가 직접 조작하게 만드는 패턴. 그리고 gutenberg-to-portable-text/처럼 기존 생태계 데이터를 손실 없이 이전하는 변환기 설계 — 새 도구가 채택되려면 반드시 필요한 다리다.

7하드웨어 / 시스템 요구사항

8직접 해볼 수 있는 실습 과제

# 한 줄로 스캐폴딩 (Node.js + SQLite, 계정 불필요)
npm create emdash@latest my-blog
cd my-blog
npm run dev   # → 관리자 패널 접속, 포스트 작성, Passkey 등록

# Claude Desktop 설정에 EmDash MCP 서버 등록 (개념 예시)
{
  "mcpServers": {
    "emdash": {
      "url": "https://my-blog.example.com/_mcp",
      "headers": { "Authorization": "Bearer <토큰>" }
    }
  }
}
# → Claude에게: "신상품 5개에 대한 블로그 초안을 EmDash에 작성해줘"

9관련 기술 심화 학습 로드맵

1주차: 기초 체험 & 콘텐츠 모델

2주차: 인증 & 어댑터 추상화

3주차: 플러그인 & 보안 모델

4주차: AI 통합 · 마이그레이션 · 배포

10핵심 키워드 사전

11참고 링크

• GitHub 레포 — emdash-cms/emdash
• packages/ 모노레포 디렉토리
• Cloudflare 공식 발표 — EmDash로 워드프레스 다시 짓기
• Astro 프레임워크
• Kysely — 타입 안전 SQL 빌더
• Portable Text 사양
• TipTap 에디터
• Cloudflare D1 문서
• WebAuthn/Passkey 가이드
• MCP (Model Context Protocol) 공식
• Best of JS — EmDash