Waveon

매력적인 모바일 랜딩페이지 제작하기 Part2

Waveon Team

2022.12.09.

0 min read

읽기 목록

랜딩페이지 제작의 핵심은 랜딩페이지로 유입된 고객을 구매 전환시키거나 상품을 직접적으로 판매하는 본 사이트로 전환시키는 것이라고 말씀드렸습니다. 그럼 실제 랜딩페이지를 제작 사례를 통해, 효과적인 모바일 최적화 랜딩페이지를 제작방법을 살펴보겠습니다.

지난 글에서는 랜딩페이지의 디자인 컨셉을 설정하는 것부터 노코드 툴 웨이브온을 사용하여 애니메이션과 링크를 걸어 동작하도록 만드는 것까지 알아보았습니다. 이번 글에서는 CTA버튼을 활용하여 실제 고객의 액션이 일어나는 페이지와 연결시키고, 고객 데이터를 수집하는 것까지 알아보겠습니다.

랜딩페이지의 틀이 어느정도 잡혔다는 가정하에 작성된 글이오니, 만약 랜딩페이지를 새로 제작하는 상황의 스타트업 관계자이거나, 마케터, 디자이너, 기획자라면 아래 글을 먼저 읽어주시길 바랍니다.

이전 글 읽으러가기 → 매력적인 모바일 랜딩페이지 제작하기 Part1

노코드 툴, 웨이브온

랜딩페이지 제작을 위해 사용할 툴은 ‘웨이브온’ 입니다. 웨이브온은 다양한 엘리먼트, 즉 디자인 요소를 자유롭게 화면에 구성할 수 있어 빠르고 손쉽게 만들 수 있다는 점이 큰 장점입니다. 또한 구글 스프레드 시트를 통한 간단한 데이터 수집, 랜딩페이지의 지루함을 막아주는 다양한 인터랙션을 구현할 수 있습니다. 웨이브온을 통해 랜딩페이지 제작하는 법을 알아보겠습니다.

4. 고객 리드 수집 페이지 제작

실제로 동작하는 신청 페이지를 제작해보겠습니다. 웨이브온에서는 자체 Form 기능을 활용하여 손쉽게 고객 데이터를 받을 수 있습니다. 다양한 템플릿을 활용하면 보다 빠르게 제작이 가능합니다. 필자 역시 제공되는 블록 템플릿 중 하나를 선택하여 이를 원하는 디자인으로 커스터마이징 하는 방법을 사용하였습니다.

5. 고객 참여 데이터 표시

심리테스트 등의 마이크로 서비스에서는 참여율을 직접 드러내는 것이 고객들의 참여 욕구를 자극하기도 합니다. 랜딩페이지에서도 마찬가지로 참여율, 혹은 신청율을 보여주고 참여를 유도할 수 있습니다. 필자는 웨이브온의 ‘데이터 서버에 저장’ 로직을 사용하여 신청자가 신청을 완료했을 경우 1이 count 되도록 세팅하였습니다. 또한 ‘데이터 서버에서 로드’ 로직을 이용하여 참가 신청 페이지 상단에 데이터를 노출시켰습니다.

6. 구글 스프레드시트로 고객 데이터 수집

구글 스프레드 시트로 신청자의 정보를 수집해보겠습니다. 웨이브온에서 제공하는 블록 템플릿을 활용하면, 블록 자체에 관련 로직이 자동으로 세팅되어 있어 보다 쉽게 로직을 구현할 수 있습니다. 필자가 사용한 Form 블록 템플릿에도 ‘스프레드시트 폼 데이터 전송’로직이 미리 세팅되어 있어, 여기에 시트 아이디를 추가하여 손쉽게 연동할 수 있었습니다.

6. 팝업/모달 추가

참가자가 신청을 완료했을 시점에 간단한 팝업/모달을 띄워 신청이 완료되었다는 것을 보여주겠습니다. 팝업은 웨이브온에서 제공하는 팝업 기능을 활용하면 이미 로직이 세팅된 채로 활용할 수 있습니다. 신청 폼(form) 클릭 시 ‘엘리먼트 함수 실행’ 로직을 추가하여 ‘신청확인’ 팝업이 띄워지도록 설정하였습니다.

