EmDash Build로 편집 가능한 AI 생성 웹사이트 구축 및 실행

EmDash Build란 무엇인가요?

EmDash Build는 작성된 브리프를 편집 가능한 EmDash 웹사이트로 변환하는 오픈 소스 AI 사이트 빌더입니다. 정적 페이지만 생성하는 대신 구조화된 콘텐츠 모델을 만들고, EmDash의 Model Context Protocol 서버를 통해 해당 모델을 채우며, 콘텐츠를 렌더링할 타입이 지정된 Astro 페이지와 컴포넌트를 작성합니다.

생성된 프로젝트에는 서버 렌더링 페이지, 구조화된 콘텐츠, 미디어 저장소, EmDash 관리 인터페이스가 포함됩니다. 초기 생성이 끝난 후에도 편집자는 사이트를 계속 사용할 수 있습니다. 텍스트와 미디어를 업데이트하고, 섹션을 추가하거나 복제하며, 콘텐츠 블록의 순서를 변경하고, 게시물을 예약하고, 에이전트에게 더 큰 규모의 콘텐츠 또는 디자인 변경을 요청할 수 있습니다.

중요: EmDash Build는 호스팅 제공업체, 웹사이트 빌더, 플랫폼을 위한 알파 참조 애플리케이션입니다. 호스팅된 데모에서는 게시 기능이 비활성화되어 있습니다.

호스팅된 데모를 살펴볼 수 있지만, 데모에서 사이트를 게시할 수는 없습니다.

주요 기능

• 구조화된 확인: 브리프에 중요한 결정이 정해지지 않은 경우 에이전트가 핵심 질문을 합니다.
• 에이전트가 설계하는 콘텐츠 모델: 재사용 가능한 엔티티를 위한 컬렉션과 편집자가 순서를 변경할 수 있는 페이지 섹션용 구조화된 블록을 만듭니다.
• 편집 가능한 Astro 사이트: 프런트엔드는 타입이 지정된 Astro 컴포넌트를 사용하고, 일반 콘텐츠는 EmDash를 통해 계속 관리할 수 있습니다.
• 실시간 미리보기 및 복구: 프로젝트는 비공개 Builder 미리보기에서 렌더링됩니다. 에이전트는 동일한 루프에서 결과를 검증하고, 오류를 확인하고, 수정할 수 있습니다.
• 콘텐츠 워크플로: 편집자는 EmDash 관리 인터페이스를 통해 텍스트, 미디어, 섹션, 블록, 예약 콘텐츠를 관리할 수 있습니다.
• 지속적인 기록: 소스 코드와 로컬 CMS 상태는 Cloudflare Artifacts에 Git 커밋으로 저장됩니다.
• 제어된 게시: 검증된 정적 릴리스는 Workers for Platforms용으로 패키징할 수 있지만, 운영자가 게시 기능을 명시적으로 활성화하고 구성한 경우에만 가능합니다.

아키텍처 작동 방식

생성되는 모든 프로젝트에는 준비된 EmDash, Astro, Tailwind 프로젝트가 포함된 Cloudflare Sandbox가 제공됩니다. BuilderAgent Durable Object가 대화와 모델 및 도구 루프를 관리합니다.

에이전트는 EmDash MCP 도구를 사용해 스키마와 콘텐츠를 생성합니다. Sandbox 내부에 공개 프런트엔드를 작성하고, 비공개 미리보기를 시작하며, 렌더링된 사이트를 검증하고, 한 번의 작업을 완료하기 전에 오류를 수정합니다.

Cloudflare Artifacts는 각 일관된 프로젝트 상태를 Git 기록으로 저장합니다. Sandbox가 절전 상태가 되면 EmDash Build는 소스 코드와 로컬 CMS 상태를 모두 새 컨테이너로 복원하고 미리보기를 다시 시작할 수 있습니다.

에이전트 워크플로

1. 이해: 브리프를 읽고 아직 결정되지 않은 중요한 자료를 파악합니다.
2. 모델링: 어떤 데이터를 재사용 가능한 컬렉션으로 만들지, 어떤 페이지에 구조화된 블록이 필요한지 결정합니다.
3. 구축: EmDash 스키마를 만들고, 생성된 타입을 새로 고치며, 타입이 지정된 Astro 렌더러를 작성합니다.
4. 채우기: EmDash MCP 도구를 통해 대표 콘텐츠와 미디어를 추가합니다.
5. 검증: 프로젝트의 타입을 검사하고, 공개 경로를 렌더링하며, 미리보기를 확인하고, 오류를 수정합니다.
6. 저장: 완성된 프로젝트 상태를 Cloudflare Artifacts에 커밋합니다.

사전 요구 사항

