docs: add fun & engagement overhaul spec and Phase 0 implementation plan

Six-category brainstorm (first-5min hook, mid-game stagnation, long-term
meta, social loops, ad-friendly monetization, polish/SFX) consolidated into
a master spec; Phase 0 hotfix decomposed into 8 implementer-ready tasks
(haptic, SFX, legendary shake, lucky fusion, combo meter, discovery hero,
welcome gift, ad slot).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs/superpowers/specs/2026-04-28-fun-engagement-overhaul-design.md

@@ -0,0 +1,332 @@
+# Archetype-FirstSpark — 재미·리텐션·수익화 전면 개선안
+
+- **작성일:** 2026-04-28
+- **출시 타겟:** 2026-04-30 (Paperclip JSA-2)
+- **선결 조건:** 현재 미커밋 변경 (`CharacterSprite.tsx`, `ElementsScreen.tsx`, `FusionScreen.tsx`, `ShopScreen.tsx`, `useGameStore.ts`) 정리·커밋 후 작업 시작
+- **상위 spec:** `2026-04-27-web-engine-pivot-design.md` (웹 PWA 전환 + 광고 수익화)
+
+---
+
+## 1. 문제 정의
+
+코어 시스템(합성, 자동생산, 강화, 공명, 프레스티지, 업적, 부스트, 오프라인 보상, 튜토리얼)은 모두 구현돼 있지만, **각 시스템이 플레이어의 "감정 곡선"과 강하게 연결돼 있지 않다.** 다음 세 가지 갭이 핵심:
+
+| 구간 | 증상 | 원인 |
+|---|---|---|
+| 첫 5분 | 튜토리얼이 끝나면 "그래서 뭐?" 이탈 위험 | 첫 합성·발견 모먼트 연출 약함, 자동생산이 너무 빨리 손을 대신함 |
+| Tier 3~4 중반 | 자동생산만 보고 있게 됨 | 능동 행동에 보상이 없음, 일일 챌린지/이벤트 부재 |
+| 프레스티지 후 | "다음 목표가 뭐지?" | 콜렉션·도감·계보·시즌 등 메타게임 깊이 부재 |
+
+추가로 **광고 수익화 동선이 0**이고, **연출(SFX·햅틱·이펙트)이 시스템 임팩트보다 약하다.**
+
+---
+
+## 2. 개선 목표
+
+1. **첫 세션 리텐션** — 튜토리얼 5분 완주 → 다음 날 재방문
+2. **세션당 능동 행동** — 자동생산 외 능동 인터랙션 분당 횟수 ↑
+3. **광고 노출 자연스러움** — 강제 인터스티셜 0, 리워드형만, 일일 광고 시청률 1+
+4. **장기 후크 1개 이상** — 프레스티지 후에도 "그 다음" 명확
+
+---
+
+## 3. 카테고리별 개선안
+
+표기: 💡 출시 전 끼울 수 있음 (수 시간) / 🔧 v1.1 (수일) / 🏔 v1.2+ (큰 그림)
+
+---
+
+### A. 첫 5분의 후크
+
+#### A-1. 콜드오픈 시네마틱 1.5초 🔧
+- **무엇:** 검은 화면 → 4원소 차례로 등장 → "당신이 세상의 첫 불꽃입니다" 한 줄 → 게임 진입
+- **왜:** 무드 설정. 단순 idle 게임이 아니라 "창조자 서사"라는 톤 알림
+- **어디:** `App.tsx` 진입점 + 새 컴포넌트 `IntroSplash.tsx`. 첫 1회만 (`tutorialStep === 0` 플래그 사용)
+
+#### A-2. 첫 합성 강제 페이싱 🔧
+- **무엇:** 첫 60초간 자동생산 OFF, 4원소 중 손으로 1번 합성하도록 유도
+- **왜:** 손이 시스템을 학습. 자동생산이 학습을 빼앗는 것 방지
+- **어디:** `useGameStore.tickIdle` — `tutorialCompleted=false && tutorialStep<=2`일 때 spawn skip. 튜토리얼 step에 합성 1회 강제 추가
+
+#### A-3. 첫 발견 풀스크린 카드 💡
+- **무엇:** 새 원소 첫 발견 시 0.8초 풀스크린 카드 (캐릭터 + 이름 + "Ngth 발견" 가짜 카운터)
+- **왜:** 도파민 임펙트. 합성 결과 배너만으로는 약함
+- **어디:** `FusionScreen.tsx` 결과 처리부에 `discoveredElements`에 새로 추가됐는지 확인 후 모달 트리거. 새 컴포넌트 `DiscoveryHero.tsx`
+
+#### A-4. 튜토리얼 완료 보상 🎁 💡
+- **무엇:** 5단계 튜토리얼 끝에 "환영 선물" 모션 + Tier 2 원소 1개 랜덤 지급
+- **왜:** 첫 5분 끝에 명확한 "받았다" 감각
+- **어디:** `useGameStore.advanceTutorial`에서 `nextStep === 5` 분기. 새 액션 `claimWelcomeGift`
+
+#### A-5. 미발견 도감 슬롯 강화 💡
+- **무엇:** 미발견 원소 카드를 "?"가 아닌 실루엣 + 잠금 해제 힌트 ("불 + ? 조합으로 발견 가능")
+- **왜:** 빈 슬롯이 시각적 갈증을 만들어야 함
+- **어디:** `ElementsScreen.tsx` `undiscoveredCardStyle` + `CharacterSprite` `state="undiscovered"` 분기. 힌트는 `recipes.json`을 거꾸로 매칭
+
+#### A-6. 데일리 보너스 시드 🔧
+- **무엇:** 첫 접속 시 다음 날 "어제 못 받은 보상이 있습니다" 알림 만들기 — `lastLoginAt` 추가
+- **왜:** D+1 리텐션 직접 자극
+- **어디:** `useGameStore` 상태에 `lastLoginAt`, `dailyStreak` 추가. `OfflineRewardModal`을 `DailyBonusModal`로 확장
+
+---
+
+### B. 중반 정체기 해소
+
+#### B-1. 합성 콤보 미터 💡
+- **무엇:** 직전 합성 후 8초 이내 재합성 시 콤보 누적. 임계: 3콤보 x1.5 / 6콤보 x2 / 10콤보 x3 (이후 캡). 8초 무합성 시 리셋
+- **왜:** 능동 합성을 보상. "한 번 더" 도파민
+- **어디:** `useGameStore`에 `comboCount`, `comboExpiresAt` 추가. `fuse()`에서 갱신, `goldGained` 곱셈. `FusionScreen` 상단에 콤보 바 + 남은 시간 카운트다운
+
+#### B-2. 탭-투-수확 💡
+- **무엇:** 자동생산 progress 바가 100%일 때 탭하면 즉시 수확 + 1.5x 보너스
+- **왜:** 정체기에 손을 다시 게임에 묶음. 진행바는 이미 있음
+- **어디:** `ElementsScreen.tsx` `producerLaneStyle` 클릭 핸들러. progress가 `>= 0.95`일 때만 활성화
+
+#### B-3. 일일 미션 3종 🔧
+- **무엇:** 매일 0시 갱신. "합성 30번 / 새 원소 3종 / 골드 10K". 모두 완료 시 부스트 1시간
+- **왜:** 매일 접속 동기. 출시 직후 D+1~D+7 리텐션의 80%
+- **어디:** 새 데이터 `daily-missions.json`. `useGameStore`에 `dailyMissions`, `dailyMissionsResetAt`. 새 화면 슬롯 또는 BottomTab 신설
+
+#### B-4. Element Storm 이벤트 🔧
+- **무엇:** 6시간마다 5분간 랜덤 원소 1종 스폰 x5
+- **왜:** "지금 들어와야 한다" 시드. 푸시 알림 없이도 작동
+- **어디:** `useGameStore`에 `activeStorm: {elementId, expiresAt}`. `tickIdle`에서 해당 원소 스폰 배율. 상단 배너 컴포넌트
+
+#### B-5. 럭키 합성 💡
+- **무엇:** 1% 확률로 같은 재료에서 한 단계 위 원소 등장 (합성 결과의 result.tier+1)
+- **왜:** 임계 임팩트. "이번엔 뭐가 나올까" 기대치
+- **어디:** `useGameStore.fuse()` 내부, recipe 매칭 후 1% 분기. 결과 화면에 "🍀 LUCKY" 배지. SFX 별도
+
+#### B-6. 빌드 분기 슬롯 🏔
+- **무엇:** Tier 4 도달 시 "골드형 / 수집형 / 공명형" 영구 1개 선택 (각 +20% 보너스)
+- **왜:** 의식 + 정체성. 프레스티지마다 빌드 바꿀 수도 있게
+- **어디:** `useGameStore`에 `selectedBuild`. 새 모달 `BuildChoiceModal.tsx`. 적용은 `tickIdle` 배수에 합성
+
+#### B-7. 결투 미니게임 🔧
+- **무엇:** 두 원소 카드를 부딪히면 1탭 가위바위보식 단판 → 승자 흡수, 골드 배수 보상
+- **왜:** 1분 미만 액티브 미니게임. 손맛 채움
+- **어디:** 새 화면 `DuelScreen.tsx`. BottomTab 또는 Shop 내 메뉴. `useGameStore.duel(a, b)` 액션
+
+---
+
+### C. 장기 메타게임 깊이
+
+#### C-1. 원소 도감 (Codex) v0 💡
+- **무엇:** 원소별 한 줄 플레이버 텍스트 + "수집 합계 / 강화 합계 / 첫 발견 시각" 통계
+- **왜:** 컬렉션 동기 부여. 출시 직전에도 가능
+- **어디:** `elements.json`에 `lore: string` 필드 추가. `AchievementsScreen` 또는 `ElementsScreen` 상세 모달에 탭 추가
+
+#### C-2. 캐릭터 진화 비주얼 🏔
+- **무엇:** 같은 원소를 N번 강화/합성 시 SVG 변형 잠금해제 (수염, 후광, 파편 추가)
+- **왜:** 컬렉션 + 시간 투자 시각화
+- **어디:** `CharacterSprite.tsx`에 `evolutionStage` prop 추가. `useGameStore`에 원소별 `usageCount` 카운터
+
+#### C-3. Tier 6 신화급 🔧
+- **무엇:** 프레스티지 3회 후 추가 4종 등장. 합성 트리 끝단
+- **왜:** 출시 후 첫 콘텐츠 패치 후크
+- **어디:** `elements.json` + `recipes.json`에 데이터 추가. `unlockCondition`에 `prestige:N` 형식 추가
+
+#### C-4. 시즌 한정 원소 🏔
+- **무엇:** 매월 1종 한정. 못 얻으면 영원히 못 얻음
+- **왜:** 소장 가치. 장기 유저 retention
+- **어디:** `elements.json`에 `availableFrom`, `availableTo` ISO 필드. 게임 시작 시 시즌 체크
+
+#### C-5. 무한 챌린지 모드 🏔
+- **무엇:** 프레스티지 N회 이상 시 "심연" 잠금해제. 합성 비용 누진, 무한 깊이
+- **왜:** 엔드게임 콘텐츠
+
+#### C-6. 부모-자식 계보 트리 🔧
+- **무엇:** "이 원소는 ◯+◯에서 태어났습니다 → 이 원소는 ◯+◯의 재료가 됩니다" 시각화
+- **왜:** 합성 트리 자체가 컨텐츠. 다음 합성 동기
+- **어디:** 새 화면 또는 도감 모달 내 탭. `recipes.json` 양방향 매핑 한 번만
+
+---
+
+### D. 소셜·바이럴 훅
+
+#### D-1. 합성 결과 공유 이미지 🔧
+- **무엇:** 캔버스로 "Ember + Mist = Steam 발견!" 카드 자동 생성 → 시스템 공유 시트
+- **왜:** "내 발견을 자랑". 유기적 유입
+- **어디:** 새 유틸 `src/lib/shareCard.ts` (canvas 2D). `navigator.share()` 우선, 실패 시 다운로드
+
+#### D-2. 스크린샷 명예의 전당 🔧
+- **무엇:** 프레스티지/레전더리 발견 시 자동 캡처 → 갤러리 탭
+- **왜:** "내 여정" 자료 축적
+- **어디:** `useGameStore`에 `screenshots: string[]` (base64 또는 IndexedDB). 새 화면 `GalleryScreen.tsx`
+
+#### D-3. 친구 코드 🔧
+- **무엇:** 6자리 코드 입력 시 양쪽 1회 부스트. 서버 없이 URL 파라미터로
+- **왜:** 친구 초대 = 가장 강력한 수익성 채널
+- **어디:** `?ref=ABC123` URL 파라미터 → `useGameStore.applyReferral()`. 코드는 hashed `userId`
+
+#### D-4. 도감 공유 URL 💡
+- **무엇:** 내 진행도를 정적 URL로. 받는 쪽은 view-only
+- **왜:** 자랑 동기 + 입소문
+- **어디:** `localStorage` 직렬화 → base64 → URL 파라미터. 100KB 미만이라 가능
+
+#### D-5. 데일리 글로벌 시드 🏔
+- **무엇:** 모든 유저가 동일한 "오늘의 레시피 챌린지" → 익명 leaderboard
+- **왜:** 같이 했다는 감각. v2에서 서버 갖췄을 때
+
+#### D-6. 타이틀 OG 이미지 🔧
+- **무엇:** 프레스티지 칭호를 OG meta로 카톡 미리보기에 노출
+- **왜:** 공유 시 "프로필 카드"가 자동으로 보임
+- **어디:** `index.html` `og:image`를 동적 URL로. 출시 직후엔 정적 1장도 OK
+
+---
+
+### E. 광고 수익화 친화 동선
+
+> 정책 결정: **인터스티셜 0, 모두 리워드형.** 강제 광고 없음.
+
+#### E-1. 오프라인 보상 2배 광고 💡
+- **무엇:** `OfflineRewardModal`에 "광고 보고 2배" 버튼 1개 추가
+- **왜:** 가장 자연스러운 첫 광고 동선. 사용자가 이미 "보상" 모드라 친화적
+- **어디:** `OfflineRewardModal.tsx` + 광고 SDK 어댑터 (`src/platform/ads.ts`). `claimOfflineReward(multiplier)` 시그니처 확장
+
+#### E-2. 즉시 30분 부스트 (광고) 💡
+- **무엇:** Shop에 "FREE" 슬롯 신설. 광고 시청 → 30분 글로벌 x2. 일 3회 한도
+- **어디:** `ShopScreen.tsx` 상단에 무료 섹션. `useGameStore`에 `freeBoostUsedToday`
+
+#### E-3. 합성 실패 → 재시도 광고 💡
+- **무엇:** "알 수 없는 조합" 에러에 "광고 보고 한 번 더" — 사실상 도파민 회수
+- **어디:** `FusionScreen` errorBanner 내 버튼
+
+#### E-4. 일일 무료 가챠 1회 🔧
+- **무엇:** 광고 시청 → 보유 원소 1단계 위 랜덤 1개
+- **어디:** 새 컴포넌트 `DailyGachaCard.tsx`. `useGameStore.gacha()` 액션
+
+#### E-5. 골드 펀딩 💡
+- **무엇:** 강화 비용 부족 시 "절반 광고로 메우기" 버튼
+- **어디:** `ElementsScreen` `DetailPanel` 강화 섹션
+
+#### E-6. 광고 방패 🔧
+- **무엇:** 광고 1개 시청 → 30분간 "광고 OFF" (실제로는 광고 없는 상태이므로 의미는 신뢰 시그널)
+- **왜:** "광고가 강요되지 않는다"는 정책을 가시화. 사용자 신뢰
+
+#### E-7. 배너 영역 분리 💡
+- **무엇:** 하단 탭바 위 1줄 배너 영역. 게임 영역 침범 금지
+- **어디:** `App.tsx` 레이아웃에 `<AdBanner>` 슬롯. 광고 미연동 시 빈 영역
+
+#### E-8. 광고 SDK 어댑터 💡 *(선결)*
+- **무엇:** 광고 SDK를 `src/platform/ads.ts` 뒤로 격리. 인터페이스: `showRewardedAd(): Promise<{ rewarded: boolean }>`
+- **왜:** 어떤 광고망을 쓰든 비즈 로직은 변경 없음. analytics 어댑터와 같은 패턴
+
+---
+
+### F. 감정·연출 강화
+
+#### F-1. rarity별 SFX 💡
+- **무엇:** common 톡 / uncommon 띵 / rare 종 / epic 차임벨 / legendary 크리스탈 굉음
+- **소스 정책:** Phase 0은 **Web Audio API로 즉시 합성** (사인파 + 엔벨로프, 외부 파일 0). Phase 1에서 freesound.org CC0 mp3로 교체
+- **어디:** 새 유틸 `src/lib/sfx.ts`. `bgmEnabled` 외 `sfxEnabled` 별도 토글 추가 (Settings 화면 + `useGameStore`)
+
+#### F-2. 레전더리 발견 카메라 셰이크 💡
+- **무엇:** 0.4초 화면 정지 + transform 진동 + 가장자리 글로우
+- **왜:** 시스템 임팩트가 시각 임팩트보다 강할 때, 진동을 추가해 균형
+- **어디:** `App.tsx` 루트에 `transform` 클래스 토글. `RARITY_GLOW`는 이미 `FusionScreen`에 있음
+
+#### F-3. BGM 스템 시스템 🏔
+- **무엇:** Tier 해금 단계마다 새 악기 레이어 추가 (Crashlands 스타일)
+- **어디:** 5개 mp3 stem + Web Audio mixer. `bgmEnabled` 토글 유지
+
+#### F-4. 캐릭터 미세 인터랙션 💡
+- **무엇:** 30초 이상 한 화면 머무를 때 캐릭터 하품/깜빡임 애니메이션
+- **어디:** `CharacterSprite.tsx`에 `idleVariant` prop. `ElementsScreen`에서 30초 타이머
+
+#### F-5. 시간대 톤 변화 💡
+- **무엇:** 디바이스 시계 기준 아침/낮/저녁/밤 4단계 배경 그라디언트
+- **어디:** `App.tsx` 루트 `rootStyle` 동적. `getTimeOfDay()` 유틸
+
+#### F-6. 첫 발견 칭찬 한 줄 💡
+- **무엇:** "창조자여, 새로운 빛을 발견했군요" 풀스크린 1초 (A-3과 같이 처리)
+- **어디:** `DiscoveryHero.tsx` (A-3와 통합)
+
+#### F-7. 키 일러스트 활용 🔧
+- **무엇:** `Ember_Origin.jpg` 톤의 키 일러스트를 발견 모달 배경 / 프레스티지 / 로딩 스플래시에
+- **왜:** 톤 통일. 현재는 SVG 캐릭터만 있어서 "느낌"이 부족
+
+#### F-8. 햅틱 진동 💡
+- **무엇:** `navigator.vibrate()` — 합성 50ms / 프레스티지 200ms / 레전더리 [80, 40, 80]
+- **어디:** 각 액션 후 `vibrate()` 호출. 설정에서 `hapticEnabled` 토글
+
+---
+
+## 4. 출시 D-2 (4-30) 단기 패치 — Phase 0
+
+> **목표:** 4-30 출시 빌드에 끼울 수 있는, 임팩트 큰 6시간 묶음.
+> 모두 `core changes only` — 새 화면/새 데이터 추가 없음.
+
+| ID | 항목 | 부담 | 임팩트 |
+|---|---|---|---|
+| **A-3** | 첫 발견 풀스크린 카드 | 1.5h | 첫 5분 후크 |
+| **A-4** | 튜토리얼 완료 보상 | 0.5h | 첫 5분 마무리 |
+| **B-1** | 합성 콤보 미터 | 1.5h | 능동 합성 보상 |
+| **B-5** | 럭키 합성 (1%) | 0.3h | 도파민 임펙트 |
+| **F-1** | rarity별 SFX | 1.0h | 감각 자체가 변함 |
+| **F-2** | 레전더리 셰이크 | 0.5h | F-1과 합쳐 강함 |
+| **F-8** | 햅틱 진동 | 0.3h | 모바일 체감 |
+| **E-7** | 배너 영역 분리 | 0.4h | 광고 준비만 |
+
+**합계 약 6시간.** 모두 단일 PR로 가능. 광고 SDK 연동(E-1, E-2)은 SDK 선정 시간이 변수라 별도 패치.
+
+---
+
+## 5. v1.1 (출시 후 1~2주) — Phase 1
+
+| 카테고리 | 항목 |
+|---|---|
+| 후크 | A-1 콜드오픈 / A-2 첫 합성 강제 / A-5 도감 슬롯 / A-6 데일리 보너스 |
+| 정체기 | B-2 탭-투-수확 / B-3 일일 미션 / B-4 Element Storm |
+| 깊이 | C-1 도감 v0 / C-3 Tier 6 신화급 / C-6 계보 트리 |
+| 소셜 | D-1 공유 이미지 / D-4 도감 URL / D-6 OG 이미지 |
+| 수익화 | E-1 오프라인 2배 / E-2 30분 부스트 / E-3 재시도 광고 / E-5 골드 펀딩 / E-8 광고 어댑터 |
+| 연출 | F-4 미세 인터랙션 / F-5 시간대 톤 / F-7 키 일러스트 |
+
+**우선순위 권장:** E-1 ~ E-8 (수익화 동선) → A-1 ~ A-6 (리텐션) → 기타.
+
+---
+
+## 6. v1.2+ (장기) — Phase 2
+
+| 카테고리 | 항목 |
+|---|---|
+| 깊이 | B-6 빌드 분기 / C-2 진화 비주얼 / C-4 시즌 한정 / C-5 무한 모드 |
+| 소셜 | D-3 친구 코드 / D-5 글로벌 시드 |
+| 정체기 | B-7 결투 미니게임 |
+| 연출 | F-3 BGM 스템 |
+| 수익화 | E-4 일일 가챠 / E-6 광고 방패 |
+
+---
+
+## 7. 측정 지표 (KPI)
+
+각 단계에서 다음을 `trackGameEvent`로 추적:
+
+| 지표 | 측정 |
+|---|---|
+| **D+1 리텐션** | 첫 접속 24h 후 재접속 비율 |
+| **튜토리얼 완주율** | `tutorialCompleted=true` / 첫 접속 |
+| **세션당 합성 횟수** | `fusion_completed` 이벤트 수 |
+| **콤보 도달률** | 콤보 x2 이상 도달 세션 비율 |
+| **광고 시청률** | 일일 활성 유저 중 광고 1회 이상 시청 |
+| **프레스티지 도달률** | `prestige_count >= 1` 비율 |
+
+---
+
+## 8. 의도적 제외 (YAGNI)
+
+- 서버 의존 기능 (전역 leaderboard, 실시간 멀티) — v2 이전엔 안 함
+- 결제(IAP) — 광고 수익화 우선, IAP는 시장 반응 본 후
+- PvP / 길드 / 채팅 — 게임 성격에 맞지 않음
+- 강제 인터스티셜 광고 — 정책으로 영구 금지
+- 푸시 알림 — Web PWA로 출시, native 푸시는 나중
+
+---
+
+## 9. 다음 단계
+
+1. **사용자 검토** — 이 문서의 우선순위·범위에 동의하는지
+2. **Phase 0 (출시 D-2)** 항목들에 대한 구현 계획 작성 — `writing-plans` 스킬로 `docs/superpowers/plans/2026-04-28-phase0-fun-patch.md` 만들기
+3. **광고 SDK 선정** — Phase 1 진입 전제 조건 (AdSense vs AdMob Web vs Carrot 등)
+4. **Phase 1 실행** — Phase 0 출시 후 D+3 ~ D+14