노코드 툴을 활용한 랜딩페이지 제작 후기(Softr, 독립 도메인 연결)

작년 말부터 올해까지 스타트업 생태계에 유행하고 있는 바람 중 하나가 바로 '노코드(No-code)'이다. 노코드, 노코드 툴이라고 부르는 이런 생산성 도구는 코딩을 하나도 모르는 일반인이 서비스에서 주어지는 템플릿과 에셋만으로도 꽤 그럴듯한 랜딩페이지나 프로토타입을 만들 수 있도록 도와준다.

 

랜딩페이지를 쉽게 만들어 주는 노코드 툴에는 Wix를 비롯하여 Softr, Webflow, Glide 등이 있으며, 국내에서 만들어진 노코드 툴도 웨이브온, 아임웹, 크리에이터링크 등 아주 다양하다. 각 노코드 툴마다 특색이 있기 때문에 노코드툴을 선택하기 전에 어떤 목적과 형태의 랜딩페이지 혹은 프로토타입을 만들 것인지 염두에 두고 꼼꼼하게 노코드툴을 비교해서 선택, 활용하시면 될 것 같다.

 

글쓴이도 연초부터 노코드 툴을 활용한 랜딩페이지/프로토타입 만들기 혹은 비즈니스와 관련한 핵심 가설 검증에 관심을 가지며 툴들을 살펴보다가 최근에서야 시간을 내서 노코드툴을 익히고 활용하기 위한 공부를 하고 있다. 예전에도 노코드 툴에 대해 간간히 공부하긴 했지만, 최근 들어 다시 노코드 툴을 공부하면서 이전과 비교하여 훨씬 더 쉬운 사용성과 풍부한 에셋들, 그리고 노코드툴과 연계할 수 있는 다양한 부가서비스들의 존재로 훨씬 효과적으로 MVP를 만들 수 있게 된 것 같다.

 

노코드 툴을 공부한 김에 미루고 미뤄왔던 '린스프린트' 랜딩페이지를 다시 제작해봤다. 이전의 랜딩페이지는 2020년 8월 독립하면서 워드프레스와 OceanWP 테마를 활용하여 만들었다. 당시에도 전문적인 코딩이나 디자인 지식이 하나도 없는 내가 그럴듯한 랜딩페이지를 만들 수 있게 됐다는 사실에 놀랐지만, 그 안에서 내가 원하는 레이아웃대로 작업하느라 애를 많이 먹었다. 그렇다보니 2021년에 한 번 일부 콘텐츠 업데이트 한 것을 제외하고는 3년 전 만들었던 그대로 회사 홈페이지를 운영했다.

 

하지만 회사 홈페이지란, 어떻게 보면 잠재고객이 가장 먼저 마주하는 첫인상이기 때문에 우선 홈페이지가 있어야 하고, 홈페이지가 있다면 디자인이 깔끔해야 하고 콘텐츠도 지속적으로 업데이트하는 모습을 보여줘야 한다. 그래야 우리 홈페이지를 처음 접속한 사람이 '이 회사는 현재도 왕성하게 활동하고 있는 회사구나'라는 믿음을 줄 수 있다고 본다.

 

그런데 기존의 워드프레스 기반의 홈페이지는 수정이 너무 어렵고, 너무 오랫동안 접속하지 않아서 사실 웹호스팅 ID/PW도 가물가물했다. 그래서 이번 기회에 Softr라는 도구를 활용하여 회사 홈페이지를 새롭게 만들었다.

 

다양한 노코드 툴이 존재하지만 내가 Softr를 선택한 이유는 다음과 같다.

  - 회사 도메인을 무료로 연결할 수 있다 (대부분 노코드 툴은 유료 고객에 한하여 도메인 연결을 제공한다)

  - 홈페이지 구조 자체가 단순하다. 그래서 사전에 주어지는 레이아웃 템플릿만 이리저리 활용해도 무방하다(너무 고도의 기능, 자유도 오히려 필요 없음).

  - 홈페이지의 용도 또한 단순하다. 회사 소개 및 주요 레퍼런스를 일방적으로 보여주기 용도이기 때문에 복잡한 상호작용(Form 양식 또는 데이터베이스 연결 등)이 필요없다. 심지어 Softr는 구글 데이터베이스와 연동한 Form 기능이 무료인 것 같다(확실치 않음).

  - 사용하기 쉽다. 

 

사전에 Softr로 랜딩페이지를 제작하는 영상 강의 몇 개를 시청하여 대략적인 기능을 익힌 후 기존 랜딩페이지에 있는 콘텐츠와 이미지 소스를 최대한 활용하여 아래와 같은 랜딩페이지를 2시간 만에 완성했다.

2023년 린스프린트 랜딩페이지 (Softr로 제작)

 

랜딩페이지를 제작하면서 가졌던 간단한 기획 내용은 아래와 같다.

1. Header - 로고 - 홈페이지, 회사소개, 블로그, (문의하기)

