3주차_ "나만의 MVP 앱 구현해 보기" 에서 랜딩페이지 만들어보기

# RunCoach 워치앱 랜딩페이지 — AI와 함께 기획부터 Vercel 배포까지 한 번에

---

## 소개

### 시도하고자 했던 것과 그 이유

갤럭시 워치5 전용 AI 러닝 코칭 앱 **RunCoach**를 만들었는데, 앱만 있으면 아무도 모르잖아요.

앱을 소개하고 실제로 판매까지 연결할 수 있는 **랜딩페이지**가 필요했습니다. 근데 막상 만들려고 하니 고민이 생겼어요.

> "어떤 기능을 앞에 내세워야 할까?"
> "타깃을 어떻게 설정하지?"
> "가격은 구독으로 해야 할까, 일회성 구매로 해야 할까?"

그냥 Claude한테 "랜딩페이지 만들어줘" 라고 하면 일반적인 SaaS 템플릿 같은 게 나올 것 같았어요. 그래서 이번엔 `/thinking-partner` 모드로 먼저 **기획을 함께 설계**하고, 그 다음에 코드를 만들어보기로 했습니다.

목표는 하나였어요.

**"코드 한 줄 안 쓰고, 기획~디자인~개발~배포까지 오늘 안에 끝낸다."**

---

## 진행 방법

### 사용 도구

- **Claude Code** — 기획, 코드 구현, 배포 안내 전 과정
- **`/thinking-partner`** — 랜딩페이지 구조 설계를 위한 질문 중심 대화
- **Vercel CLI** — `vercel --prod` 한 줄로 배포

---

### Step 1. Thinking Partner로 기획 먼저

바로 만들지 않고, `/thinking-partner` 모드로 전환해서 질문을 받으며 구조를 잡았어요.

Claude가 답을 주는 게 아니라 **저에게 질문**을 던집니다.

```
💬 Claude: "이 랜딩페이지의 방문자는 누구인가요?
달리기를 막 시작한 초보자? 기존 러닝앱에서 갈아타려는 사람?
갤럭시 워치5를 가지고 있는데 활용 못 하고 있는 사람?"
```

```
💬 Claude: "방문자가 페이지에 들어왔을 때, 처음 5초 안에
무슨 말을 들어야 '이거 나한테 필요한 앱이네'라고 느낄까요?

후보를 하나 드리면 —
'매주 일요일, 손목에서 시작하는 나만의 러닝 코치'
이 문장이 맞는 방향인가요?"
```

이 과정에서 제가 직접 ��뽑은 메인 카피:

> **"항상 당신과 함께 달리는 런코치, 개인비서처럼 당신의 러닝습관을 브리핑하자!"**

그리고 가격 모델도 이 대화에서 결정했어요.

- ❌ 월정액 구독
- ✅ **무료 10회 체험 + 일회성 구매 ₩9,900**

질문을 통해 나온 최종 설계:

| 항목 | 결정 내용 |
|------|----------|
| 타깃 | 40~50대 주말러너, Galaxy Watch 5/6/7/8 사용자 |
| 핵심 차별점 | 기록 앱이 아니라 AI 러닝 코치 |
| 브리핑 스타일 | 숫자 중심 ❌ → 전략 중심 ✅ |
| 가격 | 무료 10회 + 일회성 ₩9,900 |

---

### Step 2. 랜딩페이지 제작

기획이 확정되자마자 Claude Code가 바로 `index.html` 단일 파일로 전체 랜딩페이지를 만들었습니다.

**10개 섹션 구성:**

| # | 섹션 | 내용 |
|---|------|------|
| 1 | 네비게이션 | 로고 + 무료로 시작 CTA |
| 2 | 히어로 | 메인 카피 + 워치 CSS 목업 |
| 3 | AI 브리핑 | 러닝 전/후 샘플 카드 + 재생 버튼 |
| 4 | 워치 커스터마이저 | 객관식 선택 → 실시간 워치 미리보기 |
| 5 | 핵심 기능 | 6개 카드 |
| 6 | 앱 플로우 | 5단계 워치 화면 흐름 |
| 7 | 페르소나 | 40~50대 공감 카드 2인 |
| 8 | 가격 | 무료 10회 vs ₩9,900 평생권 |
| 9 | FAQ | 아코디언 5개 |
| 10 | 하단 CTA | 최종 전환 유도 |

특히 **워치 커스터마이저 섹션**이 재미있어요. 방문자가 폰트·색상·버튼 위치를 직접 선택하면 오른쪽 워치 화면이 실시간으로 바뀝니다.

```javascript
// 커스터마이저 실시간 반영 핵심 코드
function setOption(btn, group, val) {
  document.querySelectorAll(`[data-group="${group}"]`)
    .forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  state[group] = val;
  updatePreview(); // 워치 미리보기 즉시 반영
}
```

---

### Step 3. Vercel 배포

```bash
# 1. 프리뷰 배포
vercel

# 2. 프로덕션 배포
vercel --prod
```

두 줄로 끝났습니다.

