json과 Claude 코드

Claude Code와 JSON 빌더로 스키마 구축하기

먼저 MCP 서버에 연결하세요

claude mcp add --transport http Profound http://107.21.107.99:8081/mcp

도구와 구성 요소를 사용해 대량으로 문서/블록/구성 요소를 생성하고 웹사이트를 빠르게 게시할 수 있습니다.

다음은 수동 절차입니다

Zod JSON 스키마 편집기를 실행하려면.

CMS 관리자 패널로 이동합니다
- Create schema를 클릭합니다
스키마에 맞는 검증된 JSON 설명을 입력합니다
변경 사항을 적용합니다

이후 변경을 위해서는 스키마를 삭제한 다음 다시 추가해야 합니다.

JSON 워크플로를 위해 Claude에 프롬프트하기

시각적인 TailwindCSS/CSS/React 변경을 위해 Claude Code를 사용한다면, MCP 서버를 활용하거나 코드 편집기에 붙여넣을 JSON을 제공하도록 요청해 JSON도 정확히 업데이트할 수 있습니다.

하이브리드든 단순한 헤드리스 CMS이든, 스키마를 만들고 싶은 구성 요소에 맞는 JSON을 Claude에게 요청하기만 하면 됩니다.

예시

새로운 MCP 서버 기능을 추가하고 이를 표시하기 위해 새로운 히어로 블록을 추가하고 있습니다.

먼저 레지스트리를 변경하여 새 블록을 사용하도록 합니다.

const registry = {
  "navbar": NavbarBlock,
  ...
  // 새 블록 추가됨
  "McpFeatureBlock": McpFeatureDisplayBlock,
  ...
  "footer": FooterBlock,
};

Claude에게 블록의 React/CSS를 구현하고 스키마 정의를 위한 JSON을 제공하도록 요청하세요. 아래와 같이 보일 것입니다.

"McpFeatureBlock": {
  "label": "MCP 서버",
  "title": "AI 에이전트가 CMS를 직접 작업하도록 하십시오",
  "description": "Profound CMS에는 기본 MCP 서버가 포함되어 있습니다. Claude, Cursor 또는 MCP와 호환되는 에이전트를 연결해 페이지를 읽고 블록을 업데이트하며 콘텐츠를 게시하도록 하세요 — 별도의 커스텀 글루 코드가 필요 없습니다.",
  "features": ["McpFeatureItem"],
  "cta_label": "MCP 문서 읽기",
  "cta_href": "/docs/mcp"
}

이를 스키마 빌더의 JSON 편집기에 붙여넣으세요. 아래와 같이 보일 것입니다.

팁: Zod가 더 편하신가요? 패널 상단에서 편집기를 JSON에서 Zod로 전환한 다음 Zod 스키마를 붙여넣으면 됩니다 — 빌더가 동일한 필드를 도출합니다. 앱의 다른 곳에서 이미 Zod로 데이터를 모델링하고 있다면 유용합니다.

그다음, 스키마 mcp_feature_block을 사용하는 블록을 생성하고 페이지의 템플릿 빌더에서 해당 블록을 참조하세요.

요약

이는 맞춤형 Claude + Profound CMS 워크플로입니다.

Previous‹Quick start Next컴포넌트 Zod 가져오기›