7. CTA(Call to action) 버튼 로직 세팅

이제 마지막 단계입니다. 메인 페이지의 CTA버튼과 참가 신청 페이지로 연결시키도록 하겠습니다. 필자는 참가신청 페이지 연결하는 ‘페이지로 이동’ 로직을 사용하여 미리 제작해둔 ‘참가신청’ 페이지로 이동되도록 세팅하였습니다.
이 외에도 필자가 사용하진 않았으나 CTA버튼에 링크를 걸어 외부 url로 이동시키거나, 긴 모바일 페이지의 원하는 섹션, 위치로 자동 스크롤시킬 수 있습니다. CTA버튼이 고객의 참여를 이끄는 중요한 수단이라는 점을 염두하여, 다양한 로직을 활용하며 CTA버튼의 효율을 높일 수 있습니다.

지금까지 노코드 툴 웨이브온을 활용하여 연말 세미나 참가신청을 목적으로 한 랜딩페이지를 제작해보았습니다. 블록 템플릿, 로직 프리셋을 활용하여 랜딩페이지 구현부터 참여율 데이터 표시, 참가자 데이터 수집까지 빠르게 완료하였습니다.
아래에서 최종 제작 페이지를 직접 확인하실 수 있습니다 :)

코딩없이 쉬운 소프트웨어 제작, 웨이브온
노코드 툴 웨이브온은 드래그 앤 드롭으로 누구나 쉽게 소프트웨어 제작이 가능합니다. 또한 MVP검증 과정에서 필수적인 고객 리드 수집, 결제 기능을 간편하게 활용할 수 있습니다. 시간과 비용의 한계로 실험하지 못 했던 다양한 아이디어, 신제품 기획이 있다면 더 이상 망설이지 말고 시도해보세요

웨이브온 바로가기 https://www.waveon.io/

Waveon Team

관련된 아티클

Waveon

식음료 재고 관리, 식품에 특화된 템플릿으로 효율성을 높이세요.

식품 재고 관리는 식품 제조 기업, 유통 기업, 그리고 카페나 레스토랑 같은 음식점에서 재고를 체계적으로 관리하는 과정을 말합니다. 특히 식음료제품은 유통기한과 소비기한이 정해져 있어, 일반 제품보다 더 섬세한 관리가 필요합니다.식품 재고 관리, 어떻게 해야 할까요?하지만 현실에서체계적으로 식품 재고를 관리하는 것은 쉽지 않습니다. 대기업의 경우 재고 관리 시스템을 도입해 자동으로 재고를 추적하는 것이 일반적이지만,중소기업이나 소규모 매장의 경우 엑셀이나 종이 문서를 활용해 수기로 기록하는 방식을 많이 사용하기 때문입니다.이러한 방식은 초기에는 비용이 적게들고 간편해 보일 수 있습니다. 하지만 시간이 지날수록 입력 오류나 데이터의 제한으로 인해 재고 변동을 정확히 반영하기 어렵다는 한계를 느끼게됩니

Waveon

무료 재고 관리 프로그램, 바코드 변환이 가능한 템플릿을 사용해보세요!

재고 관리 프로그램, 꼭 필요할까요?“물건을 사입해 판매하고 있는데, 재고 관리가 어려워요.””특히 판매 채널이 많다 보니 재고를 정확하게파악하는 게 쉽지 않네요. 저렴한 프로그램은 바코드나 창고 관리 등 원하는 기능이 없고, ERP 같은 복잡한 시스템까지는 필요하지 않아서고민이에요. 그렇다고 지금처럼 엑셀로 관리하기엔 시간이 너무 많이 소요되고요.”여러 판매 채널에서 상품을 판매하다 보면, 재고 관리가 큰고민거리 중 하나입니다. 한두 개의 상품을 취급할 때는 엑셀로도 어느 정도 관리할 수 있지만, 판매량이 늘어나고 채널이 다양해질수록 한계에부딪히기 마련이죠.특히, 정확한 재고를 파악하는 것이 점점 어려워집니다. 재고가 남아 있다고 생각했는데 막상 주문이 들어오면 품절이거나, 반대로없는 줄 알았던

