# 끼리 (KKIRI) — 화면 시나리오

작성: 페이블 · 2026-09-04
기준: 데모 https://kkiri-consensus-demo.pages.dev 를 2026-09-04 직접 실행해 확인한 화면(현재)과, 1 Pager의 MVP 범위를 반영한 제안(변경)을 구분해 적는다.
표기: `[현재]` 데모에 있음 · `[변경]` 데모 수정 · `[신규]` 데모에 없음

---

## 0. 화면 목록

| ID | 화면 | 역할 | 현황 |
|---|---|---|---|
| S0 | 랜딩 · 주제 선택 | 방장 | [현재] |
| S1 | 인원 설정 | 방장 | [현재] |
| S2 | 초대 링크 · 참여 현황 | 방장 | [현재] + [변경] 참여 현황 |
| S3 | 이름 입력 | 전원 | [현재] |
| S4 | 비공개 질문 (4 → 6문항) | 전원 | [현재] + [변경] 예산·금지 조건·자유서술 |
| S5 | 대리인 대기실 | 전원 | [신규] |
| S6 | 대리인 조율 중 | 전원 | [현재] + [변경] 익명 발언 로그 |
| S7 | 합의 결과 | 전원 | [현재] + [변경] 양보 지점 |
| S8 | 내 대리인 리포트 | 본인만 | [신규] |
| S9 | 결정 완료 · 공유 | 전원 | [신규] |

역할 구분: 방장(주제·인원·마감 결정, 결과 확정)과 참가자(답변만). 데모는 4단계 인디케이터(1/4~4/4)를 방장 설정과 질문에 각각 따로 쓴다. 두 인디케이터를 하나로 합치지 말고 "방 만들기 2단계 → 내 답변 6단계"로 명시한다.

---

## S0. 랜딩 · 주제 선택 `[현재]`

**목적**: 5초 안에 "속마음 비공개 + 대리인 합의"를 이해시키고 주제 하나를 고르게 한다.

**구성 (데모 원문)**
- 로고 `ㄲ 끼리` / 캡션 `PRIVATE AGENT CONSENSUS`
- H1 `속마음은 지키고, 결정은 함께.`
- 서브 `각자의 대리인이 대신 조율해요. 오늘은 무엇을 함께 정할까요?`
- 주제 카드 6개
  - 활성: ✈️ 여행지 결정 / 🧩 팀 워크숍 / 🍽️ 회식 메뉴·장소
  - 비활성(COMING SOON): 📅 회의 시간 / 🎁 단체 선물 / 💍 행사 콘셉트

**인터랙션**: 카드 클릭 → S1. 비활성 카드는 클릭 불가.

**변경 제안**
- COMING SOON 3개는 발표 데모에서 접어 두거나 하단 "다음 주제" 섹션으로 분리. 첫 화면에 절반이 비활성이면 미완성으로 읽힌다.
- 서브 카피 아래 한 줄 추가: `답변은 아무에게도 보이지 않아요. 결과와 이유만 함께 봐요.` 랜딩에서 비공개 약속이 없다.

**상태**: Default만 필요. 데이터 로딩 없음.

---

## S1. 인원 설정 `[현재]`

**데모 원문**: 인디케이터 `1 / 4`, 라벨 `🧩 팀 워크숍`, H1 `몇 명의 의견을 모을까요?`, 설명 `방장을 포함한 전체 인원수를 선택해주세요.`, 스테퍼 `− 4명 ＋`, CTA `초대방 만들기`.

**규칙**
- 최소 2명, 최대 12명 ※ 가정 기반 - 확인 필요. 대리인 협상 설명 가독성이 떨어지는 인원부터 막는다.
- `← 이전`으로 S0 복귀. 인원 값은 유지.

**변경 제안**
- 마감 시간 선택 추가(오늘 저녁 / 내일 정오 / 직접 입력). 미응답 처리 규칙(1 Pager 리스크 표)이 이 값에 걸린다.

**상태**: Default / Error(인원 범위 밖 → 스테퍼 비활성 + 안내 문구).

---

