초기 스타트업의 경우, 항상 리소스가 부족합니다. 그래서 디자인이나 개발 리소스를 제품에만 집중 시키기 위해서 제품 외에는 “노코드 툴”을 이용하는 것이 효율적인 경우가 많습니다. 제품도 자주 바뀌기 때문에, 제품 가이드나 홈페이지 등도 지속적인 변화를 따라가기 위해 최대한 가볍게 만드는 것이 좋습니다.

저희 팀에서 하드코딩 대신에 노코드 툴인 윅스를 초기에 도입한 것도 개발 리소스를 들이지 않기 위함입니다. 저희 팀이 홈페이지를 전문적으로 혹은 많이 만들어 보진 않아서 다양한 툴을 비교하진 못했지만, 윅스 유저로서 솔직한 홈페이지 제작 및 운영기를 남겨보려고 합니다.

*현재는 프레이머(Framer)로 제작하고 있으나, 이전 홈페이지는 윅스로 제작했던 경험을 바탕으로 작성된 리뷰입니다. Framer에 대한 리뷰도 추가로 작성하여 공유드릴 수 있도록 하겠습니다.

[목차]

1. 윅스로 홈페이지를 제작하는 방법

2. 딥블루닷 팀에서 윅스를 활용해 홈페이지를 제작한 방법

3. 윅스로 홈페이지 운영 및 관리하는 법

4. 윅스 요금제

1. 윅스로 홈페이지를 제작하는 방법

윅스로 홈페이지를 제작하는 방법은 크게 2가지가 있습니다.

어떤 홈페이지를 제작하고 싶은지 초기 설정을 몇 가지 한 후, 1)템플릿을 선택하거나, 2) 맞춤형으로 추천된 디자인을 선택하면 기본적인 홈페이지 디자인이 만들어집니다.

초기 설정을 할 때, 어떤 종류의 웹 사이트를 제작하는지를 물어봅니다. 산업이나 형태에 따라서 추천되는 디자인이 달라집니다.

채팅, 이벤트 등록, 블로그, 입력폼 등 필요한 기능을 선택해 홈페이지 초기 설정에 추가할 수도 있습니다.

초기 설정으로 산업, 서비스 명, 필요한 기능을 선택하면 디자인을 어떤 방식으로 생성할지 선택해야 합니다.

1)템플릿 선택 (Begin with a template)

컨설팅, 서비스, 테크, 여행 등 산업에 따라 수백 개의 템플릿 라이브러리가 있어서, 마음에 드는 템플릿 한 가지를 선택하면 됩니다.

이제 에디터 모드에서 추가로 엘리먼트 등을 편집한 후에 Publish를 하면 완성입니다.

2) 맞춤형 추천 디자인 사용 (Get a custom-built site)

6가지 테마 중 하나를 선택합니다. 선택한 테마에 맞춰서 디자인을 자동 생성해 보여줍니다.

추천된 디자인 3개 중 한 개를 선택하세요.

마지막으로 필요한 페이지를 선택해 추가합니다.

이제 에디터 모드에서 추가로 엘리먼트 등을 편집한 후에 Publish를 하면 완성입니다.

[에디터 모드]

에디터 모드에서는 폰트, 컬러, 기타 엘리먼트, 페이지 등 모든 요소를 편집할 수 있습니다.

폰트는 기본 폰트 외에 추가로 TTF, WOFF, WOFF2로 업로드가 가능하고, 저희 팀에서는 위 이미지와 같이 Inter 폰트를 추가해서 사용했습니다.

텍스트나 배경 등 컬러 또한 Hex 값으로 커스텀이 가능해서, 저희 팀에서 포인트 컬러로 쓰는 #2D50F9 등을 추가해서 브랜드 컬러에 맞춰서 작업했습니다.

2. 딥블루닷 팀에서 윅스를 활용해 홈페이지를 제작한 방법

한편 저희 딥블루닷 팀에서는 조금 다른 방법으로 윅스를 활용해 홈페이지를 제작했습니다.

기존 템플릿이나 윅스의 추천 디자인이 아닌, 피그마로 디자인 작업을 먼저 진행한 후, 이를 윅스로 빌드했습니다.

