Wix 도움말 센터
    홈
  1. 사이트 제작
  2. 고급 기능
  3. Wix Blocks
  4. 사용 지침
    5. Wix Blocks 튜토리얼: 카운트다운 위젯 생성하기

Wix Blocks 튜토리얼: 카운트다운 위젯 생성하기

16 분 분량
Wix Blocks는 모든 Wix Studio 사용자가 사용할 수 있습니다. Blocks에 액세스하려면, Wix Studio에 가입하세요.
이 튜토리얼에서는 특정 날짜까지 카운트다운하는 카운트다운 위젯을 제작하는 방법을 보여줍니다. 또한, 사이트 방문자가 등록해 이벤트 전날 이메일 알림을 수신할 수 있는 등록 위젯 설명도 포함되어 있습니다. 사이트에 카운트다운 위젯을 설치하는 방법과 Blocks의 모든 주요 기능을 탐색하는 방법도 배울 수 있습니다.
카운트다운 위젯

템플릿 포함 사항

더 쉬운 작업을 위해 바로 시작할 수 있도록 Wix에서 템플릿을 만들었습니다.

템플릿에는 다음이 포함됩니다.
  • 카운트다운 위젯이 포함되며, 디자인을 완료하고 함수 및 속성을 코딩해야 합니다.
  • 등록 위젯이 포함되며 등록을 완료하고 카운트다운 위젯에 추가해야 합니다.
  • 일부 공개 유틸리티가 포함되며 위젯의 기능을 구현하는 데 사용할 수 있습니다.
  • 일부 백엔드 코드가 포함되며 이메일 알림 기능을 구현하는 데 사용할 수 있습니다.

템플릿을 활용하세요.

1 단계 | 위젯 디자인 완료하기

위젯을 제작하려면, 이 템플릿을 활용해 Wix 계정에서 편집하세요. 템플릿이 불완전한 상태이므로 위젯에 요소를 추가하는 방법을 배울 수 있습니다.
위젯은 요소를 쉽게 정렬하고 배치할 수 있도록 그리드로 디자인되어 있습니다.

  1. 템플릿을 엽니다. 
  2. 위젯 및 디자인 아래에서 카운트다운을 클릭합니다. 
  3. 상단 바의 요소 추가Add icon 아이콘을 클릭합니다.
  4. 텍스트를 선택합니다. 48px 제목 상자를 위젯에 끌어다 놓습니다.
  5. 텍스트 편집을 클릭한 후 텍스트를 SS로 변경합니다.
  6. 속성을 사용해 텍스트 색상을 흰색으로 변경하고 텍스트를 가운데에 배치합니다. 
  7. 텍스트 상자를 선택한 후 move elements icon를 사용해 SECONDS 라벨 위의 그리드 사각형으로 이동합니다.
  8. stretch icon를 사용해 크기를 조정합니다.

위젯 디자인에 대한 자세한 도움말을 확인하세요.

2 단계 | 위젯의 API 속성 추가 및 정의하기

위젯에 대한 API를 정의해 위젯을 설치하는 사이트 제작자가 코드를 통해 위젯과 상호 작용할 수 있습니다. API는 속성, 이벤트 및 내보낸 함수를 포함할 수 있습니다.

이 위젯은 두 가지 속성을 사용합니다.
  • endDate: 카운트다운이 0에 도달하는 종료일을 정의합니다. 사이트 제작자는 이 속성을 사용해 종료일을 변경해 위젯을 사이트에 맞게 사용자 지정할 수 있습니다.
  • emailId: 사용자가 알림을 신청할 때 발송될 이메일 메시지를 결정합니다.

위젯 API 속성에 대한 자세한 도움말을 확인하세요.

위젯 요소에 ID 지정하기

먼저 코드에서 쉽게 참조할 수 있도록 위젯의 요소에 ID를 지정해야 합니다.
  1. 텍스트 상자를 클릭합니다.
  2. 속성 및 이벤트properties icon 패널에서 텍스트 상자에 ID를 지정합니다. 이 예제에서 ID는 secondsTxt입니다. 다른 요소에는 이미 ID가 부여되어 있습니다.

