Hello, EmDash.

10년 차 워드프레스 개발자 Dave입니다. 바이브코딩으로 사이트를 찍어내던 제가 왜 EmDash로 갈아탔는지, 그리고 당신도 15분 만에 따라올 수 있는 길을 보여드릴게요. 참고로 — 지금 보고 계신 이 사이트가 바로 EmDash로 만들어졌습니다.

튜토리얼 바로 시작 Dave의 스토리 먼저

Dave는 왜 EmDash에 꽂혔나

워드프레스가 싫어서가 아닙니다. 워드프레스를 사랑했기 때문에, '오늘의 도구로 처음부터 다시 만든 워드프레스'를 그냥 지나칠 수 없었습니다.

  1. 2014 – 2024

    워드프레스로 먹고살던 시절

    클라이언트 사이트를 수십 개 만들었습니다. 훌륭한 도구였지만 일상은 이랬죠 — 플러그인 업데이트 알림, 캐시 플러그인 위에 캐시 플러그인, PHP 버전 충돌, 그리고 '플러그인 하나가 뚫리면 사이트 전체가 뚫린다'는 불안. 실제로 워드프레스 보안 취약점의 96%는 플러그인에서 나옵니다.

  2. 2025

    바이브코딩을 만나다

    Claude와 함께 코드를 '대화'로 만들기 시작했습니다. 생산성은 폭발했는데, 정작 워드프레스는 AI에게 시키기가 애매했어요. 콘텐츠는 HTML 덩어리로 직렬화돼 있고, 훅과 플러그인은 블랙박스. AI가 이해할 수 있는 구조가 아니었습니다.

  3. 2026 초

    로그에서 발견한 새 방문자

    어느 날 접속 로그에 ChatGPT-User와 Claude-User가 보이기 시작했습니다. 사람이 AI에게 '이 개발자 어때?'라고 물으면, AI가 대신 내 사이트를 읽으러 오는 거죠. 문제는 — 내 워드프레스 사이트는 에이전트에게 전혀 친절하지 않았다는 것. 다음 방문자가 사람이 아닐 수 있다는 걸 그때 실감했습니다.

  4. 지금

    EmDash 발견

    '워드프레스를 지금의 도구로 처음부터 다시 만들면?'이라는 질문에 대한 답. 관리자 UI, 플러그인, 테마 같은 익숙한 개념은 그대로, 기반은 TypeScript + Astro + 서버리스. 플러그인은 샌드박스에서 돌고, 콘텐츠는 구조화된 JSON이고, MCP 서버가 내장돼 AI 에이전트가 1급 시민입니다. 이 사이트가 그 첫 실험입니다.

EmDash로 만들면 뭐가 다른가

Dave가 두 스택을 모두 운영하며 몸으로 비교한 결과입니다.

WordPress
EmDash — 이 사이트
플러그인 보안
WordPress 플러그인이 DB·파일시스템·사용자 데이터에 무제한 접근. 취약한 플러그인 하나가 사이트 전체를 위험에 빠뜨림 (취약점의 96%가 플러그인발)
EmDash 샌드박스 Worker 격리 실행. 선언한 권한(예: read:content, email:send)만 사용 가능 — 그 이상은 불가능
콘텐츠 저장
WordPress HTML 직렬화 + 주석 속 메타데이터. 콘텐츠가 DOM 표현에 묶여 있음
EmDash Portable Text — 구조화된 JSON. 같은 콘텐츠를 웹·앱·이메일·API 응답으로 자유롭게 렌더링
스택 & 성능
WordPress PHP + MySQL 위에 캐시 플러그인을 겹겹이 얹어 성능 확보
EmDash TypeScript + Astro 서버 렌더링. Cloudflare(D1+R2+Workers) 또는 Node+SQLite — 별도 호스팅 티어 없음
타입 안정성
WordPress 런타임에 발견하는 오류, 추측으로 다루는 메타 필드
EmDash admin에서 만든 스키마가 진짜 SQL 테이블이 되고, npx emdash types로 TypeScript 타입 자동 생성
AI 에이전트
WordPress 별도 대비 없음 — 에이전트가 HTML을 긁어서 추측
EmDash MCP 서버 내장 + 에이전트 스킬 + CLI. Claude·ChatGPT가 콘텐츠와 스키마를 직접 다룸
갈아타기
WordPress —
EmDash WXR·REST API·WordPress.com 가져오기 마법사 내장. 글·페이지·미디어·분류 그대로 이전

