랜딩페이지를 코딩 없이 만드는 노코드 빌더 완벽 비교 가이드
랜딩페이지를 만들 수 있는 국내외 주요 노코드 툴 8가지를 비교 분석해봅니다. (Notion, Typedream, Softr, Unbounce, Waveon, Imweb, Wix, Webflow) 어떤 툴이 내게 잘 맞을지 비교해보시고, 적합한 툴을 시행착오 없이 정해보세요.
왜 랜딩페이지를 만들 줄 알아야 하는가?
랜딩페이지는 주로 1페이지로 된 간단한 웹페이지를 말합니다. 서비스나 이벤트 등을 알리는 내용으로 구성하고, 구매/사전 예약/신청과 같은 전환(Conversion)을 시킬 수 있는 버튼을 넣는 게 일반적 입니다.
랜딩페이지는 디지털 기반의 비즈니스를 운영하는 개인이나 회사에게 정말 유용한 실행 전략입니다. 창업가나 신사업 개발자는 서비스 기획 단계에서 랜딩페이지만으로 서비스를 설명하고 잠재 고객의 사전 예약을 받아, 내 서비스 아이디어가 사람들이 좋아하는지 테스트 해 볼 수 있습니다. 마케터는 목표 지표를 달성하기 위한 광고나 마케팅 활동을 수행할 때, 목적지 링크로 랜딩페이지를 만들기도 합니다.
랜딩페이지는 이처럼 디지털 기반의 사업이나 서비스를 운영하는 경우 고객 접점에서 다양하게 활용됩니다. 디지털 기반 사업이 아니더라도, 디지털을 통해서 내 고객을 모으는 것은 모든 마케팅의 필수불가결한 활동이 되고 있기 때문에 누구나 고객 접점에 있는 분들은 랜딩페이지를 활용할 줄 알아야 합니다.
누구나 노코드를 통해 랜딩페이지를 만들 수 있다
랜딩페이지는 앞서 말한대로 내 타겟 고객에 대한 깊은 이해를 해나가는 가장 저렴하면서도 빠른 수단이고, 신사업 담당자가 아니더라도 다양하게 활용할 수 있는 가성비 좋은 마케팅 수단입니다.
지금까지는 간단한 랜딩페이지를 만들기 위해서 기획자, 디자이너, 퍼블리셔가 붙어서 웹페이지를 만들고 배포해야했습니다. 그렇기 때문에 시도 자체가 어려웠고 빠르게 바꿔가며 다양한 시도를 하기란 더더욱 어려웠습니다. 그러나 이제 노코드(No-code) 덕분에 이 유용한 랜딩페이지를 누구나 쉽게 만들 수 있습니다.
또한 노코드를 배우고자 하는 사람 입장에서도 랜딩페이지는 노코드를 입문하기 가장 쉬운 수단입니다. 복잡한 데이터베이스, 로직 구현 같은걸 하지 않아도 마치 PPT 만들 듯이 랜딩페이지는 만들 수 있기 때문입니다. 랜딩페이지에서 시작해서 복잡한 웹서비스를 만들어 나가는게 노코드 학습의 측면에서도 효과적이고, 비즈니스를 만들어가는 관점에서도 좋은 전략입니다.
"업무적 활용도는 매우 높지만, 배우기는 무척 쉽다." 랜딩페이지를 코딩 없이 노코드로 만드는 방법은 알아두지 않으면 손해겠죠?
랜딩페이지를 만드는 다양한 노코드 툴 비교 분석
활용도는 높고, 만들고자 하는 사람들도 많고, 메이커들의 니즈나 배경지식 역시 다양하기 때문에 간단한 랜딩페이지를 만들 수 있는 빌더들은 시장에 엄청 많이 나와있습니다. 노코드 웹 빌더 생태계에서 가장 치열한 경쟁이 벌어지고 있는 영역도 바로 이 간단한 웹사이트 빌더라고 하겠습니다. 그러나 지배적인 플레이어는 없는 상황입니다.
그래서 노코드 입문자 분들이 어떤 툴로 시작하면 좋을지 선택을 어려워하고, 탐색하는데 시간을 많이 쓰시게 됩니다. 그러한 시행착오를 최소화 해드리기 위해 간단한 랜딩페이지, 조금 더 나아가서 간단한 홈페이지 정도를 만들 수 있는 노코드 웹 빌더를 정리해서 알려 드리겠습니다.
이 글을 통해서는 국내외 노코드 웹 빌더를 망라해서 총 8개 툴을 소개하려고 합니다. 더 다양한 툴이 많지만 노코드 커뮤니티에서 많은 사람들이 지지하고 있는 대세 툴 위주로 제가 써보고 느낀 바를 주관적으로 정리했습니다.
소개드릴 툴은 노션(Notion), 타입드림(Typedream), 소프터(Softr), 언바운스(Unbounce), 웨이브온(Waveon), 아임웹(Imweb), 윅스(Wix), 웹플로우(Webflow) 이렇게 총 8개 툴입니다. 난이도와 디자인 자유도를 가지고 이 노코드 웹 빌더들을 분류하면 아래와 같습니다.
대체적으로 배우기 쉬울 수록 자유도가 낮고, 배우기 어려울 수록 자유도가 높습니다. 그러나 단순히 이 기준으로만 8개의 대단히 훌륭한 노코드 웹 빌더를 평가하기엔 충분치 않습니다. 각 빌더 들이 가지는 특징이나 고유한 기능들이 있으니 글을 읽어보시고 내게 적합한 툴을 선택해서 간단한 웹페이지를 만들어보시는 것을 추천합니다.
01. 노션 (Notion)
노션은 IT/스타트업 업계에서 가장 사랑받는 문서 작성 툴이자, 협업 툴입니다. 쉽게 배워서 매우 간단하게 예쁘게 여러 타입의 웹 문서를 만들 수 있고, PC/모바일에서 아름답게 공유할 수 있는 특징이 있습니다.
노션의 문서를 퍼블릭하게 웹으로 공유하면 그 자체가 하나의 웹사이트가 됩니다. 노션이 너무 쉬운 툴이고, 이미 대중화되어 있기 때문에 노션을 가지고 랜딩페이지를 만드는 사례가 많습니다. (노션으로 만든 랜딩페이지의 사례는 이 링크에서 다양하게 보실 수 있습니다.)
아래 그림처럼 노션으로 간단히 만들었지만 일반 웹사이트와 크게 달라 보이지 않고, 결과물도 충분히 예쁩니다. 그렇기 때문에 노코드 입문자이거나, 노션을 업무에 이미 활용하는 분은 노션으로 랜딩페이지를 만드는 것도 충분히 괜찮은 방법입니다.
노션의 공유 페이지가 웹사이트로 가지는 약점을 보완해주는 우피(oopy.io)의 존재도 노션의 활용도를 대폭 늘려줍니다. 우피는 노션의 도메인 주소를 내가 원하는대로 변경해주고, 간단한 CTA(Call to Action, 전환 유도) 버튼을 삽입할 수 있게 해주고, 최소한의 검색엔진 최적화(SEO, Search Engine Optimizaiton)를 시켜줍니다.
[노션(Notion)의 장점]
노션+우피를 사용하면 다른 어떤 툴보다 랜딩페이지를 쉽게 만들 수 있습니다. 프로그래밍 관련한 개념이 아무것도 없어도 가능합니다. 그리고 비용이 (거의) 안드는 것도 장점입니다.
[노션(Notion)의 단점]
반면에 노션+우피로 랜딩페이지를 만들면 1개의 버튼만 넣을 수 있습니다. 사이트 레이아웃이나 상세 요소 (버튼, 메뉴)의 디자인도 커스터마이징하기 어렵습니다. 디자인 적으로도 노션으로 만든 느낌이 딱 드는 것도 아쉽습니다.
또한 노션으로는 정적인 1페이지 웹사이트 이상으로 만드는 것은 사실상 불가능합니다. 구체적으로 말씀드리면, 사용자와의 상호작용 (좋아요, 댓글, 게시글 업로드) 구현도 안되고 (불가능하진 않지만 데이터베이스 조작에 제한이 타 툴 대비 큰 것이 사실입니다.), 상단에 네비게이션 메뉴를 두고 여러 페이지를 넘나들도록 만들기 어렵습니다.
02. 타입드림 (Typedream)
타입드림은 노션의 글쓰기 인터페이스의 쉽고 편리한 장점은 취하면서, 노션이 웹사이트 빌더로서 가지는 아쉬운 점을 보완한 영리한 노코드 웹 빌더입니다. 노션에서 안되는 레이아웃 구성이나, 상단 네비게이션 바, 다양한 버튼 삽입 등이 가능합니다.
결과물도 예시에서 보는 것처럼 상당히 아름답습니다. (결과물 링크1, 결과물 링크2) 노션에서 블록을 만들 때처럼 "/"만 치면 텍스트, 이미지, 버튼 등 원하는 요소를 선택해서 넣을 수 있고요. 노션처럼 드래그 앤 드랍해서 레이아웃을 배치하되, 좀 더 다양한 레이아웃을 만들 수 있게 컨테이너 기능을 지원합니다. 또 미리 제작해놓은 템플릿을 삽입할 수 있게 해서 디자이너가 아닌 사람도 꽤 멋진 결과물을 쉽게 뽑아낼 수 있습니다.
[타입드림(Typedream)의 장점]
노션에 익숙한 분이라면 쉽게 적응할 수 있는 제작 방식이 저는 훌륭하다고 생각합니다. 노션이 웹 빌더로서 가지는 아쉬운 점을 딱 긁어주는 느낌입니다. (여러 페이지로 사이트 구성 만들기, 간단한 CMS 적용하기, PC/모바일 최소한의 반응형 대응) 그리고 노코드 웹 빌더 치고 저렴한 월 $15 가격도 장점입니다.
[타입드림(Typedream)의 단점]
간단한 웹사이트 빌더에 포커스하고 있어서 그 이상의 웹서비스를 구현하는게 어렵습니다. 그래서 회원 가입이나 데이터베이스 업데이트 같은 기능적인 구현들은 안됩니다. 그만큼 현재는 선택과 집중을 잘하고 있다고 볼 수도 있겠네요.
그리고 초기 제품(2021년 하반기 출시)이라 템플릿 옵션이 아주 많지는 않고, 입력이 갑자기 안되는 버그(페이지 새로고침 하시면 정상화 되긴 합니다.)가 발생하기도 한다는 점도 아쉽습니다. 빠르게 제품이 개선되고 있어서 이 문제는 곧 해결되리라 생각합니다.
03. 소프터 (Softr)
소프터는 마치 레고를 조립하듯이 섹션 단위로 디자인을 만들어가는 노코드 웹 빌더입니다. 미리 만들어진 섹션 단위의 블록 중에서 마음에 드는 것을 선택하고, 상세 내용이나 디자인 옵션들을 커스터마이징 하는 방식으로 제작을 합니다.
저는 이 방식이 제작의 난이도를 낮추면서도 준수한 결과물을 뽑아내는 아주 탁월한 방법이라고 생각합니다. 일일이 요소를 PPT 만들듯이 배치하는게 아니라 프리셋된 블록에서 텍스트와 이미지만 바꿔 끼워넣는 방식이 랜딩페이지 개발의 속도를 매우 높이기 때문에 빠르게 결과물을 만들어서 테스트하고자 하는 신사업 담당자나 초기 창업팀에게 적합한 툴입니다.
또한 소프터의 블록은 단순히 정적인(static) 블록만 있는게 아니라, 데이터베이스와 연동되는 동적인(dynamic) 블록도 있어서 복잡한 웹사이트 구성도 가능합니다. 회원가입 / 데이터베이스 업데이트 같은 복잡한 기능 구현도 가능하고요. 이러한 복잡한 기능들은 연동되는 노코드 데이터베이스인 에어테이블(airtable)에 위임하고, 소프터 자체는 매우 쉽게 유지하는 설계 방식도 입문자에게 아주 효과적이라 생각합니다. 그래서 저도 제일 많이 활용했던 노코드 웹 빌더이며, 제 강의에서도 소프터를 활용해서 랜딩페이지를 만들고 있습니다. (결과물 링크1, 결과물 링크2, 결과물 링크3) 그래서 다소 편파적으로 소프터를 지지해 봅니다 ^^;;
[소프터(Softr)의 장점]
자세히 설명한대로 프리셋된 블록 단위로 디자인하는 제작 인터페이스가 훌륭하다고 생각합니다. 또한 별도의 플러그인이 없이도 회원 가입, 로직 구현, 데이터베이스 기능 등 복잡한 시나리오 처리가 가능한 것도 장점입니다. 구현할 수 있는 기능이 많은데 그에 비해서는 학습하는데 걸리는 시간이 짧은 편입니다.
또한 무료로 사용하는 사람에게 가장 넓은 범위의 기능을 제공하는 것도 장점입니다. 무료 사용자도 Google Analytics, Google Tag Manager를 설치해 방문 데이터를 분석할 수 있으며, 내가 원하는 커스텀 도메인 주소도 연결할 수 있습니다. 또한 데이터베이스의 레코드 숫자의 제한이 있을 뿐, 대부분의 블록이 무료 사용자도 사용 가능한 것도 좋습니다.
[소프터(Softr)의 단점]
프리셋된 블록 안에서만 디자인 수정이 가능한 것이 장점일 수도 있지만 더 자유롭고 예쁜 디자인을 원하는 사람에게는 단점일 수도 있습니다. 또한 기본적으로 다양한 디바이스 크기에 맞춰서 반응형 대응은 해주지만, 상세 커스터마이징이 어려운 것도 아쉽습니다.
04. 언바운스(Unbounce)
언바운스는 랜딩페이지를 테스트 목적으로 활용하는 신규 사업 담당자, 그로스 해커에 포커스된 노코드 제작 툴입니다. 자체적으로 데이터 분석 기능과 A/B 테스트 기능등 랜딩페이지의 데이터 분석 기능을 중요시 하는 팀이 유용하게 느낄 요소가 많습니다. 디자인하는 에디터도 꽤 심플하게 구성되어 있지만 PPT 만들 듯이 드래그 앤 드랍을 통해서 디자인하게 되어 있어서 꽤 자유로운 구성이 가능합니다.
[언바운드 (Unbounce)의 장점]
별도의 데이터 분석 툴 (Google Analytics, Mixpanel 등)을 설치하지 않더라도 방문자 데이터와 전환 목표 지표를 대시보드에서 볼 수 있다는게 편리합니다. 또한 A/B 테스트 기능을 이용해서 어느 쪽이 더 효과적으로 전환 목표를 달성하는가 테스트 해볼 수도 있습니다. 또한 팝업/상단 고정 배너처럼 전환 목표와 관련된 다양한 전환 유도도 실험해 볼 수 있는 점도 좋습니다. 툴 자체가 전환 목표를 극대화하고 데이터 기반 의사결정을 하는 그로스 해커 관점에서 설계되어 있습니다.
또한 디자인하는 에디터도 심플해서 쉽게 배울 수 있지만, 자유도는 소프터보다 있는 편입니다. 드래그 앤 드랍 방식이라 배치도 자유롭고, 다양한 디바이스 크기에 반응형으로 디자인하는 것도 많은 옵션을 주는 편입니다. (4번 이후의 웹 빌더들은 대체로 드래그 앤 드랍 방식이라 레이아웃이나 디자인 자유도가 3번 이전의 웹 빌더보다 높은 편입니다. 이런 자유도가 장점일 수도 있지만 제작하기 꽤 번거롭고, 디자이너가 아니면 결과물의 퀄리티가 떨어질 수도 있다는 점에서 단점일 수도 있습니다.)
[언바운스 (Unbounce)의 단점]
가장 큰 단점은 가격입니다. 가장 저렴한 플랜이 월 $90입니다. 언바운스의 데이터 관련 기능들 때문에 비싼 것이지만, 이 기능들 (대시보드, 팝업, 상단 고정 배너, A/B 테스트...)는 원한다면 다른 툴과 연동하는 방식으로 다른 노코드 웹 빌더에서도 구현 가능한 기능입니다. 따라서 이 가격을 지불하는게 저는 망설여지더라고요.
또한 디자인하는 에디터의 방식도 제 개인적으로는 포지셔닝이 애매한 느낌입니다. 더 쉽게 하려면 차라리 소프터의 방식이 더 쉽고, 더 잘하려면 윅스나 웹플로우가 디자인적으로 더 낫다는 생각이 듭니다. 이게 중용일수도 있고, 애매함일 수도 있는데 이건 개인의 선호에 따라 달라질 수 있다고 생각합니다. 다만 저에게는 애매함으로 다가왔습니다.
05. 웨이브온(Waveon)
간단한 웹 빌더 중에서는 가장 다양한 기능 구현이 가능하다는 특징이 있습니다. 클릭해서 웹페이지로 연결과 같은 단순한 로직 구현 뿐 아니라 버튼을 클릭 했을 때, GA 이벤트 트리거, 결제, 스프레드시트로 데이터 전송, SNS로 공유 등 다양한 기능을 동작할 수 있게 구현할 수 있다는 점이 인상적입니다. 심리테스트로 제작할 수 있을 만큼 웨이브온의 폼 기능도 강력합니다. 응용하면 다양한 시나리오의 웹사이트를 만들 수 있을 것 같습니다.
또한 국내 노코드 툴이라는 것도 주목할만 점입니다. 외국 노코드 툴은 고객 지원이 어렵고, 가이드를 영어로 봐야하는데 웨이브온은 국내 툴이라 고객 지원이나 가이드 문서가 다 한글로 되어 있습니다. 또한 초기 제품이라 대부분의 기능을 무료로 쓸 수 있게 현재(22년 10월)는 오픈되어 있습니다.
[웨이브온(Waveon)의 장점]
위에서 설명한대로 웨이브온은 로직 구현이 장점입니다. 클릭하거나 특정 조건이 충족됐을 때 (ex. 일정 시간이 지났을 때) 결제, 스프레드시트로 데이터 전송, GA 이벤트 트리거, 특정 영역으로 이동, 특정 페이지로 이동, SNS로 공유 등 다양한 기능 구현을 쉽게 붙일 수 있습니다. 국산 툴이니까 앞으로 한국 사용자들이 원하는 기능 구현이 더 쉬워지고 더 많이 붙을 것으로 예상되는 것도 고무적입니다.
또한 디자인 방식도 드래그 앤 드랍 방식으로 꽤 자유롭게 디자인 가능합니다. 사전에 제공하는 템플릿도 한국 스타일로 예쁜 옵션들이 있습니다. 아직 초기 제품이라 템플릿의 다양성은 부족하지만 한국 사용자분들이 적극적으로 피드백을 할 수 있는 점도 좋은 점이라 생각합니다. (K-노코드 화이팅입니다!)
[웨이브온(Waveon)의 단점]
디자인 에디터의 사용성이 다소 떨어지는 느낌입니다. 인터페이스가 타 툴보다는 직관적으로 이해되지 않고, 불편하다는 느낌을 받았습니다. 또 기본 템플릿이 모바일 크기로 되어 있는데요. 사이즈를 임의로 키울 수 있지만 모바일 중심이라는 느낌을 받았습니다. PC/모바일 사이즈에 맞게 반응형 디자인을 커스터마이징 하는게 불가능합니다. 아직까지는(22년 10월) PC로 접속하던, 모바일로 접속하던 일단 모바일 화면으로 띄워주는 방식의 페이지에만 적합한 툴로 보입니다.
또한 로직 기능이 고객 정보를 스프레드시트로 옮기는 것은 정말 편한데, 그 외의 기능들은 학습하는데 꽤 시간이 필요할 것으로 보입니다. 그래도 잠재 고객 정보 수집이나 결제 기능만큼은 어렵지 않게 되어 있어서 랜딩페이지 제작 툴로서는 충분할 것으로 보이나, 더 복잡한 기능 구현까지 지원하는 노코드 웹 빌더로 발전하기 위해서는 UX를 개편하거나 상세한 가이드가 필요해 보입니다.
06. 아임웹 (Imweb)
아임웹은 국산 노코드 웹 빌더로서 가장 눈에 띄는 플레이어입니다. 매우 쉽게 랜딩페이지, 홈페이지, 쇼핑몰을 만들 수 있는 노코드 웹 빌더입니다. 국산 툴이라 국내 PG 결제, 카카오/네이버 로그인, 카카오페이/네이버 페이 등 간편 결제 등의 국내 사용자들이 원하는 기능 구현이 잘 되어 있습니다. 국내 이커머스에 최적화되어 있는 다양한 기능과 플러그인을 특징으로 합니다.
랜딩페이지를 만드는 노코드 웹 빌더로서 준수합니다. 한국 스타일에 맞는 다양한 개체(위젯)과 섹션이 있어서 대체로 만족스러운 결과물이 나옵니다. 다만 국내 향 쇼핑몰/이커머스가 아닌 단순 랜딩페이지나 홈페이지 제작 툴로서는 특별히 차별화되는 포인트가 많지 않고 기능적으로 아쉬운 부분이 좀 있습니다.
[아임웹(Imweb)의 장점]
간편 로그인, 결제, 간편 결제, 게시판 등 한국 상황에 맞는 기능 구현이 가능합니다. 이게 간단한 것이지만 글로벌 노코드 툴은 이런 한국 맞춤형 기능 구현이 제한 사항이 많습니다. 특히 결제는 글로벌 노코드 툴이 자체적으로 기능 제공을 하지 않아서 페이플 등을 통해 번거롭게 구현해줘야 하는데, 아임웹은 PG 연동이 툴 자체적으로 제공되기 때문에 결제 기능 구현 만큼은 제일 편리합니다.
[아임웹(Imweb)의 단점]
쇼핑몰에 최적화되어 있는 기능과 플러그인들이어서 그 외의 웹서비스나 홈페이지 제작 툴로는 특장점이 없습니다. 디자인 커스터마이징이 필요하면 윅스나 웹플로우를, 복잡한 기능 구현이 필요하다면 소프터가 더 나은 대안이라고 생각합니다.
또한 외부 툴과의 연동이 어려운 것도 내 니즈에 맞춰서 다양한 기능을 개발하거나, 자동화를 하는데 큰 제약입니다. 글로벌 툴은 당연히 지원하는 zapier 등의 외부 자동화 툴과의 연동도 아임웹은 어렵습니다. 따라서 잠재 고객 정보를 스프레드시트에 적재한다던지, 알림을 준다던지 하는 기능 설계가 불가능합니다.
여담으로 네이버/카카오도 그렇고, 아임웹도 그렇고 자사가 제공하는 기능만 쓰도록 하는 폐쇄적인 정책이 아쉽습니다. 외부 툴과의 연동을 통해 훨씬 더 다양하게 활용할 수 있게 하고, 큰 클라우드 생태계 안에서 서로 연동되도록 하는게 기업이나 사용자 모두에게 더 좋은 방향이라고 생각합니다. 제가 모르는 전략적 판단이 있겠지만, 한국 IT 서비스들이 갈라파고스화 되는 방향으로 발전하기 보다는 글로벌 툴들과 경쟁/협력하는 담대한 결정을 해주길 기대합니다.
07. 윅스(Wix)
윅스는 방대한 기능을 제공하는 노코드 웹사이트 빌더입니다. 다양한 부가 기능을 제공하고, 높은 수준의 디자인 자유도를 제공합니다. 다른 노코드 웹 빌더에서 디자인적인 아쉬움을 느꼈다면 윅스가 좋은 대안이 될 것입니다.
[윅스(Wix)의 장점]
디자인의 높은 자유도가 가장 큰 장점입니다. 삽입할 수 있는 요소가 다양하고, 커스터마이징도 자유로운 편이라 원하는대로 디자인할 수 있습니다. 마치 PPT처럼 드래그 앤 드랍하는 방식이라 박스 모델로 디자인하는 웹플로우(Webflow)보다는 쉬우면서 다양한 디자인이 가능합니다. 다양한 디바이스 크기에 맞는 반응형 디자인 대응도 잘 되고, 템플릿 라이브러리가 잘 되어 있고, 온보딩할 때 니즈에 따라 추천도 잘 해줘서 디자이너가 없어도 전문가 같은 디자인을 만들기 좋습니다.
다른 웹 빌더 대비 기능적인 장점도 있습니다. 애드온 마켓플레이스가 형성되어 있어서 복잡한 기능도 애드온을 붙이는 방식으로 구현 가능하고, 자체적인 애널리틱스 리포트 기능이 있는 것도 편리합니다.
[윅스(Wix)의 단점]
웹플로우(Webflow)와 비교하면 완벽한 커스터마이징 제공이 안되는 것은 아쉽습니다. 고급 사용자는 웹플로우를 더 추천하고 싶습니다. 웹플로우가 디자인 자유도도 높고, 로그인/데이터베이스 업데이트 등의 기능 구현을 하기에도 더 편리하다는 인상을 받았습니다.
또한 높은 자유도는 그만큼 학습이 오래 걸리고, 디자인 작업을 하는데 시간이 오래 걸린다는 것도 의미합니다. 따라서 쉽게 만들고 싶은 분들께는 더 쉬운 다른 웹 빌더를 추천하고 싶습니다. 한국형 결제, 게시판 등이 필요한 분들은 아임웹이나 웨이브온 같은 국내 툴을 선택하셔야 할 것이고요.
08. 웹플로우(Webflow)
노코드로 웹사이트를 디자인한다는 점에서 끝판왕입니다. 노코드로 개발했는지 분간이 어려울 정도로 아름답고, 화려한 애니메이션이 적용된 웹사이트를 웹플로우를 이용하면 만들 수 있습니다. 제 사이트인 노코드캠프도 웹플로우(Webflow)로 만든 결과물입니다.
웹플로우로 랜딩페이지를 만들면 디자인적으로 제약 없이 원하는대로 만들 수 있습니다. 다만 박스 모델(Box Model)이라는 웹사이트 개발의 원칙을 그대로 따르면서 제작하도록 되어 있어서 학습하고 익숙해지는데 시간이 필요합니다. 이런 어려움을 완화하기 위해 마치 소프터처럼 미리 제작된 요소들을 삽입해서 수정하는 방식으로 랜딩페이지를 디자인할 수 있게 도와주는 flowbase와 같은 플러그인도 있습니다. 또한 웹플로우는 다른 제작자의 공개된 프로젝트를 복제(clone)해와서 내가 활용할 수 있게 해주는 생태계도 잘 갖춰져 있는데요. (Made in Webflow) 이런 방식으로 툴의 모든 기능을 잘 몰라도 일단 랜딩페이지를 만들 수도 있습니다.
[웹플로우(Webflow)의 장점]
디자인적으로 가장 뛰어난 노코드 웹 빌더입니다. 다양한 디바이스 크기에 따라 적합한 컨텐츠가 적합하게 보이도록 하는 반응형 대응이 완벽하게 됩니다. 코드를 짜지 않을 뿐이지 사실상 CSS의 개념이 다 들어가 있는 것이라서 웹 개발에서 가능한 것들은 모두 가능합니다. 그래서 약간은 프로그래밍적 개념이 있는 분이 더 쉽게 학습할 수 있습니다.
또한 컨텐츠에 최적화된 데이터베이스인 CMS 기능이 포함되어 있습니다. 그래서 블로그나 강의와 같은 컨텐츠 사이트 만들기에도 정말 좋습니다. 또 이러한 컨텐츠 사이트를 만드는데 좋은 점이 훌륭한 검색 엔진 최적화(SEO)입니다. 이러한 장점 때문에 랜딩페이지 뿐 아니라 블로그, 컨텐츠 사이트를 만들기에 적합한 툴입니다.
웹플로우가 대표 노코드 툴이기도 하고, 업력도 오래되어서 관련 생태계가 잘 형성되어 있는 것도 타 툴이 가지지 못한 장점입니다. 복제해서 쓸 수 있는 템플릿이나, 부가 기능을 추가할 수 있는 플러그인이 활성화되어 있어서 백지부터 만들지 않아도 되는 점도 장점입니다. 저 역시도 웹플로우는 빈 화면에서 처음부터 만들어가기 보다는 이러한 템플릿이나 플러그인을 사용하거나, 고수들의 요소를 차용하는 방식으로 만드는 편입니다.
[웹플로우(Webflow)의 단점]
자유도가 높은 만큼, 다른 툴에 비해서 어렵고 복잡하게 느끼기 쉽습니다. 기본적인 개념에 대해서 학습해야 합니다. (이러한 공식 학습 자료는 잘 갖춰져 있는 편이지만, 영어로 학습해야 합니다. → 한국어로 웹플로우를 배우고 싶다면, 제 강의도 한번 살펴봐주세요.)
또한 로직을 구현하고, 데이터베이스를 업데이트하고, 자동화하는 관점에서는 소프터(Softr)보다 약합니다. 가능은 하지만 좀 더 번거롭습니다.
한국형 기능 (간편 로그인, 간편 결제, 게시판...) 등도 웹플로우에서 구현이 어렵거나 매우 번거로워서 이런 기능이 필요하시면 아임웹이 더 낫습니다.
정리하면,
- 간단한 1페이지 랜딩페이지를 최대한 빠르고 저렴하게 만들래! → 노션(Notion)
- 노션은 너무 천편일률적이야. 디자인도 바꾸고, 버튼도 넣고, 페이지도 여러개 하고 싶지만 일단 쉬운거 하고 싶어! → 타입드림(Typedream)
- 쉽고 빠르게 디자인/배포하는게 중요해. 그리고 Google Analytics, 커스텀 도메인, 데이터베이스를 무료로 붙이고 싶어! → 소프터(Softr)
- 데이터 분석, A/B테스트 같은 그로스해킹스러운 시도를 해보고 싶어! → 언바운스 (Unbounce)
- 모바일 전용 랜딩페이지면 되고, 다양한 기능 구현을 시도해보고 싶고, 국산 툴이었으면 좋겠어! → 웨이브온(Waveon)
- 국내에 맞는 로그인/결제/게시판 기능이 필요해 → 아임웹(Imweb)
- 시간을 들여서라도 반응형 디자인으로 예쁜 웹사이트를 만들고 싶어. 근데 웹플로우가 어렵고 복잡해 → 윅스(Wix)
- 디자인에 공을 들여서 멋진 웹사이트 만들고 싶어. 검색엔진 최적화가 중요해. 비즈니스 로직 구현도 해보고 싶어 → 웹플로우 (Webflow)
이렇게 간단한 웹페이지/랜딩페이지/홈페이지를 만들 수 있는 노코드 툴을 정리해봤습니다. 이 툴들 중에 하나로 방대한 노코드 세계에 입문해보시는 건 어떨까요? 여러분들의 의견이 있으시다면 댓글로도 남겨주세요!