**배포 URL:** https://deploy-iota-opal.vercel.app

한 가지 주의할 점이 있었어요. 처음 `vercel.json`에 `builds` 설정을 넣었더니 경고가 발생했습니다. 정적 HTML 사이트는 아래처럼 단순하게 두는 게 좋습니다.

```json
{
  "cleanUrls": true,
  "trailingSlash": false
}
```

---

### Step 4. 실제 음성 재생 기능

브리핑 카드에 ▶ 버튼이 있지만 처음엔 인터랙션만 있고 소리가 없었어요. 브라우저 내장 **Web Speech API**를 써서 실제 한국어 음성 재생을 구현했습니다. 외부 API나 오디오 파일이 전혀 필요 없습니다.

```javascript
const utterance = new SpeechSynthesisUtterance(script);
utterance.lang = 'ko-KR';
utterance.rate = 0.95;
utterance.pitch = 1.05;
window.speechSynthesis.speak(utterance);
```

---

### Step 5. 코치 스타일 5종 선택 기능

여기서 가장 재미있었던 부분입니다. 단순히 TTS pitch/rate 값만 바꾸는 게 아니라, **스타일마다 스크립트 문체 자체를 다르게** 작성했어요.

| 스타일 | 실제 멘트 예시 |
|--------|-------------|
| 🌸 귀여운 여성 | "지난주에 5.1킬로 달리셨잖아요. 대박이에요! 화이팅!" |
| 🎸 중저음 남성 | "오늘 목표는 5.3킬로미터. 오늘도 완주합시다." |
| 💼 카랑카랑 비서 | "직전 세션, 5.1킬로미터, 완주. 브리핑 종료. 출발하십시오." |
| 🚇 아나운서 | "안내 말씀 드리겠습니다. 건강하고 안전한 러닝 되시기 바랍니다." |
| 😤 까칠한 배우자 | "맨날 초반에 힘 빼가지고... 이번엔 제대로 해봐. 씻어." |

까칠한 배우자 스타일이 제일 인기 있을 것 같습니다 😄

```javascript
const VOICE_STYLES = {
  cute:      { pitch: 1.45, rate: 1.08, pre: "안녕하세요~! 완전 기대돼요!..." },
  deep:      { pitch: 0.55, rate: 0.82, pre: "오늘 러닝을 시작합니다..." },
  secretary: { pitch: 1.12, rate: 1.18, pre: "오늘 러닝 브리핑입니다..." },
  announcer: { pitch: 0.88, rate: 0.78, pre: "안내 말씀 드리겠습니다..." },
  spouse:    { pitch: 1.02, rate: 1.06, pre: "어, 또 뛰러 가?..." }
};
```

---

## 결과와 배운 점

### 배운 점

**1. Thinking Partner 먼저, 코드는 나중에**

"랜딩페이지 만들어줘" 한 마디로 시작했다면 일반적인 결과물이 나왔을 거예요. `/thinking-partner`로 5분 동안 대화한 것만으로 타깃, 카피, 가격 모델이 전부 정해졌습니다. 설계가 명확하니 코드도 수정이 거의 없었어요.

**2. Web Speech API는 생각보다 강력하다**

외부 TTS API 쓰면 비용도 들고 키 관리도 해야 하는데, 브라우저 내장 API로 한국어 음성이 충분히 나옵니다. pitch/rate 파라미터로 캐릭터도 만들 수 있어요.

**3. 기획 질문 하나가 방향을 바꾼다**

"러닝 전 브리핑에서 가장 듣고 싶은 말이 뭔가요?" 라는 질문에 A(숫자), B(전략), C(컨디션) 중 **B(전략 중심)** 을 선택한 것이 앱의 핵심 메시지가 됐습니다. 이 선택 하나로 카피, 섹션 구성, 스크립트 문체가 전부 맞춰졌어요.

---

### 시행착오

- **vercel.json builds 경고**: 처음에 `@vercel/static` builds 설정을 넣었더니 배포 경고 발생. 정적 사이트는 `cleanUrls`만 있으면 충분.
- **Chrome TTS 버그**: 긴 텍스트를 읽다가 중간에 멈추는 Chrome 버그가 있음. 5초마다 `speechSynthesis.resume()` 호출로 해결.
- **iOS Safari TTS**: 사용자 터치 없이는 TTS가 동작 안 함. 버튼 탭으로 시작하는 구조라 문제없지만, 자동재생은 불가.

---

### 앞으로의 계획

- [ ] Google Play 실제 구매 링크 연결
- [ ] 개인정보처리방침 / 이용약관 페이지
- [ ] OG 태그 추가 (SNS 공유 미리보기)
- [ ] 커스터마이즈 설정 LocalStorage 저장
- [ ] 모바일 실기기 테스트

---

## 도움 받은 글 (옵션)

- Web Speech API MDN 문서: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
- Vercel 정적 사이트 배포: https://vercel.com/docs/deployments/overview
- 이전 작업 정리: `오늘작업_260321.md` (워치앱 구현 가이드)