CMS 모범 사례

Webflow CMS 아키텍처, 관계 설정, 최적화 및 문제 해결에 대한 전문적인 안내를 제공합니다.

중요 참고 사항

모든 작업에는 항상 Webflow MCP 도구를 사용하세요:

작업 시작 전 Webflow MCP의 webflow_guide_tool을 사용하여 모범 사례를 확인하세요.
Webflow MCP의 data_sites_tool을 list_sites 액션과 함께 사용하여 사용 가능한 사이트를 식별하세요.
Webflow MCP의 data_sites_tool을 get_site 액션과 함께 사용하여 사이트 세부 정보 및 요금제 한도를 확인하세요.
Webflow MCP의 data_cms_tool을 get_collection_list 액션과 함께 사용하여 기존 컬렉션을 분석하세요.
Webflow MCP의 data_cms_tool을 get_collection_details 액션과 함께 사용하여 컬렉션 스키마를 검토하세요.
Webflow MCP의 data_cms_tool을 list_collection_items 액션과 함께 사용하여 콘텐츠 볼륨을 평가하세요.
Webflow MCP의 data_pages_tool을 list_pages 액션과 함께 사용하여 페이지 구조를 파악하세요.
특정 API 질문에는 Webflow MCP의 ask_webflow_ai를 사용하세요.
Webflow 작업에 다른 도구나 방법을 사용하지 마세요.
모든 도구 호출에는 필수 context 매개변수(15-25단어, 3인칭 관점)를 포함해야 합니다.

지침

1단계: 발견 및 분석

요청 식별: 사용자가 다음 중 무엇을 원하는지 파악하세요:
- 새 CMS 구조 계획
- 기존 컬렉션 최적화
- 성능 문제 해결
- 관계 설정
- 아키텍처 안내 요청
사이트 정보 획득: Webflow MCP의 data_sites_tool을 list_sites 및 get_site 액션과 함께 사용하여 요금제 한도를 파악하세요.
기존 구조 분석: Webflow MCP의 data_cms_tool을 get_collection_list 및 get_collection_details 액션과 함께 사용하여 현재 설정을 검토하세요.
콘텐츠 볼륨 평가: Webflow MCP의 data_cms_tool을 list_collection_items 액션과 함께 사용하여 규모를 파악하세요.
페이지 검토: Webflow MCP의 data_pages_tool을 list_pages 액션과 함께 사용하여 콘텐츠가 어떻게 표시되는지 확인하세요.

2단계: 요구 사항 수집

사용 사례 이해: 명확한 질문을 하세요:
- 관리해야 할 콘텐츠는 무엇인가요?
- 누가 콘텐츠를 업데이트하나요?
- 콘텐츠는 어떻게 표시되나요?
- 어떤 관계가 필요한가요?
- 예상 콘텐츠 볼륨은 얼마인가요?
제약 조건 식별: 요금제 한도, 기술적 제약, 팀 역량을 고려하세요.
성공 기준 정의: 성능 목표, 편집 워크플로우, 확장성 요구 사항을 정의하세요.

3단계: 아키텍처 계획

컬렉션 구조 설계: 컬렉션, 필드, 관계를 계획하세요.
필드 유형 선택: 각 콘텐츠 요소에 적합한 필드 유형을 선택하세요.
관계 계획: 일대다 및 다대다 연결을 설계하세요.
분류 고려: 카테고리, 태그 및 조직 구조를 결정하세요.
확장 계획: 성장을 고려한 설계(페이지네이션, 성능, 한도)를 하세요.
결정 사항 문서화: 절충점과 근거를 설명하세요.

4단계: 권장 사항 및 검증

권장 사항 생성: 구체적이고 실행 가능한 안내를 제공하세요.
변경 사항 우선순위 지정: 영향도 기준으로 정리하세요.(빠른 성과 vs 장기적 개선)
절충점 설명: 사용자가 한계와 해결 방법을 이해하도록 도우세요.
모범 사례 검증: Webflow의 한계 및 패턴과 비교하여 확인하세요.
대안 제시: 가능한 경우 여러 접근 방식을 제공하세요.
구현 로드맵 생성: 단계별로 나누어 계획하세요.

5단계: 구현 안내

