노코드 툴로 랜딩페이지 만들기

랜딩페이지를 노코드툴을 활용한 이유

이전 스타트업 경험에서 배운 것은, 랜딩페이지의 한 문장을 수정하려 할 때마다 개발팀의 복잡한 절차를 거쳐야 했다는 점이었다. 결국, 랜딩페이지는 6개월 혹은 1년에 한 번씩만 업데이트되는 정책이 시행되었고, 이는 시장과 고객의 빠른 변화에 발맞추는 마케팅 관점에서 많이 뒤처진 상태였다. 이러한 문제를 해결하기 위해, 나는 창업 시 랜딩페이지를 마케팅 도구로서 활용하고, 제품 개발 주기와 완전히 분리하고자 결심했다. 그 결과, 노코드 툴을 도입하기로 했다.

노코드 툴의 발전

최근 노코드 툴이 굉장히 많아지고 잘 돼있다는 소식을 듣고 검색을 했다. 검색을 했더니 굉장히 많은 노코드 툴이 나왔다. 

노코드 툴들

진입장벽이 조금 있더라도 개발한 것과 같은 품질의 노코드 툴을 선택하려고 했다. 결국 선택한 것은 Webflow다. 무료 버전으로 이것저것 테스트를 해 보았다. 

Webflow 장점

무료버전에도 불구하고 기능들은 대부분 사용할 수 있어서 충분한 서비스 경험을 쌓을 수 있었다. 가장 좋은 점은 랜딩페이지를 만들 수 있는 기본 레이아웃이 제공된다는 점이다. 이 레이아웃을 마우스로 드래그 앤 드롭하면 내가 만들고 싶은 랜딩페이지를 쉽게 만들 수 있다.

웹플로우 레이아웃 종류

웹 사이트 구조와, 손쉬운 커스텀 도메인 연결, 코드 레벨의 수정까지 가능한 Webflow는 개발자 출신인 내가 봐도 마우스로 개발을 하고 있다는 느낌이 들 정도였다. 또, 랜딩페이지의 경우 이미지나 동영상이 있는 경우가 많은데 Webflow를 활용하면 이러한 이미지나 동영상의 트래픽이 요금제에 포함되어 있어 인프라 비용이 별도로 나가지 않는 점이다. 

또한 서비스 튜토리얼이 잘되어 있고 커뮤니티와 포럼도 잘되어 있어서 대부분의 문제는 쉽게 찾을 수 있었다. 3일간의 테스트를 거친 뒤 프로젝트를 CMS요금제로 결제했다. 여기서 주의할 점은 요금제는 Site Plan과 Workspace Plan이 구분되어 있으니 신중히 선택해서 결제해야 한다. 아마 우리와 같은 작은 스타트업은 Site Plan만 결제하면 거의 모든 기능을 다 쓸 수 있을 것이다.

Webflow 단점

아주 쉽게 랜딩페이지를 만들 수 있겠다는 기대와는 달리 몇 가지 문제를 경험했다. 첫 번째는 한글 미지원이다. 텍스트의 경우 에디터에서 더블클릭하면 쉽게 변경할 수 있는데 여기서 한글을 입력하면 단어가 뒤로 붙여지고 삭제가 안 되는 사용할 수 없는 이슈가 발생한다. 심지어 오른쪽 기능 패널창에서도 문장이 길어지면 이런 오류가 발생한다. 그래서 텍스트가 보이는 모든 문장 글들을 메모장에 작성해서 복사 붙여 넣기를 했다. 

또한, 웹플로우를 통해 회사 블로그나 CMS(콘텐츠 관리 시스템)를 만들 수 있는데 여기에 들어가는 콘텐츠 들도 모두 위와 같은 이슈가 있었다. 그래서 원노트에 초안을 작성해서 붙여 넣기를 반복하고 수정할 때마다 이 과정을 반복했다.

Webflow 한글 오류

두 번째 문제는 SEO(검색 엔진 최적화)다. Webflow의 페이지는 손쉽게 SEO를 할 수 있어 보이지만 실제로는 그렇지 않았다. Robot.txt가 제대로 셋팅되지 않고 구글 인덱싱이 잘 되지 않아서 수차례 반복했다. 사이트를 퍼블리싱할 때 에러가 있더라도 사이트는 잘 퍼블리싱된다. 그러나 이 에러를 모두 수정하지 않으면 SEO가 작동이 잘 되지 않았다. 사이트가 잘 보이더라도 에러는 모두 수정해야 한다.

최종 결과

이런 과정들을 거친 뒤 랜딩페이지를 완성했다. 개발자의 도움 없이 도메인까지 셋팅하고 완성한 랜딩페이의 결과물은  셀리즈(Sellease) 세이프노티에 접속해서 확인할 수 있다.

아직도 Webflow의 모든 기능을 사용해보지 못했다.  Webflow 커뮤니티에 가면 다른 사람들이 만든 결과물을 적용하고 사용해 볼 수 있는데, 정말 멋진 사이트가 많다. Best Projects Websites | Free Examples & Designs - Webflow에 한번 접속해서 만들 수 있는 사이트를 확인해 보는 것도 좋다.