## S2. 초대 링크 · 참여 현황 `[현재]` + `[변경]`

**데모 원문**: 인디케이터 `2 / 4`, H1 `친구들을 초대해주세요.`, 설명 `링크를 받은 사람은 각자 질문에 답하게 됩니다.`, 카드 `🧩 팀 워크숍` + 참가자 슬롯 `나 · 2 · 3 · 4`, 링크 입력창 `https://kkiri-consensus-demo.pages.dev/?room=7603d09e` + `복사` 버튼, 안내 `데모에서는 다른 참가자의 응답을 자동으로 채웁니다. 실제 서비스에서는 이 링크로 각자의 답변이 비공개 수집됩니다.`, CTA `내 답변 시작하기`.

**변경 제안**
- 참가자 슬롯을 실시간 상태로: `나 ✓ 답변 완료` / `2 ● 작성 중` / `3 ○ 미접속`. 이름은 각자 S3에서 입력한 닉네임으로 채운다.
- 방장 전용 버튼 `지금 협상 시작` — 마감 전이라도 전원 완료 시 활성. 미완료자가 있으면 확인 모달 1회("2명이 아직 답하지 않았어요. 기본값으로 진행할까요?").
- 데모 안내문은 발표 빌드에서 제거.

**상태**
- Default: 링크 + 슬롯
- Loading: 슬롯 상태 폴링 중 스켈레톤
- Empty: 아직 아무도 입장 안 함 → "링크를 공유하면 여기서 참여 현황이 보여요"
- Success: 복사 완료 토스트 `링크를 복사했어요`
- Error: 방 만료(마감 지남) → 결과 화면 또는 "새 결정 시작하기"로 안내

---

## S3. 이름 입력 `[현재]`

**데모 원문**: 인디케이터 `3 / 4`, `반가워요 👋`, H1 `대리인을 만들기 전에 이름을 알려주세요.`, 설명 `결과에서만 표시되며, 답변 내용은 다른 사람에게 공개되지 않아요.`, 입력 `이름 또는 닉네임`, CTA `질문 시작하기`(입력 전 비활성).

**규칙**: 1~12자, 같은 방 내 중복 시 뒤에 숫자 자동 부여. Enter 제출 지원(데모는 Enter로 제출되지 않고 버튼만 활성화됨 — 확인).

**변경 제안**: 초대 링크로 들어온 참가자에게는 방 정보 카드(주제, 방장 이름, 마감) 를 이름 입력 위에 보여준다. 지금은 링크로 들어와도 누구의 방인지 알 수 없다.

---

## S4. 비공개 질문 `[현재]` + `[변경]`

**데모 원문 (팀 워크숍, 4문항)**
| 순서 | 질문 | 선택지 |
|---|---|---|
| 1/4 | 어떤 방식이 편한가요? | 실내 중심 / 야외 활동 / 반반 |
| 2/4 | 얼마나 시간을 낼 수 있나요? | 반나절 / 하루 / 1박 2일 |
| 3/4 | 가장 중요한 목적은? | 팀워크 / 재충전 / 아이디어 발굴 |
| 4/4 | 선호 지역은? | 서울 도심 / 수도권 근교 / 지역 무관 |

공통 요소: 상단 `민수님의 속마음`, 선택 전 `다음 질문` 비활성, 하단 `🔒 답변은 다른 참가자에게 공개되지 않고, 합의 계산에만 사용됩니다.` 마지막 문항 CTA는 `내 대리인 보내기`.

**변경 제안 (6문항)**
| 순서 | 질문 | 형식 | 대리인 조건으로 변환 |
|---|---|---|---|
| 1 | 어떤 방식이 편한가요? | 단일 선택 | 선호 |
| 2 | 얼마나 시간을 낼 수 있나요? | 단일 선택 + `이 이상은 어려워요` 토글 | 선호 또는 **상한(거부권)** |
| 3 | 가장 중요한 목적은? | 1·2순위 드래그 | 우선순위 가중치 |
| 4 | 선호 지역은? | 단일 선택 | 선호 |
| 5 | 1인 예산은 어느 정도가 편한가요? | 슬라이더(3만/5만/10만/상관없음) | **상한(거부권)** |
| 6 | 이것만은 피하고 싶어요 | 자유서술 1줄, 선택 입력 | LLM 구조화 → 금지 조건 |

