본 글은 Wix의 후원으로 작성된 스폰서 아티클입니다. 실제 내용과 의견은 후원 여부와 관계없이 편집 독립성을 유지하는 저자 본인의 것입니다.
웹사이트를 만드는 방법은 크게 두 가지입니다. 개발자라면 DIY 방식으로 직접 코드를 작성하고 호스팅까지 모두 스스로 처리할 수 있죠. 하지만 우리 대부분처럼 일반 사용자라면 웹 빌더 도구를 활용해 클릭 몇 번만으로 아름다운 웹사이트를 만드는 것이 현실적입니다.
Wix는 후자에 속하는 서비스로, 마우스 클릭 몇 번으로 무료의 세련된 웹사이트를 만들 수 있는 웹 빌더입니다. 그런데 Wix 코드(Wix Code)가 등장하면서 직접 개발하는 방식과 웹 빌더를 사용하는 방식 사이의 경계가 흐려지기 시작했습니다. 이제 두 가지 방식을 동시에 누릴 수 있게 된 것입니다.
웹 앱이나 다이내믹 웹사이트를 만들려면 데이터베이스, 폼, 자바스크립트 같은 복잡한 기술 요소를 다뤄야 인터랙티브한 사이트를 구축할 수 있습니다. 대부분의 웹 빌더는 이런 기능이 애플리케이션을 크게 복잡하게 만든다며 제공하지 않습니다.
반면 Wix 코드는 기존 웹 빌딩 도구에 이러한 기능을 복잡함 없이 추가합니다. 데이터베이스와 폼을 만들고 관리할 수 있는 다양한 템플릿을 제공하며, 사이트에 자바스크립트 코드를 삽입할 수도 있습니다. 무엇보다 다이내믹 페이지(Dynamic Pages) 기능을 활용하면 데이터베이스의 콘텐츠를 손쉽게 화면에 출력할 수 있어, 단순한 웹사이트 빌더라기보다 하나의 콘텐츠 관리 시스템(CMS)에 가까운 느낌을 줍니다.
아래 예제에서는 간단한 Make Tech Easier 블로그를 만들고, Wix 코드로 다이내믹한 기능들을 추가해 보겠습니다.
Wix로 새 사이트 세팅하기
Wix를 처음 사용한다면 먼저 계정에 가입하세요. 계정 생성이 완료되면 웹사이트를 만들라는 안내 화면이 나타납니다.
다음으로 어떤 종류의 웹사이트를 만들지 선택해야 합니다. 저는 Make Tech Easier 블로그를 재현할 예정이었기 때문에 "블로그" 옵션을 선택했습니다.
그다음 화면에서는 웹사이트를 만드는 방식을 고르게 됩니다.
Wix ADI는 인공지능을 활용해 사이트를 자동으로 생성해 주는 기능입니다. 직접 만드는 것을 선호한다면 Wix 에디터 방식을 선택하세요. (참고로 Wix 코드에 접근하려면 에디터 방식을 사용해야 합니다. Wix ADI로 시작했다 해도 나중에 에디터 모드로 전환할 수 있습니다.)
이번 예제에서는 사이트의 디자인과 느낌을 완전히 통제하고 싶어서 Wix 에디터를 사용했습니다. 에디터에서는 수천 가지에 달하는 템플릿 중 하나로 시작할 수 있습니다.
간단하게 진행하기 위해 저는 클래식한 레이아웃의 빈 템플릿으로 시작했습니다. 아래 이미지가 바로 그 결과물입니다.
Wix 코드 접근하기
Wix 코드에 접근하려면 상단 메뉴에서 "도구(Tools)"로 이동한 뒤 "개발자 도구(Developer Tools)" 옵션에 체크하세요.
그러면 새로운 "사이트 구조(Site Structure)" 패널이 나타납니다. Wix 코드의 모든 기능은 이곳에서 접근할 수 있습니다.
포스트를 저장할 데이터베이스 만들기
Wix 코드의 강력한 기능 중 하나는 데이터베이스(컬렉션이라고도 함)를 생성하고 데이터를 저장할 수 있는 데이터베이스 기능입니다. 블로그를 운영하려면 모든 포스트를 저장할 데이터베이스가 필요합니다. 데이터베이스 섹션에서 "새 컬렉션 추가"를 클릭하고, 컬렉션 이름과 용도를 지정하세요. 사용자 생성 콘텐츠, 회원 제출, 비공개 데이터 등 선택할 수 있는 데이터베이스 유형이 다양합니다.
컬렉션이 생성되면 필드와 데이터를 추가할 수 있습니다.
여기서 우리가 만든 것은 블로그 포스트의 제목, 내용, 발행일 등 다양한 정보를 담은 Posts 데이터베이스입니다. 이제 이 데이터베이스의 내용을 메인 사이트에 출력해야 합니다.
다이내믹 페이지
다이내믹 페이지는 하나의 디자인을 만들어 데이터베이스와 연결해 두면, 데이터베이스의 모든 항목이 각자의 URL을 가진 페이지로 자동 생성되는 일종의 템플릿 페이지입니다. 예를 들어 데이터베이스에 포스트가 6개 있다면, 다이내믹 페이지 하나만으로 메인 사이트에 모든 포스트를 표시할 수 있습니다. 포스트마다 일일이 페이지를 만드는 수고를 덜어주는 것이죠. Wix 코드에는 두 가지 유형의 다이내믹 페이지가 있는데, 하나는 개별 항목을 표시하는 용도이고 다른 하나는 카테고리(유사 항목들의 목록)용입니다.
아래에서 다이내믹 페이지를 만들고 사이트에 연결하는 방법을 살펴보겠습니다.
1. 플로팅 툴바에서 첫 번째 아이콘을 클릭하고 "다이내믹 페이지"를 선택한 뒤 "사이트에 추가" 버튼을 누릅니다.
2. 팝업 창에서 "항목 페이지(Item Page)"를 선택합니다.
3. URL 설정에서 URL로 사용할 데이터베이스의 필드를 선택합니다. 여기서는 "title" 필드를 URL로 지정했습니다.
4. 이제 페이지를 디자인하며 데이터베이스의 필드를 배치합니다. 페이지로 드래그한 요소마다 "데이터 연결" 버튼을 클릭해 데이터베이스의 필드와 연결할 수 있습니다. 예를 들어 "헤더 1" 요소를 드래그한 뒤 Posts 데이터베이스의 "Title" 필드에 연결했습니다.
대표 이미지나 포스트 본문 등도 같은 방식으로 연결했습니다.
5. 디자인이 끝나면 미리보기를 통해 프런트엔드에서 어떻게 보이는지 확인할 수 있습니다.
6. 다음 단계는 홈페이지에서 다이내믹 페이지로 연결하는 것입니다. 홈페이지를 불러온 뒤 "리스트 및 그리드" 섹션에서 리피터(Repeater) 위젯을 추가하세요. 이 위젯을 Posts 데이터베이스에 연결하고, 위젯 내 각 요소를 데이터베이스 필드와 링크합니다. "링크 연결 대상" 섹션에서 아래로 스크롤하여 다이내믹 페이지 목록에서 "Posts"를 선택하면 됩니다.
이것으로 완성입니다.
결과적으로 우리는 다이내믹 페이지를 단 한 개만 만들었는데, 데이터베이스의 모든 항목에 대한 페이지가 자동으로 생성됩니다. 같은 방법으로 카테고리용 다이내믹 페이지도 추가할 수 있습니다.
페이지에 자바스크립트 추가하기
자바스크립트에 능숙하다면 각 페이지에 원하는 기능을 코드로 추가할 수 있습니다. 예를 들어 페이지에 사용자 입력 폼을 넣었다면, 제출 전에 폼 필드를 검증하는 자바스크립트를 활용할 수 있죠.
참고: 페이지에 자바스크립트 코드를 추가하려면 해당 페이지로 이동한 뒤 하단의 "페이지 코드(Page Code)" 버튼을 클릭하세요. 창이 열리면 거기에 코드를 입력하면 됩니다.
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 코드는 외부 API와 연동되므로 Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier 같은 타사 서비스에 손쉽게 연결할 수 있습니다. 여기서 자세히 다루지는 않겠지만, 관심이 있다면 API 문서를 확인해 보시길 권합니다.
마치며
기술에 익숙하지 않거나 개발자가 아니라면 직접 웹사이트를 만드는 일은 지루하고 어려운 작업일 수 있습니다. Wix는 웹사이트 제작을 정말 쉽게 만들어 주는 데 성공했으며, Wix 코드는 한 걸음 더 나아가 사이트에 대한 강력한 제어권을 사용자에게 제공합니다. 이제 복잡한 웹 개발 도구와 사이트 동작 방식에 대한 완전한 통제권을, 코딩 경험 없이도 클릭과 드래그 앤 드롭만으로 누릴 수 있습니다.
이렇게 사용하기 쉬우면서도 많은 문제를 해결해 주는 도구를 만든 Wix에게 박수를 보냅니다.
직접 Wix 코드를 사용해 보고, 어떤 생각이 드셨는지 알려주세요.
Wix 코드