CMS: 동적 목록 페이지 추가 및 설정하기
19 분 분량
동적 목록 페이지를 사용하면 CMS 컬렉션의 다양한 아이템을 구성된 색인으로 선보일 수 있습니다. 반복 레이아웃, 갤러리 또는 표에 표시되는 각 아이템은 방문자가 특정 아이템에 대한 자세한 정보를 읽을 수 있는 컬렉션의 동적 아이템 페이지로 연결됩니다.
데이터세트는 페이지 요소와 컬렉션 입력란 간의 연결을 제어합니다. 데이터세트 설정에서 한 번에 표시되는 아이템 수를 제어할 수 있습니다. 필터를 추가해 특정 아이템만 포함하거나, 아이템이 표시되는 순서를 제어하는 정렬 조건을 추가할 수 있습니다.
표시할 아이템이 많은 경우 '더보기' 또는 탐색 버튼을 추가해 페이지 로딩 성능을 개선하세요. 드롭다운, 라디오 버튼, 체크상자 등과 같은 입력 요소를 사용해 방문자가 페이지에 표시되는 아이템을 필터링할 수 있는 기능을 제공할 수도 있습니다.
시작하기 전:
- 동적 목록 페이지에 표시하려는 아이템을 포함하는 CMS 컬렉션을 추가합니다.
- 컬렉션의 동적 아이템 페이지를 추가합니다. 동적 목록 페이지의 아이템을 컬렉션의 동적 아이템 페이지에 연결합니다. 또는, 동적 목록 페이지와 동적 아이템 페이지를 동시에 추가할 수 있습니다. 지침은 아래 1 단계를 참조하세요.
1 단계 | 동적 목록 페이지 추가하기
에디터의 CMS 패널에서 컬렉션에 대한 동적 목록 페이지를 추가합니다. 이렇게 하면 나중에 사용자 지정하는 반복 레이아웃에 컬렉션의 다양한 아이템을 표시하는 새 페이지가 추가됩니다.
Wix 에디터
Studio 에디터
- 에디터로 이동합니다.
- 에디터 왼쪽에서 CMS
를 클릭합니다.
- 내 컬렉션을 클릭합니다.
- 동적 목록 페이지를 만들려는 컬렉션을 클릭합니다.
- 추가 작업을 클릭한 후 동적 페이지 추가를 선택합니다.
- 목록 페이지를 선택한 후 사이트에 추가를 클릭합니다.
도움말: 아이템 페이지를 선택해 동시에 컬렉션의 동적 아이템 페이지를 추가할 수 있습니다.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/05/28/ffa1349c-f50e-4c37-86ae-10c6d1a6a0cf/2412ec6b-d66d-4016-b4c3-f42ebdb486a7.png)
2 단계 | (선택사항) URL 슬러그 구조 수정하기
동적 목록 페이지의 URL 슬러그 구조를 편집해 동적 페이지의 웹 주소를 구성할 수 있습니다.
예를 들어, 동적 페이지에 대해 다음과 같은 URL 슬러그 구조를 만들 수 있습니다.
- 동적 목록 페이지: https://www.{your-domain.com}/{collection-name}
- 동적 카테고리 페이지: https://www.{your-domain.com}/{collection-name}/{category}
- 동적 아이템 페이지: https://www.{your-domain.com}/{collection-name}/{category}/{primary-field}
URL 슬러그 구조 편집 시, 해당 구조는 사이트의 다른 기존 페이지에서 이미 사용된 구조일 수 없습니다. 고유하게 유지하려면, URL 슬러그 구조는 변수가 다르더라도 사이트의 다른 페이지와 동일한 접두사(예: {컬렉션 이름}) 및 동일한 수의 변수를 가질 수 없습니다.
사용할 수 없는 충돌 URL 슬러그 구조의 예 보기
중요!
동적 페이지의 URL 슬러그 구조를 변경하면 해당 페이지에 대한 모든 기존 링크가 더 이상 작동하지 않습니다. 이는 사이트 내의 링크, 외부로 공유한 모든 링크 및 검색 엔진의 SEO 링크에 영향을 미칩니다. Wix에서는 방문자와 검색 엔진을 이전 URL에서 새 URL로 이동할 자동 리디렉트를 추가할 수 있는 기능을 출시합니다.
동적 목록 페이지의 URL 슬러그 구조를 편집하려면:
Wix 에디터
Studio 에디터
- 에디터로 이동합니다.
- 에디터 왼쪽에서 페이지 및 메뉴
아이콘을 클릭합니다.
- 동적 페이지를 클릭합니다.
- 추가한 동적 목록 페이지에 마우스오버한 후 오른쪽의 추가 작업
아이콘을 클릭합니다.
도움말: 추가한 동적 목록 페이지의 제목은 기본적으로 {Collection Name}(List)입니다. - SEO를 클릭합니다.
- URL 슬러그 구조 입력란을 편집합니다.
- 변수 추가를 클릭한 후 텍스트 또는 숫자 입력란을 선택해 URL 슬러그 구조에서 해당 값을 사용합니다.
- URL 슬러그 구조에서 정적 값을 사용하려면 텍스트 또는 숫자 값을 입력합니다.
- 키보드에서 Enter 키를 눌러 URL 슬러그 구조에 대한 변경 사항을 저장합니다.
![동적 목록 페이지의 URL 슬러그 구조를 편집하는 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/26/e01024cd-e195-4083-9cb4-a1b09e8ce84e/0be2a4fa-e65a-4345-95db-ae6e4175d287.png)
3 단계 | CMS에 반복 레이아웃 연결하기
이제 각 컨테이너에 2개의 텍스트 요소, 이미지 및 버튼이 포함된 반복 레이아웃이 있는 동적 목록 페이지가 생겼습니다. 각 반복 레이아웃의 컨테이너는 컬렉션의 다른 아이템을 표시합니다.
요소의 각 부분을 관련 컬렉션 입력란에 연결해 원하는 정보를 표시하세요. 방문자가 클릭해 해당 아이템의 전용 페이지로 이동할 수 있도록 버튼을 컬렉션의 동적 아이템 페이지에 연결하는 것이 좋습니다.
각 아이템에 대한 자세한 정보를 제공하기 위해 지원되는 요소를 반복 레이아웃에 추가할 수 있습니다. 그런 다음 이러한 요소를 모든 CMS 연결을 관리하는 데이터세트의 컬렉션 입력란에 연결합니다.
Wix 에디터
Studio 에디터
- (선택사항) 반복 레이아웃에 요소를 추가(예: 버튼, 텍스트, 이미지)하거나 필요하지 않은 요소를 제거합니다. 모든 요소를 포함할 수 있도록 반복 레이아웃의 크기를 조정할 수 있습니다.
- 반복 레이아웃 요소를 클릭한 후 CMS에 연결
아이콘을 선택합니다.
- 오른쪽의 반복 레이아웃 연결 패널에서 연결하고자 하는 요소를 클릭합니다.
- 연결 아래에서 해당 드롭다운을 클릭해 요소를 관련 컬렉션 입력란 또는 데이터세트 작업에 연결합니다. 옵션은 요소 유형에 따라 다를 수 있습니다.
도움말:
- 버튼 요소를 동적 아이템 페이지에 링크하려면 클릭 시 수행 작업 입력란을 클릭하고 (Item)으로 끝나는 컬렉션의 동적 아이템 페이지를 선택합니다.
- 이미지 요소를 동적 아이템 페이지에 연결하려면 링크 연결 대상 드롭다운을 클릭한 후 (Item)으로 끝나는 컬렉션의 동적 아이템 페이지를 선택합니다.
![버튼을 컬렉션의 동적 아이템 페이지에 연결하는 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/25/d804eab7-5ca6-4958-8492-c45155f6c1c5/eb3e2b76-1adf-419a-a019-12eee573edb7.png)
- 오른쪽 패널 상단에서 반복 레이아웃 연결을 클릭합니다.
- 위의 3-5 단계를 반복해 요소를 컬렉션 입력란 또는 데이터세트 작업에 연결합니다.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/25/21e518fc-a602-439e-90c6-d97bba085d33/3ef23021-853a-4421-b420-1f540913a62c.png)
- 필요에 따라 클릭해 반복 레이아웃 요소를 조정합니다.
도움말: 언제든지 반복 레이아웃에서 요소를 추가 또는 제거할 수 있습니다. 변경되지 않는 정적 콘텐츠를 사용하려면 요소의 연결을 해제합니다. - 미리보기를 클릭해 동적 목록 페이지를 테스트합니다.
- 변경 사항을 라이브 사이트에 적용할 준비가 되었다면 게시를 클릭합니다.
4 단계 | (선택사항) 데이터세트 설정 관리하기
기본적으로 동적 페이지 데이터세트는 최대 12개의 아이템을 반복 레이아웃 또는 갤러리에 처음에 표시할 수 있도록 합니다. 데이터세트 설정에서 한 번에 표시할 수 있는 최대 아이템 수를 조정할 수 있습니다. 필터를 추가해 특정 아이템만 포함하거나 정렬을 추가해 아이템이 표시되는 순서를 제어할 수도 있습니다.
Wix 에디터
Studio 에디터
- 반복 레이아웃의 연결된 데이터세트 설정으로 이동합니다.
- 반복 레이아웃을 클릭합니다.
- CMS에 연결
아이콘을 클릭합니다.
- 오른쪽의 반복 레이아웃 연결 패널에서 데이터세트 설정을 클릭합니다.
- 데이터세트 모드 드롭다운을 클릭한 후 및 옵션을 선택합니다.
- 읽기: 데이터세트가 반복 레이아웃에 컬렉션 콘텐츠를 표시하도록 허용합니다.
- 읽기 및 쓰기: 데이터세트가 반복 레이아웃에 컬렉션 콘텐츠를 표시하도록 허용하고 방문자가 입력 요소로 컬렉션 콘텐츠를 추가 또는 편집할 수 있도록 합니다.
- (선택 사항) 콘텐츠에 액세스할 수 있는 사람과 해당 콘텐츠로 수행할 수 있는 작업을 결정하는 권한을 변경하려면 컬렉션 권한 옆의 공개를 클릭합니다.
- 최대 표시 아이템 수 입력란을 편집해 반복 레이아웃에 처음에 로딩할 수 있는 최대 아이템 수를 설정합니다. 이는 방문자가 "더보기" 버튼 클릭 시 로딩할 수 있는 최대 추가 아이템 수이기도 합니다. 페이지 번호바 또는 버튼을 "다음/이전 페이지" 데이터세트 작업에 연결하면, 이 입력란은 반복 레이아웃의 '페이지'당 표시되는 최대 아이템 수 또한 결정합니다. '더보기' 및 탐색 요소 설정에 대한 단계는 다음 섹션을 참조하세요.
참고: 이 입력란은 표에는 적용되지 않습니다. 표를 사용해 아이템을 표시한 경우, 표의 레이아웃아이콘을 클릭하고 사용자 지정 표 높이를 설정한 후 페이지 번호를 활성화해 표시되는 아이템 수 제한하세요.
- (선택사항) + 필터 추가를 클릭해 반복 레이아웃에 특정 아이템만 표시합니다.
- (선택사항) + 정렬 추가를 클릭해 반복 레이아웃에서 아이템이 표시되는 순서를 선택합니다.
![Wix 에디터의 데이터세트 설정 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/25/8a87ec80-1122-4e40-b965-7165454e93ec/fc583023-8347-415f-bcbd-6f00c0730706.png)
- 미리보기를 클릭해 동적 목록 페이지를 테스트합니다.
- 변경 사항을 라이브 사이트에 적용할 준비가 되었다면 게시를 클릭합니다.
5 단계 | (선택사항) '더보기' 또는 탐색 버튼 추가하기
페이지에 많은 아이템을 표시할 계획이라면, '더보기' 버튼을 추가해 페이지 로딩 성능을 개선하는 것을 고려하세요. 데이터세트의 최대 표시 아이템 수 입력란은 페이지에 처음에 로딩되는 아이템 수와 방문자가 '더보기' 버튼 클릭 시 로딩할 수 있는 추가 아이템 수를 결정합니다.
또한, 페이지에 연결된 반복 레이아웃 또는 갤러리가 아이템의 다음 또는 이전 '페이지'를 표시하도록 하는 '다음/이전 페이지' 버튼 또는 페이지 번호바(Wix 에디터만 해당)를 추가할 수 있습니다. 최대 표시 아이템 수 입력란은 아이템의 각 '페이지'에 표시되는 최대 아이템 수를 결정합니다.
Wix 에디터
Studio 에디터
원하는 작업을 선택합니다.
'더보기' 버튼 추가하기
'다음 페이지' 및 '이전 페이지' 버튼 추가하기
도움말:
Wix 에디터에서는 페이지 번호바를 추가해 방문자가 아이템의 '페이지'를 탐색하도록 할 수도 있습니다. 최대 표시 아이템 수 입력란은 페이지 번호바의 각 '페이지'에 표시될 수 있는 아이템 수를 결정합니다. Studio 에디터에서 페이지 번호바를 표시하고 싶다면, 여기에서 해당 기능에 투표하세요.
6 단계 | (선택사항) 방문자가 아이템을 필터링할 수 있도록 허용하기
방문자가 입력 요소를 사용해 동적 목록 페이지에 표시되는 아이템을 필터링할 수 있도록 하세요. 필터링을 허용하는 라디오 버튼, 체크상자, 드롭다운, 선택 태그 또는 슬라이더(범위 슬라이더만 해당)와 같은 입력 요소 중에서 선택할 수 있습니다.
입력 요소를 사용해 방문자가 콘텐츠를 필터링할 수 있도록 허용하기에 대한 자세한 도움말을 확인하세요.
![동적 목록 페이지에 표시되는 아이템을 필터링하는 데 사용되는 입력 요소의 예를 보여주는 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/26/e1521f44-824d-41cf-90a6-70058628add2/cb392fbf-46d3-4623-ab2b-b0d1440eb353.png)
자주 묻는 질문
아래 질문을 클릭해 동적 목록 페이지 설정에 대한 일반적인 질문과 답변을 확인하세요.
방문자는 동적 목록 페이지에 어떻게 액세스하나요?
카테고리별로 아이템을 나열하는 동적 페이지를 만들 수 있나요?
페이지에 연결된 아이템이 표시되지 않는 이유는 무엇인가요?
아이템을 동적 아이템 페이지에 연결하려면 어떻게 해야 하나요?
일부 요소를 반복 레이아웃에 추가할 수 없는 이유는 무엇인가요?
나만의 반복 레이아웃을 설정하기 전에 사전 연결된 반복 레이아웃이 어떻게 작동하는지 확인할 수 있나요?
도움이 되었나요?
|