AI를 활용해서 초보자를 위한 랜딩페이지 만들기: 정말 쉽게, 천천히!

요즘은 누구나 개인 브랜드나 프로젝트, 제품을 소개할 홈페이지 하나쯤 필요하죠?
복잡한 개발 없이도 챗GPT와 몇 가지 무료 툴을 활용하면 전문가처럼 보이는 랜딩 페이지를 단 2분 만에 만들 수 있습니다.
아래 내용을 순서대로 따라만 해보세요!

---

1️⃣ 랜딩 페이지가 뭐예요?

• 뜻: 광고나 홍보를 클릭했을 때 처음 도착하는 "한 페이지짜리 홈페이지"
• 왜 필요해요?
  제품 소개, 이벤트 신청, 문의 접수 등 빠르게 내용을 전달하고, 행동을 유도하는 데 최고!

---

2️⃣ 준비물 소개

준비물	설명
챗GPT 또는 클로드	HTML 코드를 자동으로 생성해주는 AI 도구
Tiny Host	만든 홈페이지를 쉽게 배포할 수 있는 무료 서비스
Make	문의 내용을 구글 시트에 자동으로 저장하는 자동화 도구
구글 스프레드시트	문의 내용을 저장할 표

 

---

3️⃣ 실제 따라 해보기! (하나씩 해봐요!)

✅ STEP 1: 챗GPT에게 페이지 만들어달라고 말하기

 

마케팅 회사 ‘크리에이티브 웨이브’의 랜딩페이지를 만들어줘.
Tailwind CSS, Pretendard 폰트 사용해서.
섹션: 히어로, 서비스 소개, 왜 우리?, 문의하기 폼

 

👉 이렇게 말하면 HTML 코드를 쭉 만들어줍니다!
다 복사해서 메모장에 붙여넣고 저장할 때 파일 이름은 index.html로!

---

✅ STEP 2: 디자인 미리 보기 (내가 만든 페이지 보려면)

1. https://replit.com 에 접속
2. Create → HTML, CSS, JS 선택
3. index.html에 복사한 코드 붙여넣기
4. 상단 ▶️ 버튼 클릭 → 미리 보기 완성!

---

✅ STEP 3: 문의하기 폼 만들고, 구글 시트에 연결

이 부분이 조금 헷갈릴 수 있어요. 그래서 쉬운 설명 드릴게요!

1. Make.com 가입 후 '새 시나리오 만들기'

• 웹훅 (Webhooks) 모듈 추가 → ‘주소’ 생성됨
• 구글 스프레드시트 모듈 추가 → 시트에 데이터 저장되게 설정

2. HTML 코드의 <form> 부분에 action 속성 변경

<form action="https://hook.make.com/여기주소" method="POST">

 

👉 이제 누군가 폼에 작성하면 구글 시트에 자동 기록됩니다!

---

✅ STEP 4: 홈페이지 배포 (전 세계 누구나 접속 가능하게!)

1. https://tiny.host 접속
2. index.html 파일을 ZIP 파일로 압축
3. 드래그해서 업로드 → URL 자동 생성! 🎉

---

🔄 도메인 연결은 나중에!

처음부터 도메인까지 연결하려고 하면 어려워요!

• 지금은 Tiny Host에서 제공하는 링크만 써도 충분합니다.
• 나중에 익숙해지면 네임칩, Cloudflare 이용해서 나만의 주소 붙이면 됩니다.

---

🌟 정리: 랜딩페이지 만들기 요약

단계	설명
1단계	챗GPT에게 랜딩페이지 코드 요청하기
2단계	Replit에서 코드 붙여넣고 미리 보기 확인
3단계	Make로 문의 폼 연결하고, 구글 시트에 저장 설정
4단계	Tiny Host에서 페이지 배포하기

 

---

🎁 마무리 팁

• 처음에는 코드가 낯설고 어렵지만, 그냥 따라만 하면 됩니다.
• 미리 만들어 놓은 템플릿을 복사해서 나만의 이름, 설명, 이미지로만 바꿔도 충분합니다!
• 잘 활용하면 포트폴리오, 제품 소개, 클래스 신청 등 다양한 활용이 가능해요!

---

* 참고: https://youtu.be/jnRqq2JEdxI