단계별 지침 제공: 구현을 위한 명확한 안내를 제공하세요.
지원 제안: 다른 스킬(cms-collection-setup, bulk-cms-update) 사용을 제안하세요.
문서 구조: 팀 참조용 문서를 권장하세요.
테스트 접근 방식 제안: 변경 사항을 검증하는 방법을 안내하세요.
마이그레이션 계획: 리팩토링 시 마이그레이션 전략을 제공하세요.

컬렉션 아키텍처

CMS 사용 vs 정적 사용

다음 경우 CMS를 사용하세요:

콘텐츠가 자주 업데이트되는 경우(매주 또는 그 이상)
유사한 항목이 여러 개 있는 경우(블로그 게시물, 제품, 팀원, 프로젝트)
비기술적 사용자가 콘텐츠를 편집해야 하는 경우
프론트엔드에서 콘텐츠 필터링/정렬이 필요한 경우
동일한 콘텐츠가 여러 페이지에 나타나는 경우(작성자 소개, 제품 특징)
콘텐츠가 항목 전체에서 일관된 구조를 따르는 경우
동적으로 페이지를 생성해야 하는 경우

다음 경우 정적을 사용하세요:

콘텐츠가 거의 변경되지 않는 경우(연간 업데이트 이하)
고유한 일회성 섹션인 경우(소개 페이지 히어로, 홈페이지 특별 기능)
패턴을 따르지 않는 항목별 복잡한 사용자 정의 레이아웃이 필요한 경우
동적 필터링이나 검색이 필요하지 않은 경우
콘텐츠가 고도로 사용자 지정되고 구조를 공유하지 않는 경우
성능이 중요하고 콘텐츠가 변경되지 않는 경우
섹션별로 완전한 디자인 유연성이 필요한 경우

하이브리드 접근 방식:

CMS 기반 섹션이 있는 정적 페이지(예: CMS 사용후기가 포함된 정적 홈페이지)
최신 콘텐츠는 CMS, 오래된 콘텐츠는 정적 아카이브
정적 랜딩 페이지, CMS 하위 페이지

필드 유형 선택

콘텐츠 유형	권장 필드	참고 사항	문자 제한
짧은 텍스트	일반 텍스트	제목, 이름, 슬러그	최대 256자
긴 텍스트(서식 없음)	일반 텍스트(긴)	설명, 발췌문	무제한
서식 있는 콘텐츠	리치 텍스트	블로그 콘텐츠, 소개, 기사	무제한
단일 이미지	이미지	사진, 썸네일, 헤더	이미지당 최대 4MB
여러 이미지	다중 이미지	갤러리, 제품 사진	최대 25개 이미지
파일 다운로드	파일	PDF, 문서, 다운로드	파일당 최대 4MB
예/아니오 값	스위치	추천 플래그, 표시 토글	부울
단일 선택	옵션	상태, 유형, 카테고리	무제한 옵션
날짜/시간	날짜/시간	게시 날짜, 이벤트, 마감일	ISO 8601 형식
항목 하나에 링크	참조	작성자 → 게시물, 카테고리 → 게시물	항목 하나
여러 항목에 링크	다중 참조	게시물 → 태그, 게시물 → 관련 게시물	여러 항목
외부 URL	링크	소셜 링크, 외부 리소스	최대 2048자
숫자 값	숫자	가격, 평점, 순서, 개수	정수 또는 소수
전화번호	전화	연락처 번호	E.164 형식
이메일 주소	이메일	연락처 이메일	유효한 이메일 형식
색상 값	색상	테마 색상, 강조 색상, 브랜드 색상	16진수 형식
비디오 임베드	비디오	YouTube, Vimeo 임베드	임베드 URL

필드 유형 결정 트리

저장해야 할 대상:
├── 텍스트?
│   ├── 짧음(≤256자)? → 일반 텍스트
│   ├── 긴 + 서식? → 리치 텍스트
│   └── 긴 + 서식 없음? → 일반 텍스트(긴)
├── 미디어?
│   ├── 단일 이미지? → 이미지
│   ├── 여러 이미지? → 다중 이미지
│   ├── 비디오? → 비디오
│   └── 파일 다운로드? → 파일
├── 선택/선택 사항?
│   ├── 예/아니오? → 스위치
│   ├── 하나의 옵션? → 옵션
│   └── 항목에 링크? → 참조/다중 참조
├── 구조화된 데이터?
│   ├── 숫자? → 숫자
│   ├── 날짜/시간? → 날짜/시간
│   ├── 전화? → 전화
│   ├── 이메일? → 이메일
│   └── URL? → 링크
└── 시각적?
    └── 색상? → 색상

