# Claude + AntiGravity로 강의용 프로페셔널 랜딩페이지 30분 만에 완성하기
---
## 소개
### 시도하고자 했던 것과 그 이유
강의와 컨설팅 의뢰가 늘어나면서, 제 전문 분야와 강의 프로그램을 한눈에 보여줄 수 있는 프로페셔널 랜딩페이지가 필요했습니다. 그런데 문제가 있었어요. 저는 코딩을 모릅니다. 웹디자인 외주를 맡기자니 비용도 부담되고, 제가 원하는 내용을 정확히 전달하기도 쉽지 않았죠.
그래서 떠올린 방법이 "AI에게 프롬프트를 만들어달라고 하고, 그 프롬프트로 또 다른 AI 도구에서 웹사이트를 생성하자"는 것이었습니다. 즉, Claude가 AntiGravity용 프롬프트를 설계해주고, AntiGravity가 그 프롬프트로 실제 웹사이트를 생성하는 AI × AI 이중 활용 전략입니다.
결과적으로 코딩 한 줄 없이, 10개 섹션으로 구성된 풀 랜딩페이지를 약 30분 만에 완성하여 Netlify로 배포까지 마쳤습니다.
완성된 랜딩페이지: https://easyoungedu-ljy.netlify.app/
---
## 진행 방법
### 사용한 도구
| 도구 | 용도 |
|------|------|
| Claude (Anthropic) | 랜딩페이지 전체 구조 설계 + AntiGravity용 프롬프트 작성 |
| AntiGravity | 프롬프트 기반 웹사이트 자동 생성 |
| Netlify | 완성된 사이트 무료 배포 |
### Step 1: Claude에게 랜딩페이지 구조 설계 요청
먼저 Claude에게 제 강의/컨설팅용 랜딩페이지를 만들고 싶다고 말하고, AntiGravity용 프롬프트를 작성해달라고 요청했습니다.
Claude는 바로 작업에 들어가지 않고, 먼저 3가지 핵심 질문을 해주었습니다:
1. 타겟 대상은 누구인가요? → 복합 타겟 (교수, 기업, 일반 대중 모두)
2. 핵심 강조 분야는? → AI 교육 + 뷰티/패션 균형 있게
3. 디자인 톤은? → 프로페셔널/클린 스타일
이 3가지 답변만으로 Claude가 10개 섹션의 상세한 프롬프트를 한국어/영어 두 버전으로 만들어주었습니다.
Claude에게 보낸 프롬프트:
```
나의 강의용 랜딩페이지를 만들고 싶어.
강의와 컨설팅용, 큰 흐름 첫화면에서 임팩트있게
이 흐름을 중심으로 제일 좋은 내용이 들어가게 구성해줘.
안티그래비티를 활용하여 랜딩 페이지 만들거야.
안티그래비티용 프롬프트를 작성해줘.
```
### Step 2: Claude가 생성한 AntiGravity 프롬프트 (핵심 구조)
Claude가 설계해준 프롬프트의 전체 구조는 다음과 같습니다:
```
전문 강사 & 컨설턴트를 위한 프로페셔널 랜딩페이지를 만들어줘.
■ 전체 컨셉
- 톤: 화이트 기반의 클린하고 신뢰감 있는 프로페셔널 스타일
- 폰트: Pretendard / Noto Sans KR, Inter / Poppins
- 컬러 팔레트: 메인 #1A1A2E(딥 네이비), 포인트 #E94560(코랄 핑크),
서브 #F5F5F5(라이트 그레이), 텍스트 #333333
- 스크롤 애니메이션(fade-in, slide-up), 모바일 반응형 필수
■ 섹션 1: 히어로 (첫 화면 - 풀스크린, 최대 임팩트)
- 메인 카피: "AI와 뷰티의 융합, 교육의 미래를 디자인합니다"
- 서브 카피: "Google 공인 이노베이터 | 대학교수 | 뷰티 & 패션 전문가"
- 프로필 이미지 + CTA 버튼 2개
■ 섹션 2: 신뢰 지표 바
- "20+" 교육 경력 | "500+" 강의 | "10,000+" 수강생 | Google 공인
■ 섹션 3: 전문 분야 (2 Column)
- AI & 디지털 융합 교육 | 뷰티 & 패션 전문
■ 섹션 4: 강의 프로그램 (6개 카드 그리드)
■ 섹션 5: 컨설팅 서비스 (타임라인 + 3가지 영역)
■ 섹션 6: 자격 & 이력 (뱃지 스타일)
■ 섹션 7: 활동 갤러리
■ 섹션 8: 수강생 후기 (캐러셀)
■ 섹션 9: CTA (카카오톡 오픈채팅 연결)
■ 섹션 10: 푸터
■ 추가: 고정 네비게이션 바, 스크롤 진행 표시 바, 맨 위로 버튼
```
> 💡 Tip: Claude가 생성한 프롬프트에는 컬러 코드, 폰트, 애니메이션, hover 효과, 모바일 반응형까지 세세하게 지정되어 있어서, AntiGravity가 상당히 완성도 높은 결과물을 바로 만들어줍니다.
### Step 3: 프로필 이미지 & 카카오톡 링크 추가
Claude가 만들어준 프롬프트에 두 가지를 직접 추가/수정했습니다:
1. 프로필 이미지 URL 삽입 → 히어로 섹션에 실제 사진 반영
2. CTA 버튼 링크 변경 → "강의 문의하기" 대신 "카카오톡 1:1 상담"으로 변경하고 카카오톡 오픈채팅 링크 연결
### Step 4: AntiGravity에서 웹사이트 생성
완성된 프롬프트를 AntiGravity에 붙여넣기하여 웹사이트를 생성했습니다. AntiGravity가 프롬프트의 섹션별 지시사항을 잘 인식하여, 10개 섹션이 모두 반영된 랜딩페이지를 한 번에 만들어주었습니다.
### Step 5: Netlify 배포
AntiGravity에서 생성된 코드를 Netlify에 배포하여 실제 접속 가능한 URL을 확보했습니다.
최종 결과물: [https://easyoungedu-ljy.netlify.app/](https://easyoungedu-ljy.netlify.app/)
---
## 결과와 배운 점
### 배운 점과 꿀팁
꿀팁 1: "AI에게 AI용 프롬프트를 만들어달라"는 전략이 매우 효과적입니다.
직접 AntiGravity에 "랜딩페이지 만들어줘"라고 입력하면 막연한 결과가 나오기 쉽습니다. 하지만 Claude가 먼저 구조를 설계하고, 섹션별 카피, 컬러 코드, 애니메이션까지 상세히 지정해주면 AntiGravity의 결과물 품질이 확 달라집니다.
꿀팁 2: Claude에게 질문을 받는 과정이 중요합니다.
Claude가 "타겟은 누구인지", "어떤 톤을 원하는지" 물어봐준 덕분에, 제 머릿속에 흩어져 있던 생각이 정리되었습니다. AI와의 대화 자체가 기획 과정이 되는 셈이에요.
꿀팁 3: 한국어 + 영어 버전을 동시에 만들어두면 좋습니다.
AntiGravity 같은 해외 AI 도구는 영어 프롬프트에 더 잘 반응하는 경우가 있어서, 두 버전을 모두 준비해두면 상황에 맞게 선택할 수 있습니다.
꿀팁 4: CTA 버튼에 카카오톡 오픈채팅 링크를 연결하세요.
한국에서 강의/컨설팅 문의를 받으려면 이메일보다 카카오톡이 훨씬 진입장벽이 낮습니다. 랜딩페이지에서 바로 카카오톡 상담으로 연결되니 전환율이 높아질 것으로 기대합니다.
### 시행착오
- AntiGravity에 프롬프트를 한 번에 넣으면 일부 섹션이 누락되는 경우가 있었습니다. 이때는 섹션별로 나누어 입력하거나, 누락된 섹션만 추가 프롬프트로 보완하면 해결됩니다.
- 프로필 이미지가 세로형(2560x4800)이라 레이아웃이 깨지는 경우가 있었는데, 프롬프트에 "상반신이 잘 보이도록 적절히 크롭"이라는 지시를 추가하여 해결했습니다.
### 앞으로의 계획
- 갤러리 섹션에 실제 강의 사진, 한지패션쇼 사진, 해외 활동 사진을 추가할 예정입니다.
- 수강생 후기를 실제 피드백으로 교체하여 신뢰도를 높일 계획입니다.
- 강의 프로그램별 상세 페이지를 추가로 만들어 연결할 예정입니다.
- 이 방법론을 수업에 적용하여, 학생들도 자신만의 포트폴리오 랜딩페이지를 만들 수 있도록 커리큘럼을 구성할 계획입니다.
---
## 도움 받은 글 (옵션)
- AntiGravity 공식 사이트: [ https://anti-gravity.ai ]
- Claude (Anthropic): ( https://claude.ai )
- Netlify 무료 배포: ( https://www.netlify.com )
