CMS: 일반 페이지에 컬렉션 콘텐츠 표시하기

5 분 분량
이 도움말에서는 컬렉션의 콘텐츠를 표시하는 사용자 지정 페이지를 제작하는 방법을 알아봅니다. 페이지 요소를 배치하고 컬렉션을 생성한 후, 데이터세트를 사용해 이러한 요소에 연결하는 방법에 대한 지침을 제공합니다. 마지막으로, 미리보기 모드에서 페이지를 테스트하고 사이트 방문자가 데이터를 볼 수 있도록 사이트를 게시할 것입니다.
참고:
이 도움말에서는 컬렉션의 콘텐츠를 표시하는 정적 페이지를 생성합니다. 또한, 컬렉션의 각 아이템에 대한 페이지를 자동으로 생성하는 동적 아이템 페이지를 설정할 수도 있습니다.

1 단계 | 컬렉션 생성하기

컬렉션은 사이트에 필요한 콘텐츠를 저장하거나 방문자가 제출한 정보를 수집하는 곳입니다. 컬렉션 생성 시에는 컬렉션의 권한 또한 정의해야 합니다. 이를 통해 방문자가 컬렉션의 콘텐츠로 수행할 수 있는 작업을 제어할 수 있습니다. 여기서는 방문자에게 표시하려는 콘텐츠를 저장할 빈 컬렉션을 추가합니다.

컬렉션을 생성하려면:

  1. 사이트 대시보드의 CMS로 이동합니다.
  2. 컬렉션 추가를 클릭합니다.
  3. 컬렉션 이름을 입력합니다.
  4. 컬렉션에 추가할 아이템 수를 선택합니다.
    • 단일 아이템: 컬렉션에는 텍스트, 이미지, 동영상, URL 등의 여러 입력란이 포함된 단일 아이템이 포함될 수 있습니다. 이 유형은 '정보' 페이지와 같이 반복할 수 없는 콘텐츠에 가장 적합합니다.
    • 여러 아이템 (기본값): 여러 아이템으로 구성된 컬렉션은 훨씬 더 많은 콘텐츠를 저장하며, 반복 레이아웃이나 표와 같은 요소에 나타날 수 있습니다. 이 유형은 부동산 목록, 포트폴리오, 레시피 등에 적합합니다.단일 아이템 컬렉션 및 여러 아이템 컬렉션의 차이점에 대한 자세한 도움말을 참고하세요.
  5. 만들기를 클릭합니다.

2 단계 | 컬렉션 설정하기

방문자에게 표시할 각 정보에 대한 입력란을 추가한 후 콘텐츠를 입력합니다.

컬렉션을 설정하려면:

  1. 사이트 대시보드의 CMS로 이동합니다.
  2. 해당 카테고리를 클릭합니다.
  3. 입력란 관리를 클릭한 후 + 입력란 추가를 클릭해 컬렉션에 입력란을 추가합니다. 
  4. 방문자에게 표시하고자 하는 정보와 일치하도록 입력란을 설정합니다. 입력란 콘텐츠와 일치하도록 올바른 입력란 유형을 선택했는지 확인하세요.
  5. 계획된 각 페이지 요소에 대한 입력란을 정의합니다.
  6. 컬렉션에 콘텐츠를 입력합니다.

3 단계 | 페이지 디자인하기

페이지에는 표시하고자 하는 정보를 방문자가 볼 수 있는 요소가 포함되어야 합니다. 

설정 방법

  1. 요소 추가 메뉴로 이동해 컬렉션의 입력란 유형과 일치하는 요소 유형이 포함된 그룹을 선택합니다.
  2. 요소를 페이지로 끌어다 놓아 페이지에 배치하고 디자인합니다. 텍스트 및 이미지 등의 요소 중 선택할 수 있습니다.

4 단계 | 요소 설정하기

페이지 요소를 추가한 후에는 설정 패널에서 각 요소의 모양을 구성할 수 있습니다.

요소를 설정하려면:

  1. 페이지 요소를 선택하고 설정 아이콘을 클릭한 후, 옵션을 사용해 요소를 구성합니다.
  2. 페이지의 각 요소에 대해 이 과정을 반복합니다.
이제 요소를 컬렉션에 연결해야 합니다. 이를 위해 데이터세트를 사용할 것이며, 자세한 지침은 다음 몇 단계에서 다룰 것입니다.

5 단계 | 데이터세트 추가 및 구성하기

데이터세트는 요소를 컬렉션에 연결합니다. 데이터세트 추가 시에는 연결할 컬렉션, 방문자의 컬렉션 읽기 및 쓰기 허용 여부 등을 결정해야 합니다.