'endDate' 및 'emailId' 속성 정의하기

  1. APIproperties icon 패널에서 속성 추가를 클릭합니다.
  2. 속성 이름 endDate를 입력합니다.
  3. 속성 유형을 선택합니다. 이 경우 날짜 및 시간을 선택합니다(날짜는 미국 형식인 mm/dd/yyyy로 표시됩니다).
  4. 기본값을 선택합니다(사이트 제작자는 에디터에 위젯을 설치할 때 이를 변경할 수 있습니다).
  5. 속성에 마우스오버하고 표시되는 add icon 아이콘을 클릭합니다.
  6. 트리거된 이메일에 대한 다른 속성을 생성하고 이름을 emailId로 지정합니다. 이는 기본값이 없는 텍스트 유형 속성입니다.

3 단계 | 위젯이 작동하도록 코드 추가하기


위젯이 카운트다운되도록 하려면 종료일까지 남은 시간을 계산하는 함수를 코드에 추가해야 합니다. 이를 위해 템플릿에는 공개 및 백엔드public and backend icon 메뉴에서 찾을 수 있는 몇 가지 유틸리티가 사전 설치되어 있습니다. 

Blocks는 새로운 전역 변수 $widget 및 위젯에 대해 정의한 모든 속성을 포함하는 속성 $widget.props를 사용합니다.

또한, Blocks는 Velo 자동 완성 기능을 사용하므로 코드를 더 쉽게 작성할 수 있습니다.

위젯 API에 대한 자세한 도움말을 확인하세요.

유틸리티 가져오기

  1. 공개 및 백엔드 메뉴를 클릭합니다.
  2. 공개 아래에서 dateUtils.js를 선택합니다. 그러면 코드 패널에서 파일이 열립니다.

새 함수를 고려하도록 코드 변경하기

카운트다운 위젯이 카운트를 업데이트하도록 updateTime() 함수를 생성합니다. 새 함수는 다음과 같이 표시됩니다.

1$widget.onPropsChanged(function () { }); function updateTime() { const {days, hours, minutes, seconds} = getRemainingTime (new Date($widget.props.endDate)); $w('#daysTxt').text = days.toString(); $w('#hoursTxt').text = hours.toString(); $w('#minutesTxt').text = minutes.toString(); $w('#secondsTxt').text = seconds.toString(); }

또한, 위젯이 남은 시간을 업데이트하는 간격을 설정해야 합니다.
그러기 위해서는 onReady() 함수에 다음 코드를 추가하세요. 그러면 위젯이 1초 간격으로 업데이트됩니다.

1$w.onReady(function () { updateTime(); if (wixWindow.viewMode !== "Editor") { setInterval(updateTime, 1000); } });
편집 시간 조건
Velo 코드는 미리보기를 클릭하거나 라이브 사이트를 열 때만 실행됩니다. Blocks onReady 코드는 편집 중에도 실행되므로 에디터에서 작업하는 동안 작동하는 것을 확인할 수 있습니다. 위의 조건을 사용하면 편집하는 동안 카운트다운 위젯이 카운트다운되지 않습니다. 

위젯 미리보기 및 해당 API 속성 테스트

위젯 및 해당 API 속성을 미리보기할 준비가 되었습니다.

  1. 미리보기를 클릭합니다. 위젯은 종료일까지 매 초마다 카운트다운되어야 합니다.
  2. API 속성 테스트를 클릭합니다. 이전에 설정한 기본값이 적용된 패널이 표시됩니다. 
  3. 날짜를 변경해 위젯이 응답하고 새로운 날짜로 카운트다운하는지 확인합니다.

4 단계 | 사용자 지정 패널 생성 및 코딩하기

사이트 제작자가 사이트에 위젯을 설치할 때 설정을 변경할 수 있도록 사용자 지정 설정 패널을 생성할 수 있습니다. 이 예시에서 사이트 제작자는 사용자 지정 설정 패널을 사용해 종료일을 변경하고 사용자가 알림 수신을 신청할 때 발송할 이메일을 결정하는 이메일 ID를 정의할 수 있습니다.

패널에 대한 자세한 도움말을 확인하세요.

