랜딩페이지란 무엇인가

홈페이지 vs 랜딩페이지

	홈페이지	랜딩페이지
목적	정보 전달, 브랜드 소개	특정 행동 유도 (구매·신청·다운로드)
페이지 수	여러 페이지	보통 1페이지
내비게이션	메뉴 있음	없거나 최소화
성공 기준	방문자 수, 체류 시간	전환율 (행동한 사람 ÷ 전체 방문)

랜딩페이지는 딱 하나의 행동을 시키는 페이지입니다. "이것저것 보여주자"가 아니라 "이 버튼을 누르게 하자"입니다.

전환율이란

100명이 방문해서 3명이 신청하면 전환율 3%. 잘 만든 랜딩페이지는 5~15%. 여기서 1%만 올려도 매출이 바뀝니다.

랜딩페이지의 7가지 블록

모든 유형에 공통된 뼈대입니다. 위에서 아래로:

순서	블록	역할
1	히어로	헤드라인 + CTA 버튼. 3초 안에 "뭔지" 전달
2	핵심 장점	왜 좋은지 3~4개 (아이콘 + 짧은 설명)
3	시연/증거	스크린샷, 영상, 데모
4	사회적 증거	사용자 수, 후기, 언론 로고
5	가격/조건	가격표 또는 혜택
6	FAQ	망설이는 이유를 미리 해소
7	마지막 CTA	같은 버튼 한 번 더

이 과정에서 만드는 사례 — 쉬운 것부터

사례는 5개 유형(3~7강)에 모두 16개입니다. 어려운 순서가 아니라 쉬운 순서로 정리했습니다. 처음엔 맨 위 1개만 하세요.

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

순서	난이도	예상 시간	사례	어디서
먼저	★ 쉬움	15분	뉴스레터 구독 (섹션 3~5개, 이미지 없음)	6강 사례 1
2	★ 쉬움	20분	작가·크리에이터 (사진 중심)	7강 사례 1
3	★★ 보통	25분	컨설턴트·코치	7강 사례 2
4	★★ 보통	25분	구독 서비스	3강 사례 1
5	★★ 보통	30분	크라우드펀딩 소개	5강 사례 1
6	★★ 보통	30분	핸드메이드·실물 제품	3강 사례 2
7	★★ 보통	30분	사전예약·얼리버드 (진행 바·이메일 칸)	5강 사례 2
8	★★ 보통	30분	오프라인 이벤트 (신청 폼)	6강 사례 2
9	★★ 보통	30분	오프라인 워크숍	4강 사례 1
10	★★★ 어려움	40분	기간 한정 프로모션 (JS 카운트다운)	6강 사례 3
11	★★★ 어려움	40분	모바일 앱 다운로드 (폰 목업)	5강 사례 3
12	★★★ 어려움	40분	온라인 세미나·웨비나 (폼·롤링 애니메이션)	6강 사례 4
13	★★★ 어려움	40분	프리랜서 디자이너	7강 사례 3
14	★★★ 어려움	45분	SaaS 도구 (9섹션·아코디언)	3강 사례 3
15	★★★ 어려움	45분	온라인 강좌 (9섹션)	4강 사례 2
16	★★★ 어려움	45분	부트캠프 (영상 임베드)	4강 사례 3

강 안에서의 사례 순서도 모두 이 난이도 순으로 놓았습니다. 8강은 만든 페이지를 다듬고 배포하는 마무리입니다.

먼저 이것부터 — 뉴스레터 구독 페이지 (★ 쉬움 · 약 15분)

2강 설치 전이라도 개념만 확인하고 싶다면 이 한 페이지만 먼저 보세요. (실제로 만드는 것은 2강에서 폴더를 연결한 뒤 6강 사례 1과 같습니다.) 섹션 3개, 이미지 없음, 외부 서비스 없음입니다.

미리보기에서 이메일 칸과 버튼이 두 번 보이면 성공입니다. (칸에 쓴 이메일은 아직 저장되지 않습니다. 실제 수집은 서비스 연동이 필요해 뒤로 미뤘습니다.)

실제 예시 보기

이 과정에서 만드는 것과 같은 랜딩페이지를 미리 볼 수 있습니다. 각 항목의 [보기] 버튼을 클릭해 실제 브라우저에서 동작하는 구조를 살펴보세요.

오늘의 실습 체크

다음 강의

2강에서 Claude Code를 설치하고, 내 유형에 맞는 준비물을 정리합니다.