관계 패턴

일대다(참조 필드)

예시: 게시물 → 작성자

작성자 컬렉션:
├── name (텍스트, 필수)
├── slug (텍스트, 필수)
├── bio (리치 텍스트)
├── photo (이미지)
├── title (텍스트) - 직함
├── email (이메일)
└── social-links (링크)

게시물 컬렉션:
├── title (텍스트, 필수)
├── slug (텍스트, 필수)
├── content (리치 텍스트)
└── author (참조 → 작성자)  ← 각 게시물에는 한 명의 작성자가 있습니다.

표시: 게시물 페이지에서 author.name, author.photo, author.bio에 접근합니다.

필터링: 특정 작성자별로 게시물을 필터링할 수 있습니다.

장점:

✅ 중앙 집중식 작성자 데이터(한 번 업데이트하면 모든 곳에 반영됨)
✅ 일관성 유지가 쉬움
✅ 모든 게시물을 보여주는 작성자 프로필 페이지 생성 가능
✅ 효율적(게시물당 하나의 참조)

사용 사례:

블로그 게시물 → 작성자
제품 → 브랜드
이벤트 → 장소
프로젝트 → 고객
사용후기 → 고객

다대다(다중 참조)

예시: 게시물 ↔ 태그

태그 컬렉션:
├── name (텍스트, 필수)
├── slug (텍스트, 필수)
├── description (일반 텍스트)
└── color (색상) - 선택적 시각적 그룹화

게시물 컬렉션:
├── title (텍스트, 필수)
├── slug (텍스트, 필수)
├── content (리치 텍스트)
└── tags (다중 참조 → 태그)  ← 각 게시물에는 여러 개의 태그가 있습니다.

표시: 게시물 페이지에서 tags를 반복하여 모든 태그를 표시합니다.

필터링: 특정 태그별로 게시물을 필터링할 수 있습니다.

장점:

✅ 유연한 콘텐츠 구성
✅ 관련 콘텐츠 상호 연결
✅ 더 나은 SEO(주제 클러스터링)
✅ 향상된 사용자 탐색

제한 사항:

⚠️ 컬렉션당 최대 5개의 다중 참조 필드
⚠️ 컬렉션 목록에서 한 번에 하나의 다중 참조 값으로만 필터링 가능
⚠️ 참조된 필드 값으로 정렬 불가
⚠️ 각 참조는 추가 쿼리(성능에 영향)

여러 태그 필터링을 위한 해결 방법:

결합된 태그 생성(예: "비건-글루텐프리")
클라이언트 측 필터링을 위해 Finsweet CMS 필터 사용
일반적인 조합에 대한 별도의 필터링된 컬렉션 리스트 생성
Webflow API와 함께 사용자 정의 코드 사용

사용 사례:

블로그 게시물 ↔ 태그
제품 ↔ 기능
프로젝트 ↔ 기술
레시피 ↔ 재료
강좌 ↔ 주제

자체 참조(중첩 컬렉션)

예시: 하위 카테고리가 있는 카테고리

카테고리 컬렉션:
├── name (텍스트, 필수)
├── slug (텍스트, 필수)
├── description (일반 텍스트)
├── parent (참조 → 카테고리)  ← 계층 구조를 위한 자체 참조
└── level (숫자) - 표시 로직을 위한 1, 2, 3

사용 사례:

하위 카테고리가 있는 카테고리
하위 메뉴 항목이 있는 메뉴 항목
조직 계층 구조
제품 분류

장점:

✅ 유연한 계층 구조
✅ 무제한 깊이(이론상)
✅ 재구성이 쉬움

제한 사항:

⚠️ Webflow에서 중첩 수준 표시가 복잡함
⚠️ 실제 구현을 위해 최대 2-3단계 권장
⚠️ 깊은 중첩에는 사용자 정의 로직 필요

대안: 간단한 1-2단계 분류에는 옵션 필드를 사용하세요.

양방향 관계

예시: 관련 게시물