다음 방문자는 사람이 아닐 수 있습니다

AI 에이전트가 정보를 모으고, 비교하고, 결제까지 대신하는 시대가 시작됐습니다. 에이전트가 읽지 못하는 사이트는 조용히 선택지에서 사라집니다 — 분석 도구에는 잡히지도 않은 채로. 에이전트 친화 사이트의 6가지 요소, 이 사이트는 전부 실천 중입니다.

robots.txt 다시 보기

훈련용 크롤러(GPTBot)와 사용자를 대신해 방문하는 에이전트(ChatGPT-User, Claude-User)는 다릅니다. 구분해서 허용하세요. → /robots.txt

llms.txt

에이전트를 위한 README. 사이트가 무엇이고 어디를 읽어야 하는지 마크다운으로 안내합니다. 이 사이트도 갖고 있어요. → /llms.txt

마크다운 버전 제공

HTML 노이즈 없이 순수 콘텐츠만. 토큰을 아끼는 에이전트가 가장 좋아하는 형태입니다. → /story.md

구조화된 데이터

JSON-LD와 시맨틱 HTML로 '기계가 추출 가능한' 정보 계층을 만듭니다. EmDash는 콘텐츠 자체가 구조화된 JSON이라 출발점이 다릅니다.

MCP — 행동하는 에이전트

읽기를 넘어 '행동'까지. MCP는 에이전트가 사이트와 상호작용하는 표준입니다. EmDash는 MCP 서버를 내장하고 있습니다.

초기 HTML에 데이터를

JS를 실행하지 않는 크롤러도 많습니다. 핵심 데이터는 첫 HTML 응답에 있어야 합니다. Astro 서버 렌더링이 기본인 EmDash는 공짜로 해결.

15분 따라하기: 나의 첫 EmDash 사이트

Dave가 처음 했던 그대로입니다. 각 단계를 끝내면 체크하세요 — 진행 상황은 브라우저에 저장됩니다.

0 / 6 단계 완료

  1. STEP 1 준비물 확인

    Node.js 20 이상이면 충분합니다. PHP도, MySQL도, 호스팅 계정도 필요 없어요. 터미널에 입력해 버전을 확인하세요.

    node -v

    💡 없다면 nodejs.org에서 LTS 버전을 설치하세요

  2. STEP 2 프로젝트 만들기

    템플릿(blog / marketing / portfolio)과 플랫폼(node / cloudflare)을 고르면 끝. 이 사이트는 marketing 템플릿 + Node.js로 만들었습니다.

    npm create emdash@latest my-site

    💡 한 줄로: npm create emdash@latest my-site -- --template marketing --platform node --yes

  3. STEP 3 개발 서버 켜기

    http://localhost:4321 에 사이트가 뜹니다. 첫 실행 때 마이그레이션·시드 데이터·타입 생성이 자동으로 처리됩니다. 워드프레스 설치 마법사보다 빠르죠.

    cd my-site && npm install && npm run dev

  4. STEP 4 관리자 둘러보기

    워드프레스 관리자에 해당하는 곳. 비주얼 스키마 빌더로 콘텐츠 타입을 만들면 진짜 SQL 테이블이 생깁니다. 패스키 우선 로그인이라 비밀번호 관리도 필요 없어요.

    open http://localhost:4321/_emdash/admin

    💡 스키마를 바꿨다면 npx emdash types 로 TypeScript 타입을 다시 생성하세요

  5. STEP 5 AI 에이전트 연결

    프로젝트 폴더에서 Claude Code를 열면 .mcp.json이 EmDash 문서 MCP 서버를 자동 연결합니다. .agents/skills의 스킬 덕분에 AI가 EmDash 사이트 구조를 이미 알고 있어요. '히어로 문구 바꿔 줘'라고 말해보세요.

    claude

    💡 Cursor·VS Code용 설정(.cursor/mcp.json, .vscode/mcp.json)도 템플릿에 들어 있습니다

  6. STEP 6 배포 — 두 가지 길

    방법 1 (Node): 위 명령으로 도는 서버를 Railway·Fly.io·Render나 아무 VPS에 올리면 끝. 방법 2 (Cloudflare): 2단계에서 --platform cloudflare 를 골랐다면 npx wrangler login 후 npm run deploy — 이 한 줄로 Workers(서버)·D1(DB)·R2(미디어)가 자동 구성됩니다. 무료 티어로 충분해요.

    npm run build && npm start

    💡 GitHub의 템플릿 저장소에는 'Deploy to Cloudflare' 버튼도 있습니다. 클릭하면 Cloudflare가 템플릿을 내 계정에 복제하고 DB까지 만들어 바로 배포해 줘요 — 단, 순정 템플릿 기준입니다. deploy.workers.cloudflare.com 참고