페이지에 데이터세트를 추가하려면:

  1. 에디터에서 CMS로 이동합니다.
    • Wix 에디터: 에디터 왼쪽에서 CMS를 클릭합니다.
    • 에디터 X: 에디터 X 상단에서 CMS를 클릭합니다.
  2. 콘텐츠 요소 추가를 클릭합니다.
  3. 데이터세트를 클릭합니다. 페이지에 데이터세트가 추가되었습니다.
  4. 데이터세트를 선택한 후 설정을 클릭합니다. 데이터세트 설정 패널이 열립니다.
  5. 컬렉션 연결 아래에서 컬렉션을 선택합니다.
  6. 읽기전용 모드를 선택합니다.
  7. 원하는 경우, 데이터세트에 대한 필터링 및 정렬을 설정할 수 있습니다.
  8. 패널을 닫습니다.

6 단계 | 페이지 요소 연결하기

데이터세트를 구성했다면, 요소를 데이터세트에 연결할 수 있습니다. 페이지의 각 요소로 이동해 동일한 데이터세트에 연결해야 합니다. 요소를 연결할 때마다 해당 값을 연결해야 하는 컬렉션의 입력란도 정의합니다. 일부 요소에는 다른 입력란에 연결할 수 있는 둘 이상의 속성이 포함되어 있습니다.

요소를 연결하려면:

  1. 요소를 선택한 후 데이터 연결 버튼을 클릭합니다.
  2. 정보가 저장되어 있는 컬렉션 내 입력란을 선택합니다.
  3. 페이지의 각 요소에 대해 이 과정을 반복합니다.
다음 단계에서는 데이터세트의 요소를 탐색할 수 있는 이전다음 버튼을 추가합니다.

7 단계 | '이전' 및 '다음' 버튼 생성하기

이제 모든 요소가 동일한 데이터세트를 통해 동일한 컬렉션에 연결되었으므로 방문자가 정보를 탐색할 수 있도록 해야 합니다. 이렇게 하려면 페이지에 두 개의 버튼을 추가하고 다른 요소와 동일한 데이터세트에 연결한 후, 클릭 액션을 정의해야 합니다.

'이전' 및 '다음' 버튼을 생성하려면:

  1. 페이지에 두 개의 버튼을 추가한 후, 텍스트를 이전다음으로 변경합니다.
  2. 데이터 연결 버튼을 클릭합니다.
  3. 버튼 연결 패널에서 데이터세트를 선택합니다.
  4. 클릭 시 수행 작업 아래에서 첫 번째 버튼에 대해 이전 아이템을 선택하고 두 번째 버튼에 대해 다음 아이템을 선택합니다.

8 단계 | 페이지 테스트하기

이제 미리보기 모드에서 페이지를 테스트할 수 있습니다. 표시되는 콘텐츠는 미리보기 모드에서만 볼 수 있는 샌드박스 데이터베이스에서 가져오는 것입니다. 샌드박스에 대한 자세한 도움말을 확인하세요.

페이지를 테스트하려면:

  1. 미리보기를 클릭합니다.
  2. 다음이전 버튼을 클릭합니다.
  3. 에디터로 돌아가기를 클릭합니다.

9 단계 | 사이트 게시하기

참고:
이 단계는 샌드박스를 활성화한 경우에만 적용됩니다. 샌드박스에 대한 자세한 도움말을 확인하세요.
이제 방문자가 콘텐츠를 볼 수 있도록 사이트를 게시할 차례입니다.

사이트를 게시하면 샌드박스 컬렉션의 모든 입력란이 포함된 빈 버전의 컬렉션이 생성됩니다. 사이트의 게시된 버전에서 방문자에게 표시될 콘텐츠는 콘텐츠 관리자를 통해 액세스할 수 있는 라이브 컬렉션에 저장됩니다. 

라이브 컬렉션을 생성하기 위해 사이트를 게시한 후에는, 수동으로 라이브 컬렉션에 데이터를 추가하거나 샌드박스 컬렉션의 콘텐츠를 동기화할 수 있습니다.

라이브 컬렉션을 설정하려면:

  1. 에디터에서 게시하기를 클릭해 사이트를 게시합니다.
  2. 에디터에서 CMS로 이동합니다.
    • Wix 에디터: 에디터 왼쪽에서 CMS를 클릭합니다.
    • 에디터 X: 에디터 X 상단에서 CMS를 클릭합니다.
  3. 컬렉션을 클릭합니다.
  4. 필요한 컬렉션을 선택합니다.
  5. 라이브 컬렉션 입력 방법을 선택합니다.
    • 라이브 컬렉션에 데이터를 수동으로 추가하려면:
      • 라이브 컬렉션을 클릭한 후 콘텐츠를 입력합니다.
    • 샌드박스 컬렉션 콘텐츠를 동기화하려면:
      • 샌드박스 컬렉션을 클릭합니다.
      • 콘텐츠 동기화를 클릭합니다. 
      • 원하는 동기화 옵션을 선택합니다.
      • 동기화를 클릭합니다.
      • 동기화를 다시 클릭해 확인합니다.

10 단계 | 라이브 콘텐츠 보기

사이트를 게시하면 방문자가 콘텐츠를 사용할 수 있습니다. 방문자가 페이지를 방문하면 라이브 컬렉션의 콘텐츠가 표시됩니다.

다음 단계

페이지에 더 많은 기능을 추가할 수 있습니다.

도움이 되었나요?

|