Studio Two 에디터: 데이터 소스 소개

데이터 소스를 사용하면 사이트 어디서나 라이브 콘텐츠를 표시할 수 있습니다. 데이터 소스로는 CMS 컬렉션, Wix 앱(예: Wix 블로그) 또는 사용자 지정 코드를 사용할 수 있습니다. 게시물 제목이나 제품 이미지처럼 각 요소에 표시할 콘텐츠를 직접 선택할 수 있습니다.

버튼의 텍스트와 링크처럼 요소의 각 부분에 연결할 입력란을 선택합니다. 예를 들어 버튼에 게시물 제목을 표시하고 해당 게시물 페이지로 연결할 수 있습니다. 요소에 맞는 입력란만 표시되므로 텍스트 요소에는 이미지 입력란이 표시되지 않습니다.

소스를 페이지나 컨테이너에 추가하면 그 안의 모든 요소에서 콘텐츠를 사용할 수 있습니다. 요소를 연결하기 전에 미리 추가할 필요는 없습니다. 소스를 선택하면 에디터가 다음 중 한 곳에 자동으로 추가합니다.

• 페이지: 대부분의 요소에 적용됩니다.
• 요소 자체: 반복 레이아웃처럼 소스를 포함할 수 있는 요소에 적용됩니다.
• 글로벌 섹션: 머리글처럼 글로벌 섹션에 있는 요소에 적용됩니다.

디자인하는 동안 연결된 요소에는 소스의 실제 콘텐츠가 표시됩니다. 표시할 아이템이 없으면 자리표시자 데이터(예: 게시물 제목)가 대신 표시되므로 요소의 스타일을 계속 설정할 수 있습니다.

1. 에디터로 이동합니다.
2. 연결할 요소를 선택합니다.
3. 에디터 오른쪽 상단에서 검사창 열기 아이콘을 클릭합니다.
4. 검사창이 열려 있지 않다면 설정 탭을 클릭합니다.
5. 관련 속성(예: 텍스트, 링크, 대체 텍스트) 옆에서 데이터에 연결 아이콘을 클릭합니다.
6. 소스 선택을 클릭한 후 콘텐츠가 있는 소스를 선택합니다.
7. 입력란 선택을 클릭한 후 요소에 표시할 입력란을 선택합니다.
8. 필요한 경우 입력란 아래에 표시되는 매개변수(예: 페이지 링크 매개변수)를 입력합니다.
9. 적용을 클릭합니다.

표시할 콘텐츠가 저장된 소스를 선택합니다. 소스 연결 목록에서는 다음 유형의 소스를 선택할 수 있습니다.

• CMS 컬렉션: CMS(콘텐츠 관리 시스템)에서 추가한 모든 컬렉션입니다.
• Wix 앱: Wix 쇼핑몰 및 Wix 블로그 등의 앱은 앱 이름 아래에 고유한 소스를 추가합니다. 예를 들어 Wix 블로그는 게시물(게시물 1개), 게시물(게시물 목록), 관련 게시물 소스를 추가합니다.
• 사용자 지정 코드: 코드로 직접 구축하는 소스입니다. 필요한 기능을 설명해 AI로 생성하거나 코드를 직접 작성할 수 있습니다.

같은 목록에서 새 소스를 추가하거나 AI로 설정할 수도 있습니다. 서로 다른 위치의 콘텐츠가 필요한 경우 페이지나 섹션에 여러 소스를 추가합니다. 예를 들어 같은 페이지에 CMS 컬렉션의 포트폴리오와 최신 블로그 게시물을 표시할 수 있습니다.

페이지, 섹션, 컨테이너, 반복 레이아웃, 머리글, 바닥글 등 콘텐츠를 담는 컨테이너에 소스를 추가합니다. 그러면 컨테이너 안의 모든 요소에서 해당 소스를 사용할 수 있어 요소마다 별도로 설정할 필요가 없습니다.