게시물 컬렉션:
├── title (텍스트, 필수)
├── slug (텍스트, 필수)
├── content (리치 텍스트)
└── related-posts (다중 참조 → 게시물)  ← 다른 게시물에 대한 자체 참조

표시: 게시물 페이지 하단에 관련 게시물을 표시합니다.

장점:

✅ 사용자 참여 시간 증가
✅ 더 나은 SEO(내부 링크)
✅ 유연한 콘텐츠 연결

과제:

⚠️ 진정한 양방향이 아님(A → B가 자동으로 B → A를 생성하지 않음)
⚠️ 필요한 경우 양방향을 수동으로 유지해야 함
⚠️ 콘텐츠 편집자에게 시간이 많이 소요될 수 있음

해결 방법:

"태그별 관련" 자동 로직에 태그 사용
가장 중요한 연결에 대한 수동 큐레이션
하이브리드: 태그/카테고리를 기반으로 수동 + 자동화

예시

예시 1: 새 CMS 구조 계획

사용자 프롬프트:

레시피 사이트를 만들고 있어요. CMS를 어떻게 구성해야 할까요?

1단계: 요구 사항 수집

📐 CMS 계획: 레시피 사이트

최적의 구조를 설계하기 위해 몇 가지 질문을 드리겠습니다:

1. **콘텐츠 볼륨**: 레시피를 몇 개나 계획하고 있나요?
   - 소규모(≤50개): 간단한 구조
   - 중간(50-200개): 적당한 조직
   - 대규모(200개 이상): 고급 분류 필요

2. **레시피 속성**: 각 레시피에 어떤 정보가 포함되나요?
   - 기본: 이름, 재료, 조리법, 이미지
   - 고급: 준비 시간, 조리 시간, 난이도, 영양 정보, 식이 태그

3. **조직 요구 사항**: 사용자가 레시피를 어떻게 찾나요?
   - 식사 유형별(아침, 점심, 저녁)
   - 요리별(이탈리아, 멕시코, 아시아)
   - 식이 제한별(비건, 글루텐 프리, 케토)
   - 조리 방법별(베이킹, 그릴링, 슬로우 쿠커)
   - 재료별(닭고기, 파스타, 야채)

4. **작성자 설정**: 단일 또는 다중 작성자?
   - 단일: 모든 콘텐츠를 직접 관리
   - 다중: 레시피 제작자 팀

5. **사용자 참여**: 어떤 대화형 기능이 필요한가요?
   - 댓글/리뷰
   - 평점
   - 즐겨찾기 저장
   - 레시피 카드 인쇄

답변에 따라 최적의 CMS 아키텍처를 설계해 드리겠습니다.

2단계: 사용자 응답 후

📐 권장 CMS 아키텍처: 레시피 사이트

요구 사항(중간 규모, 다중 작성자, 고급 필터링)을 기반으로:

---

## 필요한 컬렉션: 4개

### 1. 레시피(메인 콘텐츠)
├── name (텍스트, 필수) - "홈메이드 파스타 카르보나라"
├── slug (텍스트, 필수) - "homemade-pasta-carbonara"
├── description (일반 텍스트, 160자) - SEO용 간단한 요약
├── featured-image (이미지) - 상세 페이지용 히어로 이미지
├── thumbnail-image (이미지) - 그리드 카드용 작은 이미지
├── prep-time (숫자, 필수) - 준비 시간(분)
├── cook-time (숫자, 필수) - 조리 시간(분)
├── total-time (숫자) - 자동 계산 또는 수동
├── servings (숫자, 필수) - 인분 수
├── difficulty (옵션: 쉬움, 보통, 어려움)
├── ingredients (리치 텍스트, 필수) - 분량이 포함된 재료 목록
├── instructions (리치 텍스트, 필수) - 단계별 지침
├── notes (리치 텍스트) - 요리사의 참고 사항, 팁, 대체 재료
├── nutrition-info (일반 텍스트) - 칼로리, 단백질 등
├── author (참조 → 작성자, 필수)
├── category (참조 → 카테고리, 필수) - 기본 식사 유형
├── cuisine (참조 → 요리) - 이탈리아, 멕시코 등
├── dietary-tags (다중 참조 → 식이 태그) - 비건, 글루텐 프리 등
├── cooking-methods (다중 참조 → 방법) - 베이킹, 그릴링 등
├── featured (스위치) - 홈페이지 강조 표시
├── published-date (날짜, 필수)
└── view-count (숫자) - 인기 추적