로컬 개발에는 로컬 도구와 여러 Cloudflare 서비스에 대한 액세스가 모두 필요합니다. 계속하기 전에 다음을 준비하세요.

• Node.js 24 이상
• pnpm 11.9
• 실행 중인 Docker 호환 데몬
• Cloudflare 계정에 인증된 Wrangler
• Cloudflare Workers 액세스
• Durable Objects 액세스
• Cloudflare Sandbox 액세스
• Workers AI 및 AI Gateway 액세스
• Cloudflare Artifacts 액세스
• Workers for Platforms 액세스

제공업체 리소스와 신뢰 경계를 신중하게 구성해야 하므로, 애플리케이션을 배포하기 전에 저장소의 셀프 호스팅 가이드를 읽으세요.

EmDash Build 설치 및 구성

1. 종속성 설치

저장소 루트에서 고정된 종속성 버전을 설치합니다.

pnpm install --frozen-lockfile

2. 제공업체 구성 생성

provider.config.example.json을 무시되는 provider.config.json 파일로 복사합니다.

cp provider.config.example.json provider.config.json

provider.config.json을 열고 모든 예시 값을 Cloudflare 계정의 리소스로 바꿉니다. 예시 값에 의존하지 말고 셀프 호스팅 가이드에 따라 필요한 리소스를 생성하세요.

3. 구성 검증 및 렌더링

사전 점검을 실행한 다음 제공업체별 Wrangler 구성을 생성합니다.

pnpm preflight
pnpm configure

문서에 설명된 로컬 시작 명령에서 사용하는 생성된 구성은 wrangler.provider.jsonc입니다. 배포하거나 민감한 환경을 실행하기 전에 이 제공업체별 파일을 확인하세요.

4. 로컬 시크릿 구성

개발 시크릿 템플릿을 복사합니다.

cp .dev.vars.example .dev.vars

빌더에 필요한 AI Gateway 인증 정보를 .dev.vars에 추가합니다. UNSPLASH_ACCESS_KEY는 선택 사항이며, 추가하면 생성 중 스톡 이미지 검색을 사용할 수 있습니다.

생성된 프로젝트 안에 제공업체 인증 정보를 넣지 마세요. 게시 기능은 서버에서 제어되며, 생성된 사이트에는 제공업체 인증 정보가 제공되지 않습니다.

5. 전체 로컬 애플리케이션 시작

생성된 프로바이더 구성으로 EmDash Build를 시작합니다:

EMDASH_WRANGLER_CONFIG=wrangler.provider.jsonc pnpm dev

개발 서버가 준비되면 http://localhost:5173을 엽니다.

6. 필요한 경우 UI 전용 모드 시작

인터페이스 작업만 필요한 경우 다음 명령을 사용합니다:

pnpm dev:ui

이 모드는 Sandbox 기반 사이트 생성을 시작하지 않습니다. Builder 에이전트, 프로젝트 생성 또는 실시간 생성 미리보기를 테스트하려면 전체 개발 명령을 사용하세요.

기본 사용법: 간단한 설명으로 사이트 생성

1. 유용한 설명 작성

만들려는 웹사이트, 대상 사용자, 주요 페이지, 재사용 가능한 콘텐츠 및 원하는 시각적 방향을 설명하세요. 예:

Create a portfolio website for an Icelandic landscape photographer.
Include a home page, reusable photo collections, an about page,
and structured page sections that editors can reorder.

설명에서 중요한 선택 사항이 해결되지 않은 경우 에이전트가 구체적인 확인 질문을 할 수 있습니다. 일관된 스키마와 프런트엔드를 기대하기 전에 이 질문에 답하세요.

2. 에이전트가 사이트를 모델링하고 구축하도록 하기

확인 과정이 끝나면 에이전트는 어떤 정보가 재사용 가능한 컬렉션에 속하고 어떤 내러티브 페이지가 구조화된 블록을 사용해야 하는지 결정합니다. 그런 다음 EmDash 스키마를 만들고, 생성된 타입을 새로 고치며, Astro 렌더러를 작성하고, MCP 도구를 통해 대표 콘텐츠를 추가합니다.

3. 비공개 미리보기 검토

Builder의 실시간 미리보기를 사용하여 생성된 경로와 전반적인 디자인을 확인하세요. EmDash Build는 생성된 프로젝트를 검증하고 에이전트 루프 내에서 감지된 오류를 수정할 수 있습니다.

4. EmDash에서 계속 편집

초기 프로젝트를 사용할 수 있게 되면 EmDash 관리 인터페이스에서 일반 콘텐츠를 관리하세요. 텍스트와 미디어를 편집하고, 섹션을 추가하거나 복제하고, 블록 순서를 변경하고, 게시물을 예약할 수 있습니다. 더 광범위한 구조, 콘텐츠 또는 디자인 변경이 필요할 때 에이전트로 돌아가세요.