Waveon

무료 BOM 관리 템플릿으로 엑셀보다 편하게 관리하기

BOM 관리의 중요성제품을 만든다는 것은 단순한 조립 과정이 아닙니다. 기획, 설계, 원자재 조달, 생산, 품질 관리에서 유통까지, 이 모든과정이 유기적으로 연결되어야 하죠. 이 과정에서 가장 중요한 연결고리는 무엇일까요? 바로 BOM(Bill of Materials, 자재명세서)관리입니다.BOM은 제품을 구성하는 원부자재의 소요량을 체계적으로 정리하고, 생산 공정을 계획하며, 제조와 유통 과정에서 발생할 수 있는 혼선을방지하는 중요한 도구입니다.식품 회사로 예를 들면, 원재료 배합 비율과 패키징 구성 요소를 정확히 관리해야 합니다. 화장품 회사는 다양한 성분의조합과 규격을 BOM을 통해 체계적으로 정리하고, 전자 제품 제조사는 부품의 사양과 조립 순서를 명확히 정의해야 하고요.이처럼 BOM이 없다면

Waveon

고객문의 관리&AI 조사 템플릿으로 고객 조사를 더 빠르게!

모든 세일즈팀의 목표는 더 많은 고객을 확보하고 영업 목표를 달성하는 것입니다. 이를 위한 기초 단계인 '리드 제너레이션'은 많은 분들이 알고계실 것입니다.하지만 리드를 얻는 것 만으로는 영업 활동을 이어가긴 어려운데요. 만약 고객이 우리 제품이 관심을 갖고 문의를 했더라도 그 안에충분한 고객 정보가 없기 때문입니다.그렇다면 확보한 리드로 무엇을 해야할까요? 바로 고객을 분석하는 '프로스펙팅'입니다.💡이 글에서 다룰내용프로스펙팅이 어려운 이유AI 기술을 활용한 고객 조사 자동화웨이브온 고객문의 관리&AI 조사 템플릿AI와 함께 변화하는 세일즈 전략의미래고객 분석을 위한 프로스펙팅이미지 출처=Freepik가장 가치 있고 전환 가능성이 높은 고객을 찾아내는 것이 프로스펙팅의 핵심입니다. ‘이고객이 우리

Waveon

체계적인 대리점 관리, 웨이브온 대리점 관리 템플릿으로 시작하세요!

왜 자동화된 대리점 관리가 필요할까요?제조사나 총판, 프랜차이즈 본사를 운영하고 있다면 제품 판매를 위해 대리점, 유통업체, 소매업체 등과협력하고 계실 텐데요. 시장을 확장하고 더 많은 소비자에게 우리 제품을 알리기 위해 노력하다 보면 협력 업체 수도 점점 많아질 거에요.거래처가증가하는 것은 사업 확장 측면에서 더할 나위 없이 좋은 일이지만, 늘어나는 주문량과 함께 체계적인 관리의 필요성도 높아지는데요.다양한 대리점,거래처별로 어떤 제품을 얼마나 주문했는지, 남아있는 재고는 충분한지, 배송은 제대로 진행되고 있는지 등 확인하고 기록해야 할 내용이 끝없이쌓입니다. 주문 내역을 하나하나 수기로 관리하다 보면 중요한 정보를 누락하거나 제때 업데이트 하지 못하는 일까지 발생하죠.대리점을 관리하다보면맞닥뜨리

Waveon

주문 관리 어떻게 해야 할까? 웨이브온 템플릿으로 쉽고 빠르게!