**총 필드:** 22개 필드
**필요한 요금제:** CMS 요금제 최소(20개 컬렉션, 2000개 항목)

### 2. 작성자
├── name (텍스트, 필수)
├── slug (텍스트, 필수)
├── title (텍스트) - "주방장", "레시피 개발자"
├── bio (리치 텍스트)
├── photo (이미지)
├── specialty (일반 텍스트) - "이탈리아 요리", "베이킹"
├── social-instagram (링크)
├── social-website (링크)
└── email (이메일)

**목적:** 모든 레시피에서 재사용 가능한 작성자 정보

### 3. 카테고리
├── name (텍스트, 필수) - "아침", "점심", "저녁", "디저트"
├── slug (텍스트, 필수)
├── description (일반 텍스트)
├── image (이미지) - 카테고리 히어로 이미지
├── color (색상)
├── icon (이미지)
├── display-order (숫자) - 사용자 정의 정렬
├── featured-category (스위치) - 탐색 하이라이트
└── parent-category (참조 → 카테고리) - 하위 카테고리용(예: "아침" > "건강식 아침")

**목적:** 식사 유형별 기본 구성

### 4. 요리
├── name (텍스트, 필수) - "이탈리아", "멕시코", "일본"
├── slug (텍스트, 필수)
├── description (일반 텍스트)
├── image (이미지)
├── region (일반 텍스트) - "유럽", "아시아", "라틴 아메리카"
└── featured (스위치)

**목적:** 지리적 및 문화적 분류

### 5. 식이 태그
├── name (텍스트, 필수) - "비건", "글루텐 프리", "케토", "저탄수화물"
├── slug (텍스트, 필수)
├── description (일반 텍스트)
├── icon (이미지)
└── color (색상) - 시각적 필터 배지용

**목적:** 식이 제한 및 선호도 태그

### 6. 조리 방법
├── name (텍스트, 필수) - "베이킹", "그릴링", "슬로우 쿠커", "에어 프라이어"
├── slug (텍스트, 필수)
├── description (일반 텍스트)
├── icon (이미지)
└── difficulty (숫자) - 기술 수준 1-5

**목적:** 조리 기술별 사용자 필터링

---

**관계 요약:**
- 각 레시피 = 1명의 작성자(일대다)
- 각 레시피 = 1개의 카테고리(일대다)
- 각 레시피 = 1개의 요리(일대다)
- 각 레시피 = 여러 개의 식이 태그(다대다, 다중 참조)
- 각 레시피 = 여러 개의 조리 방법(다대다, 다중 참조)

**한도 확인:**
- 5개 다중 참조 필드 중 2개 사용 중 ✅
- 단일 컬렉션 항목 한도 내에 있음 ✅
- 표준 관계 패턴 사용 ✅

**확장 권장 사항:**
1. 향후 200개 이상 레시피로 확장 시 태그 기반 필터링으로 전환하여 성능 유지
2. 난이도별 또는 요리별 목록 페이지에 대한 별도의 컬렉션 리스트 생성 고려
3. 인기 레시피 위젯에 리치 텍스트 대신 일반 텍스트 설명 사용하여 로딩 속도 향상

이 구조는 표준 Webflow CMS 관계 패턴을 따르며, 컬렉션당 5개의 다중 참조 필드 한도 내에 있습니다. 검증된 디자인 원칙과 사용자 피드백을 통합한 후 다음 단계인 구현을 위한 준비가 되었습니다.

webflow/webflow-skills

webflow-skills란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서

CMS 모범 사례

중요 참고 사항

지침

1단계: 발견 및 분석

2단계: 요구 사항 수집

3단계: 아키텍처 계획

4단계: 권장 사항 및 검증

5단계: 구현 안내

컬렉션 아키텍처

CMS 사용 vs 정적 사용

필드 유형 선택

필드 유형 결정 트리

관계 패턴

일대다(참조 필드)

다대다(다중 참조)

자체 참조(중첩 컬렉션)

양방향 관계

예시

예시 1: 새 CMS 구조 계획

Individual skills in this repo