- 6번 자유서술이 LLM이 실제로 개입하는 첫 지점이다. 발표에서 "운전은 안 하고 싶어요" 같은 문장이 `{avoid: "driving"}`으로 바뀌는 걸 보여준다.
- 답변 임시 저장: 브라우저 새로고침 시 복원. `← 이전`으로 돌아가도 선택 유지.

**상태**
- Default / Success(선택 즉시 하이라이트, 0.1초 내) / Error(6번 구조화 실패 → "이 문장은 조건으로 바꾸지 못했어요. 다시 써 주시거나 건너뛰세요") / Offline(제출 실패 시 로컬 보관 + 재시도 버튼)

---

## S5. 대리인 대기실 `[신규]`

**목적**: 내 답변은 끝났지만 다른 사람이 아직인 상태를 설명한다. 데모는 제출 직후 바로 조율 화면으로 넘어가 이 상태가 없다.

**구성**
- `민수님의 대리인이 준비됐어요` + 대리인 카드(내 조건 요약: "반반 · 하루 · 재충전 1순위 · 근교 · 5만원 · 운전 X") — **본인에게만** 표시
- 참여 현황 `3 / 4 답변 완료` + 마감까지 남은 시간
- 방장에게만 `지금 협상 시작` 버튼
- 조건 수정 버튼 `답변 고치기` (협상 시작 전까지만)

**상태**: Loading(폴링) / Success(전원 완료 → 자동으로 S6 진입, 3초 카운트) / Error(마감 지났는데 방장이 시작 안 함 → 자동 시작 + 안내)

---

## S6. 대리인 조율 중 `[현재]` + `[변경]`

**데모 원문**: 아이콘 `🧠 🤝 💬`, H2 `대리인들이 조율 중.`(점 애니메이션), 설명 `모두의 우선순위와 양보 가능한 조건을 비공개로 비교하고 있어요.` 약 10초 후 S7로 자동 전환.

**변경 제안: 익명 발언 로그**
```
대리인 A  1박 2일은 받기 어렵습니다. 당일 일정이면 지역은 양보할 수 있어요.
대리인 B  서울 도심을 1순위로 냈지만, 재충전 목적이 맞으면 근교까지 열어 두겠습니다.
대리인 C  예산 5만원 상한이 있습니다. 숙박이 빠지면 문제없습니다.
대리인 D  운전 없는 동선이 조건입니다. 대중교통 가능한 근교면 됩니다.
──────
후보 3개 남음 · 거부권 통과 2개 · 최저 만족도 기준 비교 중
```
- 대리인은 A/B/C/D 기호로만 표시. 순서는 매번 무작위. 본인 대리인도 어느 것인지 알려주지 않는다(S8에서만 확인).
- 로그는 LLM 생성 문장이지만 원문 답변이 아닌 구조화 조건에서만 만든다.
- 단독 조건(한 명만 낸 조건)은 로그에 "한 대리인의 조건"으로만 언급하고 내용은 뭉갠다. 예: "한 대리인이 이동 방식에 조건을 냈습니다."

**상태**: Loading(스트리밍) / Error(LLM 타임아웃 30초 → 규칙 기반 결과로 폴백 + "설명은 간략하게 제공돼요" 배지) / Partial(로그 일부만 도착)

---

## S7. 합의 결과 `[현재]` + `[변경]`

**데모 원문**: 배지 `✓ 합의 완료 · 규칙 기반 데모`, H1 `양평 리트릿 워크숍`, 서브 `도심을 벗어나 몰입하는 하루`, 섹션 `이 결론에 도달한 이유` 체크 3개(`자연 속에서 일상과 분리된 분위기를 만들어요.` / `아이디어 세션과 휴식을 같은 동선에 넣을 수 있어요.` / `당일 일정으로도 운영 가능한 절충안이에요.`), 안내 `서로의 개별 답변은 끝까지 공개되지 않았어요. 결과와 공통된 이유만 공유합니다.`, 버튼 `결정 완료하기` / `새 결정 시작하기`.