타이핑도 귀찮다면, AI에게 시키세요

Dave의 바이브코딩 방식입니다. 쓰고 있는 AI 코딩 도구를 골라 프롬프트를 복사해 붙여넣으면, EmDash 사이트를 알아서 만들어 줍니다.

설치 & 실행
npm install -g @anthropic-ai/claude-code && claude
프롬프트 (붙여넣기만 하세요)

npm create emdash@latest 로 EmDash 사이트를 만들어 줘. 템플릿은 marketing, 플랫폼은 node, 프로젝트 이름은 my-site로. 생성되면 .agents/skills 의 EmDash 스킬과 AGENTS.md를 먼저 읽고, seed/seed.json 의 데모 콘텐츠를 내 소개에 맞게 한국어로 바꿔 줘. 끝나면 npm run dev 로 띄워서 확인시켜 줘.

템플릿마다 AGENTS.md와 에이전트 스킬(.agents/skills)이 포함되어 있어, 어떤 AI 도구든 EmDash 프로젝트를 바로 이해합니다. 문서 MCP 서버(docs.emdashcms.com/mcp)도 자동 연결됩니다.

자주 묻는 질문

지금 쓰는 워드프레스 사이트를 옮길 수 있나요?

네. WXR 내보내기 파일, WordPress REST API, WordPress.com 어디서든 가져올 수 있는 마법사가 내장되어 있습니다. 글·페이지·미디어·카테고리·태그가 그대로 이전되고, 거터버그 블록은 Portable Text로 변환됩니다. 직접 만든 플러그인과 테마는 에이전트 스킬이 포팅을 도와줍니다.

호스팅 비용은 얼마나 드나요?

Cloudflare 무료 티어(D1 + R2 + Workers)로 시작하면 0원입니다. Node.js + SQLite 방식이면 어떤 저가 VPS에서도 돌아갑니다. 워드프레스처럼 매니지드 호스팅 티어를 고민할 필요가 없어요.

아직 베타라던데, 써도 되나요?

EmDash는 베타 프리뷰 단계입니다. 포트폴리오·블로그·사이드 프로젝트에는 Dave가 자신 있게 추천하지만(이 사이트가 증거), 미션 크리티컬한 서비스라면 로드맵을 지켜보며 천천히 옮기세요. 피드백과 기여는 언제나 환영입니다.

코딩을 몰라도 쓸 수 있나요?

콘텐츠 작성과 스키마(콘텐츠 타입) 설계는 관리자 UI에서 코드 없이 가능합니다. 디자인을 바꾸고 싶다면 — 그게 바로 위의 'AI에게 시키세요' 섹션이 있는 이유입니다. 프롬프트만 붙여넣으세요.

이 사이트, 정말 EmDash로 만든 거 맞아요?

네. marketing 템플릿에서 시작해 시드 데이터(seed/seed.json)와 커스텀 블록 플러그인(스토리 타임라인·비교표·인터랙티브 튜토리얼·AI 빌드 탭)을 얹었습니다. 지금 보시는 모든 섹션은 admin의 Portable Text 에디터에서 편집할 수 있는 블록입니다. /llms.txt 와 /story.md 도 열어 보세요 — 에이전트 친화 원칙도 직접 실천하고 있으니까요.