Waveon

AI 랜딩페이지 제작 방법 (2026): 3분 튜토리얼·비용 비교

Q: AI가 만든 랜딩페이지 퀄리티가 괜찮은가요?

네. AI가 기획서부터 작성하고 섹션 구성, 카피, 디자인을 자동으로 최적화합니다. 초안으로 충분히 사용 가능하고 이후 AI 대화나 에디터로 원하는 만큼 다듬을 수 있습니다.

Q: 폼에 입력된 고객 데이터는 어디에 저장되나요?

웨이브온 내장 데이터베이스에 자동 저장됩니다. 대시보드의 '데이터' 메뉴에서 확인하고 CSV로 내보낼 수 있습니다.

Waveon Team

3/17/2023

0 min read

랜딩페이지 제작, 왜 AI인가?

간단한 랜딩페이지 하나를 외주로 맡기면 적게는 50만 원, 많게는 수백만 원의 견적을 받게 됩니다. 제작 기간도 최소 2주. 하지만 이제는 AI에게 설명만 하면 몇 분 만에 완성된 랜딩페이지를 받아볼 수 있습니다.

랜딩페이지를 만드는 대표적인 3가지 방법을 비교해보겠습니다.

구분	외주 제작	노코드 빌더	AI 제작
비용	50만~수백만 원	월 2~5만 원	무료~월 5만 원
제작 시간	2~4주	수 시간~1일	3~5분
수정 방법	업체에 재요청	직접 드래그 앤 드롭	AI 대화 + 직접 편집 모두 가능
디자인 퀄리티	높음	중간	중~높음
추천 대상	예산·시간 충분한 경우	직접 디자인하고 싶은 경우	빠르게 만들고 테스트하고 싶은 경우

각 방법의 장단점을 더 자세히 비교하고 싶다면 랜딩페이지 제작 방법·비용 비교 총정리를 참고하세요.

이 글에서는 AI로 랜딩페이지를 만드는 구체적인 방법을 단계별로 보여드리겠습니다.

AI로 랜딩페이지 만드는 방법 (단계별 가이드)

웨이브온(waveon.io)을 사용해 실제로 랜딩페이지를 만들어 보겠습니다.

1단계: 웨이브온에 가입하고 로그인합니다

waveon.io에 접속해 이메일, 카카오, 또는 구글 계정으로 가입할 수 있습니다. 가입 후 바로 대시보드로 이동합니다.

2단계: "+ Create" 버튼을 클릭합니다

대시보드 우측 상단의 "+ Create" 버튼을 클릭하면 템플릿 선택 화면이 나옵니다.

여기서 두 가지 방법으로 시작할 수 있습니다:

AI로 제작하기 — 텍스트로 설명하면 AI가 처음부터 만들어줍니다
템플릿 선택 — 미리 만들어진 랜딩페이지 템플릿을 골라서 시작합니다

"AI로 제작하기"를 클릭합니다.

3단계: AI에게 만들고 싶은 랜딩페이지를 설명합니다

AI Generator 화면이 나타납니다. 입력창에 만들고 싶은 랜딩페이지를 자유롭게 설명하세요.

예시 프롬프트:

"IT 스타트업 제품 소개 랜딩페이지를 만들어줘. 회사명은 CloudSync이고, AI 기반 데이터 백업 솔루션이야. 무료 체험 신청 폼을 포함해줘."
"요가 스튜디오 홍보 페이지. 수업 시간표와 무료 체험 예약 폼 포함."
"B2B SaaS 제품 랜딩페이지. 기능 소개, 가격표, 고객 후기, 데모 신청 폼."

하단에 SaaS 제품, 프로모션, 컨설팅, 포트폴리오, 온라인 강의 등 예시 버튼도 있어서 클릭하면 바로 시작할 수 있습니다.

팁: 프롬프트는 길게 쓸 필요 없습니다. 회사/서비스 이름 + 무엇을 하는지 + 어떤 행동을 유도할지(폼, 버튼 등) 정도면 충분합니다.

4단계: AI가 기획부터 제작까지 자동으로 진행합니다

전송 버튼을 누르면 AI가 다음을 자동으로 처리합니다:

웹 기획서 작성 — 타깃 사용자, 페이지 구성, 핵심 섹션을 자동으로 기획
코드 생성 — React 기반의 실제 동작하는 웹페이지 코드를 작성
데이터베이스 연결 — 폼에 입력된 데이터를 저장할 DB를 자동 생성

좌측 채팅 패널에서 AI의 작업 과정을 실시간으로 확인할 수 있습니다. 보통 3~5분 정도 소요됩니다.

5단계: 완성된 랜딩페이지를 확인합니다

생성이 완료되면 우측 미리보기 패널에서 바로 결과를 확인할 수 있습니다.

상단 바에서 PC/모바일 전환으로 반응형 디자인을 확인
히어로 섹션, 기능 소개, 고객 후기, CTA 버튼, 폼 등 요청한 구성요소가 자동으로 배치됩니다
폼에 입력된 데이터는 자동 생성된 데이터베이스에 저장됩니다

6단계: AI 대화 또는 에디터로 수정합니다

결과가 마음에 들지 않거나 수정이 필요하다면, 3가지 방법으로 편집할 수 있습니다:

방법 1: AI 채팅으로 수정

좌측 채팅창에 수정 요청을 입력하면 AI가 바로 반영합니다.

"헤드라인 문구를 '데이터 걱정 없는 세상'으로 바꿔줘"
"고객 후기 섹션을 추가해줘"
"전체적으로 더 모던한 느낌으로 바꿔줘"

방법 2: Visual Editor로 직접 수정

상단의 Visual Edit 버튼을 클릭하면 요소를 클릭해서 텍스트, 색상, 크기 등을 직접 수정할 수 있습니다. 코딩 지식이 필요 없습니다.

방법 3: Code Editor로 코드 수정

상단의 Code Edit 버튼을 클릭하면 생성된 React 코드를 직접 편집할 수 있습니다. 개발 경험이 있다면 더 세밀한 커스터마이징이 가능합니다.

7단계: "게시하기"를 클릭해 발행합니다

수정이 끝났다면 우측 상단의 "게시하기" 버튼을 클릭합니다.

무료 플랜에서는 *.waveon.me 도메인으로 바로 발행됩니다
유료 플랜에서는 자체 도메인(예: landing.mycompany.com)을 연결할 수 있습니다

발행된 페이지 URL을 광고, SNS, 이메일 등에 바로 사용하면 됩니다.

AI 랜딩페이지, 이런 점이 좋습니다

폼 데이터 자동 저장 — 방문자가 폼에 입력한 정보(이름, 이메일, 연락처 등)가 자동 생성된 데이터베이스에 저장됩니다. 별도 구글 시트 연동 없이도 리드를 수집할 수 있습니다.
모바일 자동 최적화 — PC와 모바일 버전이 동시에 생성됩니다. 별도 반응형 작업이 필요 없습니다.
수정이 쉬움 — "문구 바꿔줘", "섹션 추가해줘" 같은 자연어로 수정 가능. A/B 테스트용 변형도 빠르게 만들 수 있습니다.
코드 접근 가능 — 생성된 React 코드를 직접 수정할 수 있어, 개발자가 있다면 더 세밀한 커스터마이징이 가능합니다.