docs(docs): 화면별 current와 archive 구조로 분리

This commit is contained in:
2026-03-16 11:46:13 +09:00
parent 38a9d1e762
commit c6e342e93d
17 changed files with 136 additions and 50 deletions

20
docs/flows/README.md Normal file
View File

@@ -0,0 +1,20 @@
# Flow Docs
여기는 특정 화면 하나에 속하지 않고, 두 화면 이상을 가로지르는 플로우 문서를 둔다.
예:
- `/app -> /stats -> /app`
- paused session re-entry
- refocus / away-return recovery
## current
- [10_refocus_system_spec.md](./current/10_refocus_system_spec.md)
- [11_away_return_recovery_spec.md](./current/11_away_return_recovery_spec.md)
- [15_app_stats_entry_flow_spec.md](./current/15_app_stats_entry_flow_spec.md)
- [18_paused_session_reentry_spec.md](./current/18_paused_session_reentry_spec.md)
## archive
- 현재 없음

View File

@@ -0,0 +1,487 @@
# 10. Refocus System Spec
Last Updated: 2026-03-15
이 문서는 VibeRoom의 `Refocus System`을 제품 대표 경험으로 설계하기 위한 상세 기준 문서다.
관련 상위 문서:
- `../../product_principles.md`
- `../../current_context.md`
- `../app/19_app_atmosphere_entry_spec.md`
---
## 1. 왜 Refocus가 핵심인가
VibeRoom의 차별점은 `더 오래 계획하게 만드는 것`이 아니라,
`흔들린 뒤에도 다시 집중 위에 올라타게 만드는 것`이어야 한다.
ADHD 성향 사용자와 프리랜서에게 진짜 어려운 순간은 대개 아래 셋 중 하나다.
- 시작 직전
- 잠깐 멈췄다가 다시 붙잡아야 할 때
- 한 조각을 끝냈는데 다음 동작이 흐려졌을 때
`/app`이 시작 마찰을 줄이는 화면이라면,
`Refocus System`은 **세션 도중 무너진 흐름을 다시 복구하는 핵심 시스템**이다.
---
## 2. 레퍼런스에서 가져올 것 / 버릴 것
이 문서는 2026-03-14 기준 공식 사이트를 기준으로 아래 레퍼런스를 참고했다.
- [Portal](https://portal.app/)
- [LifeAt Pricing](https://lifeat.io/pricing)
- [Focusmate Pricing](https://www.focusmate.com/pricing/)
- [Focusmate Getting Started](https://support.focusmate.com/en/articles/9110188-getting-started)
- [Focusmate Focus Now](https://support.focusmate.com/en/articles/9994509-focus-now)
### Portal에서 가져올 것
- 배경이 주인공이고 인터페이스는 조용히 뒤로 물러나야 한다
- 감각 품질 자체가 제품 가치가 된다
- “아름답다”가 장식이 아니라 사용 지속 이유가 된다
### Focusmate에서 가져올 것
- 행동을 시작시키는 명확한 구조
- 사용자가 망설이지 않게 하는 단일 흐름
- `지금 바로 들어간다`는 즉시성
### LifeAt에서 가져올 것
- 가볍게 시작할 수 있는 친화성
- 공간과 집중을 연결하는 감성
### LifeAt에서 가져오면 안 되는 것
- planner / todo / calendar 중심 구조
- 목표를 많이 다루게 하는 흐름
- “집중 앱”보다 “정리 앱”처럼 읽히는 경험
---
## 3. 한 줄 정의
> Refocus는 사용자가 흔들렸을 때 죄책감 없이 다시 한 조각 위에 올라타게 만드는 조용한 복귀 의식이다.
중요한 점:
- `수정 기능`이 아니다
- `체크리스트`가 아니다
- `왜 못 했는지 묻는 평가 시스템`이 아니다
---
## 4. 제품 목표
Refocus System은 아래 4가지를 만족해야 한다.
1. 사용자가 세션을 포기하지 않게 한다
2. pause 이후 복귀 마찰을 줄인다
3. microStep을 다시 잡아 실행을 재개하게 한다
4. UI가 배경과 몰입을 방해하지 않는다
---
## 5. 시스템 원칙
### 1. Refocus는 한 번에 한 질문만 한다
질문을 여러 개 던지면 planner처럼 느껴진다.
항상 다음 하나만 물어야 한다.
- 계속할까?
- 지금 할 한 조각은 무엇일까?
- 이 목표를 끝낼까?
### 2. 사용자를 평가하지 않는다
금지:
- 왜 못 했어요?
- 얼마나 산만했나요?
- 다시 집중하세요
허용:
- 다음 한 조각이 있나요?
- 지금 다시 시작할 수 있게 한 줄만 남겨볼까요?
- 여기까지로 충분한가요?
### 3. goal은 1개, microStep도 1개
Refocus는 절대 리스트 관리 UI가 되면 안 된다.
- multi-step 금지
- queue 금지
- subtask list 금지
### 4. 배경은 항상 주인공이다
Refocus UI는 강한 모달이 아니라 **배경 위에 잠깐 생겼다가 사라지는 얇은 recovery layer**여야 한다.
### 5. Premium은 절제에서 온다
좋은 Refocus는 화려한 카드나 모션이 아니라 아래에서 온다.
- 올바른 정보 밀도
- 1개의 명확한 행동
- 자연스러운 등장과 퇴장
- 배경과 어우러지는 재질감
---
## 6. Refocus가 필요한 순간들
Refocus는 아래 4개 진입점으로 고정한다.
### A. Pause 직후
사용자가 세션을 멈춘 뒤 다시 돌아와야 하는 순간.
### B. MicroStep 완료 직후
현재 한 조각은 끝났지만 다음 행동이 아직 흐린 순간.
### C. 사용자가 의도를 직접 수정하고 싶을 때
goal이나 microStep을 다시 정리하고 싶은 수동 진입.
### D. 세션에서 멀어졌다가 복귀했을 때
탭을 바꾸거나 잠깐 이탈한 후 다시 `/space`로 돌아온 상황.
---
## 7. 화면 상태 모델
Refocus는 아래 5개 상태만 가진다.
1. `Focused`
2. `Paused`
3. `Refocus`
4. `Next Beat`
5. `Complete`
한 번에 활성화되는 확장 상태는 하나만 허용한다.
- `Refocus`
- `Next Beat`
- `Complete`
이 셋은 동시에 보이면 안 된다.
---
## 8. 상태별 상세 UX
### CTA Matrix
Refocus family에서 중요한 원칙은 하나다.
> 세션이 아직 살아 있는 상태라면, 사용자는 언제든 `계속 / 다시 잡기 / 마무리` 중 하나로 갈 수 있어야 한다.
상태별 CTA는 아래처럼 고정한다.
| 상태 | 보여야 하는 주 행동 | goal complete 접근 |
| --- | --- | --- |
| `Focused` | `수정`, `microStep 완료`, `이번 목표 완료`, timer `pause/reset` | base intent card에서 직접 노출 |
| `Paused` | `한 조각 다시 잡기`, `바로 이어가기` | pause tray의 low-emphasis `여기서 마무리하기` |
| `Return (focus)` | `멈춘 자리에서 이어가기`, `한 조각 다시 잡기` | return tray의 low-emphasis `여기서 마무리하기` |
| `Break` | break 유지, 다음 블록으로 이어가기, goal closure | base intent card에서 직접 노출 |
| `Return (break)` | `쉬기 이어가기`, `다음 블록 이어가기`, `한 조각 다시 잡기` | return tray의 low-emphasis `여기서 마무리하기` |
| `Next Beat` | `목표만 두고 계속하기`, `다음 단계 적기` | next-beat tray의 low-emphasis `이 목표는 여기서 마무리하기` |
`Refocus` 편집 시트 자체는 편집에만 집중하고, complete 액션은 별도 decision tray나 base intent card에서 수행한다.
### 8.1 Focused
목표:
- 사용자가 UI를 거의 의식하지 않고 일하는 상태
보여야 하는 것:
- goal
- optional microStep
- timer HUD
- minimal controls
보이면 안 되는 것:
- 질문
- 복구 유도 문구
- task-like affordance
### 8.2 Paused
목표:
- 세션이 끊긴 느낌이 아니라 잠시 호흡을 고르는 느낌
행동:
- 바로 큰 sheet를 띄우지 않는다
- HUD 상태가 paused로 바뀌고,
- `다시 시작할 준비가 되면 한 조각만 다시 잡는다`는 감각을 준다
### 8.3 Refocus
목표:
- 목표를 버리지 않고 다시 시작점을 만든다
UI:
- anchored tray 또는 compact sheet
- 필드 2개
- 이번 세션 목표
- 지금 할 한 조각
- CTA 2개
- 적용
- 취소
중요:
- `다시 방향 잡기`는 메인 액션이 아니라 recovery action이어야 한다
- button cluster처럼 보이면 안 된다
### 8.4 Next Beat
목표:
- microStep 완료 후 checklist가 아니라 “다음 한 조각”으로 연결
질문:
> 다음 한 조각이 있나요?
행동:
- `한 조각 정하기`
- `없이 계속`
금지:
- 다음 step list 펼치기
- 여러 개 제안
- 정리형 UI
### 8.5 Complete
목표:
- 목표가 끝났을 때 닫음과 다음 시작을 모두 부드럽게 연결
질문:
- 여기까지 끝났나요?
행동:
- 여기서 마무리하기
- 다음 블록 이어가기
- 잠시 비우기
완료는 celebration보다 **closure quality**가 중요하다.
---
## 9. 상세 플로우
### Flow A. Pause -> Refocus -> Resume
1. 사용자가 pause 한다
2. UI는 즉시 평가하지 않는다
3. 사용자가 resume을 누르거나 intent를 누르면 Refocus로 들어갈 수 있다
4. 사용자는 goal / microStep 중 필요한 것만 조정한다
5. `적용 후 이어가기` 또는 `적용` 뒤 resume
목표:
- pause 이후 바로 복귀하는 것이 아니라,
- 한 번 숨을 고르고 다시 붙잡게 만든다
### Flow B. MicroStep Complete -> Next Beat
1. 사용자가 microStep completion mark를 누른다
2. 기존 microStep은 조용히 처리된다
3. `다음 한 조각이 있나요?`가 나타난다
4. 사용자는
- 새 microStep을 적거나
- 없이 계속 간다
목표:
- planner처럼 다음 목록을 만드는 것이 아니라
- 지금 하나만 다시 붙잡게 한다
### Flow C. Manual Refocus
1. 사용자가 goal 영역을 눌러 의도 수정 진입
2. goal / microStep 수정
3. 적용
4. 조용히 복귀
목표:
- 세션을 깨지 않는 범위에서 intent만 조정
### Flow D. Goal Complete -> Next Goal or Close
1. 사용자가 goal complete 진입
2. 현재 목표를 닫을지, 다음 목표로 이어갈지 선택
3. 다음 목표는 여전히 1개만 다룬다
목표:
- checklist가 아니라 clean transition
---
## 10. UI 구조
### 레이어 구조
#### Layer 1. Background
- 배경 이미지/영상
- 주인공
#### Layer 2. Core HUD
- timer
- sound / scene controls
- intent card
#### Layer 3. Recovery Layer
- refocus tray
- next beat prompt
- complete tray
Recovery Layer는 Core HUD와 같은 material family를 가져야 한다.
다만 더 조용하고 얇아야 한다.
### Material 방향
- iOS 계열의 refined glass 참고
- 강한 탁도보다 `투명 + blur + 얕은 경계`를 우선
- glow, heavy shadow, thick border 금지
- chip 남발 금지
### 모션 방향
- 빠르게 튀어나오지 않는다
- appear 220~280ms
- disappear 180~220ms
- scale보다는 opacity + position shift 위주
---
## 11. 카피라이팅 방향
### tone
- 짧다
- 저압력이다
- 평가하지 않는다
- 다시 시작할 수 있게 한다
### 좋은 예
- `지금 할 한 조각`
- `다음 한 조각이 있나요?`
- `한 줄만 다듬고 다시 시작해요.`
- `여기까지로 충분한가요?`
### 피해야 할 예
- `할 일`
- `리스트`
- `관리`
- `다음 단계들`
- `왜 못 했나요?`
---
## 12. Free / Pro에서의 역할
### Free
- 기본 refocus 진입
- goal / microStep 재설정
- next beat prompt
- goal complete 기본 흐름
### Pro
- 더 정교한 refocus guidance
- 세션 패턴 기반 microStep 제안
- 어떤 ritual에서 복귀율이 높은지 review에 반영
중요:
Pro는 `더 많은 목표`가 아니라 `더 높은 복귀 성공률`을 파는 쪽으로 가야 한다.
---
## 13. 성공 지표
Refocus System은 아래 지표로 판단한다.
- Pause 후 Resume 비율
- Pause 후 Refocus 진입 비율
- Refocus 후 2분 이상 유지 비율
- MicroStep 완료 후 Next Beat 입력 비율
- Goal complete 후 다음 세션 전환 비율
- 세션 중 abandon 비율 감소
---
## 14. 구현 우선순위
### Slice 1
- pause 이후 Refocus 진입 구조 정리
- goal / microStep 수정 tray 정교화
- 한 번에 하나의 overlay만 뜨도록 상태 정리
### Slice 2
- microStep 완료 -> Next Beat 흐름 정리
- checklist 느낌 제거
### Slice 3
- goal complete tray의 완성도 향상
- closure / next goal / break 분기 정리
### Slice 4
- Pro용 adaptive refocus 기획
- review와 refocus 연결
---
## 15. 절대 피해야 할 방향
- pause를 실패처럼 느끼게 하는 UX
- checklist UI
- multi-step planner화
- 과한 그래프 / 통계 immediate 노출
- 배경보다 더 앞에 나오는 recovery UI
- action chip 남발
- 한 번에 여러 질문을 던지는 sheet
---
## 16. 이 문서를 기준으로 다음 구현에서 꼭 지켜야 할 것
- Refocus는 `편집 기능`이 아니라 `recovery ritual`처럼 느껴져야 한다
- 사용자는 한 번에 하나의 행동만 선택해야 한다
- 배경은 절대 희생시키지 않는다
- premium quality는 더 많은 glass가 아니라 더 적은 friction에서 나온다

View File

@@ -0,0 +1,441 @@
# 11. Away / Return Recovery Spec
Last Updated: 2026-03-14
이 문서는 사용자가 `pause`를 누르지 않고 그냥 자리를 떠난 경우를 VibeRoom이 어떻게 감지하고, 어떻게 맞이하고, 어떻게 다시 복귀시킬지를 정의하는 상세 기준 문서다.
관련 문서:
- `../../product_principles.md`
- `../../current_context.md`
- `./10_refocus_system_spec.md`
---
## 1. 왜 이 기획이 중요한가
ADHD 성향 사용자와 프리랜서는 자주 아래처럼 이탈한다.
- `pause`를 누를 생각도 못 한 채 자리에서 일어남
- 잠깐 딴 탭을 보다가 세션 흐름을 잃음
- focus가 끝났는지도 모른 채 돌아옴
이 상황을 제품이 다루지 않으면 아래 문제가 생긴다.
- Refocus가 “사용자가 pause를 눌렀을 때만 작동하는 기능”으로 축소된다
- 세션이 실제 흐름보다 더 기계적으로 느껴진다
- `pause``break`가 같은 “멈춘 상태”처럼 읽힌다
- 돌아온 사용자를 잘못된 상태로 맞이하게 된다
VibeRoom은 감시 앱이 되어서는 안 되지만,
**돌아왔을 때의 복귀 품질**은 반드시 설계해야 한다.
---
## 2. 한 줄 정의
> Away / Return은 사용자의 무의식적 이탈을 실패로 다루지 않고, 돌아왔을 때 가장 자연스럽게 다시 몰입 위에 올려놓는 복귀 레이어다.
중요한 점:
- 사용자를 통제하거나 막는 기능이 아니다
- “왜 떠났는가”를 추궁하지 않는다
- 핵심은 detection보다 **return UX**다
---
## 3. 이 시스템이 해결해야 하는 문제
### 문제 A. 사용자는 `pause`를 누르지 않는다
사용자는 실제로는 쉬고 싶어서 일어난 것이어도,
제품 안에서는 아무 액션도 하지 않은 채 세션이 흘러간다.
### 문제 B. focus가 끝났는데 break처럼 보인다
사용자가 없던 사이 focus가 끝났다면, 돌아왔을 때 단순 `Break`로 맞이하면 안 된다.
그건 제품이 사용자의 실제 맥락을 오해한 것이다.
### 문제 C. pause와 break가 겹쳐 보인다
현재 감정적으로는 이렇게 읽히기 쉽다.
- `Pause`: 내가 멈춤
- `Break`: focus가 끝나서 쉬는 중
둘은 의미가 다른데, UI와 상태가 충분히 분리되지 않으면 같은 “멈춤”처럼 느껴진다.
---
## 4. 핵심 원칙
### 1. 감시는 하지 않는다
아래는 금지한다.
- webcam / face tracking
- 키보드/마우스 무입력만으로 강제 이탈 판정
- 사용자를 혼내는 알림
- “집중하지 않았네요” 류의 카피
### 2. 확실한 신호만 사용한다
웹에서 “자리 비움”은 정확히 알 수 없다.
따라서 v1은 아래처럼 비교적 강한 신호만 쓴다.
- `visibilitychange`
- `pagehide`
- 브라우저/기기 sleep 이후 큰 시간 점프
- 창 복귀 시점
### 3. detection보다 return이 중요하다
중요한 것은 “네가 떠났다는 걸 알아냈다”가 아니라,
**“돌아온 지금 무엇을 제안할 것인가”**다.
### 4. Pause와 Break는 명확히 다르게 느껴져야 한다
- `Pause`는 recovery tone
- `Break`는 release / reset tone
- `Return`은 re-entry tone
### 5. focus ended while away는 Break가 아니라 Return이다
사용자가 없는 동안 focus가 끝났다면,
돌아온 순간의 경험은 `쉬는 중`이 아니라 `복귀 결정`이어야 한다.
---
## 5. 상태 모델
VibeRoom의 세션 상태를 제품적으로는 아래처럼 다룬다.
### Core States
- `Focus`
- `Pause`
- `Break`
### Recovery States
- `AwayCandidate`
- `Return`
### 의미
#### Focus
사용자가 현재 세션 안에서 일하고 있음
#### Pause
사용자가 의도적으로 멈춤
#### Break
focus 블록을 끝내고 의도적으로 쉬는 상태
#### AwayCandidate
사용자가 실제로 자리를 떴을 가능성이 높은 내부 판단 상태
#### Return
이탈 후 다시 돌아온 순간, 제품이 복귀를 제안하는 상태
---
## 6. 웹에서의 감지 전략
### v1에서 사용하는 신호
#### 1. visibility hidden
- 사용자가 탭을 떠남
- 브라우저가 background로 감
#### 2. pagehide / tab background
- 페이지가 전환되거나 숨겨짐
#### 3. sleep / wake 시간 점프
- 사용자가 기기를 잠그거나 화면이 꺼졌다가 돌아왔을 가능성
- `Date.now()` 기준 큰 delta로 감지
### v1에서 사용하지 않는 신호
#### blur / focus 단독
너무 오탐이 많다.
#### 무입력 시간만으로 Away 판단
읽고 생각하는 사용자를 잘못 판정할 수 있다.
#### pointer / keyboard tracking 강제화
감시처럼 느껴질 수 있어 금지
---
## 7. 판단 규칙
### Rule 1. focus 중 hidden/wake gap 발생
상태:
- `Focus`
- `visibility hidden` 또는 `sleep/wake delta` 발생
처리:
- 내부적으로 `AwayCandidate`
### Rule 2. 돌아왔을 때 focus가 아직 안 끝남
상태:
- 사용자가 복귀
- 남은 focus 시간이 남아 있음
처리:
- `Return` tray 노출
- 질문:
- `이어서 할까요?`
- `한 조각 다시 잡을까요?`
### Rule 3. 돌아왔을 때 focus가 이미 끝남
상태:
- 사용자가 복귀
- focus phase는 끝났음
- 하지만 사용자는 그 종료를 경험하지 못했음
처리:
- `Break` 직접 진입 금지
- `Return` tray 노출
- 질문:
- `자리를 비운 사이 이 블록이 끝났어요. 지금 어떻게 이어갈까요?`
행동:
- `지금부터 쉬기`
- `다음 목표로 이어가기`
- `한 조각 다시 잡기`
### Rule 4. pause 상태에서 복귀
상태:
- 이미 사용자가 직접 `Pause`한 상태
처리:
- 이건 Away보다 Pause 흐름이 우선
- 기존 pause recovery prompt 유지
즉, `Away / Return`은 manual pause를 덮어쓰지 않는다.
---
## 8. Return UX 설계
### Return의 목적
- 죄책감 없이 다시 올려놓기
- `지금 어떤 상태인지`를 간단히 알려주기
- 선택지를 2~3개만 제시하기
### Return의 기본 구조
- eyebrow: `다시 돌아왔어요`
- 짧은 현재 맥락 설명
- primary action 1개
- secondary action 1개
- tertiary는 최대 1개
### Case A. focus still running
카피 예:
- 제목: `이어서 갈까요?`
- 설명: `흐름은 그대로 남아 있어요. 바로 이어가거나 한 조각만 다시 잡을 수 있어요.`
행동:
- primary: `이어서 하기`
- secondary: `한 조각 다시 잡기`
### Case B. focus ended while away
카피 예:
- 제목: `자리를 비운 사이 이 블록이 끝났어요.`
- 설명: `지금부터 쉬거나, 다음으로 이어갈 수 있어요.`
행동:
- primary: `지금부터 쉬기`
- secondary: `다음 목표 이어가기`
- tertiary: `한 조각 다시 잡기`
### Case C. break ended while away
이건 v1에서는 단순화한다.
- break가 끝났고 사용자가 돌아왔다면
- `다음 블록으로 이어갈까요?` 정도의 단순 return prompt만 둔다
- 이 상태는 후속 slice에서 다룬다
---
## 9. Pause / Break / Return의 차이
### Pause
- 사용자가 직접 멈춘 상태
- 톤: recovery
- 질문:
- `한 조각 다시 잡기`
- `이대로 이어가기`
### Break
- 사용자가 focus 블록을 끝낸 뒤 쉬는 상태
- 톤: release / reset
- 질문:
- `쉬기 계속`
- `다음으로 가기`
### Return
- 사용자가 떠났다가 돌아온 상태
- 톤: re-entry
- 질문:
- `지금 어디서 다시 시작할까?`
핵심:
`Pause``Return`은 비슷하지만 다르다.
- Pause는 사용자가 멈춘 것
- Return은 제품이 사용자의 이탈을 감지하고 다시 맞이하는 것
---
## 10. UI / Layer 구조
### Layer 원칙
- Away / Return도 기존 recovery family 안에 들어간다
- 한 번에 하나의 recovery layer만 열 수 있다
우선순위:
1. `Complete`
2. `Return`
3. `Pause`
4. `Refocus`
5. `Next Beat`
### 이유
- Complete는 가장 명시적이고 종료 의미가 강함
- Return은 환경 변화에 대한 복귀 진입점
- Pause는 사용자의 수동 멈춤
- Refocus와 Next Beat는 더 세부적인 recovery 단계
---
## 11. 카피 원칙
### 좋은 톤
- `다시 돌아왔어요`
- `흐름은 그대로 남아 있어요`
- `한 조각만 다시 잡을까요?`
- `지금부터 쉬거나, 다음으로 이어갈 수 있어요`
### 금지 톤
- `집중을 놓쳤네요`
- `왜 자리를 비우셨나요`
- `세션이 중단되었습니다`
- `복귀하세요`
---
## 12. 구현 우선순위
### Slice A. Spec 정리
- 상태 모델 확정
- detection 전략 확정
- Return UX 문구 확정
### Slice B. Detection 도입
- `visibilitychange`
- `pagehide`
- sleep/wake delta
### Slice C. Return Tray 구현
- focus still running case
- focus ended while away case
### Slice D. Pause / Break 분리 강화
- copy
- visual tone
- action hierarchy
---
## 13. 측정 지표
- hidden -> return 이후 resume 비율
- away detected 후 abandon 비율
- focus ended while away 후 다음 행동 선택률
- return tray에서 primary 선택 비율
- return 후 2분 이상 유지 비율
---
## 14. 이번 기획이 기존 계획과 어떻게 연결되는가
이 문서는 `중간에 끼어든 기획`이 맞지만, 방향을 흐리는 끼어듦이 아니다.
오히려 `Refocus System`을 완성하기 위해 필요한 핵심 보강이다.
따라서 순서는 이렇게 재정렬한다.
1. `Refocus System` 구현
2. `Away / Return Recovery` 구현
3. 그 다음에 originally planned visual polish
4. 그 다음에 Break 품질과 Review 확장
즉, 원래 예정했던 다음 기획은 사라지지 않는다.
**Away / Return이 먼저 들어오고, visual polish와 break refinement가 그 뒤로 밀리는 것**이다.
---
## 15. 절대 피해야 할 방향
- 감시처럼 느껴지는 detection
- 무입력 시간을 벌점처럼 해석하는 것
- hidden -> 자동 pause 강제
- 돌아왔을 때 죄책감 유발 카피
- focus ended while away인데 그냥 break로 보내는 것
---
## 16. 다음 구현에서 꼭 지켜야 할 것
- detection은 조심스럽게, return UX는 분명하게
- pause와 return을 섞지 말 것
- break는 reward / reset tone으로 유지할 것
- away는 “실패”가 아니라 “복귀가 필요한 순간”으로 다룰 것

View File

@@ -0,0 +1,437 @@
# 15. `/app -> /stats -> /app` Weekly Review Entry Flow Spec
Last Updated: 2026-03-15
이 문서는 VibeRoom의 `Weekly Review`를 **어디서, 왜, 어떤 타이밍에 열어야 하는지**를 정의하는 진입 플로우 문서다.
핵심 목적은 하나다.
> `/stats`를 고립된 summary page가 아니라, `/app`의 다음 세션 시작 성공률을 높여주는 review ritual로 코어 루프 안에 넣는다.
관련 문서:
- `./19_app_atmosphere_entry_spec.md`
- `../../product/12_core_loop_execution_roadmap.md`
- `../stats/14_weekly_review_reframe_spec.md`
- `../../product_principles.md`
- `../../current_context.md`
---
## 1. 문제 정의
현재 구현 기준에서 `/stats`는 route는 존재하지만,
제품 루프 안에서의 진입 이유가 약하다.
현재 문제:
- `/stats`는 사실상 고립된 페이지다
- 사용자가 왜 지금 review를 봐야 하는지 맥락이 없다
- `/space`에서 바로 review로 튀면 execution 흐름을 끊는다
- `/app``/stats`가 연결되지 않아, review가 다음 세션 시작으로 이어지지 않는다
즉, 지금 `/stats`는 “있을 수는 있는 페이지”지만
**사용자가 자연스럽게 보게 되는 페이지는 아니다.**
---
## 2. 한 줄 정의
> Weekly Review의 primary flow는 `/app`에서 review teaser를 보고, `/stats`에서 지난 7일의 집중 리듬을 짧게 정리한 뒤, 다시 `/app`으로 돌아와 다음 세션을 시작하는 흐름이다.
---
## 3. 제품 원칙
### 1. `/stats`의 primary entry는 `/app`이다
- review는 “지금 일하는 중에 보는 것”이 아니라
- “다음 세션을 시작하기 직전에 확인하는 것”이다
### 2. `/space`는 review의 메인 진입점이 아니다
- `/space`는 execution surface다
- review는 boundary ritual이어야 한다
- `/space`에서는 teaser만 허용하고, full review로의 강한 유도는 금지한다
### 3. review는 다음 행동으로 연결되어야 한다
- `/stats`는 읽고 끝나는 페이지가 아니다
- 마지막 CTA는 반드시 `/app`의 next session start와 연결돼야 한다
### 4. review 진입은 “보면 좋음”이 아니라 “지금 보면 의미 있음”이어야 한다
- 무조건 항상 띄우지 않는다
- 데이터가 충분하고, 지금 보는 것이 실제로 의미 있을 때만 노출한다
### 5. review는 planning이 아니라 focus optimization이다
- 할 일 정리로 이어지면 실패
- 다음 세션의 시작 조건을 더 잘 맞추는 흐름이어야 한다
---
## 4. 왜 `/app`이 primary entry인가
`/app`은 commitment gate다.
즉 사용자가 “지금 한 가지를 붙잡고 들어가겠다”는 결정을 내리는 곳이다.
review가 가장 유의미한 순간도 바로 여기다.
왜냐하면:
- review를 보고 바로 다음 세션을 시작할 수 있다
- `/space`보다 맥락이 느슨해서 회고가 자연스럽다
- `/stats`를 planner page처럼 쓰지 않고 entry ritual로 흡수할 수 있다
반대로 `/space`는:
- 이미 실행 중인 화면이고
- review가 들어오면 흐름을 끊고
- 제품을 dashboard처럼 보이게 만들 수 있다
결론:
- `/app`은 review를 여는 문
- `/stats`는 주간 review desk
- `/app`으로 돌아와 다시 시작
이 삼각 구조가 가장 맞다.
---
## 5. 사용자 플로우
### Primary Flow
`/app -> /stats -> /app`
1. 사용자가 `/app`에 들어온다
2. entry stage 바깥의 quiet review dock에 `weekly review entry`가 보인다
3. 사용자가 teaser를 누른다
4. `/stats`로 이동한다
5. review를 본다
6. 하단 CTA `이 흐름으로 다음 세션 시작`
7. `/app`으로 돌아온다
8. review에서 이어온 ritual/context를 가지고 바로 start한다
핵심:
- review는 `/app`을 대체하지 않는다
- review는 `/app`을 보조한다
- review를 보고 다시 `/app`으로 돌아오는 구조가 중요하다
### Secondary Flow
`/space complete -> teaser -> /stats`
1. 사용자가 `/space`에서 세션을 마친다
2. complete flow가 끝난다
3. 조건이 충족되면 작은 review teaser만 보여준다
4. 사용자가 원할 때만 `/stats`로 간다
중요:
- `/space`에서는 full review를 메인 행동으로 밀지 않는다
- complete tray를 review 유도 UI로 바꾸지 않는다
### Tertiary Flow
`profile / secondary nav -> /stats`
- 다시 review를 보고 싶은 사용자를 위한 명시적 진입
- 메인 CTA는 아니다
---
## 6. `/app`에서 review teaser를 언제 보여줄 것인가
항상 보여주면 안 된다.
“지금 봐도 의미 없음” 상태에서는 review가 노이즈가 된다.
### 노출 조건
기본 규칙:
- 최근 7일 started session >= 3
추가 강화 조건:
- completed session >= 2
또는
- returned after pause >= 1
즉,
- 데이터가 너무 적으면 teaser를 숨긴다
- 최소한 “이번 주 리듬”이라고 부를 수 있을 만큼 쌓였을 때만 연다
### 노출하지 않는 경우
- 첫 1~2회 사용
- 세션 기록이 거의 없는 주
- current session이 있고 review 데이터도 거의 없는 상황
이 경우:
- `/app` no-session 상태에서는 goal/duration/atmosphere entry stage에 집중
- resume 상태에서는 entry shell 대신 resume card 안의 조용한 secondary entry로 review를 연다
---
## 7. `/app` review dock 설계
### 위치
추천 위치:
- desktop에서는 entry stage 우측 또는 우상단 quiet dock
- mobile에서는 entry stage 아래의 얇은 secondary panel
금지:
- entry stage보다 위
- entry CTA와 같은 무게
- card 3개 중 하나처럼 보이게 배치
### 형태
- low-emphasis secondary panel
- 작고 조용한 one-liner + secondary CTA
예시:
- `이번 주엔 오전 시작에서 가장 오래 이어졌어요`
- `pause 뒤 복귀 3회 · review 보기`
### CTA
- `주간 review 보기`
보조 문구:
- `다음 세션 전에 가볍게 보고 갈 수 있어요`
### UX 원칙
- teaser는 insight를 다 말하지 않는다
- review를 보고 싶게 만들되, entry stage를 가리지 않는다
- start CTA보다 절대 커 보이면 안 된다
---
## 8. `/stats` 내부 플로우
### 진입 직후
- 이번 주 snapshot hero
- start / recovery / completion
- carry forward
### 마지막 CTA
review의 마지막 CTA는 아래 중 하나여야 한다.
- `이 흐름으로 다음 세션 시작`
- `이 조합으로 /app 돌아가기`
추천:
- CTA를 `/app?review=weekly&preset=...` 같은 방식으로 연결
- 최소한 query 또는 client state로 ritual/context를 넘긴다
중요:
- `/stats`에서 바로 `/space`로 가지 않는다
- `/app`을 다시 거치게 해서 commitment gate를 유지한다
왜냐하면:
- review 후에도 goal은 다시 내가 정해야 한다
- VibeRoom의 핵심은 single-goal commitment이지, review에서 바로 auto-start가 아니다
---
## 9. `/app` 복귀 후 UX
### 복귀 상태
`/stats`에서 온 경우 `/app`은 plain 상태가 아니라
review-aware state가 된다.
보여줄 것:
- “방금 본 review 기준 추천” 한 줄
- review carry-forward hint
- optional atmosphere / ritual hint
예시:
- `이번 주에 가장 잘 맞았던 흐름 · Forest · 50/10`
- `이번엔 시작을 더 작게 잡아보세요`
### 유지할 것
- goal은 여전히 사용자가 직접 입력
- goal과 duration은 여전히 사용자가 직접 입력
자동으로 하지 말 것:
- goal 자동 채우기
- 바로 `/space`로 보냄
- todo/list를 다시 불러옴
즉 review는:
- 방향을 준다
- 하지만 결정을 대신하진 않는다
---
## 10. Free / Pro 차이
### Free
- `/app` teaser는 1개만
- `/stats`에서는 이번 주 snapshot + start / recovery / completion 핵심까지만
- return CTA는 generic
- `이 흐름으로 다음 세션 시작`
### Pro
- teaser가 더 구체적일 수 있다
- `Forest · 50/10에서 pause 뒤 복귀율이 가장 높았어요`
- `/stats` 마지막 CTA가 더 개인화된다
- `가장 잘 맞은 ritual로 /app 돌아가기`
- `/app` 복귀 후 ritual prefill / carry-forward hint가 더 정교하다
핵심:
- Pro는 더 많은 review가 아니라
- 더 정확한 next-session handoff를 판다
---
## 11. UI/UX 원칙
### `/app` review dock
- entry stage보다 작음
- 한 줄 summary
- secondary CTA
- glass/card를 크게 쓰지 않음
### `/stats`
- calm review desk
- 읽고 이해하고, 마지막에 행동 하나를 고르는 구조
### `/app` return state
- 다시 시작하는 감각 유지
- review를 보고 왔다고 해서 `/app`이 dashboard처럼 바뀌면 안 된다
---
## 12. 구현 순서
### Slice 1. `/app` weekly review dock 추가
범위:
- teaser 노출 조건
- teaser UI
- `/stats` deep link
완료 기준:
- `/app`에서 review로 들어가는 primary path가 생긴다
### Slice 2. `/stats -> /app` return CTA 연결
범위:
- `/stats` 마지막 CTA
- query/state handoff
- `/app` review-aware state
완료 기준:
- review가 읽고 끝나는 페이지가 아니라 다음 세션으로 이어진다
### Slice 3. Pro personalized handoff
범위:
- best ritual carry-forward
- review origin state 유지
- CTA copy personalization
완료 기준:
- Pro가 더 자연스럽게 다음 세션으로 이어진다
### Slice 4. `/space` secondary teaser
범위:
- complete 이후 작은 review teaser
- full review 강제 이동 금지
완료 기준:
- `/space`에서도 review가 존재하지만 execution을 방해하지 않는다
---
## 13. 데이터 / 인터페이스 제안
### `/app` teaser용 데이터
새 hook 또는 기존 `useFocusStats` 확장:
- `hasEnoughWeeklyData`
- `weeklyTeaserLine`
- `reviewHref`
### `/stats -> /app` handoff
추천 query:
- `review=weekly`
- `entryPreset=forest-50-10`
- `carryHint=start-smaller`
주의:
- query는 가볍게
- 민감한 분석 전체를 싣지 않는다
### `/app` 복귀 상태
로컬 상태:
- `reviewSource`
- `suggestedEntryPreset`
- `carryForwardHint`
---
## 14. 완료 기준
- `/stats`의 primary entry가 `/app`에 생긴다
- `/space`는 review의 secondary entry만 가진다
- review를 본 뒤 사용자가 다시 `/app`으로 돌아와 다음 세션을 시작할 수 있다
- review가 planner나 dashboard가 아니라 next-session ritual처럼 읽힌다
- Free / Pro의 handoff 차이가 분명하다
---
## 15. 절대 피해야 할 방향
- `/space`에서 review로 강하게 끌어가는 것
- review를 top nav의 메인 기능처럼 밀어올리는 것
- `/stats`에서 바로 `/space` auto-start
- review 결과로 goal을 자동 생성하는 것
- review teaser가 `/app` hero보다 더 커 보이게 하는 것
- planner/todo 회고처럼 보이게 만드는 것

View File

@@ -0,0 +1,460 @@
# 18. Paused Session Re-entry Spec
Last Updated: 2026-03-15
이 문서는 VibeRoom에서 **진행 중인 세션 / 멈춘 세션 / 쉬는 시간**을 어떻게 다르게 취급할지,
그리고 사용자가 `/app`에 들어왔을 때 어떤 경로로 다시 `/space`에 진입해야 하는지를 정의한다.
핵심 목적은 하나다.
> session state에 따라 `/app`과 `/space`의 역할을 정확히 나누고,
> 사용자가 “지금 내가 어떤 상태인지”를 설명할 수 있는 premium UX를 만든다.
관련 문서:
- `./19_app_atmosphere_entry_spec.md`
- `../space/10_refocus_system_spec.md`
- `../space/11_away_return_recovery_spec.md`
- `./15_app_stats_entry_flow_spec.md`
- `../../product/16_product_alignment_audit_plan.md`
- `../../product/17_product_alignment_findings.md`
- `../../product_principles.md`
- `../../current_context.md`
---
## 1. 문제 정의
지금까지의 혼란은 대부분 여기서 시작됐다.
- `세션`
- `타이머`
- `pause`
- `break`
- `return`
을 충분히 분리하지 않고 써 왔다.
그 결과:
- 사용자는 `타이머가 멈춰 있으면 다 paused인가?`를 헷갈린다
- `/app`에서 `resume`이 primary인지, `새로 시작`이 가능한지 흐려진다
- `잠시 비우기``break`의 의미가 섞인다
이 spec은 그 상태 정의를 먼저 고정한다.
---
## 2. 한 줄 정의
> running session은 바로 `/space`로 복귀시키고,
> paused session은 `/app`에서 다시 이어갈지 정하게 하되,
> 사용자가 `이어가기`를 눌렀다면 `/space`에서는 다시 묻지 않고 바로 resume한다.
---
## 3. 상태 정의
### Session
사용자가 현재 책임지고 있는 하나의 focus block.
조건:
- goal이 있다
- 아직 명시적으로 닫지 않았다
- 다시 이어갈 수 있다
### Running Focus
- 현재 focus 타이머가 진행 중
- 사용자는 같은 goal 안에서 작업 중
### Paused Focus
- 사용자가 의도적으로 pause를 눌렀다
- 같은 goal은 아직 살아 있다
- 기본값은 `resume`
### Running Break
- focus block은 끝났다
- break 타이머가 진행 중이다
- 이건 paused session이 아니다
### Return
- 사용자가 pause를 누르지 않고 떠났다가 돌아온 상태
- system이 recovery 선택지를 먼저 제안하는 상태
### Closed Session
- `여기서 마무리하기`로 끝낸 상태
- 더 이상 current session이 아니다
---
## 4. 제품 원칙
### 1. Running은 다시 결정하게 하지 않는다
이미 running이면 사용자의 다음 행동은 “다시 정하기”가 아니라 “복귀”다.
즉:
- `/app`에서 hero를 다시 보여주지 않는다
- 바로 `/space`로 보낸다
### 2. Paused는 자동 재생하지 않는다
pause는 사용자의 명시적 멈춤이다.
즉:
- `/app`에 들어왔다고 자동 resume하지 않는다
- 사용자가 직접 `이어가기`를 눌러야 한다
### 3. Explicit Continue 이후에는 다시 묻지 않는다
사용자가 `/app`에서 `이어가기`를 눌렀다면,
그건 이미 “다시 하겠다”는 결정을 내린 것이다.
즉:
- `/app -> /space -> 다시 start 클릭` 금지
- `/space` 진입과 동시에 resume해야 한다
### 4. `/app`은 decision surface, `/space`는 execution surface
- `/app`: 이어갈지 / 다시 정리할지 / 새 목표로 전환할지
- `/space`: 실제로 일하는 곳
이 둘이 같은 결정을 두 번 요구하면 실패다.
### 5. 새 시작은 current session이 없을 때만 direct
paused session이 있는데 새 목표를 바로 시작하게 하면
회피 루프와 상태 오염이 생긴다.
즉:
- current session이 없을 때만 direct start
- current session이 있을 때 새 start는 explicit takeover flow로만 허용
---
## 5. 라우팅 정책
### Rule A. Running Focus
상태:
- current session 존재
- `state = running`
- `phase = focus`
처리:
- `/app` 진입 시 즉시 `/space`
이유:
- 이미 실행 중인 일은 다시 commitment gate에 세우면 안 된다
### Rule B. Running Break
상태:
- current session 존재
- `state = running`
- `phase = break`
처리:
- `/app` 진입 시 즉시 `/space`
이유:
- break도 현재 세션의 일부다
- `/app`에서 다시 decision을 시키면 break/return 의미가 흐려진다
### Rule C. Paused Focus
상태:
- current session 존재
- `state = paused`
- `phase = focus`
처리:
- `/app` 진입
- `resume gate` 노출
이유:
- pause는 사용자의 의도적 멈춤이므로 존중해야 한다
- 하지만 같은 goal을 다시 이어갈지 결정할 여지를 줘야 한다
### Rule D. No Session / Closed Session
상태:
- current session 없음
처리:
- `/app` 진입
- no-session entry shell 노출
---
## 6. `/app` paused state UX
### 목적
사용자가 “멈춘 세션이 아직 살아 있다”는 것을 즉시 이해하고,
한 번의 결정으로 `/space`에 다시 들어가게 만드는 것.
### 정보 구조
resume card 안에는 아래만 둔다.
- 현재 goal
- 마지막 microStep
- 현재 상태 문구
- 예: `잠시 멈춘 세션이 있어요`
- primary CTA
- quiet secondary actions
### Primary CTA
- `이어서 몰입하기`
동작:
- 클릭
- `/space`로 이동
- 자동 resume
### Secondary
- `한 조각 다시 잡기`
- `주간 review 보기`
### Tertiary
- `새 목표로 전환`
중요:
- new start가 아니다
- takeover flow 진입점이다
- server도 current session이 남아 있으면 direct start를 거절해야 한다
---
## 7. `/space` 재진입 동작
### Resume CTA 이후
`/app`에서 `이어서 몰입하기`를 눌렀다면:
- `/space`로 이동
- 별도의 start 버튼 재요구 금지
- 부드러운 transition 후 자동 resume
추천:
- 300~800ms 정도의 soft transition
- 필요하면 아주 짧은 re-entry settle animation
금지:
- `/space`에서 다시 `시작`을 누르게 하는 것
- resume 직후 또 다른 decision tray를 띄우는 것
### Refocus CTA 이후
`한 조각 다시 잡기`를 눌렀다면:
- refocus를 먼저 거친다
- 그 후 `/space` 진입과 함께 자동 resume
즉, refocus는 decision이고, `/space`는 execution이다.
---
## 8. Takeover Flow
paused session이 있을 때 새 goal direct start는 허용하지 않는다.
대신 아래 흐름으로만 간다.
### Trigger
- `/app` paused state에서 `새 목표로 전환`
### Confirm Sheet
질문:
- `현재 멈춘 세션을 어떻게 할까요?`
선택지:
- `이어서 하기`
- `이 세션은 여기서 정리하고 새로 시작`
- `취소`
### 동작 원칙
- `이어서 하기`
- sheet 닫기
- resume card 유지
- `이 세션은 여기서 정리하고 새로 시작`
- current session을 명시적으로 닫는다
- 그 다음 `/app` single-goal start 상태로 전환한다
- `취소`
- sheet 닫기
중요:
- silent abandon 금지
- paused session 위에 새 session을 덮어쓰기 금지
---
## 9. Weekly Review와의 관계
paused state에서도 review는 열 수 있어야 한다.
하지만 위계는 아래처럼 고정한다.
### paused state
- primary: `이어서 몰입하기`
- secondary: `한 조각 다시 잡기`
- quiet secondary: `주간 review 보기`
즉:
- review를 숨기면 안 된다
- resume보다 앞세우면 안 된다
---
## 10. 금지사항
- running session인데 `/app` hero를 보여주는 것
- paused 상태에서 `/app` 진입만으로 자동 resume
- `/app`에서 `이어가기`를 눌렀는데 `/space`에서 다시 start를 요구하는 것
- paused session 위에서 direct new start 허용
- break를 paused session처럼 취급하는 것
- takeover 없이 silent abandon 하는 것
---
## 11. 구현 순서
### Slice 1. Session Routing Contract
범위:
- `/app` 진입 시 current session state에 따른 route policy 고정
포함:
- `running focus -> /space`
- `running break -> /space`
- `paused focus -> /app`
- `no session -> /app`
완료 조건:
- 상태별 route policy가 코드와 문서에서 동일하다
### Slice 2. `/app` Paused Resume Gate
범위:
- paused state의 resume card UX 정리
포함:
- primary `이어서 몰입하기`
- `한 조각 다시 잡기`
- quiet `주간 review 보기`
- state copy 정리
완료 조건:
- paused 사용자가 다음 행동을 2초 안에 이해할 수 있다
### Slice 3. `/space` Auto-Resume Handoff
범위:
- `/app` resume CTA 이후 `/space` 진입 시 자동 resume
포함:
- explicit continue 이후 double-confirm 제거
- transition quality 보정
완료 조건:
- `/app -> /space -> start` 이중 클릭이 사라진다
### Slice 4. Takeover Flow
범위:
- paused session 위에서 new start를 하고 싶을 때의 명시적 처리
포함:
- confirm sheet
- close-and-start-new 경로
- silent abandon 방지
완료 조건:
- paused session 상태에서 새 목표 전환이 상태 오염 없이 가능하다
### Slice 5. Browser QA
반드시 확인할 시나리오:
1. running focus 상태에서 `/app` 진입
2. running break 상태에서 `/app` 진입
3. paused focus 상태에서 `/app` 진입
4. paused -> `이어서 몰입하기`
5. paused -> `한 조각 다시 잡기`
6. paused -> `주간 review`
7. paused -> `새 목표로 전환`
---
## 12. 성공 기준
- 사용자가 현재 상태를 설명할 수 있다
- running이면 `/space`, paused면 `/app`이라는 규칙이 일관된다
- paused에서의 primary CTA는 항상 `resume`이다
- explicit continue 이후에는 다시 start를 요구하지 않는다
- new start는 current session이 없을 때만 direct다
---
## 13. 최종 판단
VibeRoom이 world-class가 되려면
`멈춤`, `쉬기`, `복귀`, `새 시작`을 같은 것으로 취급하면 안 된다.
가장 중요한 원칙은 이거다.
> 이미 실행 중인 것은 바로 복귀시키고,
> 의도적으로 멈춘 것은 다시 결정하게 하되,
> 다시 하겠다고 결정한 뒤에는 한 번 더 묻지 않는다.