사용자 지정 패널 추가하기

  1. 상단 바에서 패널 탭을 클릭합니다.
  2. 패널 추가를 클릭합니다.
  3. 패널 이름을 지정합니다. 이 예시에서는 '내 설정'입니다.
  4. 패널 추가를 클릭합니다.
  5. + 요소 추가를 클릭합니다.
  6. 텍스트 입력을 선택합니다. 이는 종료일에 사용됩니다.
  7. 속성 및 이벤트propeties icon를 클릭합니다. 텍스트 입력에 ID로 endDateInput을 지정합니다.
  8. 텍스트 요소를 선택한 후 설정을 클릭합니다.
  9. 입력란 제목 입력란에 '종료일'이라는 이름을 추가합니다.
  10. 기본 텍스트 입력란의 텍스트를 삭제합니다.
  11. 플레이스홀더 텍스트를 '종료일'로 설정합니다.
  12. 섹션 구분선을 추가합니다.
  13. 설정을 클릭합니다. 섹션 제목 입력란에 제목을 추가합니다. 이 예시에서는 '트리거된 이메일'입니다.
  14. 다른 텍스트 입력을 추가합니다. 텍스트 입력에 ID로 emailIdInput을 지정합니다.
  15. 텍스트 요소를 선택한 후 설정을 클릭합니다.
  16. 입력란 제목 입력란에 '이메일 ID'라는 이름을 추가합니다.
  17. 기본 텍스트 입력란의 텍스트를 삭제합니다.
  18. 플레이스홀더 텍스트를 '이메일 ID'로 설정합니다.
사용자 지정 패널 디자인이 완료되었습니다. 이제 코드를 추가해 이를 구현해야 합니다.

사용자 지정 패널에 코드 추가하기


사용자 지정 패널이 로딩될 때 현재 종료일 및 이메일 ID를 표시하고자 합니다. 사이트 제작자는 패널을 사용해 이러한 값을 변경합니다. 이러한 입력이 변경될 때 위젯이 업데이트되도록 패널에 코드를 추가해야 합니다.

사용자 지정 패널에 코드를 추가하는 방법에 대한 자세한 도움말을 확인하세요.

패널 요소가 위젯과 상호 작용하고 에디터에서 작업을 수행할 수 있도록 하려면 코드에서 Velo wix-widget 모듈을 사용할 수 있습니다.

위젯 API를 사용하려면, wix-widget 모듈에서 wixWidget을 가져오세요.

onReady() 함수 앞에 다음 코드를 삽입합니다.

1import wixWidget from 'wix-widget';

값이 변경될 때 위젯을 업데이트하려면 onChange 이벤트를 등록해야 합니다. 또한, 일부 비동기 함수를 사용하게 되므로 onReady () 함수에 async 를 추가해야 합니다.

onReady() 함수는 다음과 같아야 합니다.

1$w.onReady(async function () { const { endDate, emailId } = await wixWidget.getProps(); $w('#endDateInput').value = endDate; $w('#emailIdInput').value = emailId; $w('#endDateInput').onChange(e => { wixWidget.setProps({ endDate: e.target.value }); }); $w('#emailIdInput').onChange(e => { wixWidget.setProps({ emailId: e.target.value }); }); });
코드를 확인하려면 실행run icon 또는 미리보기를 클릭합니다.

5 단계 | 위젯 구성하기

패널이 디자인되고 코딩되었으므로 이제 패널이 위젯의 액션바 버튼 중 하나에 연결되도록 위젯을 구성해야 합니다.

구성 탭에서는 사이트 제작자가 사이트에 위젯을 설치하고 사용자 지정할 때 위젯이 작동하는 방식을 제어할 수 있습니다. 사이트 제작자가 위젯의 기능을 명확하게 이해할 수 있도록 위젯 및 해당 요소의 표시 이름을 지정할 수 있습니다. 사이트 제작자가 위젯에서 요소를 선택할 때 에디터에 표시되는 플로팅 액션바를 변경할 수도 있습니다.

구성에 대한 자세한 도움말을 확인하세요.

위젯의 플로팅 액션바에 사용자 지정 패널 추가하기

  1. 상단 바에서 구성을 클릭합니다. 
  2. 카운트다운 위젯을 선택합니다. 플로팅 액션바가 나타납니다.
  3. 설정을 클릭합니다.
  4. 액션 버튼 설정settings icon을 클릭합니다. 주요 액션 설정 패널이 나타납니다.
  5. 드롭다운 목록에서 내 설정을 선택해 사용자 지정 패널을 선택합니다.

6 단계 | 두 번째 (내부) 위젯 추가 및 등록 로직 구현하기

템플릿에는 등록이라는 두 번째 위젯이 함께 제공됩니다. 해당 위젯은 위젯 및 디자인에서 찾을 수 있습니다. 

레이어를 클릭하면 세 가지 상태가 포함된 다중 상태 상자로 생성된 것을 확인할 수 있습니다. 여기에는 등록 버튼이 있으며, 사이트 방문자가 클릭하면 제출로 변경됩니다. 또한, 사이트 방문자가 이메일 주소를 추가할 수 있는 입력란이 있습니다. 사이트 방문자가 등록하면 감사 메시지가 표시됩니다.

