Wix 도움말 센터
    홈
  1. 사이트 제작
  2. 고급 기능
  3. CMS
  4. CMS에 사용자 입력 요소 연결하기
    5. Velo 도움말: 데이터 컬렉션에 사용자 입력을 저장하기 위한 양식 생성하기

Velo 도움말: 데이터 컬렉션에 사용자 입력을 저장하기 위한 양식 생성하기

4 분 분량
Velo Documentation Center를 방문해 도움말을 확인하세요.
이 도움말은 사용자 입력 수집을 위한 사용자 지정 양식을 제작하는 방법을 제공합니다. 사용자 집력 요소를 사용해 양식을 배치하는 방법, 데이터베이스 컬렉션을 생성한 후 데이터세트를 사용해 이러한 요소에 연결하는 방법들을 설명합니다. 마지막으로, 미리보기 모드에서 양식을 테스트하고 사용자가 콘텐츠를 제출할 수 있도록 사이트를 게시합니다. 

1. Velo 활성화하기

Velo는 Wix 에디터에 고급 기능을 추가해 사용자가 좀 더 상호적이고 동적인 사이트를 제작할 수 있도록 합니다. 
 
에디터의 "도구" 메뉴에서 개발자 도구 옆 상자를 선택해 기능을 활성화하세요.
 
개발자 도구를 활성화하면, 에디터에서 다음과 같은 몇 가지 변경 사항을 확인할 수 있습니다.

  • 속성 패널이 표시됩니다. 닫을 경우, "도구" 메뉴에서 다시 열 수 있습니다.  
  • 코드 패널이 에디터 하단에 추가됩니다.
  • 에디터 왼쪽에 사이트 구조 사이드바가추가됩니다.
  • 추가 메뉴에, 사용자 입력, 데이터베이스 등을 포함한 요소가 추가됩니다. 

2. 데이터베이스 컬렉션 생성하기

데이터 베이스 컬렉션은 사이트를 위해 필요한 콘텐츠를 저장하거나, 사용자가 제출한 정보를 수집하는 공간입니다.  컬렉션을 생성할 경우에는 사용 권한 또한 정의해야 합니다. 사용 권한 정의는 내 사용자가 컬렉션의 데이터로 수행할 수 있는 작접을 제어할 수 있도록 합니다. Wix는 사용자가 양식을 통해 제출하는 콘텐츠를 저장할 빈 컬렉션을 추가합니다.  

컬렉션을 생성하려면:

  1. 사이트 구조 사이드바에서 , click the + icon next to Database 옆 + 아이콘을 클릭한 후 New Collection을 선택합니다. Introducing Database Collections 팝업창이 표시될  경우에는 Start Creating을 클릭합니다. 
  2. 데이터베이스 컬렉션 생성  팝업창이 열립니다.
  3. 컬렉션 이름을 지정합니다. 
  4. 드롭다운 메뉴에서 컬렉션 사용 용도를 선택합니다. 어떤 사용자가 데이터를 읽기, 쓰기, 수정, 삭제하기 원하는지 생각합니다. 양식의 경우에는  Form Input을 선택해 누구나 콘텐츠를 제출할 수 있으나, 사이트 소유자만이 데이터를 수정할 수 있는 권한을 부여합니다.
  5. Create Collection을 클릭합니다.
    콘텐츠 관리자가 열립니다. 콘텐츠 관리자는 내 데이터베이스 컬렉션에 콘텐츠를 추가할 수 있는 스프레드 시트 형식의 별도 표입니다. 

3. 데이터베이스 컬렉션 설정하기

내 사이트가 프로모션 경품 행사를 제공하고, 방문자가 자신들의 정보를 제출해 가입할 수 있도록 설정하고 싶다고 가정합니다. 이 경우, 사용자가 제출한 각 정보에 대한 입력한을 추가해야 합니다.  

컬렉션을 설정하려면:

  1. 머리글 행의 오른쪽에 있는 콘텐츠 관리자에서 + 기호를 클릭해 내 컬렉션에 입력란을 추가합니다. 
  2. 사용자가 제출하기를 원하는 정보와 일치하도록 입력란을 설정합니다. 입력란의 콘텐츠와 일치하는 올바른 데이터 유형을 선택했는지 반드시 확인합니다. 
  3. 계획한 양식 요소의 각 입력란을 정의합니다. 

4. 양식 디자인하기

양식은 내가 수집하려는 정보를 사용자가 입력할 수 있는 요소를 반드시 포함해야 합니다. 이를 설정하려면, "추가" 메뉴의 사용자 입력 요소를 사용해야 합니다. 

시작하려면:

  1. 추가 메뉴로 이동해 사용자 입력을 선택합니다. 
  2. 사용자 입력 섹션에서 요소를 페이지로 끌어다 놓은 후, 양식을 디자인 및 배치합니다. 입력란, 텍스트 상자, 라디오 버튼, 드롭다운 등의 요소를 추가할 수 있습니다. 

5. 요소 설정하기

사용자 입력 요소를 추가한 후에는 설정 패널에서 각 요소를 구성해야 합니다. 설정은 입력 유형, 자리 표시자 텍스트, 초기 값, 요소가 필수 입력사항인지 여부, 요소가 읽기 전용인지 여부 등을 포함합니다. 

