챕터 05 · L1
랜딩페이지 구현
Cursor + Next.js 15로 코어브리핑 랜딩페이지 실제 구현
Cursor AI로 Next.js 15 랜딩페이지를 만들고 Vercel에 배포할 수 있어요.
참고 문서
공개 문서
05. 랜딩페이지 구현
아래는 content/courses/05-landing-page-spec.mdx 와 동일한 원문입니다. Markdown과 HTML 변환 결과를 각각 복사할 수 있습니다.
공개 문서 원문 (Markdown)
# 랜딩페이지 구현
> **이 챕터를 마치면** Cursor AI로 Next.js 15 랜딩페이지를 만들고 Vercel에 배포할 수 있어요.
화면 설계서를 바탕으로 **실제 Next.js 15 랜딩페이지**를 Cursor AI로 구현해 보세요.
페이크 도어 테스트용 랜딩페이지를 만들어 잠재 고객의 관심을 측정해요.
> **목표:** Cursor AI로 3시간 안에 배포 가능한 랜딩페이지 완성
> **기술 스택:** Next.js 15 + Tailwind CSS v4 + Tally 폼 + Vercel 배포
---
## 프로젝트 초기화
터미널을 열고 아래 명령어를 순서대로 실행해 보세요.
```bash
# 1. Next.js 15 프로젝트 생성
pnpm create next-app@latest corebriefing-landing
# 설정 선택:
# ✔ Would you like to use TypeScript? › Yes
# ✔ Would you like to use ESLint? › Yes
# ✔ Would you like to use Tailwind CSS? › Yes
# ✔ Would you like to use `src/` directory? › No
# ✔ Would you like to use App Router? › Yes
# ✔ Would you like to customize the import alias? › No
# 2. 프로젝트 폴더로 이동
cd corebriefing-landing
# 3. 개발 서버 실행
pnpm dev
```
브라우저에서 [http://localhost:3000](http://localhost:3000) 열기 → 기본 Next.js 화면이 보이면 성공!
---
## Cursor로 구현하기
Cursor에서 프로젝트 폴더를 열고 (`File > Open Folder`), `app/page.tsx`를 선택하세요.
**Cursor AI Chat 열기:** `Cmd+L` (macOS) / `Ctrl+L` (Windows)
아래 프롬프트를 Cursor AI에게 전달하세요:
```
app/page.tsx를 코어브리핑(CoreBriefing) AI 요약 서비스의 랜딩페이지로 만들어줘.
요구사항:
- Next.js 15 App Router + TypeScript + Tailwind CSS v4
- 원페이지 스크롤형 반응형 레이아웃
- 딥 블루 (#0A2A54) 기반 다크 Hero, 오렌지 (#F5A623) CTA 버튼
- 섹션: Navigation, Hero, Problem/Solution, How it Works, Features, Pricing, Final CTA, Footer
- Hero에 페이크 탭 UI (URL/텍스트/파일/YouTube) — 클릭 시 Tally 폼 링크로 이동
- CTA 버튼 클릭 시 https://tally.so/r/[폼ID] 새 탭으로 열기
- 폰트: Pretendard (next/font 사용)
- 모든 애니메이션은 CSS transition만 사용 (framer-motion 사용하지 말 것)
```
---
## 핵심 섹션 코드 가이드
### Navigation 컴포넌트
```tsx
// components/Navigation.tsx
export function Navigation() {
return (
<nav className="fixed top-0 w-full bg-[#0A2A54]/95 backdrop-blur-sm z-50 border-b border-white/10">
<div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
<span className="text-white font-bold text-xl">CoreBriefing</span>
<a
href="https://tally.so/r/YOUR_FORM_ID"
target="_blank"
rel="noopener noreferrer"
className="bg-[#F5A623] text-white px-4 py-2 rounded-lg font-semibold hover:bg-[#e09520] transition-colors"
>
출시 알림 신청
</a>
</div>
</nav>
)
}
```
### Hero 섹션 페이크 UI
```tsx
// Hero 섹션 내 페이크 탭 UI
const tabs = ['URL', '텍스트', '파일', 'YouTube']
<div className="bg-white/10 backdrop-blur rounded-2xl p-6 mt-8">
<div className="flex gap-2 mb-4">
{tabs.map((tab) => (
<button
key={tab}
className="px-4 py-2 rounded-lg text-sm font-medium bg-white/20 text-white
hover:bg-white/30 transition-colors first:bg-[#F5A623]"
onClick={() => window.open('https://tally.so/r/YOUR_FORM_ID', '_blank')}
>
{tab}
</button>
))}
</div>
<div className="flex gap-2">
<input
className="flex-1 bg-white/20 text-white placeholder-white/50 rounded-lg px-4 py-3 outline-none"
placeholder="요약할 링크를 입력하세요..."
onClick={() => window.open('https://tally.so/r/YOUR_FORM_ID', '_blank')}
readOnly
/>
<button
className="bg-[#F5A623] text-white px-6 py-3 rounded-lg font-semibold hover:bg-[#e09520] transition-colors"
onClick={() => window.open('https://tally.so/r/YOUR_FORM_ID', '_blank')}
>
요약하기
</button>
</div>
</div>
```
---
## Tally 폼 설정
1. [tally.so](https://tally.so/)에서 새 폼 만들기
2. 필드 추가:
- 이름 (단답형, 필수)
- 이메일 (이메일 타입, 필수)
3. 완료 메시지 설정: `🎉 웨이팅 리스트 등록 완료! 출시되면 가장 먼저 알려드릴게요.`
4. 폼 URL 복사: [tally.so/r/XXXXX](https://tally.so) 형태
5. 코드 내 `YOUR_FORM_ID` 부분을 실제 폼 ID로 교체
---
## Vercel 배포
아래 명령에서 `[username]`은 본인 [GitHub 사용자명](https://github.com)으로 바꿔 실행하세요.
```bash
# 1. GitHub에 코드 업로드
git init
git add .
git commit -m "feat: 코어브리핑 랜딩페이지 초기 구현"
git branch -M main
git remote add origin https://github.com/[username]/corebriefing-landing.git
git push -u origin main
```
2. [vercel.com](https://vercel.com/)에서 [Add New Project](https://vercel.com/new) 클릭
3. GitHub 저장소 선택 → `Deploy`
4. 약 1분 후 [배포된 사이트](https://vercel.com/docs) (`https://[프로젝트명].vercel.app` 형태) 접속 가능
---
## 배포 후 체크리스트
- [ ] 모바일에서 레이아웃 확인 (Chrome DevTools > 기기 아이콘)
- [ ] CTA 버튼 → Tally 폼 연결 확인
- [ ] Tally 폼 제출 테스트 (실제 이메일 등록)
- [ ] 메타 태그 확인 (SEO): `app/layout.tsx`의 `metadata` 객체
- [ ] 페이지 로딩 속도: [pagespeed.web.dev](https://pagespeed.web.dev/)
---
## 디자인 가이드라인
| 항목 | 값 |
|------|-----|
| 주요 색상 | 딥 블루 `#0A2A54` |
| 보조 색상 | 밝은 블루 `#4A90E2` |
| CTA 강조 | 오렌지 `#F5A623` |
| 배경 | 화이트 `#FFFFFF` / 라이트 그레이 `#F5F7FA` |
| 폰트 | Pretendard (한글) + Inter (영문) |
| 레이아웃 | 최대 너비 1200px, 모바일 퍼스트 |
---
## 완성 후
페이지가 배포되면 지인들에게 링크를 공유하고 Tally 대시보드에서 등록 현황을 확인하세요.
**100명 이상 등록** 시 실제 개발로 넘어갈 의향이 있다면 강력한 신호입니다!
---
## 7장 보강 프로세스 적용: 구현 단계 운영 표준
6장에서 검증한 보강 프로세스를 05챕터에 적용해, "만들기"보다 "배포 가능한 상태"를 기준으로 학습합니다.
### 유튜브 대본 기반 구현 성공 루틴
입문 튜토리얼에서 성과가 좋은 흐름은 거의 동일합니다.
1. **프로젝트 생성**
2. **개발 서버 실행 확인**
3. **핵심 화면 1개 구현**
4. **CTA 연결 확인**
5. **배포 후 실사용 테스트**
이 순서를 건너뛰면, 중간에 에러가 생겨도 원인 구간을 찾기 어려워집니다.
### 구현 실패 패턴 TOP 5 (05챕터)
1. **명령 실행 위치 오류**
- 증상: 프로젝트가 아닌 다른 폴더에서 `pnpm dev` 실행
- 대응: `pwd` 확인 후 실행
2. **Tally 폼 ID 미교체**
- 증상: CTA 클릭 시 빈/오류 페이지
- 대응: `YOUR_FORM_ID` 전수 검색 후 교체
3. **디자인 토큰 불일치**
- 증상: 설계서 색상/톤과 구현 화면이 다름
- 대응: 핵심 색상(딥 블루/오렌지) 먼저 고정 후 세부 조정
4. **모바일 검증 누락**
- 증상: 데스크톱은 정상, 모바일에서 버튼/레이아웃 깨짐
- 대응: 배포 전후 모두 모바일 viewport 점검
5. **배포 전 체크리스트 생략**
- 증상: 배포는 됐지만 CTA/폼/SEO 누락
- 대응: 체크리스트 통과 전 배포 금지
### 05챕터 실행형 QA 체크리스트
- [ ] `pnpm dev`로 로컬 실행 확인
- [ ] Navigation/Hero/Final CTA 모두 동일 폼 링크 연결
- [ ] 모바일(최소 375px)에서 Hero·CTA 클릭 동작 확인
- [ ] 배포 URL에서 실제 폼 제출 1회 테스트
- [ ] 제출 데이터가 Tally 대시보드에 기록되는지 확인
### 다음 장(중급 워크플로우 I)으로 넘길 입력값
- 최종 배포 URL
- CTA 클릭률 측정 기준(예: 방문 대비 폼 시작/완료)
- 구현 중 막힌 이슈 3개와 해결 방식
- 반복 가능한 프롬프트 템플릿 1세트공개 문서 변환 코드 (HTML)
<h1>랜딩페이지 구현</h1>
<blockquote>
<p><strong>이 챕터를 마치면</strong> Cursor AI로 Next.js 15 랜딩페이지를 만들고 Vercel에 배포할 수 있어요.</p>
</blockquote>
<p>화면 설계서를 바탕으로 <strong>실제 Next.js 15 랜딩페이지</strong>를 Cursor AI로 구현해 보세요.
페이크 도어 테스트용 랜딩페이지를 만들어 잠재 고객의 관심을 측정해요.</p>
<blockquote>
<p><strong>목표:</strong> Cursor AI로 3시간 안에 배포 가능한 랜딩페이지 완성
<strong>기술 스택:</strong> Next.js 15 + Tailwind CSS v4 + Tally 폼 + Vercel 배포</p>
</blockquote>
<hr>
<h2>프로젝트 초기화</h2>
<p>터미널을 열고 아래 명령어를 순서대로 실행해 보세요.</p>
<pre><code class="language-bash"># 1. Next.js 15 프로젝트 생성
pnpm create next-app@latest corebriefing-landing
# 설정 선택:
# ✔ Would you like to use TypeScript? › Yes
# ✔ Would you like to use ESLint? › Yes
# ✔ Would you like to use Tailwind CSS? › Yes
# ✔ Would you like to use `src/` directory? › No
# ✔ Would you like to use App Router? › Yes
# ✔ Would you like to customize the import alias? › No
# 2. 프로젝트 폴더로 이동
cd corebriefing-landing
# 3. 개발 서버 실행
pnpm dev
</code></pre>
<p>브라우저에서 <a href="http://localhost:3000">http://localhost:3000</a> 열기 → 기본 Next.js 화면이 보이면 성공!</p>
<hr>
<h2>Cursor로 구현하기</h2>
<p>Cursor에서 프로젝트 폴더를 열고 (<code>File > Open Folder</code>), <code>app/page.tsx</code>를 선택하세요.</p>
<p><strong>Cursor AI Chat 열기:</strong> <code>Cmd+L</code> (macOS) / <code>Ctrl+L</code> (Windows)</p>
<p>아래 프롬프트를 Cursor AI에게 전달하세요:</p>
<pre><code>app/page.tsx를 코어브리핑(CoreBriefing) AI 요약 서비스의 랜딩페이지로 만들어줘.
요구사항:
- Next.js 15 App Router + TypeScript + Tailwind CSS v4
- 원페이지 스크롤형 반응형 레이아웃
- 딥 블루 (#0A2A54) 기반 다크 Hero, 오렌지 (#F5A623) CTA 버튼
- 섹션: Navigation, Hero, Problem/Solution, How it Works, Features, Pricing, Final CTA, Footer
- Hero에 페이크 탭 UI (URL/텍스트/파일/YouTube) — 클릭 시 Tally 폼 링크로 이동
- CTA 버튼 클릭 시 https://tally.so/r/[폼ID] 새 탭으로 열기
- 폰트: Pretendard (next/font 사용)
- 모든 애니메이션은 CSS transition만 사용 (framer-motion 사용하지 말 것)
</code></pre>
<hr>
<h2>핵심 섹션 코드 가이드</h2>
<h3>Navigation 컴포넌트</h3>
<pre><code class="language-tsx">// components/Navigation.tsx
export function Navigation() {
return (
<nav className="fixed top-0 w-full bg-[#0A2A54]/95 backdrop-blur-sm z-50 border-b border-white/10">
<div className="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
<span className="text-white font-bold text-xl">CoreBriefing</span>
<a
href="https://tally.so/r/YOUR_FORM_ID"
target="_blank"
rel="noopener noreferrer"
className="bg-[#F5A623] text-white px-4 py-2 rounded-lg font-semibold hover:bg-[#e09520] transition-colors"
>
출시 알림 신청
</a>
</div>
</nav>
)
}
</code></pre>
<h3>Hero 섹션 페이크 UI</h3>
<pre><code class="language-tsx">// Hero 섹션 내 페이크 탭 UI
const tabs = ['URL', '텍스트', '파일', 'YouTube']
<div className="bg-white/10 backdrop-blur rounded-2xl p-6 mt-8">
<div className="flex gap-2 mb-4">
{tabs.map((tab) => (
<button
key={tab}
className="px-4 py-2 rounded-lg text-sm font-medium bg-white/20 text-white
hover:bg-white/30 transition-colors first:bg-[#F5A623]"
onClick={() => window.open('https://tally.so/r/YOUR_FORM_ID', '_blank')}
>
{tab}
</button>
))}
</div>
<div className="flex gap-2">
<input
className="flex-1 bg-white/20 text-white placeholder-white/50 rounded-lg px-4 py-3 outline-none"
placeholder="요약할 링크를 입력하세요..."
onClick={() => window.open('https://tally.so/r/YOUR_FORM_ID', '_blank')}
readOnly
/>
<button
className="bg-[#F5A623] text-white px-6 py-3 rounded-lg font-semibold hover:bg-[#e09520] transition-colors"
onClick={() => window.open('https://tally.so/r/YOUR_FORM_ID', '_blank')}
>
요약하기
</button>
</div>
</div>
</code></pre>
<hr>
<h2>Tally 폼 설정</h2>
<ol>
<li><a href="https://tally.so/">tally.so</a>에서 새 폼 만들기</li>
<li>필드 추가:<ul>
<li>이름 (단답형, 필수)</li>
<li>이메일 (이메일 타입, 필수)</li>
</ul>
</li>
<li>완료 메시지 설정: <code>🎉 웨이팅 리스트 등록 완료! 출시되면 가장 먼저 알려드릴게요.</code></li>
<li>폼 URL 복사: <a href="https://tally.so">tally.so/r/XXXXX</a> 형태</li>
<li>코드 내 <code>YOUR_FORM_ID</code> 부분을 실제 폼 ID로 교체</li>
</ol>
<hr>
<h2>Vercel 배포</h2>
<p>아래 명령에서 <code>[username]</code>은 본인 <a href="https://github.com">GitHub 사용자명</a>으로 바꿔 실행하세요.</p>
<pre><code class="language-bash"># 1. GitHub에 코드 업로드
git init
git add .
git commit -m "feat: 코어브리핑 랜딩페이지 초기 구현"
git branch -M main
git remote add origin https://github.com/[username]/corebriefing-landing.git
git push -u origin main
</code></pre>
<ol start="2">
<li><a href="https://vercel.com/">vercel.com</a>에서 <a href="https://vercel.com/new">Add New Project</a> 클릭</li>
<li>GitHub 저장소 선택 → <code>Deploy</code></li>
<li>약 1분 후 <a href="https://vercel.com/docs">배포된 사이트</a> (<code>https://[프로젝트명].vercel.app</code> 형태) 접속 가능</li>
</ol>
<hr>
<h2>배포 후 체크리스트</h2>
<ul>
<li><input disabled="" type="checkbox"> 모바일에서 레이아웃 확인 (Chrome DevTools > 기기 아이콘)</li>
<li><input disabled="" type="checkbox"> CTA 버튼 → Tally 폼 연결 확인</li>
<li><input disabled="" type="checkbox"> Tally 폼 제출 테스트 (실제 이메일 등록)</li>
<li><input disabled="" type="checkbox"> 메타 태그 확인 (SEO): <code>app/layout.tsx</code>의 <code>metadata</code> 객체</li>
<li><input disabled="" type="checkbox"> 페이지 로딩 속도: <a href="https://pagespeed.web.dev/">pagespeed.web.dev</a></li>
</ul>
<hr>
<h2>디자인 가이드라인</h2>
<table>
<thead>
<tr>
<th>항목</th>
<th>값</th>
</tr>
</thead>
<tbody><tr>
<td>주요 색상</td>
<td>딥 블루 <code>#0A2A54</code></td>
</tr>
<tr>
<td>보조 색상</td>
<td>밝은 블루 <code>#4A90E2</code></td>
</tr>
<tr>
<td>CTA 강조</td>
<td>오렌지 <code>#F5A623</code></td>
</tr>
<tr>
<td>배경</td>
<td>화이트 <code>#FFFFFF</code> / 라이트 그레이 <code>#F5F7FA</code></td>
</tr>
<tr>
<td>폰트</td>
<td>Pretendard (한글) + Inter (영문)</td>
</tr>
<tr>
<td>레이아웃</td>
<td>최대 너비 1200px, 모바일 퍼스트</td>
</tr>
</tbody></table>
<hr>
<h2>완성 후</h2>
<p>페이지가 배포되면 지인들에게 링크를 공유하고 Tally 대시보드에서 등록 현황을 확인하세요.
<strong>100명 이상 등록</strong> 시 실제 개발로 넘어갈 의향이 있다면 강력한 신호입니다!</p>
<hr>
<h2>7장 보강 프로세스 적용: 구현 단계 운영 표준</h2>
<p>6장에서 검증한 보강 프로세스를 05챕터에 적용해, "만들기"보다 "배포 가능한 상태"를 기준으로 학습합니다.</p>
<h3>유튜브 대본 기반 구현 성공 루틴</h3>
<p>입문 튜토리얼에서 성과가 좋은 흐름은 거의 동일합니다.</p>
<ol>
<li><strong>프로젝트 생성</strong></li>
<li><strong>개발 서버 실행 확인</strong></li>
<li><strong>핵심 화면 1개 구현</strong></li>
<li><strong>CTA 연결 확인</strong></li>
<li><strong>배포 후 실사용 테스트</strong></li>
</ol>
<p>이 순서를 건너뛰면, 중간에 에러가 생겨도 원인 구간을 찾기 어려워집니다.</p>
<h3>구현 실패 패턴 TOP 5 (05챕터)</h3>
<ol>
<li><p><strong>명령 실행 위치 오류</strong></p>
<ul>
<li>증상: 프로젝트가 아닌 다른 폴더에서 <code>pnpm dev</code> 실행</li>
<li>대응: <code>pwd</code> 확인 후 실행</li>
</ul>
</li>
<li><p><strong>Tally 폼 ID 미교체</strong></p>
<ul>
<li>증상: CTA 클릭 시 빈/오류 페이지</li>
<li>대응: <code>YOUR_FORM_ID</code> 전수 검색 후 교체</li>
</ul>
</li>
<li><p><strong>디자인 토큰 불일치</strong></p>
<ul>
<li>증상: 설계서 색상/톤과 구현 화면이 다름</li>
<li>대응: 핵심 색상(딥 블루/오렌지) 먼저 고정 후 세부 조정</li>
</ul>
</li>
<li><p><strong>모바일 검증 누락</strong></p>
<ul>
<li>증상: 데스크톱은 정상, 모바일에서 버튼/레이아웃 깨짐</li>
<li>대응: 배포 전후 모두 모바일 viewport 점검</li>
</ul>
</li>
<li><p><strong>배포 전 체크리스트 생략</strong></p>
<ul>
<li>증상: 배포는 됐지만 CTA/폼/SEO 누락</li>
<li>대응: 체크리스트 통과 전 배포 금지</li>
</ul>
</li>
</ol>
<h3>05챕터 실행형 QA 체크리스트</h3>
<ul>
<li><input disabled="" type="checkbox"> <code>pnpm dev</code>로 로컬 실행 확인</li>
<li><input disabled="" type="checkbox"> Navigation/Hero/Final CTA 모두 동일 폼 링크 연결</li>
<li><input disabled="" type="checkbox"> 모바일(최소 375px)에서 Hero·CTA 클릭 동작 확인</li>
<li><input disabled="" type="checkbox"> 배포 URL에서 실제 폼 제출 1회 테스트</li>
<li><input disabled="" type="checkbox"> 제출 데이터가 Tally 대시보드에 기록되는지 확인</li>
</ul>
<h3>다음 장(중급 워크플로우 I)으로 넘길 입력값</h3>
<ul>
<li>최종 배포 URL</li>
<li>CTA 클릭률 측정 기준(예: 방문 대비 폼 시작/완료)</li>
<li>구현 중 막힌 이슈 3개와 해결 방식</li>
<li>반복 가능한 프롬프트 템플릿 1세트</li>
</ul>