또한, 이 위젯은 모바일 뷰에 사용할 수 있는 디자인 프리셋도 함께 제공됩니다.

디자인 프리셋에 대한 자세한 도움말을 확인하세요.

카운트다운 위젯에 등록 위젯 추가하기

이제 첫 번째 위젯인 카운트다운 위젯에 등록 위젯을 추가할 준비가 되었습니다. Blocks에서는 다양한 위젯을 생성하고 다른 위젯에 추가할 수 있습니다. 

위젯 내 위젯 활용에 대한 자세한 도움말을 확인하세요.
  1. 디자인 탭에서 카운트다운 위젯을 선택합니다.
  2. 추가 옵션more options을 클릭하고 위젯 추가를 선택합니다.
  3. 등록을 선택합니다. 내부 위젯은 카운트다운 위젯 중간에 표시됩니다.
  4. 카운트다운 위젯의 하단에 맞게 내부 위젯을 끌어다 늘립니다.
  5. 속성 및 이벤트propeties icon에서 해당 ID를 등록으로 변경합니다.
위젯을 추가하는 다른 방법
요소 추가add button 메뉴를 클릭해 내부 위젯을 추가할 수도 있습니다. 내 위젯을 선택한 후 첫 번째 위젯에 추가하고자 하는 위젯을 끌어다 놓습니다.

메인 위젯 코드에 등록 로직 구현하기

사전 설치 유틸리티인 contactUtils.js를 사용해 메인 (카운트다운) 위젯에서 사용자 등록을 위한 코드를 구현합니다. 이는 wix-crm API를 사용해 연락처를 컬렉션에 연결합니다.

이 코드는 정보를 컬렉션으로 전달합니다. 나중에 컬렉션을 생성할 때 사용할 유틸리티를 사용합니다. 코드에서 getSubscriptionsCollectionName()을 확인할 수 있습니다.

  1. 새로운 async 함수를 추가합니다.
  2. 이름은 onSubmit입니다. 이는 연락처 추가 유틸리티를 사용합니다.

코드는 다음과 같아야 합니다.

1 async function onSubmit({ email }) { const contact = await createContact(email); wixData.insert(getSubscriptionsCollectionName(), { endDate: new Date($widget.props.endDate), emailId: $widget.props.emailId, contactId: contact.contactId }); }
2

onSubmit 이벤트 등록하기

onReady()에서 updateTime() 함수 뒤에 다음 코드를 추가합니다.

1$w('#registration').onSubmit(onSubmit);
백엔드 코드가 이미 포함되어 있습니다.
백엔드 코드는 Blocks 템플릿에 이미 구현되어 있습니다. 여기에는 사전 설치된 유틸리티를 사용하는 내보내기 함수 notify()가 포함되어 있습니다. 이는 남은 시간을 확인하고, 준비가 되면 이메일을 트리거하고, 컬렉션을 업데이트합니다. 아래 10단계에 설명된 대로 에디터에서 호출해야 합니다.

7 단계 | 앱 제작 및 네임스페이스 지정하기

이제 처음으로 앱을 제작할 준비가 되었습니다. 첫 번째 빌드는 메이저 빌드입니다. 나중에 앱 작업 시 마이너 빌드 또는 메이저 빌드를 수행하도록 선택할 수 있습니다. 마이너 버전은 해당 마이너 버전이 표시되는 모든 사이트에 자동으로 업데이트됩니다. 페이지를 새로고침하기만 하면 됩니다. 메이저 빌드 수행 시 사이트 제작자는 수동으로 앱을 업데이트해야 합니다. 에디터의 사용 중인 앱 패널에서 앱 이름 옆에 점이 표시되어 사이트 제작자는 새로운 버전이 있음을 알 수 있습니다. 

Blocks 버전에 대한 자세한 도움말을 확인하세요.

처음으로 제작을 클릭하면 Blocks에서 앱에 네임스페이스를 지정하라는 메시지가 표시됩니다. 이 네임스페이스는 에디터의 Velo 코드 및 Blocks의 앱 코드에서 컬렉션을 참조하는 데 사용됩니다.

앱 네임스페이스에 대한 자세한 도움말을 확인하세요.

첫 번째 빌드

  1. 제작을 클릭합니다.
  2. 앱의 네임스페이스를 입력한 후 다음을 클릭합니다.
  3. 메이저 버전을 선택한 후 제작을 클릭합니다.
  4. 버전 1.0이 제작되었다는 메시지가 표시됩니다. 확인을 클릭해 앱 작업을 계속합니다.