5. 프로젝트 상태 저장 및 복원

일관된 프로젝트 상태는 Git 기록으로 Cloudflare Artifacts에 커밋됩니다. 이 지속성 덕분에 Sandbox가 절전 상태에 들어가 새 컨테이너가 필요해져도 EmDash Build가 프로젝트 소스와 로컬 CMS 상태를 복원할 수 있습니다.

검증 및 개발 명령

변경 유형에 맞는 저장소 명령을 사용하세요:

• pnpm dev는 기본 구성으로 EmDash Build를 시작합니다.
• pnpm dev:ui는 Cloudflare Sandbox 컨테이너 없이 인터페이스를 시작합니다.
• pnpm check는 애플리케이션과 Worker 테스트의 타입을 검사합니다.
• pnpm test는 애플리케이션 테스트 모음을 실행합니다.
• pnpm test:worker는 Workers 통합 테스트 모음을 실행합니다.
• pnpm build는 기본 구성으로 EmDash Build를 빌드합니다.
• pnpm build:provider는 wrangler.provider.jsonc를 사용하여 빌드합니다.
• pnpm format은 oxfmt로 저장소의 형식을 지정합니다.

기여를 제출하기 전에 프로젝트에서 권장하는 전체 검증 절차를 실행하세요:

pnpm format
pnpm check
pnpm test
pnpm test:worker
pnpm build

고급 팁

올바른 개발 모드 선택

격리된 인터페이스 작업에는 pnpm dev:ui를 사용하세요. Sandbox 컨테이너를 시작하지 않기 때문입니다. 생성 워크플로를 검증할 때는 사용하지 마세요. UI 전용 모드에서는 Sandbox 기반 생성을 사용할 수 없습니다.

콘텐츠 편집과 구조 변경 분리

텍스트, 미디어, 섹션 및 순서 변경과 같은 일반적인 편집 작업에는 EmDash 관리 인터페이스를 사용하세요. 더 큰 규모의 디자인 또는 콘텐츠 모델 변경에는 에이전트를 사용하세요. 이렇게 하면 구조화된 CMS 데이터와 타입이 지정된 Astro 렌더링 코드 사이의 프로젝트 구분을 유지할 수 있습니다.

프로바이더 구성 확인

예제 프로바이더 구성은 템플릿으로만 사용하세요. 모든 샘플 값을 교체하고 pnpm preflight를 실행한 다음 pnpm configure로 Wrangler 구성을 생성하고, 대상 Cloudflare 계정에 맞는 출력인지 확인하세요.

게시를 명시적으로 제어

공개 게시 권한은 서버가 소유하며 기본적으로 비활성화되어 있습니다. 운영 프로바이더가 Workers for Platforms용으로 검증된 정적 릴리스를 패키징할 준비가 되었을 때만 활성화하고 구성하세요. 호스팅된 데모에서도 게시 기능은 비활성화되어 있습니다.

배포 전 보안 경계 검토

모델 도구, Sandbox 실행, 비밀, 비공개 미리보기, 지속성 및 게시에 대한 자세한 내용은 저장소의 위협 모델을 참고하세요. 운영 점검에는 운영 가이드를 사용하세요.

저장소 효율적으로 탐색

• src/worker에는 Worker 경로, BuilderAgent, 프롬프트, 도구, 지속성 및 게시 제어 기능이 있습니다.
• src/client에는 React Builder 인터페이스, 채팅, 활동 뷰 및 실시간 미리보기가 있습니다.
• prototype/builder-cloudflare에는 새 프로젝트에 사용하는 준비된 빈 EmDash 및 Astro 스캐폴드가 있습니다.
• migrations에는 인증 및 프로바이더 제어 데이터베이스 마이그레이션이 있습니다.
• scripts에는 프로바이더 구성, 스모크 테스트 및 운영 도우미가 있습니다.
• test에는 애플리케이션 및 Worker 테스트 커버리지가 있습니다.
• docs에는 셀프 호스팅, 보안, 운영 및 구현 문서가 있습니다.

맺음말

EmDash Build는 AI 지원 생성 기능과 지속적이며 편집 가능한 CMS 워크플로를 결합합니다. 구조화된 EmDash 콘텐츠와 타입이 지정된 Astro 컴포넌트를 생성하고, 비공개 Cloudflare Sandbox 미리보기에서 결과를 검증하며, Cloudflare Artifacts에 프로젝트 기록을 저장합니다. 상당한 인프라 요구 사항이 있는 알파 참조 애플리케이션이므로 제공업체 리소스를 신중하게 구성하고, 보안 문서를 검토하며, 공개 게시를 명시적으로 제어되는 상태로 유지하세요.