Webflow CMS 소개

Webflow CMS를 사용하면 콘텐츠 구조와 사이트 전체에서 콘텐츠가 디자인되는 방식을 완벽하게 제어할 수 있습니다.

CMS(콘텐츠 관리 시스템)는 동적 콘텐츠를 웹 사이트에 저장하고 관리하는 플랫폼입니다. 변경되는 콘텐츠를 의미하는 동적 콘텐츠를 사이트 디자인에 통합할 수 있습니다. 귀하 또는 팀 구성원이 CMS 콘텐츠를 업데이트하거나 변경하면 해당 콘텐츠가 사용되는 모든 페이지에 즉시 반영됩니다.

이 튜토리얼에서는 다음을 다룹니다.

  1. CMS에서 동적 콘텐츠를 구성하는 프로세스
  2. 웹사이트 내에 동적 콘텐츠 통합
  3. 동적 콘텐츠 수정

CMS에서 동적 콘텐츠 구성

초기 단계에는 수집. 컬렉션은 컬렉션 항목에 동적 콘텐츠를 저장하므로 웹사이트 전체에서 이 콘텐츠를 참조할 수 있습니다.

각 컬렉션은 특정 유형의 콘텐츠를 저장하도록 지정됩니다. 예를 들어, 블로그 게시물, 팀 구성원, 채용 정보, 레시피 또는 원하는 기타 콘텐츠에 대한 컬렉션을 설정할 수 있습니다. 각 컬렉션은 "팀 구성원" 컬렉션의 단일 팀 구성원과 같은 개별 인스턴스를 나타내는 컬렉션 항목으로 구성됩니다.

컬렉션은 일관된 콘텐츠 구조를 저장하고 관리하는 효율적인 방법을 제공합니다.

컬렉션 필드 정의

컬렉션을 설정할 때 컬렉션 내 각 컬렉션 항목의 구조를 결정합니다. 예를 들어 "팀 구성원"을 위한 컬렉션을 생성할 때 이름, 사진, 이메일에 대한 필드를 포함할 수 있습니다. 각 콘텐츠 유형은 컬렉션 필드(예: 이름의 일반 텍스트 필드, 사진의 이미지 필드, 주소의 이메일 필드)에 해당합니다.

언제든지 컬렉션 필드와 그 안의 콘텐츠를 업데이트하거나 삭제할 수 있습니다.

컬렉션 구성을 위해 컬렉션 필드를 활용하는 방법에 대해 자세히 알아보세요.

콘텐츠 제작

컬렉션 필드가 배치되면 컬렉션 항목 생성을 시작할 수 있습니다. 각 컬렉션 항목은 컬렉션 내에서 별도의 콘텐츠 세그먼트 역할을 합니다.

예를 들어, "팀 구성원" 컬렉션을 생성한 후 각 팀 구성원에 대한 콘텐츠 입력을 시작할 수 있습니다. 각 컬렉션 항목(즉, 각 팀 구성원) 내에서 사전 정의된 컬렉션 필드(예: 이름, 사진, 이메일 주소)를 작성하게 됩니다.

전문가 팁: 여러 컬렉션 항목을 동시에 가져오려면 CSV 파일을 사용하는 것이 좋습니다.

컬렉션 생성 및 구성에 대해 자세히 알아보세요.

웹사이트에 동적 콘텐츠 통합하기

컬렉션 구조를 구성하고 컬렉션 항목을 추가한 후 해당 동적 콘텐츠를 웹사이트에 포함할 수 있습니다. 이는 컬렉션 목록을 활용하거나 컬렉션 페이지를 디자인하는 두 가지 방법을 통해 수행할 수 있습니다.

다이어그램은 Webflow 프로젝트에 동적 컨텐츠를 추가하는 두 가지 방법을 표시합니다. 프로필 카드의 두 가지 주요 요소는 컬렉션 목록과 컬렉션 페이지입니다.

컬렉션 표시

컬렉션 목록 요소를 사용하면 홈페이지와 같은 정적 페이지를 포함하여 사이트의 모든 페이지에 동적 컬렉션 콘텐츠를 선보일 수 있습니다. 이를 통해 표시할 항목을 지정하고, 필드 값을 기반으로 필터 또는 조건부 표시 여부를 적용하고, 콘텐츠를 구성할 수 있습니다.

컬렉션 페이지 디자인

컬렉션의 각 컬렉션 항목에 대해 컬렉션 페이지가 자동으로 생성됩니다. 컬렉션 페이지를 모든 컬렉션 항목에 대한 유니버설 디자인 템플릿으로 생각해 보세요. 컬렉션 페이지에서 제작한 디자인은 컬렉션의 각 항목에 적용됩니다.

컬렉션 페이지를 사용자 정의할 때 컬렉션 필드를 참조하여 동적 콘텐츠를 통합할 수 있습니다. 컬렉션 페이지의 디자인이나 동적 참조에 대한 모든 변경 사항은 해당 컬렉션의 항목과 관련된 모든 컬렉션 페이지에 반영됩니다.

메모: 컬렉션 페이지에 배치된 요소는 컬렉션 필드에 연결될 때까지 정적 상태로 유지됩니다.

동적 콘텐츠 수정

컬렉션 내의 콘텐츠는 언제든지 변경되거나 확장될 수 있습니다. 이는 디자이너나 편집기에서 실행할 수 있습니다.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)