세 명의 히로인과 5단계의 만남. 매 턴 AI가 실시간으로 반응하고, 당신의 말 한마디에 호감도·표정·분위기가 살아 움직입니다.
 🌸 김유정 ENFP · 브랜드 마케터 |
 📚 박지은 INFJ · 국문학 석사 |
 🎤 이수아 ESFP · 인플루언서 |
29살 모태솔로 강준모가 되어, 세 히로인과 소개팅을 합니다. 정해진 정답을 고르는 게임이 아니라 — AI가 상대의 성격·상황에 맞춰 매번 다르게 반응하고, 당신이 진심을 전하느냐 헛다리를 짚느냐에 따라 호감도가 오르내리며 엔딩이 갈립니다.
단순한 "선택지 게임"이 아니라, 캐릭터마다 다른 심리·말투·지뢰를 가진 한 편의 짧은 연애 웹툰을 플레이하는 느낌을 목표로 만들었습니다.
| 🤖 AI 실시간 대화 | Groq llama-3.3-70b 기반. 선택지를 고르거나 직접 입력해도 캐릭터가 맥락에 맞게 반응 |
| 💗 호감도 시스템 | 말 한마디마다 호감도 증감 → 일정 구간에 도달해야 클리어. 지뢰 선택지(상대가 싫어하는 것)는 감점 |
| 😶🌫️ 표정·배경 자동 변화 | 호감도에 따라 캐릭터 표정(설렘/차분/시무룩)과 배경 씬이 실시간으로 바뀜 |
| 🎭 입체적인 3인 히로인 | 각자 다른 MBTI·욕망·두려움·말투. "통하는 것"과 "식는 것"이 캐릭터마다 다름 |
| 🌃 5스테이지 루트 | 첫 만남부터 피날레까지, 장소·의상·심리가 단계별로 진화 |
| 📱 모바일 최적화 | iOS dvh·키보드·홈바 safe-area 대응. 폰에서 바로 플레이 |
대비 설계 — 수아: 보여지고 싶은데 외로운 ↔ 지은: 안 보여지고 싶은데 읽히는. 정반대 축으로 캐릭터를 가름.
| 🌸 김유정 (27) | 📚 박지은 (26) | 🎤 이수아 (25) | |
|---|---|---|---|
| 직업 | 브랜드 마케터 | 국문학 석사 과정 | 라이프스타일 인플루언서 |
| MBTI | ENFP | INFJ | ESFP |
| 한 줄 | 밝고 적극적, 리드형 | 조용한 관찰자, 진솔함이 신앙 | 화려한 가면 뒤의 외로움 |
| 통하는 것 | 같이 노는 텐션·농담 | 경청·기다림·이기려 들지 않기 | 텐션 받아주기·진짜를 봐주기 |
| 식는 것 | 건성으로 듣기 | 아는 척·진부한 질문 | 폰만 보기·억지·콘텐츠 취급 |
| 루트(5스테) | 카페→한강→영화→동거→루프탑 프러포즈 | 북카페→숲길→도서관→정독도서관(비)→석촌호수 벚꽃 | 카페→스튜디오→집→할머니댁→남산 피날레 |
플레이어 입력(선택지/자유입력)
│
▼
캐릭터별 시스템 프롬프트 + 스테이지 스크립트 → Groq AI → 반응 대사 생성
│ │
▼ ▼
호감도 증감 판정 ──────────────► 호감도(affinity) ──► 표정 슬롯(smile/neutral/bored)
│ + 배경 씬 자동 선택
▼
85 이상 → 클리어 / 엔딩 분기
- 대화 본진은 스크립트(
src/data/script_*_s{1..5}.js) — 캐릭터·스테이지별로 손으로 설계한 11턴 대본. AI는 이를 토대로 자연스럽게 변주. - 표정/씬 매핑은
src/data/scenes.js+src/screens/GameScreen.jsx의getSceneKey()가 담당.
그냥 만든 게 아니라, 캐릭터 심리부터 설계해서 대사를 "뽑아냈습니다." 옵시디언 볼트로 관리:
01_캐릭터/— 히로인별 욕망·두려움·방어기제·목소리·호감/비호감 트리거02_스테이지/— 장소·의상·정서 곡선(연기 지시)04_대사·씬/— 볼트 설정을 일관된 대본으로 뽑는 스크립트 생성 템플릿 + 6대 작성 규칙05_검수/— 생성된 대사를 감독 시점으로 채점한 검수 리포트(어색함 점수·위반 규칙·수정안)
예: "준모 자동대사 금지", "속마음은 결론이 아니라 감정", "명대사는 신뢰 쌓인 후반에" 같은 규칙을 정하고, 실제 플레이 검수로 어색한 대사를 찾아 스테이지별로 재작성했습니다.
| 구분 | 기술 |
|---|---|
| 프론트엔드 | React (Create React App, JSX) |
| AI | Groq API · llama-3.3-70b-versatile |
| 배포 | Vercel (GitHub 자동 연동) |
| 이미지 | rembg(isnet-anime)로 캐릭터 누끼 → webp · 호감도별 표정 분리 |
| 상태/저장 | localStorage (세이브·일일 플레이 제한) |
Junmo-game/
├── public/assets/
│ ├── backgrounds/ ← 스테이지별 배경 (webp)
│ └── characters/ ← 누끼 캐릭터, 호감도별 표정 (webp, 알파)
├── src/
│ ├── screens/ ← GameScreen(게임 루프·씬 선택), Setup/Ending 등
│ ├── components/ ← AffBar(호감도 바), SceneRenderer 등 UI
│ ├── data/
│ │ ├── partners.js ← 히로인 프로필(유정·지은·수아)
│ │ ├── scenes.js ← 씬별 배경+표정 매핑
│ │ └── script_*_s{1..5}.js ← 히로인×스테이지 대사 대본
│ └── utils/
├── design-vault/ ← 캐릭터·스테이지·검수 설계 문서 (옵시디언)
└── README.md
npm install
npm start # localhost:3000
# .env.local 에 API 키 필요 (절대 커밋 금지)
# REACT_APP_GROQ_KEY=...v0.2 게임 완성도 — 3인 히로인(유정·지은·수아) 대사 전면 재작성 + 표정·UI 고도화 완료. 다음: 백엔드 구축(API 키 서버사이드 보호·Supabase 세이브) → 정식 출시.
- 📝 설계·개발기(캐릭터를 '심리'부터 설계한 이야기):
DEVLOG.md - 🛠 개발 로드맵(버전 파이프라인):
ROADMAP.md·TODO.md - 📈 성장·배포 전략(커뮤니티 확산·퍼널·마인드맵):
GROWTH.md - 📡 배급 컨트롤타워(채널별 유입·반응 추적): 배포 URL
/?dash· 설계design-vault/06_개발·배포/배급-트래커.md
강준모의 소개팅 · 한국어 AI 연애 시뮬레이션 🎮 junmo-game.vercel.app