먼저 윅스 템플릿을 다 걷어내고 scratch 상태로 만든 후 작업을 시작했습니다. 빈 화면에서 필요한 엘리먼트를 추가해가는 식으로 만들었습니다.

Tools에서 Toolbar를 활용하면 엘리먼트별로 Size(px) Width, Height, 그리고 Position X, Y 좌표 또한 픽셀 단위로 설정할 수 있어서, 미세한 디자인 설정이 가능합니다. 이러한 에디터 기능을 활용해, 피그마 디자인을 pixel perfect하게 구현할 수 있었습니다.

[윅스 에디터의 Page Width 관련]

윅스의 Page Width는 980px로 고정돼 있어서, 이에 맞춰 디자인을 하면 좋습니다.

980px 내부의 영역은 vital content로 사용자 환경에 맞춰 반응형으로 다 노출이 되지만, 980px 바깥의 영역은 화면 사이즈가 작은 경우 잘릴 수가 있습니다.

3. 윅스로 홈페이지 운영 및 관리하는 법

윅스에는 다양한 Add-on이 있어서, 결제 및 마케팅, 채팅, 블로그 운영 등 필요한 기능을 홈페이지에 붙여서 사용할 수 있습니다. App Market에서 필요한 App을 선택해서 추가하면 됩니다.

기본적으로 간단한 애널리틱스와 리포트 기능을 제공하기 때문에 트래픽 오버뷰를 제공하고 있습니다.

*위 이미지 예시는 임의로 설정된 데이터입니다.

또한, Settings에서 Custom Code로 가면, 구글 애널리틱스나 구글 태그 매니저, 믹스패널 등과 같은 애널리틱스 툴이나, 인터콤, 채널톡 같은 서비스의 코드 스니펫을 헤더 혹은 바디에 넣을 수 있도록 제공하고 있습니다.

블로그 또한 SEO 도구와 함께 관리하거나, 여러 언어로 다르게 발행해서 Multilingual 블로그로 관리하기 간편한 점이 매력적입니다.

윅스로 홈페이지 제작할 때, “속도가 느리다”는 경험에도 불구하고, 이처럼 방대한 기능을 제공하고 있어서 원툴로 이용하기에 부족함이 없었습니다.

G2에서 Wix가 Website Builder 영역에서 최상위권으로 분류되는 만큼, 업계에서 인정받고 있는 웹 빌더고, 그 명성에 걸맞는 툴이라고 경험했습니다.

다만, 홈페이지를 빠르게 제작하는 관점에서 봤을 때는, 더 가볍고 빠르게 block을 추가해 홈페이지를 만드는 Softr와 같은 툴들도 있습니다. 빠른 MVP 제작이 목표라면 다른 툴이 더 나을 수도 있을 것 같습니다.

4. 윅스 요금제

마지막으로 윅스의 요금제가 어느 정도 수준인지 보겠습니다.

저희 팀에서는 윅스 Premium Plan 중 Combo 플랜으로 $12.75/월 결제하고 있어서, 상당히 저렴한 가격에 잘 이용하고 있습니다.

무료 버전에서는 윅스 광고가 붙고, 원하는 도메인으로 연결할 수 없습니다. 따라서 무료 버전으로 홈페이지를 운영하는 것은 어려워 보입니다. 무료 버전은 Test용 정도로만 이용이 가능하고, 그 다음으로 가장 저렴한 플랜이 도메인만 연결하는 경우인데, 이 경우에도 윅스 광고가 붙기 때문에 Combo Plan을 이용하는 것이 좋을 것 같습니다.

유료 플랜에서는 월간, 연간, 2년 단위로 결제를 할 수 있고, 월간 결제를 하는 경우 월 12불로 가장 비쌉니다.

마무리

윅스는 빠른 MVP 제작에 가장 적합하지 않은 툴일 수도 있습니다. 하지만 방대한 디자인 라이브러리, 다양한 기능을 제공하기 때문에 원하는 형태의 홈페이지를 쉽고 빠르게 제작할 수 있는 노코드 툴입니다.

저희 팀에서는 초기 스타트업에서 부족한 개발 리소스를 보완하기 위해 윅스를 활용했고, 현재 블로그, 애널리틱스 기능을 주로 이용하면서 부족함은 크게 없다고 느꼈습니다.