사진=pikisuperstar, Freepik고객 주문 관리, 아직도 복잡하게 하고 계신가요?커스텀 의류, 맞춤 가구, 굿즈, 인쇄, 판촉물,수제 간식 등 주문 제작 업종이나 B2B 사업자라면, 주문 관리의 어려움을 한 번쯤 느껴보셨을 텐데요.고객마다 원하는 디자인과 옵션이 다르고,주문량이 많을수록 관리해야 할 데이터가 기하급수적으로 늘어납니다.특히, 제품마다 다양한 옵션(사이즈, 색상, 재질 등)을 설정해야 하는업종에서는 이 과정이 더욱 복잡해집니다. 상품 옵션이 바뀔 때마다 엑셀 파일을 수정하고, 고객별로 맞춤 견적을 제공하는 일까지 더해지면비효율적인 관리로 인해 업무에 쫓기게 되죠.이 과정을 엑셀 등 수기로 관리하다 보면 아래와 같은 문제가 발생하기도 합니다.상품 종류가 많아질수록데이터 정리가

Waveon

[업데이트] 홈 화면 개편, 이미지 alt 태그 추가 및 기타 버그 수정

홈 화면 개편웨이브온의 대시보드 화면이 홈 화면으로 개편 되었습니다. 새로운 홈 화면에서는 최근에 나온 따끈따끈한 템플릿 목록과, 최근에 작업한내역이 나와 바로 작업할 프로젝트로 한번에 이동할 수 있게 되었습니다.이미지에 alt 태그 옵션 추가구글, 네이버 SEO 에 관심 있는분들께서는 이미지 alt 태그에 대해서 들어보셨을 것입니다. 이미지 alt 태그는 이미지에 붙이는 태그로써, 검색엔진은 텍스트밖에 인식하지못하므로 (아마도요..) 이미지에 텍스트를 달아, 이 이미지가 무엇이다 라고 설명해 주는 태그 입니다. alt 태그를 추가하면 구글이나 네이버검색엔진이 더 내용을 잘 이해할 수 있어서 많은 사람들이 내 페이지를 검색하는데 도움을 줍니다.몇가지 자잘한 버그 수정아래와 같은 버그가 수정되었습니다

Waveon

[업데이트] 개선된 폼 입력 및 테이블 기능

개선된 폼 입력웨이브온 이용자 분들께서 가장 많이 이용하시는 기능중 하나인 사용자의 입력을 받기 위한 폼 기능이 개선되어 더욱 다양한 형태의입력을 받을수 있게 되었습니다.섹션 기능이제 폼을 이용하여 섹션을 나눌수 있습니다. 섹션은 입력 받으려고 하는 내용이 많고 구분해야 할때 사용가능합니다.가로라벨, 세로라벨 설정 기능폼의 라벨위치를 가로 또는 세로로 설정 하실수 있습니다.라디오 기능여러개의 선택지중 하나를 선택할 수있는 라디오 속성이 추가 되었습니다.다중 선택 기능여러개의 선택지를 선택할 수 있는 기능이 추가 되었습니다. 선택지는 텍스트 또는 이미지로설정하실수 있습니다.다중 업로드 기능여러개의 파일을 업로드 할 수 있는 기능이 생겼습니다.테이블 기능데이터베이스의 내용을 보여줄 수 있는테이블을 생성

Waveon

[업데이트] 워크스페이스 기능 출시

워크스페이스란?워크스페이스는 우리 회사에서 필요한 툴을 모아놓은 공간 입니다. 워크스페이스를 이용하면 내부 인력 뿐만 아니라 외부 인력과도 함께동일한 시스템을 이용하여 업무를 진행 하실 수 있습니다.아래 스크린샷에서 보시는 것처럼 랜딩페이지와 관리 페이지를 항목으로 두고 업무를 수행할수 있으며, 해당 워크스페이스에 외부 인력을 초대하여 함께 업무를 진행하실 수도 있습니다.워크스페이스 세팅 방법워크스페이스를 세팅하는 방법은크게 2가지가 있습니다. 첫번째는 빈 워크스페이스에서 시작하는 방법이며, 두번째는 워크스페이스 템플릿으로 시작하는 방법 입니다. 빈워크스페이스에서 시작 하시면 입맛대로 구성할 수 있지만, 설정이 필요하며, 워크스페이스 템플릿에서 시작하면 그대로 사용 가능하신 장점이있습니다.워크스페이