AI로 커스텀 프론트엔드 구축하기

많은 기업가, 디자이너, 스튜디오는 이제 Cursor, Claude Code, v0, Lovable(일명 Vibe Coding)과 같은 AI 코딩 도구를 사용하여 인터랙티브한 비주얼을 갖춘 고도로 커스터마이징된 브랜드 사이트를 만들고, 이를 Vercel이나 Cloudflare Pages에 배포하고 있습니다.

하지만 모든 카피, 프로젝트 사진, 블로그 게시물을 하드코딩하면 사소한 업데이트가 있을 때마다 전체 코드를 다시 배포해야 합니다. 또한, 폼 스팸 방지나 문의 관리 대시보드와 같은 기능을 사용할 수 없게 됩니다.

가장 효율적인 접근 방식은 "AI가 프로젝트의 프론트엔드를 구축하게 하고, 콘텐츠, 블로그, 문의 폼 관리는 Kanorio가 담당하게 하는 것"입니다. 다음 세 단계만 따르면 AI가 알아서 통합을 처리해 줍니다.

1단계: AI 어시스턴트를 Kanorio에 연결하고 콘텐츠 준비하기

1. 가이드를 따라 Cursor 또는 Claude Code를 Kanorio에 연결합니다.
2. 대시보드에서 새 사이트를 만들고(게시할 필요 없음), 다음 프롬프트를 채팅에 붙여넣어 AI가 헤드리스 모드 설정과 데이터 구조를 구축하도록 합니다.

I am building a brand website + blog using an external frontend and want to use this Kanorio site as my CMS backend. Please help me:
1. Call site.update_developer_settings to enable headlessEnabled: true, and tell me the permanent systemHost URL for this site.
2. Create the necessary data collections (e.g., projects, faqs) and populate them with a few sample entries.
3. Check if the site already has a "Contact Us" form (forms.list) and list the formId and field structure for me.

완료되면 AI는 사이트의 모든 컬렉션 필드, API URL, 폼 ID를 파악하게 됩니다.

---

2단계: AI가 콘텐츠 및 폼 API를 프론트엔드에 통합하게 하기

Cursor 또는 Claude Code에서 프론트엔드 프로젝트(Next.js 또는 Astro 등)를 열고 아래 프롬프트를 붙여넣습니다. AI는 Kanorio의 자체 설명형 스키마 엔드포인트(/api/v1/collections)를 자동으로 읽어 모든 통합 코드를 작성합니다.

Help me connect this frontend project to the Content Delivery API of the Kanorio site (base URL: https://s-xxx.kanorio.com):
1. All public content fetching should be keyless (never put knr_pat_ into frontend environment variables).
2. First, fetch GET /api/v1/collections to understand the fields for each collection and the blog system collection, then generate TypeScript types for me.
3. For images and files, retrieve the public CDN URL and dimensions from assets[assetId].url at the top level of the response.
4. For blog post lists and detail pages, fetch /api/v1/collections/blog/items (include expand=authors,categories,tags and formats=markdown,html). Use filter[categories][has_slug]=category-slug for filtering.
5. For the contact form, fetch GET /api/v1/forms/{formId}/challenge to get the challenge, then POST to /api/v1/forms/{formId}/submit.

MCP를 지원하지 않는 외부 AI 도구(v0, Lovable, Bolt 등)를 사용하는 경우, 시스템 URL과 Kanorio의 AI 사양 인덱스 URL인 https://kanorio.com/llms.txt를 제공하기만 하면 됩니다.

My backend is a Kanorio Headless CMS with the API base URL: https://s-xxxxxxxxxxxx.kanorio.com
Please read https://kanorio.com/llms.txt to understand the Kanorio Content Delivery API format, then read https://s-xxxxxxxxxxxx.kanorio.com/api/v1/collections to see my data structure. Help me integrate my homepage projects, blog, and contact form with real data.

---

3단계: 배포 및 교차 출처(CORS) 설정과 자동 업데이트 구성

프론트엔드를 Vercel이나 Cloudflare Pages에 배포한 후(운영 URL이 https://www.yourbrand.com이라고 가정), Cursor로 돌아와 AI에게 설정을 마무리하도록 요청합니다.

My frontend is now deployed to https://www.yourbrand.com. Please help me:
1. Add https://www.yourbrand.com to the allowedOrigins (CORS whitelist) for this Kanorio site and set externalStorefrontUrl to https://www.yourbrand.com.
2. Add a /api/revalidate route to my frontend project to receive Kanorio Webhooks (verify X-Kanorio-Signature and execute revalidateTag for payload.data.cacheTags), then use webhooks.create to register https://www.yourbrand.com/api/revalidate with Kanorio.

완료되면:

• Kanorio 대시보드의 "데이터 및 컬렉션"에서 테이블을 업데이트하거나 "콘텐츠 › 블로그"에서 새 게시물을 게시하면, 외부 사이트가 몇 초 안에 자동으로 업데이트됩니다.
• 방문자가 제출한 문의 폼은 Kanorio 대시보드의 "마케팅 › 온라인 폼"과 "고객 › 연락처"로 직접 전달되며, 알림 이메일을 받게 됩니다.

관련 문서