컨테이너에서 사용할 수 있는 소스는 속성 검사 패널의 설정 탭에서 확인할 수 있습니다.

• 사용 가능한 소스: 현재 컨테이너가 속한 섹션이나 페이지 등 상위 컨테이너에 추가된 소스입니다. 표시할 소스가 있는 경우에만 이 목록이 나타납니다.
• 연결된 소스: 현재 컨테이너에 직접 추가된 소스입니다.

페이지에 추가한 소스는 해당 페이지의 모든 섹션과 컨테이너에서 사용할 수 있습니다. 머리글과 바닥글은 페이지에 포함되지 않으므로 페이지의 소스를 사용할 수 없습니다. 머리글과 바닥글에는 소스를 직접 추가합니다.

컨테이너의 소스를 컨테이너 밖에 있는 요소에 사용할 수는 없습니다. 예를 들어 더보기 버튼을 반복 레이아웃의 목록에 연결하려면 두 요소가 모두 포함된 섹션에 소스를 추가합니다. 그런 다음 반복 레이아웃과 버튼을 섹션의 소스에 연결합니다.

데이터에 연결된 항목은 캔버스의 분홍색 라벨로 확인할 수 있습니다. 소스가 연결된 컨테이너의 라벨에는 소스 이름이 표시됩니다. 정적 요소에는 파란색 라벨이 표시됩니다.

1. 에디터로 이동합니다.

2. 해당 페이지, 섹션 또는 컨테이너를 선택합니다.

3. 에디터 오른쪽 상단에서 속성 검사 열기 아이콘을 클릭합니다.

4. 아직 열려 있지 않은 경우 설정 탭을 클릭합니다.

5. + 소스 연결을 데이터 소스 아래에서 클릭합니다.

6. 사용할 소스를 선택합니다.

   • CMS 컬렉션: 컬렉션을 선택합니다. 컬렉션이 없다면 추가를 클릭합니다.

   • 사용자 지정 코드: 사용자 지정 코드 소스를 선택합니다. 소스가 없다면 추가를 클릭합니다.

   • Wix 앱: 앱 목록에서 소스를 선택합니다(예: 게시물의 Wix 블로그).

소스 설정을 변경하거나 콘텐츠 관리 페이지로 이동하고, 컨테이너에서 소스를 제거할 수 있습니다. 컨테이너에 추가된 소스는 속성 검사 패널의 설정 탭에 있는 연결된 소스에서 확인할 수 있습니다.

1. 에디터로 이동합니다.
2. 소스가 추가된 페이지, 섹션 또는 컨테이너를 선택합니다.
3. 에디터 오른쪽 상단에서 속성 검사 열기 아이콘을 클릭합니다.
4. 아직 열려 있지 않은 경우 설정 탭을 클릭합니다.
5. 연결된 소스 아래에서 해당 소스 옆의 추가 작업 아이콘을 클릭합니다.
6. 원하는 작업을 선택합니다.
   • 데이터 설정: 필터, 정렬, 한 번에 표시할 아이템 수 등 소스 설정을 변경합니다. 설정은 이 소스에 연결된 모든 요소에 적용됩니다. 설정이 있는 소스에만 이 옵션이 표시됩니다.
   • 데이터 관리: CMS 컬렉션, 앱 대시보드(예: 블로그 게시물) 또는 소스 코드 등 소스 콘텐츠를 관리하는 위치로 이동합니다.
   • 제거: 이 컨테이너에서 소스를 분리합니다. 연결된 요소는 페이지에 유지되지만 소스 콘텐츠는 더 이상 표시되지 않습니다.

블로그 게시물이나 포트폴리오 프로젝트처럼 디자인이 같은 아이템 목록을 표시하려면 반복 레이아웃을 사용합니다. 반복 레이아웃을 소스에 연결하고 아이템 하나를 디자인하면 모든 아이템에 동일한 디자인과 각기 다른 콘텐츠가 표시됩니다.

반복 레이아웃 추가 및 설정에 대해 자세히 알아보세요.