**변경 제안 — 섹션 추가 순서**
1. 최종안 (제목 + 한 줄 + 핵심 스펙: 일정 `하루`, 지역 `양평`, 1인 예산 `약 4만원`, 이동 `전세버스`)
2. 이 결론에 도달한 이유 (현재 유지)
3. **양보 지점** `[신규]` — 익명 집계
   - `서울 도심 선호 2명 → 근교 수용`
   - `1박 2일 희망 1명 → 당일 수용`
   - `지켜진 조건: 예산 상한 전원, 운전 없는 동선`
4. **공정성 표시** `[신규]` — 개인 만족도는 숨기고 `최저 만족도 72 / 평균 84` 처럼 집계만 ※ 수치 산식은 케이스 스터디 참고
5. 차선안 2개 접이식 (`다음 후보: 파주 실내 워크숍, 성수 팀 미션 데이`) — "왜 이게 아니라 저거냐"에 답할 근거
6. `내 대리인 리포트 보기` → S8 (본인만)
7. CTA: `결정 완료하기`(방장만 활성, 참가자는 `이 결정에 동의해요` / `다시 조율 요청`)

**규칙**
- `다시 조율 요청`은 방당 1회. 요청자는 익명. 재조율 시 요청 사유는 자유서술로 받아 6번 조건에 합쳐진다.
- 이유·양보 지점 문장에는 2인 이상 공통 조건만 구체적으로 쓴다.

**상태**: Default / Loading(스켈레톤) / Error(재조율 실패 → 이전 결과 유지) / Success(결정 완료 → S9)

---

## S8. 내 대리인 리포트 `[신규]` · 본인만

**목적**: "대리인이 정말 내 편이었나"에 답한다. 신뢰 장치.

**구성**
```
민수님의 대리인 리포트  (이 화면은 민수님만 볼 수 있어요)

지켜진 조건      하루 · 예산 5만원 이하 · 운전 없음
양보한 조건      없음
반영된 우선순위  재충전 1순위 → 리트릿 형태로 반영
내 만족도        88 / 100
```
- 다른 사람의 만족도는 보이지 않는다.
- 하단 `이 리포트는 저장되지 않아요` 문구 + 닫기.

---

## S9. 결정 완료 · 공유 `[신규]`

**구성**: 확정 카드(최종안 + 스펙) / `카톡으로 공유` / `캘린더에 추가(.ics)` / `새 결정 시작하기`.
**규칙**: 공유 카드에는 이유·양보 지점을 포함하지 않는다. 방 밖으로 나가는 정보는 결과 스펙만.

---

## 발표 데모 시나리오 (S0→S9, 약 60초)

| 초 | 화면 | 발표자 행동 | 청중이 봐야 할 것 |
|---|---|---|---|
| 0–8 | S0 | 팀 워크숍 클릭 | 비공개 약속 카피 |
| 8–15 | S1→S2 | 4명, 마감 오늘 저녁, 링크 복사 | 참여 현황 슬롯 |
| 15–35 | S3→S4 | 이름 입력, 6문항 답변. 6번에 "운전은 안 하고 싶어요" | 자유서술이 조건으로 바뀌는 순간 |
| 35–40 | S5 | 3/4 완료 표시 → 방장이 `지금 협상 시작` | 미응답 처리 모달 |
| 40–50 | S6 | 익명 발언 로그 스트리밍 | 거부권·양보가 문장으로 보임 |
| 50–58 | S7 | 양평 리트릿 워크숍 + 양보 지점 + 공정성 | "각자의 양보 지점" 약속 이행 |
| 58–60 | S8→S9 | 내 대리인 리포트 잠깐 → 결정 완료 | 개인 정보는 본인만 |

발표 빌드에서 다른 3명 답변은 데모처럼 자동 채움을 유지하되, 자동 채움 값은 케이스 스터디 Case 1과 동일하게 고정한다.