🤔나만 AI 트렌드에서 뒤쳐지는 것 같아 불안하신가요? ⚡AI 노코드 마스터클래스에서 가장 빠르게 앞서가세요: https://join.ainocodemasterclass.kr/
<aside> 💡
해당 가이드는 구글의 Antigravity 에디터와 구글 제미나이 3 프로, 나노바나나 프로를 사용해서 고품질의 애니메이션이 풍부한 랜딩 페이지를 제작하는 전체 프로세스가 담겨있습니다.
</aside>
## 📋 목차
1. [프로젝트 기획 단계](#1-프로젝트-기획-단계)
2. [효과적인 프롬프트 작성법](#2-효과적인-프롬프트-작성법)
3. [개발 프로세스](#3-개발-프로세스)
4. [디자인 & 애니메이션 전략](#4-디자인--애니메이션-전략)
5. [반복 개선 & 디버깅](#5-반복-개선--디버깅)
6. [프로덕션 배포](#6-프로덕션-배포)
## 1. 프로젝트 기획 단계
### 1.1 핵심 메시지 정의
**질문할 사항:**
- 이 페이지의 목적은 무엇인가? (리드 생성, 제품 소개, 브랜드 인지도)
- 타겟 오디언스는 누구인가?
- 핵심 페인 포인트와 솔루션은 무엇인가?
- 원하는 행동(CTA)은 무엇인가?
**예시 기획서 구조:**
프로젝트: [프로젝트명] 목적: [고객의 문제를 해결하는 솔루션 제시] 타겟: [중소기업 대표, 마케터 등]
핵심 메시지:
### 1.2 컨셉 & 테마 결정
**고려사항:**
- **비주얼 테마**: 미니멀, 다크 모드, 네온, 그라디언트 등
- **톤앤매너**: 전문적, 친근한, 미래지향적 등
- **색상 팔레트**: 브랜드 아이덴티티에 맞는 2-3개 메인 컬러
- **애니메이션 스타일**: 서브틀, 다이나믹, 인터랙티브 등
**이 프로젝트의 예시:**
- 테마: "Chaos to Order" (혼돈에서 질서로)
- 비주얼: 다크 모드 + 네온 색상 (사이버펑크 스타일)
- 애니메이션: GSAP 기반 스크롤 애니메이션
### 1.3 페이지 구조 설계
**섹션 계획:**
Hero Section (첫인상)
Problem Section (문제 제기)
Solution Section (해결책)
CTA Section (행동 유도)
---
## 2. 효과적인 프롬프트 작성법
### 2.1 초기 프롬프트 구조
**좋은 초기 프롬프트 예시:**
"Next.js (App Router)와 GSAP를 사용하여 [서비스명]을 위한 프리미엄 랜딩 페이지를 만들어줘.
요구사항:
디자인 방향:
먼저 프로젝트 구조와 계획을 보여줘."
### 2.2 반복 개선 프롬프트 패턴
**구체적인 피드백 제공:**
❌ 나쁜 예: "애니메이션이 이상해" ✅ 좋은 예: "Solution 섹션의 Phase 2에서 텍스트가 나타나는 시간이 너무 늦어. 코어가 회전하는 동안 동시에 텍스트가 나타나도록 타이밍을 조정해줘."
**레퍼런스 제공:**
"Hero 섹션에 마우스 위치에 따라 움직이는 파티클 효과를 추가해줘. Apple 웹사이트의 패럴랙스 효과 같은 느낌으로."
### 2.3 명확한 우선순위 설정
**단계별로 요청:**
"먼저 기본 레이아웃과 컨텐츠부터 완성하고, 그 다음 애니메이션을 추가해줘. 마지막으로 호버 효과 등 인터랙션을 다듬어줘."
---
## 3. 개발 프로세스
### 3.1 프로젝트 초기 설정
**단계 1: 프로젝트 생성 요청**
"Next.js 프로젝트를 생성하고 필요한 라이브러리를 설치해줘:
**단계 2: 기본 구조 설정**
"다음과 같은 컴포넌트 구조로 만들어줘:
### 3.2 컴포넌트 개발 순서
**권장 순서:**
1. **레이아웃 먼저**: HTML 구조와 정적 컨텐츠
2. **스타일링**: Tailwind CSS로 디자인 적용
3. **기본 애니메이션**: 페이드인, 슬라이드 등
4. **고급 애니메이션**: 스크롤 트리거, 패럴랙스
5. **인터랙션**: 호버, 클릭 효과
6. **최적화**: 성능 개선, 반응형 대응
### 3.3 컴포넌트별 프롬프트 예시
**Hero 섹션:**
"Hero 섹션을 만들어줘:
**Problem 섹션:**
"Problem 섹션을 만들어줘:
**Solution 섹션 (복잡한 애니메이션):**
"Solution 섹션을 스크롤 트리거로 만들어줘:
Step 1: 화면 왼쪽에서 메인 요소가 슬라이드 인 Step 2: 메인 요소 주위로 보조 요소들이 순차적으로 페이드 인 Step 3: 모든 요소가 동시에 아래로 이동하며 최종 레이아웃 형성
---
## 4. 디자인 & 애니메이션 전략
### 4.1 색상 시스템 구축
**Tailwind Config 확장:**
```javascript
// tailwind.config.ts
theme: {
extend: {
colors: {
'deep-black': '#0a0a0a',
'neon-cyan': '#00f3ff',
'neon-purple': '#b23aff',
}
}
}
프롬프트:
"tailwind.config에 커스텀 색상을 추가해줘:
- deep-black: 배경색
- neon-cyan: 메인 액센트
- neon-purple: 보조 액센트"
일반 원칙:
프롬프트 예시:
"애니메이션 타이밍을 조정해줘:
- 텍스트 페이드인: 0.5초로 더 빠르게
- 카드 등장: 0.8초 + stagger 0.1초
- 코어 회전: 4초로 부드럽게"
프롬프트:
"모바일 반응형을 추가해줘:
- 태블릿(768px 이하): 폰트 크기 축소
- 모바일(640px 이하):
* 그리드를 1열로 변경
* 패딩 감소
* 애니메이션 단순화"
이미지 최적화:
"배경 이미지를 Next.js Image 컴포넌트로 최적화하고,
loading="lazy"를 추가해줘"
애니메이션 최적화:
"GSAP 애니메이션에 will-change: transform을 추가하고,
GPU 가속을 위해 transform3d를 사용해줘"
문제 1: 애니메이션이 너무 느리거나 빠름
"Solution 섹션의 Phase 2 텍스트가 너무 늦게 나타나.
코어 회전 시작과 동시에 텍스트가 나타나도록 GSAP 타임라인에
label을 사용해서 병렬 실행되게 해줘."
문제 2: 레이아웃이 깨짐
"모바일에서 텍스트가 로고와 겹쳐.
텍스트의 top 위치를 65%로 조정해서 더 아래로 내려줘."
문제 3: 스크롤 길이 조정
"Phase 3에서 스크롤이 너무 짧아서 내용을 다 보기 전에 다음 섹션으로 넘어가.
타임라인 끝에 3초짜리 빈 tween을 추가해서 스크롤을 늘려줘."
효과적인 피드백 방법:
예시:
"현재 '구매 문의 확인' → '감정 분석 수행' 전환이
스크롤을 많이 해야 나타나.
두 텍스트가 더 빠르게 연속으로 나타나도록
타임라인 오프셋을 조정해줘."
체크리스트:
프롬프트:
"프로덕션 빌드를 위한 최적화를 해줘:
1. 사용하지 않는 CSS 제거
2. 이미지 최적화
3. 번들 크기 확인
4. Vercel 배포 준비"
AI에게 요청:
"GSAP 애니메이션이 작동하지 않아.
1. useGSAP 훅이 올바르게 사용되었는지 확인
2. ScrollTrigger가 등록되었는지 확인
3. 콘솔에 에러가 있는지 확인해줘"
AI에게 요청:
"[섹션명]에서 [요소]가 [위치]에 잘못 배치되어 있어.
예상 위치는 [위치]이고, 현재는 [현재 위치]야.
Tailwind 클래스를 확인하고 수정해줘."
AI에게 요청:
"다음 빌드 에러를 수정해줘:
[에러 메시지 복사]
에러가 발생한 파일과 라인을 찾아서 수정해줘."
프리미엄 랜딩 페이지를 만드는 것은 명확한 기획 + 효과적인 커뮤니케이션 + 반복적 개선의 조합입니다.
핵심은:
이 가이드를 따라하면 누구나 AI와 협업하여 고품질의 웹사이트를 만들 수 있습니다. 🚀