랜딩페이지 만들기

이 과정에서 만드는 것

하나의 행동(신청·구매·다운로드·구독)을 유도하는 한 페이지짜리 랜딩페이지를 만들고 인터넷에 공개합니다. 제품 출시·강좌 모집·앱 사전예약·이벤트·개인 브랜딩의 5가지 유형, 16개 사례를 쉬운 것부터 차례로 연습합니다. 처음에는 1개만 골라 끝까지 만들어 보세요.

전체 흐름

강	한 줄 요약
1강	랜딩페이지와 홈페이지의 차이, 전환율, 7가지 블록, 난이도 순 사례 지도
2강	Claude 데스크탑 앱(Code 탭) 설치, my-landing 폴더 연결, 유형별 준비물 정리
3강	제품·서비스 출시: 구독 서비스 → 핸드메이드 → SaaS
4강	강좌·워크숍 모집: 오프라인 워크숍 → 온라인 강좌 → 부트캠프
5강	앱·사전예약: 크라우드펀딩 → 사전예약 → 앱 다운로드
6강	이벤트·프로모션: 뉴스레터 → 오프라인 이벤트 → 프로모션 → 웨비나
7강	개인 브랜딩: 작가 → 코치 → 디자이너
8강	CTA 최적화, GitHub·Vercel 배포, 전환 추적

난이도 기준: 섹션 수(5개 이하는 쉬움), 필요한 이미지 수, 입력 폼·카운트다운 같은 동작, 외부 서비스 연동, 프롬프트 길이로 ★ 쉬움 / ★★ 보통 / ★★★ 어려움을 매겼고, 사례마다 예상 시간이 붙어 있습니다.

가장 쉬운 사례(먼저 이것부터): 6강 사례 1 뉴스레터 구독 페이지(★, 약 15분). 1강 표에 16개 사례의 전체 순서가 있습니다.

실습 결과물

• 한 페이지짜리 랜딩페이지 1개 이상 (index.html + 스타일)
• CTA 버튼이 3곳에 반복되고 폰에서도 읽히는 페이지
• GitHub 저장소와 ….vercel.app 공개 주소
• (선택) 내 도메인, 방문자·클릭 추적

준비물

• Claude 계정과 Claude 데스크탑 앱(Code 탭)
• 내 유형의 준비물 메모(이름, 헤드라인, 장점 3개, 가격·조건, 버튼 문구)와 이미지 1~3장(없으면 회색 상자·무료 이미지)
• 8강: GitHub·Vercel 무료 계정

끝나면 할 수 있는 것

• 7블록(히어로, 장점, 시연, 후기, 가격, FAQ, 마지막 CTA)으로 랜딩페이지를 구성할 수 있다
• 긴 프롬프트를 1~3개 섹션씩 쪼개서 보내고 결과를 눈으로 확인하며 고칠 수 있다
• CTA 색·문구·위치를 바꿔 전환율을 높이는 시도를 할 수 있다
• 만든 페이지를 배포하고 전환을 추적할 수 있다

🔎 같은 방식으로 만든 실제 사이트는 홈페이지 1강 "실제 사례로 보는 홈페이지"에서 볼 수 있습니다: makeupforl.co.kr · punolchi.com · mp3-free.org