Waveon

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

Waveon Team - 작성자

Waveon Team

0 min read

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

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

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

노코드 툴, 웨이브온

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

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

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

5. 고객 참여 데이터 표시

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

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

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

6. 팝업/모달 추가

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

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

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

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

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

노코드 인사이트를 무료로 받아보세요

웨이브온 뉴스레터 구독하기

*email을 입력해주세요

Waveon Banner Image

관련된 아티클

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

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

개선된 폼 입력웨이브온 이용자 분들께서 가장 많이 이용하시는 기능중 하나인 사용자의 입력을 받기 위한 폼 기능이 개선되어 더욱 다양한 형태의입력을 받을수 있게 되었습니다.섹션 기능이제 폼을 이용하여 섹션을 나눌수 있습니다. 섹션은 입력 받으려고 하는 내용이 많고 구분

마케터 혼자 랜딩페이지 만들기 가능해? 랜딩페이지 마스터 되기! - Waveon | Waveon
Waveon

마케터 혼자 랜딩페이지 만들기 가능해? 랜딩페이지 마스터 되기!

안녕하세요 웨이브온입니다!오늘은 웨이브온을 찾아주신 C 마케터님의 고민을 함께 읽는 시간을 가져 보려고 해요. 마케터 동지로서 C 마케터님의고민을 같이 들어주시겠어요?(📌 새내기 마케터 분들은 초보자 편을 먼저 읽어주세요!)마케터의 고민 : 랜딩페이지가 필요해!안녕하

초보 마케터를 위한 가장 쉬운 랜딩페이지 가이드! - Waveon | Waveon
Waveon

초보 마케터를 위한 가장 쉬운 랜딩페이지 가이드!

안녕하세요 웨이브온입니다! 오늘은 두근두근 직장 생활을 새롭게 시작한 초보 마케터분들이 어려워 하시는 기초 마케팅 지식을 차근차근 알려드리려고해요😊마케터라면 랜딩페이지에 대해 들어보셨을 텐데요, 팀장님과 사수님이 말씀하시는 랜딩페이지... 뭔지 정확히 알고 계시나요?

개발자 없이 만든 랜딩페이지로 A/B 테스트 하는 방법? - Waveon | Waveon
Waveon

개발자 없이 만든 랜딩페이지로 A/B 테스트 하는 방법?

안녕하세요! 웨이브온입니다🙌'고객의 반응을 예측하기 어렵다.' 마케터분들이라면 무척 공감하실 텐데요, 그렇기 때문에 가설을 설정하고 이를테스트 하는 것이 반드시 필요합니다. 어떤 랜딩페이지가 고객에게 더 매력적일지, 어떤 소구점이 고객을 후킹할 수 있는지 테스트하기

화장품 프로모션 템플릿으로 랜딩페이지 만들기(+무료 템플릿 제공) - Waveon | Waveon
Waveon

화장품 프로모션 템플릿으로 랜딩페이지 만들기(+무료 템플릿 제공)

안녕하세요 웨이브온입니다! 오늘은 PPT 만들기보다 쉬운 화장품 프로모션 랜딩페이지 만드는 방법을 가져왔습니다. 바로 Waveon 템플릿을이용하는 방법인데요, 웨이브온은 코딩과 디자인 없이 만들 수 있는 랜딩페이지를 무료로 제공하고 있습니다. 먼저 디자인을 살펴 보도

GA와 Facebook Pixel - 2편 : 웨이브온으로 시작하기 - Waveon | Waveon
Waveon

GA와 Facebook Pixel - 2편 : 웨이브온으로 시작하기

안녕하세요! 1편에서 구글애널리틱스와 페이스북 픽셀의 의미, 그리고 이 도구들을 마케팅에 활용하는 경우 어떤 장점이 있는지에 대해 알아보았습니다🙂 구글애널리틱스와 페이스북 픽셀이 궁금하시다면? ▶ GA와 Facebook Pixel - 1편 : 강력한 데이터 분석도구

GA와 Facebook Pixel - 1편 : 강력한 데이터 분석 도구 - Waveon | Waveon
Waveon

GA와 Facebook Pixel - 1편 : 강력한 데이터 분석 도구

마케팅 활동의 성과를 측정하고 최적화하기 위해 구글 애널리틱스 (Google Analytics : GA)와 페이스북 픽셀 (FacebookPixel)은 필수적인 도구입니다. 노코드 툴로 만든 랜딩페이지 역시도 이와 같은 GA와 Facebook Pixel에 연동하여 마

AI로 3분만에 랜딩페이지 만들기 - Waveon | Waveon
Waveon

AI로 3분만에 랜딩페이지 만들기

간단한 랜딩 페이지 제작을 의뢰했을 뿐인데 적게는 수십 만원에서 많게는 수백 만원의 견적을 받아서 당황하신 적 있으신가요? 기업 홍보를 위해랜딩 페이지가 필요한데, 기획력과 디자인 리소스가 부족해서 힘드셨던 적 있으신가요? 더 이상 고민하지 마세요, 이제는 AI 로

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

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

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

노코드 인사이트를 무료로 받아보세요

웨이브온 뉴스레터 구독하기

*email을 입력해주세요