8 단계 | 위젯에 컬렉션 추가하기

이제 모든 구독을 저장할 컬렉션을 생성해야 합니다. Blocks의 컬렉션은 Blocks에서 디자인하는 빈 플레이스홀더로, 사이트에 앱이 설치되면 데이터로 채워집니다. Blocks 컬렉션에 대한 자세한 도움말을 확인하세요.

템플릿에는 공개 및 백엔드 아래 collectionUtils.js에 getSubscriptionsCollectionName()라는 유틸리티가 사전 설치되어있습니다. 이는 컬렉션의 전체 이름을 생성하므로 코드에서 참조할 때마다 전체 앱 네임스페이스를 추가할 필요가 없습니다.

컬렉션 유틸리티 구성하기

  1. 공개 및 백엔드 아래에서 collectionUtils.js를 클릭합니다.
  2. 앱의 네임스페이스를 추가합니다.
코드는 다음과 같이 표시되어야 하며, 고유한 네임스페이스가 있어야 합니다.
1
2const NAMESPACE = '@mywixaccount/my-app-namespace'; export function getSubscriptionsCollectionName() { return `${NAMESPACE}/subscriptions`; }

컬렉션 추가하기

  1. 데이터베이스를 클릭합니다.
  2. + 컬렉션 추가를 클릭합니다.
  3. 컬렉션에 의미 있는 이름을 지정합니다. 이 예시에서는 구독입니다.
  4. 추가를 클릭합니다. 

컬렉션에 입력란 추가하기

  1. add button 아이콘을 클릭해 컬렉션에 입력란을 추가합니다.
  2. 입력란 유형 드롭다운 메뉴에서 날짜를 선택합니다.
  3. 입력란 이름 입력란에 endDate를 입력합니다. 이는 사람들이 등록할 수 있는 마지막 날짜가 됩니다.
  4. 저장을 클릭합니다.
  5. 이제 트리거된 이메일에 대해 텍스트 유형 입력란을 추가하고 이름을 emailId로 지정합니다.
  6. 다른 텍스트 유형 입력란을 추가하고 이름을 contactId로 지정합니다. 여기에는 등록된 사용자의 연락처 정보가 저장됩니다.
  7. 이제 부울 유형 입력란을 추가하고 이름을 notified로 지정합니다. 이를 통해 구독자에게 알림이 한 번만 발송됩니다.

컬렉션 권한 설정하기

모든 사이트 방문자가 구독을 통해 컬렉션에 콘텐츠를 추가하도록 할 수 있습니다. 

  1. 데이터베이스에서 컬렉션에 대한 추가 옵션more options icon을 클릭합니다.
  2. 권한 및 공개 설정을 선택합니다. 
  3. 콘텐츠 추가 가능 드롭다운 메뉴를 선택합니다.
  4. 누구나를 선택합니다.
  5. 저장을 클릭합니다.

9단계 | Wix 에디터에서 사이트에 앱 설치하기

모든 에디터에 위젯을 설치할 수 있습니다. 다음 예시에서는 Wix 에디터를 사용합니다. 앱을 설치하기 전, 앱을 두 번째로 제작해야 합니다. 이는 컬렉션이 추가되므로 메이저 버전 빌드가 됩니다.
  1. 앱을 제작한 후 사이트를 엽니다.
  2. 앱 추가add apps icon를 클릭합니다. . 
  3. 사용자 지정 앱을 클릭합니다. 모든 앱 목록이 표시됩니다.
  4. 사용 가능한 앱 목록에서 앱을 선택합니다.
  5. 앱 설치를 클릭합니다.
  6. 요소 추가add elements icon를 클릭합니다.
  7. 내 위젯을 선택합니다.
  8. 위젯을 두 번 클릭해 사이트에 추가합니다. 

위젯은 유동적이며 요소를 선택해 사이트에 맞게 위젯을 사용자 지정할 수 있습니다. 설정 패널에서 기본 종료일을 변경할 수도 있습니다. 

이메일 ID 설정하기