2. Main
  1) Hero : '초기 스타트업 프로그램을 제공합니다' 메시지 + CTA : 브로셔 요청하기
  2) Clients : 50개 이상 클라이언트 (주요 클라이언트 로고 12개 노출)
        - LG유플러스, LS, 삼성생명, 롯데지주, 스파크랩, 빅뱅엔젤스, 더인벤션랩, 킹슬리벤처스, 코맥스벤처러스, 러닝스푼즈, 패스트캠퍼스, 한국무역협회
        - 추후에 주요 클라이언트 유형별 사례 소개 추가 
  3) Key Features (4가지) : 기존 랜딩페이지 내용 활용 (추후에 각 특징마다 페이지 추가하여 상세 설명)
  4) FAQs
        - 교육 대상, 주제, 비용, 프로세스 등 

3. Footer - 로고, Contact Point, 소셜링크(페이스북, 인스타그램, 링크드인, 블로그)

 

우리 회사 랜딩페이지의 경우에는 대부분 초기 스타트업 프로그램을 탐색하는 액셀러레이팅 프로그램 또는 사내벤처 프로그램 운영 실무진이 검색을 통해 처음 접한다고 가정했다. 그리고 그들 입장에서 가장 궁금한 부분이 무엇인지 생각했고 이에 대한 답을 주는 방식으로 1차 초안을 완성했다 (완성도 약 50%)

 

랜딩페이지에 들어오자마자 린스프린트의 핵심 오퍼링(액셀러레이터/사내벤처 운영부서에 초기 스타트업 프로그램을 제공한다)을 전달하고 이에 흥미를 느낀 방문자가 초기 스타트업 프로그램 브로셔를 신청할 수 있도록 CTA버튼을 구성했다. 그리고 린스프린트가 정말 믿을 만한, 실력 있는 회사인지 설득하기 위한 기존의 클라이언트 개수 및 잠재 고객들을 알만한 주요 클라이언트들은 로고를 표시하여 보여주는 것을 목적으로 작성했다.

 

Softr를 이용한 홈페이지를 제작하는 방법이나 과정은 시중에 무수히 많은 콘텐츠가 있어 생략하도록 하겠다. 다만, 자신이 직접 구매한 도메인을 내 Softr 홈페이지에 연동하는 방법에 대해서는 시중에 없는 것 같아 아래와 같이 간단하게 설명하고자 한다.

 

Softr로 만든 홈페이지를 나의 도메인으로 연결하는 프로세스는 다음과 같다.

 

1) 도메인을 구매한다

2) (Softr) 홈페이지가 저장된 작업공간(Application) 내 Setting -> Custom Domain에 들어가서 도메인을 1차 연결한다

3) Custom Domain 메뉴에 있는 DNS 레코드를 도메인 구매처에 가서 직접 생성한다

4) 도메인을 저장한 후 최종 퍼블리싱 한다.

 

도메인을 직접 연결하는 방법에 대해서 좀 더 자세히 설명해보겠다. 우선, Custom Domain은 'Setting -> Custom Domain' 메뉴에 가서 설정한다.

Custom Domain을 클릭하면 연결할 도메인을 먼저 입력하고 그 후에는 도메인 호스팅 페이지 내 도메인DNS 세팅으로 가서 화면과 같이 DNS를 세팅해줘야 한다.

 

글쓴이는 닷홈이라는 업체를 사용하는데, 해당 업체 도메인 DNS 관리페이지에 들어가서 연결하고자 하는 도메인을 클릭한 후 아래와 같이 2개의 레코드를 추가해준다. 이렇게 DNS 레코드 2개를 추가해주고나면 별 문제 없는 한 1시간 내로 나의 독립 도메인으로 접속하면 Softr로 만든 홈페이지가 뜨게 된다.

 

이런 식으로 정식 도메인을 가지고 비즈니스 아이디어를 검증하기 위한 목적으로 Softr는 매력적인 노코드툴로 활용할 수 있다. 독립 도메인을 무료로 연결할 수 있다는 점이 사용하기 쉽다는 점과 더불어 Softr의 최대 장점이라고 생각한다.

 

이상 Softr를 활용한 회사 홈페이지 제작 후기를 마무리하고자 한다. 이번 포스팅을 통해 보다 많은 사람들이 노코드 툴을 활용하여 랜딩페이지를 제작하고 이를 기반으로 고객과 시장을 검증하여 매력적인 비즈니스 모델을 최종 완성시킬 수 있기를 희망한다.

 

- 끝 -

린스프린트 김정수 대표 / jskim@leansprint.kr

 

린스프린트(LeanSPRINT)는 액셀러레이터, 사내벤처 운영부서를 위한 초기 스타트업 프로그램을 제공합니다.

 - 린스프린트 홈페이지 : http://leansprint.kr

 - 린스프린트 초기 스타트업 프로그램 : https://bit.ly/3u3q8z7

 - 린스프린트 Series A 투자유치 컨설팅 프로그램 :  https://bit.ly/3DLWjXr