요소를 설정하려면:

  1. 사용자 입력 요소를 선택한 후, 설정 아이콘을 클릭하고 옵션을 사용해 요소를 구성합니다. 
  2. 양식의 각 사용자 입력 요소에 이를 반복합니다.

이제 사용자 입력 요소를 컬렉션에 연결해야 합니다. 이를 위해 다음 단계에서 다룰 데이터세트를 사용할 것입니다. 

6. 데이터세트 추가 및 구성하기

데이터세트는 요소를 컬렉션에 연결합니다. 데이터세트를 추가할 경우에는 연결할 컬렉션, 사용자가 컬렉션을 읽기 및/또는 쓰기할 수 있는지 여부 등을 결정해야 합니다.  

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

  1. 추가 메뉴로 이동합니다. 데이터베이스를 클릭한 후, 데이터세트를 클릭합니다. 데이터세트가 페이지에 추가됩니다.
  2. 데이터세트를 선택한 후, Manage Dataset를 클릭합니다. 데이터세트 설정 패널이 열립니다. 
  3. Connect a Collection 섹션에서 내 컬렉션을 선택합니다. 
  4. Write-only 모드를 선택합니다.
  5. 패널을 닫습니다.

7. 양식 요소 연결하기

데이터세트를 구성한 후에는 요소를 연결할 수 있습니다. 양식의 각 요소를 이동해 동일한 데이터세트에 연결해야 합니다. 요소를 연결할 때마다, 값이 연결될 컬렉션 입력란 또한 정의해야 합니다. 

사용자 입력 요소를 연결하려면: 

  1. 요소를 선택한 후 데이터 연결 버튼을 클릭합니다.
  2. 사용자 입력 정보가 저장될 입력란을 컬렉션에서 선택합니다. 
  3. 양식의 각 사용자 입력 요소에 이를 반복합니다. 

다음 단계에서는 제출 버튼을 생성합니다. 동일한 데이터세트가 사용자가 컬렉션에 입력한 콘텐츠를 저장하는 작업을 처리하게 됩니다. 

8. 제출 버튼 생성하기

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

제출 버튼을 생성하려면: 

  1. 페이지에 버튼을 추가한 후 텍스트를 제출하기로 변경합니다. 
  2. 데이터 연결 버튼을 클릭합니다.
  3. Connect a dataset 패널에서 내 데이터세트를 선택합니다. 
  4. 링크 연결 대상 드롭다운 메뉴에서 Submit을 선택합니다.
  5. 또는, Submit Message를 생성합니다.
  6. When successful, navigate to 섹션의 기본 설정은 Stay on this page입니다. 양식을 제출한 후 사용자를 다른 페이지로 이동하려면, A link... 를 선택합니다.

사용자가 데이터를 제출하면 데이터가 저장되기 전, 유효성이 검사됩니다. 

9. 양식 테스트하기

이제 미리보기 모드에서 양식을 테스트할 수 있습니다. 제출한 컨텐츠는 샌드박스 데이터베이스에 저장됩니다. 샌드박스 데이터베이스는 Wix 에디터에서만 사용되며, 미리보기 모드에서만 확인할 수 있습니다.
양식을 테스트하려면:

  1. 미리보기를 클릭합니다.
  2. 양식 입력란에 값을 입력한 후, 제출하기를 클릭합니다. 
  3. 에디터로 다시 이동합니다. 사이트 구조 사이드바에서 내 컬렉션을 선택합니다. 양식 제출이 컬렉션의 항목으로 표시됩니다.

10. 사이트 게시하기

이제 사이트를 게시해 사용자가 콘텐츠를 제출할 수 있도록 합니다.

사이트 게시는 샌드박스 데이터베이스의 모든 입력란을 포함하는 빈 버전의 컬렉션을 생성합니다. 사용자가 제출한 콘텐츠는 내 계정 대시보드의 Wix Database 앱을 통해 액세스할 수 있 라이브 데이터베이스에 저장됩니다.

에디터에서 게시하기를 클릭해 사이트를 게시하세요.  

11. 라이브 데이터 확인하기

사이트를 게시할 경우, 사이트 방문자는 양식에 액세스할 수 있습니다. 사용자가 게시된 사이트에서 양식을 제출하면, 양식 데이터는 내 라이브 데이터베이스에 저장됩니다.  

사용자가 제출한 정보를 확인하려면: 
  1. 계정 대시보드로 이동합니다. 내 앱 섹션에서 Wix 데이터베이스를 선택합니다.
  2. Collection을 선택해 라이브 데이터를 확인합니다. 
 
여기에서는 데이터를 정렬 및 필터할 수 있습니다. 예를 들어, Date Created를 기준으로 정렬해 최신 제출물을 확인할 수 있습니다.  

다음 단계

Velo를 사용해 양식에 더 많은 기능을 추가할 수 있습니다.

도움이 되었나요?

|

페이지 메뉴

  • 1. Velo 활성화하기
  • 2. 데이터베이스 컬렉션 생성하기
  • 3. 데이터베이스 컬렉션 설정하기
  • 4. 양식 디자인하기
  • 5. 요소 설정하기
  • 6. 데이터세트 추가 및 구성하기
  • 7. 양식 요소 연결하기
  • 8. 제출 버튼 생성하기
  • 9. 양식 테스트하기
  • 10. 사이트 게시하기
  • 11. 라이브 데이터 확인하기
  • 다음 단계