# 화면 설계서 작성 with AI

> **이 챕터를 마치면** AI로 랜딩페이지 화면 설계서(와이어프레임 스펙)를 10분 안에 완성할 수 있어요.

기획서를 바탕으로 랜딩페이지의 **화면 설계서(Wireframe Spec)**를 AI로 작성해 보세요.
화면 설계서는 개발 전에 "어떤 화면을 어떻게 만들지" 구체적으로 정리한 문서예요.

> **목표:** AI 프롬프트로 10분 만에 상세 화면 설계서 완성
> **사용 도구:** [Claude](https://claude.ai/) 또는 [ChatGPT](https://chatgpt.com/)

---

## 화면 설계서 작성 프롬프트

아래 프롬프트를 AI에 붙여넣고, `[서비스 기획서]` 부분을 이전 챕터에서 작성한 기획서로 교체해 보세요.

```
이 서비스를 페이크 도어 테스트하기 위한 랜딩 페이지 화면 설계서를 작성해줘.
다른 사족은 붙이지 말고 화면 설계서의 내용만을 답변해줘.

조건:
- 원페이지 스크롤형 랜딩 페이지
- CTA 클릭 시 이름/이메일 입력 폼 (모달 팝업) → Tally 폼으로 연결
- 전환 흐름:
  1. CTA 버튼 클릭
  2. 이름, 이메일 입력 (Tally 임베드 또는 외부 링크)
  3. 등록 완료 메시지: "🎉 웨이팅 리스트 등록 완료! 출시되면 가장 먼저 알려드릴게요."
- 사용 시나리오 예시 포함
- 실제 기능은 동작하지 않고 예시 UI로만 구성
- 각 섹션별로 포함할 요소, 카피, 레이아웃을 상세히 작성

[서비스 기획서를 여기에 붙여넣으세요]
```

---

## 예시: 코어브리핑 화면 설계서

아래는 코어브리핑 기획서를 기반으로 생성한 화면 설계서 예시입니다.

---

### 페이지 구조 개요

| 섹션 | 목적 | 핵심 요소 |
|------|------|-----------|
| Navigation | 브랜딩 + CTA | 로고, 메뉴, CTA 버튼 |
| Hero | 첫인상 + 핵심 가치 | 헤드라인, 서브카피, 페이크 UI |
| Problem/Solution | 공감 형성 | 페인포인트 3가지, 솔루션 소개 |
| How it Works | 신뢰 구축 | 3단계 프로세스 |
| Features | 기능 소개 | 4가지 핵심 기능 카드 |
| Use Cases | 타겟 공감 | 4개 페르소나 시나리오 |
| Pricing | 가격 제안 | 3단계 플랜 (미출시 티저) |
| Final CTA | 전환 유도 | 대형 CTA 버튼 |
| Footer | 정보 | 약관 |

---

### 1. Navigation Bar (상단 고정)

**좌측:**
- 로고: "CoreBriefing" 텍스트 또는 심플한 아이콘 로고

**우측:**
- 앵커 링크: 서비스 소개 | 주요 기능 | 사용 사례 | 가격 정책
- **CTA 버튼:** `[출시 알림 신청]` — 오렌지 배경
  - 클릭 시: Tally 폼 링크 열기 (새 탭 또는 모달)

---

### 2. Hero Section

**배경:** 딥 블루 그라디언트 (#0A2A54 → #1C3144)

**콘텐츠 (중앙 정렬):**
- 서비스명: **CoreBriefing**
- 부제: AI 정보 요약 솔루션
- **H1:** 정보의 홍수 속, 핵심만 빠르게!
- **서브 카피:** 링크, 텍스트, 파일, 유튜브 영상까지 AI가 핵심만 요약해 드립니다.

**페이크 요약 입력 UI (실제 동작 X):**
- 탭: `[URL]` `[텍스트]` `[파일]` `[YouTube]`
- 입력창: "요약할 링크를 입력하세요..." (placeholder)
- `[요약하기]` 버튼 → 클릭 시 Tally 폼으로 이동

---

### 3. Problem / Solution Section

**H2:** 혹시, 이런 어려움을 겪고 계신가요?

**문제점 카드 3개:**
1. "읽어야 할 정보는 너무 많은데, 시간이 부족해요."
2. "긴 글이나 영상을 다 보고 핵심을 파악하기 힘들어요."
3. "중요한 내용을 놓칠까 봐 불안해요."

**전환 문구:** → 코어브리핑이 해결해 드립니다!

**솔루션 소개:** AI 기술로 어떤 정보든 핵심만 정확하게 요약하여 당신의 시간을 아껴드립니다.

---

### 4. How it Works Section

**H2:** 코어브리핑, 3단계로 끝!

| 단계 | 아이콘 | 설명 |
|------|--------|------|
| Step 1: 정보 입력 | 📎 업로드 | 요약할 텍스트, 파일, 웹/유튜브 링크를 입력하세요. |
| Step 2: AI 분석 | 🤖 분석 | 코어브리핑 AI가 실시간으로 내용을 분석하고 핵심을 추출합니다. |
| Step 3: 결과 확인 | ✨ 완료 | 깔끔하게 정리된 요약본과 주요 키워드를 바로 확인하세요! |

---

### 5. Features Section

**H2:** 코어브리핑의 핵심 기능

- **다양한 정보 요약:** 텍스트, URL, PDF/DOCX, YouTube까지 모두 지원
- **맞춤형 요약 길이:** 짧게 / 중간 / 길게 선택 가능
- **핵심 키워드 추출:** AI가 핵심 단어를 자동 하이라이트
- **요약본 저장/공유:** Pro 플랜에서 히스토리 관리 및 공유 링크 생성

---

### 6. Pricing Section (티저)

**H2:** 합리적인 플랜을 기대하세요!

**안내 문구:** 지금 웨이팅 리스트에 등록하고 얼리버드 특별 할인을 받아보세요!

| 플랜 | 설명 |
|------|------|
| Free | 가볍게 시작하고 싶은 분들을 위한 무료 플랜 |
| Basic | 합리적인 가격으로 더 많은 기능을! |
| Pro | 전문가를 위한 모든 기능 무제한 제공! |

**CTA:** `[출시 알림 신청하고 혜택받기]`

---

### 7. Final CTA Section

**H2:** 정보의 핵심을 잡는 가장 스마트한 방법,
**H1:** CoreBriefing

**CTA (가장 큰 버튼):** `[지금 바로 출시 알림 신청하기]` → Tally 폼

---

### 8. Footer

- 개인정보처리방침 | 이용약관

---

## 대안: v0.dev로 바로 UI 생성

텍스트 기획서가 완성됐다면 [v0.dev](https://v0.dev/)에서 바로 React 컴포넌트로 변환할 수 있습니다.

```
v0.dev 프롬프트 예시:
"CoreBriefing AI 요약 서비스의 랜딩페이지를 만들어줘.
딥 블루 (#0A2A54) 배경, 오렌지 CTA 버튼, Tailwind CSS 사용.
Hero 섹션에 페이크 탭 UI(URL/텍스트/파일/YouTube) 포함."
```

> v0.dev는 Vercel이 만든 AI UI 생성 도구입니다. 무료로 월 200 크레딧이 제공됩니다.

---

## 다음 단계

화면 설계서가 완성되면 다음 챕터 **랜딩페이지 화면 설계서 상세**에서 섹션별 상세 스펙을 확인합니다.

---

## 7장 보강 프로세스 적용: 유튜브 대본 기반 실전 설계 패턴

6장에서 사용한 보강 프로세스(인기 대본 패턴 분석 → 실패 포인트 제거 → 실행형 산출물 고정)를 04챕터에도 동일 적용합니다.

### 대본 공통 패턴에서 뽑은 핵심

입문자 대상 인기 튜토리얼을 보면, 와이어프레임 단계에서 잘되는 팀은 공통적으로 아래 3가지를 먼저 고정합니다.

1. **페이지 목적 1문장**
   - 예: "이 페이지의 목적은 이메일 리드 수집이다."

2. **섹션별 CTA 흐름**
   - 어느 버튼이 어디로 이동하는지(모달/외부 링크)를 명시

3. **페이크 요소와 실제 요소 구분**
   - 데모 UI인지, 실제 동작인지 명확히 분리

### Prompt → 산출물 매핑표 (실무형)

| 프롬프트 요소 | 산출물 위치 | 검수 기준 |
|---|---|---|
| 원페이지 스크롤형 | 페이지 구조 개요 | 섹션 순서가 자연스럽게 이어지는가 |
| CTA 클릭 시 Tally 연결 | Navigation/Hero/Final CTA | 모든 CTA가 동일 링크로 수렴하는가 |
| 사용 시나리오 포함 | Problem/Solution, Use Cases | 페르소나별 행동이 구체적인가 |
| 실제 기능 미동작(페이크) | Hero 페이크 UI | 사용자가 오해할 표현이 없는가 |

### 초보자 실패 패턴 TOP 4 (04챕터)

1. **섹션을 너무 많이 넣음**
   - 해결: 최초 버전은 8개 섹션 고정, 새 섹션 추가 금지

2. **CTA가 여러 목적을 가짐**
   - 해결: CTA 목적은 웨이팅 등록 1개로 통일

3. **복잡한 문구를 먼저 작성함**
   - 해결: 카피보다 구조(섹션·컴포넌트) 먼저 확정

4. **와이어프레임과 구현 요구사항 불일치**
   - 해결: 다음 챕터로 넘길 "구현 입력값"을 마지막에 명시

### 04챕터 완료 체크리스트 (DoD)

- [ ] 페이지 목적 1문장 작성 완료
- [ ] 섹션 8개 구조 확정 완료
- [ ] CTA 목적/링크 1개로 통일
- [ ] 페이크 UI와 실제 동작 구분 표시 완료
- [ ] 다음 챕터에서 사용할 구현 입력값(색상/섹션/컴포넌트) 정리 완료

> **다음 챕터 입력값:** 섹션 목록, CTA 링크, 톤앤매너, 색상 토큰, 컴포넌트 초안

<h1>화면 설계서 작성 with AI</h1>
<blockquote>
<p><strong>이 챕터를 마치면</strong> AI로 랜딩페이지 화면 설계서(와이어프레임 스펙)를 10분 안에 완성할 수 있어요.</p>
</blockquote>
<p>기획서를 바탕으로 랜딩페이지의 **화면 설계서(Wireframe Spec)**를 AI로 작성해 보세요.
화면 설계서는 개발 전에 &quot;어떤 화면을 어떻게 만들지&quot; 구체적으로 정리한 문서예요.</p>
<blockquote>
<p><strong>목표:</strong> AI 프롬프트로 10분 만에 상세 화면 설계서 완성
<strong>사용 도구:</strong> <a href="https://claude.ai/">Claude</a> 또는 <a href="https://chatgpt.com/">ChatGPT</a></p>
</blockquote>
<hr>
<h2>화면 설계서 작성 프롬프트</h2>
<p>아래 프롬프트를 AI에 붙여넣고, <code>[서비스 기획서]</code> 부분을 이전 챕터에서 작성한 기획서로 교체해 보세요.</p>
<pre><code>이 서비스를 페이크 도어 테스트하기 위한 랜딩 페이지 화면 설계서를 작성해줘.
다른 사족은 붙이지 말고 화면 설계서의 내용만을 답변해줘.

조건:
- 원페이지 스크롤형 랜딩 페이지
- CTA 클릭 시 이름/이메일 입력 폼 (모달 팝업) → Tally 폼으로 연결
- 전환 흐름:
  1. CTA 버튼 클릭
  2. 이름, 이메일 입력 (Tally 임베드 또는 외부 링크)
  3. 등록 완료 메시지: &quot;🎉 웨이팅 리스트 등록 완료! 출시되면 가장 먼저 알려드릴게요.&quot;
- 사용 시나리오 예시 포함
- 실제 기능은 동작하지 않고 예시 UI로만 구성
- 각 섹션별로 포함할 요소, 카피, 레이아웃을 상세히 작성

[서비스 기획서를 여기에 붙여넣으세요]
</code></pre>
<hr>
<h2>예시: 코어브리핑 화면 설계서</h2>
<p>아래는 코어브리핑 기획서를 기반으로 생성한 화면 설계서 예시입니다.</p>
<hr>
<h3>페이지 구조 개요</h3>
<table>
<thead>
<tr>
<th>섹션</th>
<th>목적</th>
<th>핵심 요소</th>
</tr>
</thead>
<tbody><tr>
<td>Navigation</td>
<td>브랜딩 + CTA</td>
<td>로고, 메뉴, CTA 버튼</td>
</tr>
<tr>
<td>Hero</td>
<td>첫인상 + 핵심 가치</td>
<td>헤드라인, 서브카피, 페이크 UI</td>
</tr>
<tr>
<td>Problem/Solution</td>
<td>공감 형성</td>
<td>페인포인트 3가지, 솔루션 소개</td>
</tr>
<tr>
<td>How it Works</td>
<td>신뢰 구축</td>
<td>3단계 프로세스</td>
</tr>
<tr>
<td>Features</td>
<td>기능 소개</td>
<td>4가지 핵심 기능 카드</td>
</tr>
<tr>
<td>Use Cases</td>
<td>타겟 공감</td>
<td>4개 페르소나 시나리오</td>
</tr>
<tr>
<td>Pricing</td>
<td>가격 제안</td>
<td>3단계 플랜 (미출시 티저)</td>
</tr>
<tr>
<td>Final CTA</td>
<td>전환 유도</td>
<td>대형 CTA 버튼</td>
</tr>
<tr>
<td>Footer</td>
<td>정보</td>
<td>약관</td>
</tr>
</tbody></table>
<hr>
<h3>1. Navigation Bar (상단 고정)</h3>
<p><strong>좌측:</strong></p>
<ul>
<li>로고: &quot;CoreBriefing&quot; 텍스트 또는 심플한 아이콘 로고</li>
</ul>
<p><strong>우측:</strong></p>
<ul>
<li>앵커 링크: 서비스 소개 | 주요 기능 | 사용 사례 | 가격 정책</li>
<li><strong>CTA 버튼:</strong> <code>[출시 알림 신청]</code> — 오렌지 배경<ul>
<li>클릭 시: Tally 폼 링크 열기 (새 탭 또는 모달)</li>
</ul>
</li>
</ul>
<hr>
<h3>2. Hero Section</h3>
<p><strong>배경:</strong> 딥 블루 그라디언트 (#0A2A54 → #1C3144)</p>
<p><strong>콘텐츠 (중앙 정렬):</strong></p>
<ul>
<li>서비스명: <strong>CoreBriefing</strong></li>
<li>부제: AI 정보 요약 솔루션</li>
<li><strong>H1:</strong> 정보의 홍수 속, 핵심만 빠르게!</li>
<li><strong>서브 카피:</strong> 링크, 텍스트, 파일, 유튜브 영상까지 AI가 핵심만 요약해 드립니다.</li>
</ul>
<p><strong>페이크 요약 입력 UI (실제 동작 X):</strong></p>
<ul>
<li>탭: <code>[URL]</code> <code>[텍스트]</code> <code>[파일]</code> <code>[YouTube]</code></li>
<li>입력창: &quot;요약할 링크를 입력하세요...&quot; (placeholder)</li>
<li><code>[요약하기]</code> 버튼 → 클릭 시 Tally 폼으로 이동</li>
</ul>
<hr>
<h3>3. Problem / Solution Section</h3>
<p><strong>H2:</strong> 혹시, 이런 어려움을 겪고 계신가요?</p>
<p><strong>문제점 카드 3개:</strong></p>
<ol>
<li>&quot;읽어야 할 정보는 너무 많은데, 시간이 부족해요.&quot;</li>
<li>&quot;긴 글이나 영상을 다 보고 핵심을 파악하기 힘들어요.&quot;</li>
<li>&quot;중요한 내용을 놓칠까 봐 불안해요.&quot;</li>
</ol>
<p><strong>전환 문구:</strong> → 코어브리핑이 해결해 드립니다!</p>
<p><strong>솔루션 소개:</strong> AI 기술로 어떤 정보든 핵심만 정확하게 요약하여 당신의 시간을 아껴드립니다.</p>
<hr>
<h3>4. How it Works Section</h3>
<p><strong>H2:</strong> 코어브리핑, 3단계로 끝!</p>
<table>
<thead>
<tr>
<th>단계</th>
<th>아이콘</th>
<th>설명</th>
</tr>
</thead>
<tbody><tr>
<td>Step 1: 정보 입력</td>
<td>📎 업로드</td>
<td>요약할 텍스트, 파일, 웹/유튜브 링크를 입력하세요.</td>
</tr>
<tr>
<td>Step 2: AI 분석</td>
<td>🤖 분석</td>
<td>코어브리핑 AI가 실시간으로 내용을 분석하고 핵심을 추출합니다.</td>
</tr>
<tr>
<td>Step 3: 결과 확인</td>
<td>✨ 완료</td>
<td>깔끔하게 정리된 요약본과 주요 키워드를 바로 확인하세요!</td>
</tr>
</tbody></table>
<hr>
<h3>5. Features Section</h3>
<p><strong>H2:</strong> 코어브리핑의 핵심 기능</p>
<ul>
<li><strong>다양한 정보 요약:</strong> 텍스트, URL, PDF/DOCX, YouTube까지 모두 지원</li>
<li><strong>맞춤형 요약 길이:</strong> 짧게 / 중간 / 길게 선택 가능</li>
<li><strong>핵심 키워드 추출:</strong> AI가 핵심 단어를 자동 하이라이트</li>
<li><strong>요약본 저장/공유:</strong> Pro 플랜에서 히스토리 관리 및 공유 링크 생성</li>
</ul>
<hr>
<h3>6. Pricing Section (티저)</h3>
<p><strong>H2:</strong> 합리적인 플랜을 기대하세요!</p>
<p><strong>안내 문구:</strong> 지금 웨이팅 리스트에 등록하고 얼리버드 특별 할인을 받아보세요!</p>
<table>
<thead>
<tr>
<th>플랜</th>
<th>설명</th>
</tr>
</thead>
<tbody><tr>
<td>Free</td>
<td>가볍게 시작하고 싶은 분들을 위한 무료 플랜</td>
</tr>
<tr>
<td>Basic</td>
<td>합리적인 가격으로 더 많은 기능을!</td>
</tr>
<tr>
<td>Pro</td>
<td>전문가를 위한 모든 기능 무제한 제공!</td>
</tr>
</tbody></table>
<p><strong>CTA:</strong> <code>[출시 알림 신청하고 혜택받기]</code></p>
<hr>
<h3>7. Final CTA Section</h3>
<p><strong>H2:</strong> 정보의 핵심을 잡는 가장 스마트한 방법,
<strong>H1:</strong> CoreBriefing</p>
<p><strong>CTA (가장 큰 버튼):</strong> <code>[지금 바로 출시 알림 신청하기]</code> → Tally 폼</p>
<hr>
<h3>8. Footer</h3>
<ul>
<li>개인정보처리방침 | 이용약관</li>
</ul>
<hr>
<h2>대안: v0.dev로 바로 UI 생성</h2>
<p>텍스트 기획서가 완성됐다면 <a href="https://v0.dev/">v0.dev</a>에서 바로 React 컴포넌트로 변환할 수 있습니다.</p>
<pre><code>v0.dev 프롬프트 예시:
&quot;CoreBriefing AI 요약 서비스의 랜딩페이지를 만들어줘.
딥 블루 (#0A2A54) 배경, 오렌지 CTA 버튼, Tailwind CSS 사용.
Hero 섹션에 페이크 탭 UI(URL/텍스트/파일/YouTube) 포함.&quot;
</code></pre>
<blockquote>
<p>v0.dev는 Vercel이 만든 AI UI 생성 도구입니다. 무료로 월 200 크레딧이 제공됩니다.</p>
</blockquote>
<hr>
<h2>다음 단계</h2>
<p>화면 설계서가 완성되면 다음 챕터 <strong>랜딩페이지 화면 설계서 상세</strong>에서 섹션별 상세 스펙을 확인합니다.</p>
<hr>
<h2>7장 보강 프로세스 적용: 유튜브 대본 기반 실전 설계 패턴</h2>
<p>6장에서 사용한 보강 프로세스(인기 대본 패턴 분석 → 실패 포인트 제거 → 실행형 산출물 고정)를 04챕터에도 동일 적용합니다.</p>
<h3>대본 공통 패턴에서 뽑은 핵심</h3>
<p>입문자 대상 인기 튜토리얼을 보면, 와이어프레임 단계에서 잘되는 팀은 공통적으로 아래 3가지를 먼저 고정합니다.</p>
<ol>
<li><p><strong>페이지 목적 1문장</strong></p>
<ul>
<li>예: &quot;이 페이지의 목적은 이메일 리드 수집이다.&quot;</li>
</ul>
</li>
<li><p><strong>섹션별 CTA 흐름</strong></p>
<ul>
<li>어느 버튼이 어디로 이동하는지(모달/외부 링크)를 명시</li>
</ul>
</li>
<li><p><strong>페이크 요소와 실제 요소 구분</strong></p>
<ul>
<li>데모 UI인지, 실제 동작인지 명확히 분리</li>
</ul>
</li>
</ol>
<h3>Prompt → 산출물 매핑표 (실무형)</h3>
<table>
<thead>
<tr>
<th>프롬프트 요소</th>
<th>산출물 위치</th>
<th>검수 기준</th>
</tr>
</thead>
<tbody><tr>
<td>원페이지 스크롤형</td>
<td>페이지 구조 개요</td>
<td>섹션 순서가 자연스럽게 이어지는가</td>
</tr>
<tr>
<td>CTA 클릭 시 Tally 연결</td>
<td>Navigation/Hero/Final CTA</td>
<td>모든 CTA가 동일 링크로 수렴하는가</td>
</tr>
<tr>
<td>사용 시나리오 포함</td>
<td>Problem/Solution, Use Cases</td>
<td>페르소나별 행동이 구체적인가</td>
</tr>
<tr>
<td>실제 기능 미동작(페이크)</td>
<td>Hero 페이크 UI</td>
<td>사용자가 오해할 표현이 없는가</td>
</tr>
</tbody></table>
<h3>초보자 실패 패턴 TOP 4 (04챕터)</h3>
<ol>
<li><p><strong>섹션을 너무 많이 넣음</strong></p>
<ul>
<li>해결: 최초 버전은 8개 섹션 고정, 새 섹션 추가 금지</li>
</ul>
</li>
<li><p><strong>CTA가 여러 목적을 가짐</strong></p>
<ul>
<li>해결: CTA 목적은 웨이팅 등록 1개로 통일</li>
</ul>
</li>
<li><p><strong>복잡한 문구를 먼저 작성함</strong></p>
<ul>
<li>해결: 카피보다 구조(섹션·컴포넌트) 먼저 확정</li>
</ul>
</li>
<li><p><strong>와이어프레임과 구현 요구사항 불일치</strong></p>
<ul>
<li>해결: 다음 챕터로 넘길 &quot;구현 입력값&quot;을 마지막에 명시</li>
</ul>
</li>
</ol>
<h3>04챕터 완료 체크리스트 (DoD)</h3>
<ul>
<li><input disabled="" type="checkbox"> 페이지 목적 1문장 작성 완료</li>
<li><input disabled="" type="checkbox"> 섹션 8개 구조 확정 완료</li>
<li><input disabled="" type="checkbox"> CTA 목적/링크 1개로 통일</li>
<li><input disabled="" type="checkbox"> 페이크 UI와 실제 동작 구분 표시 완료</li>
<li><input disabled="" type="checkbox"> 다음 챕터에서 사용할 구현 입력값(색상/섹션/컴포넌트) 정리 완료</li>
</ul>
<blockquote>
<p><strong>다음 챕터 입력값:</strong> 섹션 목록, CTA 링크, 톤앤매너, 색상 토큰, 컴포넌트 초안</p>
</blockquote>