CHAPTER 05 / 13
화면 시나리오
사용자는 어떤 화면을 어떤 순서로 보나?
아래 본문은 기존 워크숍 목업 기준입니다. 새로 추가한 여행·회식·모임·선물의 질문과 후보는 다섯 가지 결정, 질문 생성과 설정은 AI 고도화에서 확인하세요. 새 체험은 규칙 기반이며 실제 LLM·다기기 응답 수집은 미연결입니다.
읽는 순서 5 / 13 · 요약
사용자는 어떤 화면을 어떤 순서로 보나?
- 방 만들기부터 결정 완료까지 화면 10개(S0~S9)를 화면마다 무엇이 보이고 무엇을 누르는지 적었다.
- 지금 공개 목업에 있는 것은 [현재], 실제 서버·로그인이 필요해 나중에 만들 것은 [제품]으로 구분했다.
- 마지막에 발표용 60초 시연 순서가 있다.
누가 읽나: 디자이너 · 발표 시연 준비자
작성: 페이블 · 2026-09-04
기준: 2026-09-05 수정한 공개 목업 https://kkiri-plan.pages.dev/mockup/?reset. 아래는 제출 당시 원본 데모가 아니라 현재 발표 목업의 동작 기준이다.
표기: [현재] 공개 목업에 구현 · [제품] 실제 서버·인증이 필요한 후속 구현
0. 화면 목록
| ID | 화면 | 역할 | 현황 |
|---|---|---|---|
| S0 | 랜딩 · 주제 선택 | 방장 | [현재] 워크숍만 활성 |
| S1 | 인원·마감·초대 설정 | 방장 | [현재] 3~8명 |
| S2 | 초대 링크 · 참여 현황 | 방장 | [현재] |
| S3 | 약속 · 이름 입력 | 전원 | [현재] |
| S4 | 비공개 질문 6문항 | 전원 | [현재] |
| S5 | 대리인 대기실 | 전원 | [현재] |
| S6 | 조건 조율 중 | 전원 | [현재] 집계 진행 4단계 |
| S7 | 합의 결과 | 전원 | [현재] |
| S8 | 내 대리인 리포트 · 최종 재확인 | 본인만 | [현재] 참가자 ID 분리 |
| S9 | 결정 완료 · 공유 | 전원 | [현재] |
역할 구분: 방장(주제·인원·마감 결정, 결과 확정)과 참가자(답변만). 데모는 4단계 인디케이터(1/4~4/4)를 방장 설정과 질문에 각각 따로 쓴다. 두 인디케이터를 하나로 합치지 말고 "방 만들기 2단계 → 내 답변 6단계"로 명시한다.
S0. 랜딩 · 주제 선택 [현재]
목적: 5초 안에 "속마음 비공개 + 대리인 합의"를 이해시키고 주제 하나를 고르게 한다.
구성 (데모 원문)
- 로고
ㄲ 끼리/ 캡션PRIVATE AGENT CONSENSUS - H1
속마음은 지키고, 결정은 함께. - 서브
각자의 대리인이 대신 조율해요. 오늘은 무엇을 함께 정할까요? - 주제 카드 3개
- 활성: 🧩 팀 워크숍
- 비활성(
NEXT): ✈️ 여행지 결정 / 🍽️ 회식 메뉴·장소
인터랙션: 카드 클릭 → S1. 비활성 카드는 클릭 불가.
현재 정리
- COMING SOON 3개는 발표 데모에서 접어 두거나 하단 "다음 주제" 섹션으로 분리. 첫 화면에 절반이 비활성이면 미완성으로 읽힌다.
- 서브 카피 아래 한 줄 추가:
답변은 아무에게도 보이지 않아요. 결과와 이유만 함께 봐요.랜딩에서 비공개 약속이 없다.
상태: Default만 필요. 데이터 로딩 없음.
S1. 인원·마감·초대 설정 [현재]
데모 원문: 인디케이터 1 / 4, 라벨 🧩 팀 워크숍, H1 몇 명의 의견을 모을까요?, 설명 방장을 포함한 전체 인원수를 선택해주세요., 스테퍼 − 4명 +, CTA 초대방 만들기.
규칙
- 최소 3명, 최대 8명. 스테퍼가 범위 밖으로 가지 않는다.
← 이전으로 S0 복귀. 인원 값은 유지.
현재 추가된 설정
- 마감 시간 선택 추가(오늘 저녁 / 내일 정오 / 직접 입력). 미응답 처리 규칙(1 Pager 리스크 표)이 이 값에 걸린다.
상태: Default / Error(인원 범위 밖 → 스테퍼 비활성 + 안내 문구).
S2. 초대 링크 · 참여 현황 [현재]
데모 원문: 인디케이터 2 / 4, H1 친구들을 초대해주세요., 설명 링크를 받은 사람은 각자 질문에 답하게 됩니다., 카드 🧩 팀 워크숍 + 참가자 슬롯 나 · 2 · 3 · 4, 링크 입력창 https://kkiri-consensus-demo.pages.dev/?room=7603d09e + 복사 버튼, 안내 데모에서는 다른 참가자의 응답을 자동으로 채웁니다. 실제 서비스에서는 이 링크로 각자의 답변이 비공개 수집됩니다., CTA 내 답변 시작하기.
현재 동작
- 참가자 슬롯을 실시간 상태로:
나 ✓ 답변 완료/2 ● 작성 중/3 ○ 미접속. 이름은 각자 S3에서 입력한 닉네임으로 채운다. - 방장 전용 버튼
지금 협상 시작— 3명 이상 답하면 활성. 미완료자가 있으면 확인 모달 1회("미응답자의 조건은 이번 계산과 재확인에서 제외됩니다"). 기본값으로 대신 답하지 않는다. - 데모 안내문은 발표 빌드에서 제거.
상태
- Default: 링크 + 슬롯
- Loading: 슬롯 상태 폴링 중 스켈레톤
- Empty: 아직 아무도 입장 안 함 → "링크를 공유하면 여기서 참여 현황이 보여요"
- Success: 복사 완료 토스트
링크를 복사했어요 - Error: 방 만료(마감 지남) → 결과 화면 또는 "새 결정 시작하기"로 안내
S3. 이름 입력 [현재]
데모 원문: 인디케이터 3 / 4, 반가워요 👋, H1 대리인을 만들기 전에 이름을 알려주세요., 설명 결과에서만 표시되며, 답변 내용은 다른 사람에게 공개되지 않아요., 입력 이름 또는 닉네임, CTA 질문 시작하기(입력 전 비활성).
규칙: 1~12자, 같은 방 내 중복 시 뒤에 숫자 자동 부여. Enter 제출 지원(데모는 Enter로 제출되지 않고 버튼만 활성화됨 — 확인).
변경 제안: 초대 링크로 들어온 참가자에게는 방 정보 카드(주제, 방장 이름, 마감) 를 이름 입력 위에 보여준다. 지금은 링크로 들어와도 누구의 방인지 알 수 없다.
S4. 비공개 질문 [현재]
현재 문항 (팀 워크숍, 6문항)
| 순서 | 질문 | 선택지 |
|---|---|---|
| 1/6 | 어떤 방식이 편한가요? | 실내 중심 / 야외 활동 / 반반 |
| 2/6 | 얼마나 시간을 낼 수 있나요? | 반나절 / 하루 / 1박 2일 + 선택적 상한 |
| 3/6 | 가장 중요한 목적은? | 팀워크 / 재충전 / 아이디어 발굴 중 1·2순위 |
| 4/6 | 선호 지역은? | 서울 도심 / 수도권 근교 / 지역 무관 |
| 5/6 | 1인 예산은 어느 정도가 편한가요? | 3만 / 5만 / 10만 / 상관없음 + 선택적 상한 |
| 6/6 | 이것만은 피하고 싶어요 | 자유서술 또는 건너뛰기 |
공통 요소: 상단 민수님의 속마음, 선택 전 다음 질문 비활성, 하단 🔒 답변은 다른 참가자에게 공개되지 않고, 합의 계산에만 사용됩니다. 마지막 문항 CTA는 내 대리인 보내기.
입력 의미
| 순서 | 질문 | 형식 | 대리인 조건으로 변환 |
|---|---|---|---|
| 1 | 어떤 방식이 편한가요? | 단일 선택 | 선호 |
| 2 | 얼마나 시간을 낼 수 있나요? | 단일 선택 + 이 이상은 어려워요 토글 | 선호 또는 상한(거부권) |
| 3 | 가장 중요한 목적은? | 1·2순위 드래그 | 우선순위 가중치 |
| 4 | 선호 지역은? | 단일 선택 | 선호 |
| 5 | 1인 예산은 어느 정도가 편한가요? | 선택(3만/5만/10만/상관없음) + 선택적 상한 | 선호 점수 + 상한(거부권) |
| 6 | 이것만은 피하고 싶어요 | 자유서술 1줄, 선택 입력 | LLM 구조화 → 금지 조건 |
- 6번 자유서술은 제품에서 LLM이 개입할 자리다. 현재 목업은 키워드 7종 규칙으로 "운전은 안 하고 싶어요"를
{avoid: "driving"}으로 바꾸며, 이를 숨기지 않는다. - 답변 임시 저장: 브라우저 새로고침 시 복원.
← 이전으로 돌아가도 선택 유지.
상태
- Default / Success(선택 즉시 하이라이트, 0.1초 내) / Error(6번 구조화 실패 → "이 문장은 조건으로 바꾸지 못했어요. 다시 써 주시거나 건너뛰세요") / Offline(제출 실패 시 로컬 보관 + 재시도 버튼)
S5. 대리인 대기실 [현재]
목적: 내 답변은 끝났지만 다른 사람이 아직인 상태를 설명한다.
구성
민수님의 대리인이 준비됐어요+ 대리인 카드(내 조건 요약: "반반 · 하루 · 재충전 1순위 · 근교 · 5만원 · 운전 X") — 본인에게만 표시- 참여 현황
3 / 4 답변 완료+ 마감까지 남은 시간 - 방장에게만
지금 협상 시작버튼 - 조건 수정 버튼
답변 고치기(협상 시작 전까지만)
상태: Loading(폴링) / Success(전원 완료 → 자동으로 S6 진입, 3초 카운트) / Error(마감 지났는데 방장이 시작 안 함 → 자동 시작 + 안내)
S6. 조건 조율 중 [현재]
현재 화면: 아이콘 🧠 🤝 💬, H2 대리인들이 조율 중.(점 애니메이션), 설명 모두의 선호와 절대 조건을 비공개로 비교하고 있어요. 집계 진행이 끝나면 S7로 자동 전환.
공개 진행 기록: 사람 단위 발언을 없앤 집계 4단계
1/4 응답 4건을 개인 식별 정보 없는 조건으로 구조화했어요.
2/4 거부권 3건을 적용해 후보 5→4개로 좁혔어요.
3/4 생존 후보 4개의 최저 만족도부터, 동률이면 평균을 비교했어요.
4/4 2명 이상 공통 조건만 공개 이유로 만들었어요.
- 대리인 기호·정확한 상한·개인 선호 조합을 공개하지 않는다. 소규모 팀에서 기호만 섞는 방식은 재식별을 막지 못하기 때문이다.
- LLM 타임아웃이 나도 순위 계산은 변하지 않고 규칙 설명으로 폴백한다.
상태: Loading(스트리밍) / Error(LLM 타임아웃 30초 → 규칙 기반 결과로 폴백 + "설명은 간략하게 제공돼요" 배지) / Partial(로그 일부만 도착)
S7. 합의 결과 [현재]
현재 화면: 배지 ✓ 합의 제안 · 아직 확정 전 · 규칙 기반 목업, H1 양평 리트릿 워크숍, 핵심 스펙, 공통 이유, 선호 차이, 공정성, 차선·제외 후보, 개인 리포트, 최종 재확인 CTA.
현재 섹션 순서
- 최종안 (제목 + 한 줄 + 핵심 스펙: 일정
하루, 지역양평, 1인 예산약 4만원, 이동전세버스) - 이 결론에 도달한 이유 (현재 유지)
- 선호와 다른 지점 — 익명 집계
서울 도심 선호 2명 · 결과는 수도권 근교- 단독 선호 차이는 내용 없이 건수만 표시
지켜진 조건: 예산 상한 전원, 운전 없는 동선
- 공정성 표시 — 개인 만족도는 숨기고
최저 만족도 61.5 / 평균 74.1처럼 집계. 정렬은 최저 → 평균 → 비용 → 일정 순 - 차선안 2개 접이식 (
다음 후보: 파주 실내 워크숍, 성수 팀 미션 데이) — "왜 이게 아니라 저거냐"에 답할 근거 내 대리인 리포트 보기→ S8 (본인만)- 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 | 집계 진행 4단계 | 후보 5→4, 최저 만족도 우선 정렬을 검증 가능하게 표시 |
| 50–58 | S7 | 양평 리트릿 워크숍 + 선호 차이 + 공정성 | 개인 조건은 숨기고 공통 이유만 표시 |
| 58–60 | S8→S9 | 내 대리인 리포트 잠깐 → 결정 완료 | 개인 정보는 본인만 |
발표 빌드에서 다른 3명 답변은 데모처럼 자동 채움을 유지하되, 자동 채움 값은 케이스 스터디 Case 1과 동일하게 고정한다.