이 기사는 Wix의 지원을 받아 작성되었습니다. 실제 내용과 의견은 협찬을 받더라도 편집의 독립성을 유지하는 작성자의 단독 견해입니다.
웹사이트를 만들 때 개발자라면 DIY 접근 방식과 코드를 사용하고 모든 것을 직접 호스팅할 수 있습니다. 우리 대부분과 같은 최종 사용자/소비자라면 웹 빌더 소프트웨어를 사용하여 클릭 한 번으로 멋진 웹사이트를 만들 수 있습니다.
Wix는 몇 번의 마우스 클릭만으로 아름다운 무료 웹사이트를 만들 수 있는 웹 빌더이기 때문에 후자에 속합니다. 그러나 Wix 코드가 도입되면서 직접 수행하는 것과 웹 빌더를 사용하는 것 사이의 경계가 모호해졌습니다. 이제 둘 다 할 수 있습니다.
웹 앱이나 동적 웹사이트를 구축하는 경우 데이터베이스, 양식 및 자바스크립트와 같은 복잡한 기술 전문 용어를 사용하여 대화형 웹사이트를 구축해야 합니다. 대부분의 웹 빌더는 앱에 수많은 복잡성을 추가하기 때문에 이러한 도구를 제공하지 않습니다.
Wix Code는 복잡성 없이 기존 웹 구축 도구에 이러한 기능을 추가합니다. 데이터베이스, 양식을 구축 및 관리할 수 있는 여러 템플릿을 제공하며 사이트에 자바스크립트 코드를 추가할 수도 있습니다. 무엇보다도 동적 페이지 기능을 사용하여 데이터베이스의 콘텐츠를 빠르게 채울 수 있으므로 웹사이트 빌더가 아니라 콘텐츠 관리 시스템에 더 가깝습니다.
아래 예에서는 간단한 Make Tech Easier 블로그를 만들고 여기에 Wix Code의 동적 기능을 추가합니다.
Wix로 새 사이트 설정하기
Wix가 처음이라면 Wix에 계정을 등록하여 시작할 수 있습니다. 계정을 만들면 웹사이트를 만들라는 메시지가 표시됩니다.
다음으로 만들고자 하는 웹사이트 유형을 선택하라는 메시지가 표시됩니다. Make Tech Easier 블로그를 복제하고 있으므로 "Blog" 옵션을 선택했습니다.
다음 화면에서는 웹사이트를 어떻게 만들 것인지 묻습니다.
Wix ADI는 인공 지능을 사용하여 자동으로 사이트를 생성합니다. 수동으로 진행하려면 Wix 편집기 방법을 선택하세요. (Wix 코드에 액세스하려면 후자를 사용해야 합니다. Wix ADI를 선택한 경우 나중에 편집기 모드로 전환할 수 있습니다.)
이 예에서는 사이트의 모양과 느낌을 완전히 제어하고 싶었기 때문에 Wix 편집기를 사용했습니다. 거기에서 템플릿으로 시작할 수 있습니다. (수천 가지가 있습니다.)
간단하게 유지하기 위해 클래식 레이아웃의 빈 템플릿으로 시작했습니다. 다음 이미지는 어떻게 생겼는지입니다.
Wix 코드 액세스
Wix 코드에 액세스하려면 "도구"로 이동하여 "개발자 도구" 옵션을 선택하세요.
이제 새로운 "사이트 구조" 열이 표시됩니다. 여기에서 모든 Wix 코드 기능에 액세스할 수 있습니다.
게시물을 저장할 데이터베이스 만들기
Wix Code의 훌륭한 기능 중 하나는 데이터베이스(컬렉션이라고도 함)를 만들고 데이터를 저장할 수 있는 데이터베이스 기능입니다. 블로그의 경우 모든 게시물을 저장할 데이터베이스를 만들어야 합니다. 데이터베이스 섹션에서 "새 컬렉션 추가"를 클릭합니다. 컬렉션에 이름을 지정하고 목적을 지정합니다. 사용자 생성 콘텐츠, 회원 제출, 개인 데이터 등 선택할 수 있는 여러 데이터베이스 유형이 있습니다.
컬렉션이 생성되면 필드와 데이터를 컬렉션에 추가할 수 있습니다.
우리가 만든 것은 제목, 콘텐츠, 게시 날짜 및 블로그 게시물의 다양한 측면을 포함하는 게시물 데이터베이스입니다. 다음으로 기본 사이트에 데이터베이스 콘텐츠를 채워야 합니다.
동적 페이지
동적 페이지는 하나의 디자인을 만들어 데이터베이스에 연결할 수 있는 템플릿 페이지와 비슷하며 데이터베이스의 모든 항목을 자체 URL 아래의 첫 페이지에 자동으로 채웁니다. 예를 들어 데이터베이스에 6개의 게시물이 있습니다. 하나의 동적 페이지로 메인 사이트의 모든 게시물을 표시할 수 있습니다. 이렇게 하면 각 게시물에 대해 단일 페이지를 수동으로 생성하는 수고를 줄일 수 있습니다. Wix 코드에는 두 가지 주요 유형의 동적 페이지가 있습니다. 하나는 단일 항목을 표시하는 것이고 다른 하나는 카테고리(목록의 유사한 항목 모음)를 표시하는 것입니다.
다음은 동적 페이지를 만들고 사이트에 연결하는 방법을 보여줍니다.
1. 부동 도구 모음에서 첫 번째 아이콘을 클릭하고 "동적 페이지"를 선택합니다. "사이트에 추가" 버튼을 클릭합니다.
2. 팝업에서 "항목 페이지"를 선택합니다.
3. URL에서 URL에 사용할 필드(데이터베이스 내)를 선택합니다. 이 경우 "제목"을 URL로 설정했습니다.
4. 다음으로 페이지를 디자인하고 데이터베이스에서 필드를 추가합니다. 페이지로 드래그하는 모든 요소에서 "데이터에 연결" 버튼을 클릭하여 데이터베이스의 필드와 연결할 수 있습니다. 예를 들어, "헤더 1" 요소를 페이지로 드래그하여 게시물 데이터베이스의 "제목" 필드에 연결했습니다.
그리고 추천 이미지, 게시물 콘텐츠 등에 대해서도 동일한 작업을 수행했습니다.
5. 디자인이 완료되면 미리보기를 통해 전면에서 어떻게 보이는지 확인할 수 있습니다.
6. 다음 단계는 홈 페이지에서 동적 페이지를 연결하는 것입니다. 홈 페이지를 로드하고 "목록 및 그리드" 섹션에서 반복기 위젯을 추가합니다. 위젯을 Posts 데이터베이스에 연결하고 위젯의 각 요소를 데이터베이스의 필드와 연결합니다. "링크 연결 대상" 섹션에서 아래로 스크롤하여 동적 페이지 섹션에서 "게시물"을 선택합니다.
그게 다야.
볼 수 있는 것은 동적 페이지가 하나만 생성되었으며 데이터베이스의 각 항목에 대한 모든 페이지가 자동으로 생성된다는 것입니다. 카테고리 동적 페이지도 추가할 수 있습니다.
페이지에 자바스크립트 추가
자바스크립트에 정통한 코더라면 각 페이지의 각 추가 기능에 자바스크립트를 추가할 수 있습니다. 예를 들어 페이지에 사용자 양식을 추가한 경우 제출하기 전에 javascript를 사용하여 양식 필드의 유효성을 검사할 수 있습니다.
참고 :페이지에 자바스크립트 코드를 추가하려면 아무 페이지(또는 코드를 표시하려는 페이지)로 이동한 다음 코드 하단의 "페이지 코드" 버튼을 클릭합니다. 창이 나타나면 거기에 코드를 추가할 수 있습니다.
1. 사용자로부터 이름, 성 및 이메일 주소를 수집하는 간단한 양식을 만들었습니다. 이 양식의 경우 이메일 주소를 확인하고 "이메일 확인" 필드가 "이메일" 필드와 동일한지 확인합니다.
2. "페이지 코드" 섹션에 다음 코드를 추가합니다.
$w.onReady(function () {
const validateEmail = (otherEmailElementId) => (value, reject) => {
let otherEmailElement = $w(otherEmailElementId);
if (value === otherEmailElement.value) {
otherEmailElement.validity.valid = true;
otherEmailElement.resetValidityIndication();
return;
}
console.log("Email and Confirm Your Email fields do not match");
otherEmailElement.validity.valid = false;
otherEmailElement.updateValidityIndication();
reject("Email and Confirm Email fields do not match");
};
$w("#emailConfirmInput").onCustomValidation(validateEmail("#emailInput"));
$w("#emailInput").onCustomValidation(validateEmail("#emailConfirmInput"));
$w('#dataset1').onBeforeSave(() => {
let validationMessage = '';
if (!$w('#emailInput').valid) {
if (!$w('#emailInput').value)
validationMessage += 'Please enter an email address\n';
else if ($w('#emailInput').value !== $w("#emailConfirmInput").value) {
validationMessage += 'Email and Confirm Email fields do not match\n';
}
$w('#validationMessages').text = validationMessage;
$w('#validationMessages').expand();
}
else
$w('#validationMessages').collapse();
});
}); 이렇게 하면 이메일 주소가 확인되고 이메일이 유효하지 않은 경우 오류 메시지가 표시됩니다.
자바스크립트로 할 수 있는 일은 많습니다. 자세한 내용은 여기에서 예시를 확인하세요.
외부 API
이것은 더 복잡해질 수 있는 유일한 단계입니다. Wix Code는 이제 외부 API와 통합되어 Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier 등과 같은 타사 서비스에 쉽게 연결할 수 있습니다. 여기에서 자세히 설명하지 않겠지만 관심이 있는 경우 API 문서를 확인할 수 있습니다.
결론
기술적으로 정통하지 않거나 개발자가 아닌 경우 자신의 웹 사이트를 구축하는 것은 지루한 작업이 될 수 있습니다. Wix는 웹사이트 제작을 쉽게 만드는 일을 훌륭하게 해냈습니다. Wix Code를 사용하면 한 단계 더 나아가 사이트를 충분히 제어할 수 있습니다. 이제 복잡한 웹 개발자 도구에 액세스하고 사이트 작동 방식을 완벽하게 제어할 수 있으며 코딩 경험이 없어도 간단한 클릭, 드래그 앤 드롭으로 모든 작업이 완료됩니다.
많은 문제를 해결할 수 있는 사용하기 쉬운 도구를 만든 Wix에 감사드립니다.
Wix 코드를 사용해 보고 어떻게 생각하는지 알려주세요.
Wix 코드