사용자는 이메일 알림을 등록할 수 있습니다. 위젯 API가 발송해야 하는 이메일을 식별할 수 있도록 발송할 이메일을 생성하고 ID를 가져와야 합니다.
  1. 상단 바의 사이트 메뉴에서 내 대시보드를 엽니다.
  2. 개발자 도구에서 트리거된 이메일로 이동합니다.
  3. 시작하기를 클릭합니다. 
  4. 제목을 입력합니다.
  5. 에디터 도구를 사용해 이메일을 디자인합니다.
  6. 저장 및 게시를 클릭합니다.
  7. 발신자 정보, 발신자 이름 , 회신 이메일을 추가한 후 저장을 클릭합니다.
  8. 닫기를 클릭합니다.
  9. 저장 및 게시를 다시 클릭합니다. 등록한 모든 사람에게 발송되도록 디자인한 이메일로 연결되는 식별 코드가 생성됩니다. 
  10. 사용자 지정 패널의 이메일 ID 입력란에 해당 코드를 입력합니다.

Wix 에디터에서 백엔드 코드를 사용해 구독자에게 알림 발송하기

Blocks 앱에는 백엔드 코드가 포함되어 있으나, 에디터에서 알림을 호출해야 합니다.

알림 함수 호출하기

  1. Wix 에디터의 공개 및 백엔드에서 백엔드 아래 + 웹 모듈 추가를 클릭합니다.
  2. 이름을 backend.jsw로 지정합니다.
  3. backend.jsw 아래의 사이트 코드 섹션에서 백엔드 함수를 가져옵니다.

코드는 다음과 같아야 합니다.

1import { notify } 'myWixId/my-application-name-backend';

이제 사이트의 코드 섹션에 있는 backend.jsw에 내보내기 함수 invokeNotify를 생성합니다.

코드는 다음과 같아야 합니다.

1export function invokeNotify() { return notify (); }
이제 예약 작업을 생성해야 합니다. 

  1. 백엔드에서 추가add icon를 클릭합니다.
  2. 예약 작업 추가settings icon를 클릭합니다. 사이트 코드 섹션의 jobs.config 아래에 다음 코드를 추가합니다. 이 예시에서 알림 함수는 매시 정각 10분에 호출됩니다.

코드는 다음과 같아야 합니다.
1{ "jobs": [{ "functionLocation": "/backend.jsw", "functionName": "invokeNotify", "description": "", "executionConfig": { "cronExpression": "10 * * * *" } }] }

10단계 | 앱 테스트하기

이제 앱을 테스트할 준비가 되었습니다. 

  1. 사이트를 게시합니다. 
  2. 등록 후 이메일 알림을 수신합니다. 
  3. 에디터로 돌아가 컬렉션을 확인합니다. 
  4. 새로운 구독자가 추가된 것을 확인할 수 있습니다. 알림 이메일이 발송되면 알림 발송 완료 입력란에도 체크 표시가 됩니다.
트리거된 이메일 확인하기
대시보드의 개발자 도구에서 트리거된 이메일을 확인해 이메일이 발송되었는지 확인할 수도 있습니다.

도움이 되었나요?

|

페이지 메뉴

  • 템플릿 포함 사항
  • 1 단계 | 위젯 디자인 완료하기
  • 2 단계 | 위젯의 API 속성 추가 및 정의하기
  • 위젯 요소에 ID 지정하기
  • 'endDate' 및 'emailId' 속성 정의하기
  • 3 단계 | 위젯이 작동하도록 코드 추가하기
  • 유틸리티 가져오기
  • 새 함수를 고려하도록 코드 변경하기
  • 위젯 미리보기 및 해당 API 속성 테스트
  • 4 단계 | 사용자 지정 패널 생성 및 코딩하기
  • 사용자 지정 패널 추가하기
  • 사용자 지정 패널에 코드 추가하기
  • 5 단계 | 위젯 구성하기
  • 위젯의 플로팅 액션바에 사용자 지정 패널 추가하기
  • 6 단계 | 두 번째 (내부) 위젯 추가 및 등록 로직 구현하기
  • 카운트다운 위젯에 등록 위젯 추가하기
  • 메인 위젯 코드에 등록 로직 구현하기
  • onSubmit 이벤트 등록하기
  • 7 단계 | 앱 제작 및 네임스페이스 지정하기
  • 첫 번째 빌드
  • 8 단계 | 위젯에 컬렉션 추가하기
  • 컬렉션 유틸리티 구성하기
  • 컬렉션 추가하기
  • 컬렉션에 입력란 추가하기
  • 컬렉션 권한 설정하기
  • 9단계 | Wix 에디터에서 사이트에 앱 설치하기
  • 이메일 ID 설정하기
  • Wix 에디터에서 백엔드 코드를 사용해 구독자에게 알림 발송하기
  • 알림 함수 호출하기
  • 10단계 | 앱 테스트하기