컬렉션 페이지를 추가하고 아이템 페이지를 선택하면 동일한 디자인으로 아이템을 하나씩 표시할 수 있습니다. 페이지 요소는 컬렉션에 이미 연결되어 있습니다. 디자인하는 동안 캔버스 상단의 미리보기 도구 모음을 사용해 각 아이템이 적용된 페이지를 미리볼 수 있습니다.

컬렉션의 모든 아이템을 나열하는 반복 레이아웃 페이지를 추가할 수도 있습니다. 아이템 페이지 추가 및 설정에 대해 자세히 알아보세요.

Wix 앱의 요소를 추가하면 데이터가 이미 적용된 상태로 시작할 수 있습니다. 요소 추가 패널의 앱 이름 아래에서 해당 요소를 찾을 수 있습니다(예: Wix 예약). 예를 들어 Wix 블로그 피드와 게시물 목록을 추가하면 사이트 게시물이 바로 표시됩니다. Wix 예약의 서비스 목록에는 서비스가 표시됩니다. 새 컬렉션 페이지의 요소도 기본으로 연결되어 있습니다. 반복 레이아웃을 연결하면 그 안의 요소도 함께 연결됩니다.

액션바 또는 캔버스에서 이러한 요소의 디자인과 레이아웃을 원하는 대로 변경할 수 있습니다.

어떤 콘텐츠를 어디에 표시할지 직접 관리하려면 텍스트, 이미지 등의 스탠다드 요소를 추가하고 연결합니다. Studio Two에서 Wix 쇼핑몰 제품 페이지를 설정하는 방법에 대해 자세히 알아보세요.

콘텐츠의 참/거짓 입력란을 기준으로 요소를 숨길 조건을 설정합니다. 요소를 숨길 시점을 지정하려면 다음의 경우 숨기기에서 참 또는 거짓을 선택합니다. 예를 들어 아직 판매 중인 모든 그림에서 '판매 완료' 라벨을 숨길 수 있습니다. 검사창의 설정 탭에서 고급 아래의 조건부 가시성을 확인할 수 있습니다.

• 사용할 수 있는 입력란: 참/거짓 입력란 및 계산 결과가 참/거짓인 입력란만 사용할 수 있습니다.
• 조건을 추가할 수 없는 위치: 페이지 자체 또는 글로벌 섹션 자체(예: 머리글 또는 바닥글)에는 조건을 추가할 수 없습니다. 단, 그 안의 요소에는 조건을 추가할 수 있습니다.
• 캔버스에서 숨겨지는 요소: 컬렉션 페이지나 반복 레이아웃처럼 요소가 숨겨질 것으로 에디터에서 판단할 수 있는 경우 해당 요소에 줄무늬가 표시됩니다. 요소를 선택하면 줄무늬가 사라집니다.

이벤트 핸들러를 사용하면 방문자가 요소와 상호작용할 때 소스 중 하나의 함수를 실행할 수 있습니다. 클릭 시, 더블 클릭 시, 마우스 진입 시, 마우스 이탈 시, 포커스 시 또는 블러 시 중에서 선택할 수 있습니다.

1. 에디터로 이동합니다.
2. 요소를 선택합니다.
3. 에디터 오른쪽 상단에서 검사창 열기 아이콘을 클릭합니다.
4. 아직 열려 있지 않다면 설정 탭을 클릭합니다.
5. 아래로 스크롤해 고급 아래의 이벤트 핸들러로 이동합니다.
6. 관련 이벤트(예: 클릭 시) 아래에서 함수 선택을 클릭합니다.
7. 소스 선택을 클릭하고 소스를 선택합니다.
8. 입력란 선택을 클릭하고 실행할 함수를 선택합니다.
9. 필요한 경우 함수 아래에 표시되는 매개변수를 입력합니다.
10. 적용을 클릭합니다.

Studio Two 에디터의 데이터 소스에 대해 자세히 알아보려면 아래 질문을 클릭하세요.