docs(docs): 문서를 화면과 용도별 폴더로 재구성

This commit is contained in:
2026-03-16 11:31:03 +09:00
parent acfa8f4f48
commit 38a9d1e762
25 changed files with 112 additions and 112 deletions

View File

@@ -0,0 +1,61 @@
# VibeRoom `/app` 프로덕트 고도화 및 수익화 기획안
## 1. 문제 정의: 왜 `/app`의 존재 의의가 애매해졌는가?
현재 `/app` 화면은 단순히 '목표를 하나 입력하고 `/space`로 넘어가는 정거장' 역할만 수행하고 있습니다.
사용자 입장에서는 "어차피 `/space`에서 타이머 돌리고 일할 건데, 굳이 `/app`이라는 별도 화면에서 목표 하나만 달랑 쳐야 하나?"라는 기능적 회의감이 들 수밖에 없습니다. 즉, **경험적 가치(UX Value) 없이 Depth만 하나 늘어난 상태**입니다.
## 2. 타겟 인사이트: ADHD & 프리랜서의 심리
이 서비스의 핵심 타겟은 **ADHD 성향을 가진 사람들과 혼자 일하는 프리랜서**입니다. 이들의 가장 큰 페인포인트는 다음과 같습니다.
1. **시작의 두려움 (High Activation Energy):** '무엇을 해야 할지'는 알지만, 첫 단추를 꿰는 것을 극도로 미룹니다.
2. **작업 기억 용량 초과 (RAM Overload):** 머릿속에 해야 할 일과 잡념이 뒤엉켜 있어 하나에 집중하지 못합니다.
3. **도파민 갈구 (Dopamine Seeking):** 즉각적인 피드백이나 보상이 없으면 쉽게 지루해하고 이탈합니다.
## 3. 핵심 전략: `/app`을 '단순 입력창'에서 **'몰입을 위한 의식(Ritual)의 공간'**으로 재정의
최고의 서비스는 사용자에게 '행동'을 요구하기 전에 '감정'을 만져줍니다. `/app`은 투두리스트(To-do)를 적는 곳이 아닙니다. **복잡한 현실에서 벗어나, 고도의 집중 상태(`/space`)로 들어가기 전 마음을 다잡고 준비 운동을 하는 '감압실(Decompression Chamber)'**이 되어야 합니다.
---
## 4. `/app` 공간의 4가지 핵심 기능 기획
### A. Brain Dump (뇌 비우기) & The One Thing
ADHD 유저에게 "지금 할 목표 하나만 적으세요"라고 하면 오히려 압박감을 느낍니다.
- **기능:** 머릿속에 맴도는 모든 잡념과 해야 할 일들을 일단 마구잡이로 쏟아내게 합니다(Brain Dump).
- **UX:** 쏟아낸 여러 항목 중 **"지금 당장 딱 하나만 쥐고 `/space`로 들어갑시다. 나머지는 저희가 안전하게 보관해 둘게요"**라며 단 하나의 목표(The One Thing)를 선택하게 유도합니다.
- **효과:** 머릿속 RAM을 비워줌으로써 인지적 과부하를 해결하고 안도감을 줍니다.
### B. Micro-Stepping (초소형 첫 단계 쪼개기)
"제안서 작성하기"라는 목표는 너무 거대해서 시작을 미루게 만듭니다.
- **기능:** 유저가 큰 목표를 선택했을 때, "이 목표를 위해 지금 당장 할 수 있는 5분짜리 행동은 무엇인가요?"라고 묻습니다.
- **UX:** "제안서 폴더 열기", "노션 새 페이지 만들기" 수준으로 목표를 극단적으로 잘게 쪼개도록 유도합니다.
- **효과:** 시작의 허들(Activation Energy)을 바닥까지 낮춰줍니다.
### C. Commitment Ritual (몰입 세팅과 선언)
`/space`에 들어가서 환경을 바꾸는 것이 아니라, `/app`에서 오늘 나를 도와줄 환경을 선택하고 '입장'하는 것이 하나의 의식이 되어야 합니다.
- **기능:** 목표를 정한 후, 오늘 나의 기분에 맞는 **Vibe(배경 씬 + 백색소음)**와 **Pace(뽀모도로 25분 / 딥워크 50분 등)**를 선택합니다.
- **UX:** 세팅을 마치고 "집중 모드 진입하기" 버튼을 누를 때, 시각적/청각적인 전환 효과와 함께 비행기가 이륙하듯 `/space`로 부드럽게 빨려 들어가는 연출을 줍니다.
### D. Momentum & Streak (과거의 작은 성공 시각화)
- **기능:** `/app` 화면 한 켠에, 최근에 내가 해냈던 작은 몰입 세션들의 기록(잔디 심기, 자라나는 식물 등)을 시각적이고 감성적으로 보여줍니다.
- **효과:** "어제도 해냈으니 오늘도 할 수 있다"는 자기 효능감을 심어주어 도파민을 자극합니다.
---
## 5. 비즈니스 모델(BM): 기꺼이 돈을 내게 만드는 수익화 전략
유저가 제품에 깊이 몰입하고 나면, 다음과 같은 **PRO 플랜(구독 모델)**을 통해 수익화를 달성할 수 있습니다.
1. **AI Micro-Stepping Coach (AI 목표 쪼개기 및 코칭)**
- **무료:** 유저가 직접 첫 단계를 고민해서 적어야 함.
- **PRO:** "기획서 쓰기"라고 치면, AI가 [1. 레퍼런스 3개 찾기, 2. 목차 5개 적기, 3. 서론 쓰기] 등으로 즉각 분해해주고 응원의 메시지를 건넴. (ADHD 유저에게 압도적인 가치 제공)
2. **Premium Vibes (독점 씬 & 사운드스케이프)**
- **무료:** 기본 자연음(숲, 비투비) 2~3종 제공.
- **PRO:** 유명 아티스트가 작곡한 Lo-Fi 집중 비트, 세계 유명 도서관/카페의 3D 공간 음향, 초고화질 동적 배경(비 오는 도쿄 야경 등) 무제한 접근.
3. **Deep Focus Analytics (심층 분석 리포트)**
- **무료:** 오늘 하루 총 집중 시간(단순 타이머 기록)만 확인 가능.
- **PRO:** 웹 서비스의 한계를 극복하기 위해 **세션 종료 후 유저가 직접 평가하는 '집중도 점수(1~5점)'와 Page Visibility API를 활용한 '탭 이탈(딴짓) 횟수 기록'을 결합**합니다. 이를 통해 단순히 켜둔 시간이 아니라 어떤 사운드/환경에서 가장 '질 높은' 집중을 했는지, 요일별 언제가 집중 Peak Time인지 분석하여 나만의 최적화된 루틴을 제안합니다.
4. **Calendar & Notion Integration (업무 툴 연동)**
- **PRO:** 구글 캘린더의 일정이나 노션의 Task를 `/app`의 Brain Dump로 자동 불러오고, 집중 세션이 끝나면 소요 시간과 함께 자동으로 기록/동기화됨. (프리랜서들의 필수 니즈)
- **기술적 실현 가능성 (Feasibility Check):** 웹 서비스 환경에서도 **OAuth 2.0 기반의 Google Calendar API 및 Notion API**를 연동하여 완벽히 구현 가능합니다. 서버에서 유저의 접근 권한 토큰을 관리하여 웹 클라이언트와 외부 서비스 간의 양방향 데이터 동기화를 지원할 수 있습니다.
## 요약 (Next Action)
`/app`은 단순히 데이터를 넘기는 껍데기가 아니라, **유저의 마음을 달래고(Brain Dump), 허들을 낮춰주며(Micro-Stepping), 몰입을 세팅(Ritual)하는 심리적 안전기지**가 되어야 합니다. 이 경험이 탄탄해지면 유저는 VibeRoom을 단순한 타이머가 아닌 '나의 루틴 파트너'로 인식하게 되며, AI 코칭과 프리미엄 환경을 위해 기꺼이 지갑을 열게 될 것입니다.

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가 되려면
`멈춤`, `쉬기`, `복귀`, `새 시작`을 같은 것으로 취급하면 안 된다.
가장 중요한 원칙은 이거다.
> 이미 실행 중인 것은 바로 복귀시키고,
> 의도적으로 멈춘 것은 다시 결정하게 하되,
> 다시 하겠다고 결정한 뒤에는 한 번 더 묻지 않는다.

View File

@@ -0,0 +1,445 @@
# 19. `/app` Atmosphere Entry Spec
Last Updated: 2026-03-16
이 문서는 `/app`**`goal + duration + atmosphere` 중심의 premium focus entry surface**로 재설계하기 위한 기준 문서다.
관련 문서:
- `../../product_principles.md`
- `../../current_context.md`
- `../stats/14_weekly_review_reframe_spec.md`
- `./15_app_stats_entry_flow_spec.md`
- `./18_paused_session_reentry_spec.md`
---
## 1. 왜 다시 바꾸는가
현재 `/app`은 single-goal commitment gate로 정리되어 있지만,
사용자가 실제로 “어떤 환경으로 들어갈지”를 고르는 감각 품질이 entry에서 충분히 살아 있지 않다.
문제:
- 시작은 빨라졌지만, entry가 아직 너무 추상적이다
- `scene / sound / timer`가 제품 핵심 가치인데 `/app`에서는 거의 느껴지지 않는다
- 첫 진입에서 VibeRoom만의 premium 감각이 충분히 전달되지 않는다
따라서 `/app`은 다시 planning home으로 돌아가면 안 되지만,
**`goal + duration + atmosphere`를 한 화면에서 직관적으로 결정하는 premium entry stage**로 진화할 필요가 있다.
핵심은 이것이다.
> `/app`은 여전히 한 가지 목표만 정하는 화면이어야 하지만,
> 그 목표를 어떤 분위기에서 얼마나 붙잡을지까지 함께 결정하는 stage가 되어야 한다.
---
## 2. 한 줄 정의
`/app`은 사용자가
1. 이번 세션의 목표를 한 줄로 적고
2. 이 목표에 얼마나 걸릴지 직접 입력하고
3. 배경 + 사운드가 묶인 하나의 `Atmosphere`를 고른 뒤
4. 바로 `/space`로 들어가는
**premium focus staging screen**이다.
---
## 3. 핵심 제품 원칙
### 1. Single Goal First는 유지한다
- goal은 1개만 입력한다
- entry에서 multi-goal / list / planner affordance 금지
### 2. MicroStep은 `/app`에서 제거한다
- 최초 entry에서는 microStep을 묻지 않는다
- microStep은 `/space` 안의 recovery / refocus에서 다시 잡는다
- 이유:
- 첫 entry는 시작 마찰을 최소화해야 한다
- goal, duration, atmosphere만으로도 결정량이 충분하다
### 3. Duration은 사용자가 직접 입력한다
- 기존 preset `25/5`, `50/10` 중심 entry를 버린다
- 사용자는 “이 목표를 끝내는 데 얼마나 걸릴지”를 분 단위로 적는다
- 예: `70분`
### 4. 배경 + 사운드는 하나의 오브젝트로 다룬다
- scene과 sound를 따로 고르게 하지 않는다
- entry에서 사용자가 고르는 것은 `Atmosphere` 하나다
-`/app`의 선택 단위는 `scene + sound pair`
### 5. Review는 entry를 방해하지 않는 secondary ritual이어야 한다
- `/app`의 주인공은 시작이다
- weekly review, achieved goals, “어떤 조합에서 잘 됐는지”는 보이되 start보다 앞서면 안 된다
---
## 4. 용어 정의
### 추천 명칭: `Atmosphere`
배경 + 사운드가 결합된 카드의 공식 명칭은 `Atmosphere`로 고정한다.
이유:
- scene, sound, timer보다 더 제품적인 단위로 읽힌다
- “배경 카드”보다 premium하고 감성적이다
- 나중에 Pro 가치(`saved atmospheres`, `best atmosphere for mornings`)와도 자연스럽게 연결된다
### UI에서의 노출 방식
- 섹션 제목: `어떤 분위기에서 들어갈까요?`
- 카드 타입 명칭: `Atmosphere`
- 예시 카드명:
- Rain Window
- Quiet Library
- Forest Draft
- Deep Night Desk
### 피해야 할 이름
- `배경 카드`
- `사운드 카드`
- `조합 카드`
- `프리셋`
이런 이름은 값싸 보이거나 툴처럼 읽힌다.
---
## 5. 정보 구조
`/app`은 아래 3층으로 구성한다.
### Layer 1. Entry Header
- VibeRoom wordmark
- quiet weekly review entry
- plan pill / account
### Layer 2. Primary Start Stage
- goal input
- duration input
- start CTA
### Layer 3. Atmosphere Grid
- 12개의 curated atmosphere card
- row당 4개
- 첫 구현은 더미 데이터
핵심은
**review / archive / history가 main stage를 먹지 않고, atmosphere grid도 secondary decoration이 아니라 실제 선택 surface로 작동해야 한다**는 점이다.
---
## 6. 화면 구성
### A. Goal Input
- 가장 위, 가장 크게
- 한 줄 입력
- placeholder 예시:
- `예: 여행 계획 짜기`
- `예: 제안서 첫 문단 정리`
규칙:
- 필수
- 한 줄
- Enter로 start 가능
### B. Duration Input
- goal 바로 아래 또는 옆
- 분 단위 숫자 입력
- label:
- `얼마나 붙잡을까요?`
- `예상 시간(분)`
규칙:
- 필수
- 숫자만
- 권장 범위:
- 최소 10분
- 최대 180분
- helper:
- `이 목표를 끝내는 데 걸릴 것 같은 시간을 적어요.`
### C. Atmosphere Grid
- 12개 dummy card
- desktop: 4열 x 3행
- tablet: 3열
- mobile: 2열
각 카드 구성:
- 배경 썸네일
- 카드명
- sound label
- 1줄 description
예시:
- `Rain Window` / `Soft Rain`
- `Quiet Library` / `Air + Page Rustle`
- `Forest Draft` / `Forest Birds`
- `Deep Night Desk` / `Low White`
### D. Start CTA
- 문구 예시:
- `이 분위기로 들어가기`
- `지금 시작`
추천:
- 기본 CTA는 `이 분위기로 들어가기`
- 이유:
- goal + duration + atmosphere가 모두 한 번에 묶여 entry action으로 읽힌다
### E. Weekly Review Entry
이건 main stage 바깥의 quiet secondary placement로 둔다.
권장 위치:
- desktop: header 아래 우상단 quiet insight panel
- mobile: hero 하단의 얇은 secondary card
보여줄 것:
- 이번 주 가장 잘 맞았던 atmosphere
- 시작 성공률 또는 복귀율 1줄
- CTA: `이번 주 review`
보이지 말아야 할 것:
- achieved goals 리스트 전체
- 작은 차트 여러 개
- dashboard처럼 보이는 summary wall
---
## 7. Weekly Review / Achieved Goals를 어디에 둘 것인가
결론:
> `/app`에는 full review를 두지 않고,
> `quiet review dock`만 둔다.
> 자세한 achieved goals와 “어떤 조합에서 잘 됐는지”는 `/stats`에서 본다.
### 왜 `/app`에 다 보여주면 안 되는가
- 메인 entry의 집중력이 깨진다
- goal 입력과 review 해석이 같은 레벨로 보인다
- planner/dashboard처럼 읽힌다
### 추천 구조
#### `/app`
- 작은 weekly review dock
- 보여주는 정보는 1~2줄만
- 예:
- `이번 주엔 Rain Window에서 가장 오래 이어졌어요.`
- `여행 계획 같은 넓은 목표는 70분보다 45분에서 더 잘 닫혔어요.`
#### `/stats`
- achieved goals history
- best-performing atmospheres
- duration fit
- recovery quality
즉:
- `/app`은 “review를 여는 문”
- `/stats`는 “review desk”
---
## 8. 상태별 유저 플로우
### Flow A. First Entry / No Session
1. 사용자가 `/app` 진입
2. goal 입력
3. duration 입력
4. atmosphere 1개 선택
5. CTA 클릭
6. `/space` 진입
핵심:
- microStep 없음
- list 없음
- wizard 없음
### Flow B. Running Session Exists
1. 사용자가 `/app` 진입
2. 바로 `/space` redirect
이유:
- 이미 실행 중인 세션은 다시 decision gate에 세우지 않는다
### Flow C. Paused Session Exists
1. 사용자가 `/app` 진입
2. paused resume gate 노출
3. 선택:
- `이어서 몰입하기`
- `한 조각 다시 잡기`
- `새 목표로 전환`
중요:
- 이 상태에서는 atmosphere grid를 메인 UI로 먼저 보여주지 않는다
- resume가 primary다
### Flow D. Review Entry
1. 사용자가 `/app`의 quiet review dock 클릭
2. `/stats`
3. carry-forward CTA
4. 다시 `/app`
---
## 9. UI 방향
### 톤
- premium
- calm
- stage-like
- card-heavy dashboard 금지
### 중요한 시각 원칙
- 상단 input stage는 “form”보다 “entry surface”처럼 보여야 한다
- atmosphere grid는 catalog처럼 보이되, ecommerce처럼 보이면 안 된다
- card는 selection object이지 콘텐츠 카드가 아니다
- hover, selected, focus state가 매우 명확해야 한다
### Selected Card
- 다른 카드보다 1단 더 선명
- subtle border glow
- sound label이 더 읽히게
- 선택되면 CTA 문구가 `이 분위기로 들어가기`와 연결돼야 함
### Unselected Card
- 너무 장식적이면 안 된다
- 배경 썸네일이 주인공
- 텍스트는 간결
---
## 10. 비즈니스 모델 관점
이 redesign은 BM에도 직접 연결된다.
### Free
- curated atmosphere 12개 제공
- goal + custom duration + basic review dock
- best atmosphere insight는 1줄만
### Pro
- personalized atmosphere recommendations
- saved favorite atmospheres
- goal type / time-of-day 기반 추천
- “이 목표 유형에서 잘 맞았던 조합” 인사이트
- duration suggestion
- deeper review
즉 Pro는 “카드를 더 많이 준다”가 아니라
**더 잘 맞는 atmosphere를 더 빨리 고르게 해준다**가 되어야 한다.
---
## 11. 서버 / 데이터 영향
이번 redesign은 backend contract까지 건드린다.
### 필요한 변화
1. `startSession`이 custom duration minutes를 받도록 확장
2. session에 `focusDurationMinutes` 저장
3. break duration 계산 정책 정의
4. atmosphere 선택 단위를 위한 `sceneId + soundPresetId` 조합 저장
### break duration 정책 제안
- 10~30분: 5분
- 31~60분: 10분
- 61~120분: 15분
- 121분 이상: 20분
이건 사용자가 break를 직접 고르지 않아도 자연스럽게 이어지게 하기 위한 기본 정책이다.
---
## 12. 구현 순서
### Slice 1. Atmosphere Model / Dummy Data
- atmosphere card dummy 12개 정의
- 카드명 / scene / sound / thumbnail 연결
### Slice 2. `/app` Entry Shell Redesign
- goal input
- duration input
- 4x3 atmosphere grid
- selected card state
- start CTA
### Slice 3. Paused Gate Coexistence
- paused session일 때는 새로운 entry shell 대신 resume gate를 우선 유지
- no-session일 때만 새 shell 노출
### Slice 4. Custom Duration Contract
- web -> server `custom minutes`
- break duration policy
- `/space` timer HUD와 연동
### Slice 5. Weekly Review Dock
- `/app`의 quiet secondary review entry를 새 shell에 맞게 재배치
- `/stats` entry/handoff 유지
### Slice 6. Pro Personalization
- recommended atmosphere
- best-fit insight
- duration suggestion
---
## 13. 검증 기준
- 사용자가 `/app`에서 10초 안에 goal + duration + atmosphere를 정하고 들어갈 수 있다
- atmosphere grid가 decorator가 아니라 실제 선택 surface로 읽힌다
- weekly review가 start보다 앞서지 않는다
- `/app`이 planner/dashboard처럼 보이지 않는다
- paused session에서는 resume gate가 새 entry shell보다 우선한다
- `70분` 같은 custom duration이 실제 세션 길이로 반영된다

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,273 @@
# 13. `/space` Intent Card Collapsed / Expanded Spec
Last Updated: 2026-03-15
이 문서는 `/space` 좌상단 목표 카드의 **collapsed / expanded 구조**를 정의한다.
목적은 단순하다.
- goal은 항상 보여야 한다
- 하지만 배경을 계속 크게 가리면 안 된다
- 평소에는 조용한 `anchor`처럼 남고, 필요할 때만 `card`처럼 확장돼야 한다
관련 문서:
- `./10_refocus_system_spec.md`
- `./11_away_return_recovery_spec.md`
- `../../product/12_core_loop_execution_roadmap.md`
- `../../current_context.md`
---
## 1. 왜 바꾸는가
현재 구조의 문제는 이것이다.
- goal, microStep, 액션이 항상 한 카드 안에 모두 보인다
- 읽힘은 확보하지만, 배경의 존재감을 과하게 가져간다
- `/space`의 주인공이 scene이어야 하는데, 좌상단 카드가 먼저 읽힌다
즉 문제는 glass material 자체보다 **항상 큰 상태로 떠 있는 면적**이다.
premium ambient UI에서는:
- 정보는 항상 남아야 하지만
- 존재감은 항상 같을 필요가 없다
그래서 목표 카드는 `persistent presence`는 유지하고, `persistent emphasis`는 버려야 한다.
---
## 2. 한 줄 정의
> `/space`의 목표 카드는 평소에는 얇은 glass rail로 남고, 사용자가 실제로 결정을 내려야 할 때만 확장된다.
---
## 3. 상태 정의
Intent Card는 아래 2개 상태만 가진다.
### 3.1 Collapsed
기본 상태.
보이는 것:
- goal 1줄
보이지 않는 것:
- microStep 상세
- 완료 액션
- recovery footer
역할:
- 지금 어떤 일 위에 있는지 잃지 않게 하는 기준점
감정:
- panel이 아니라 anchor
### 3.2 Expanded
필요할 때만 열리는 상태.
보이는 것:
- goal
- microStep 또는 비어 있을 때의 조용한 helper line
- `이번 목표 완료`
- microStep 완료 체크
역할:
- 지금 이 세션을 어떻게 계속할지 결정하게 하는 짧은 제어 면
감정:
- 툴바가 아니라, 잠깐 열리는 soft control surface
---
## 4. 상태 전환 규칙
### Expanded로 전환되는 경우
- desktop에서 hover
- focus 진입
- rail 전체 클릭/tap
### Collapsed로 돌아가는 경우
- pointer leave
- focus out
- expand affordance 재클릭
- expanded 상태에서 card 바깥 pointer down
- recovery tray가 열릴 때
중요:
- `pause / return / next-beat / complete / refocus` tray가 열려 있는 동안에는 목표 카드는 강제로 collapsed 상태를 유지한다
- tray가 이미 의사결정 레이어이기 때문에, base card까지 expanded 상태면 배경을 이중으로 가리게 된다
### dismissal rule
- expanded goal card는 `outside click / outside tap`으로 접혀도 된다
- 이 동작은 base card의 ephemeral expansion에만 적용한다
- `refocus / next-beat / return / complete`처럼 의사결정을 요구하는 tray는 outside click으로 닫히면 안 된다
- decision tray는 반드시 명시적 액션으로만 닫는다
- `취소`
- `적용`
- `여기서 마무리하기`
- `잠시 비우기`
- `다음 블록 이어가기`
- 즉, `/space`에서 가볍게 접히는 것은 `expanded rail`뿐이고, 실질적인 state change layer는 dismissible popover로 취급하지 않는다
---
## 5. 시각 구조
### Collapsed rail
- 폭: 약 `18rem ~ 19rem`
- 높이: 약 `48px ~ 52px`
- radius: `18px` 전후
- glass:
- 더 얇고 더 투명
- large panel처럼 보이면 안 된다
- goal:
- 1줄 truncate
- medium weight
- affordance:
- 별도 chevron / dropdown button은 두지 않는다
- rail 자체가 expand trigger로 동작한다
- desktop에서는 hover로, mobile에서는 tap으로 자연스럽게 열린다
### Expanded card
- 폭: 약 `21rem ~ 23rem`
- 높이: 내용에 따라 자연스럽게
- radius: `22px ~ 24px`
- glass:
- collapsed보다 한 단계 더 선명한 재질
- 하지만 tray만큼 무겁지는 않다
- 내부 구조:
1. goal row
2. microStep row
3. quiet footer action
---
## 6. 정보 구조
### Goal row
- 좌측: goal 1줄
- 우측: expanded 상태에서만 보이는 `수정` 액션
- collapsed 상태에서는 rail 전체가 expand trigger로만 동작한다
- expanded 상태에서도 goal 텍스트 자체는 edit trigger가 아니다
- refocus는 expanded 상태의 명시적 `수정` 액션으로만 진입한다
### MicroStep row
- expanded 상태에서만 노출
- 왼쪽: completion glyph
- 오른쪽: microStep text
- microStep이 없으면:
- helper 1줄만 노출
- planner-like placeholder 금지
### Footer action
- expanded 상태에서만 노출
- 우측 정렬된 quiet text action 1개
- `이번 목표 완료`
- `다시 방향` 상시 버튼은 두지 않는다
- refocus는 expanded 상태의 명시적 `수정` 액션으로만 진입한다
---
## 7. interaction 원칙
### Goal 수정
- expanded 상태의 `수정` 액션 클릭 -> refocus
- collapsed 상태의 rail 클릭은 절대 refocus를 열지 않는다
- 핵심은 `expand``edit`의 역할이 섞이지 않게 하는 것이다
### microStep 완료
- expanded 상태에서만 완료 glyph가 노출된다
- collapsed 상태에서는 실수 클릭을 막기 위해 숨긴다
### 목표 완료
- expanded 상태에서만 footer action 노출
- collapsed 상태에서는 보이지 않는다
---
## 8. motion 원칙
### Collapsed -> Expanded
- 넓어짐 + 내부 row fade-in
- card가 “튀어나오는” 느낌보다, rail이 조용히 열리는 느낌이어야 한다
- duration은 짧고 부드럽게
### Expanded -> Collapsed
- 내부 row가 먼저 약해지고
- 폭이 줄어든다
- 닫힘은 더 조용해야 한다
### tray open 시
- intent card는 먼저 collapsed
- 그 아래 tray가 열림
-`card 확장``tray 확장`은 동시에 크게 보이면 안 된다
---
## 9. 금지사항
- 상시 expanded 금지
- goal + microStep + footer action 항상 노출 금지
- Now chip 재도입 금지
- toolbar/pill/button cluster처럼 보이게 만들기 금지
- 배경보다 card가 먼저 읽히게 만들기 금지
- rail 클릭과 edit 진입을 같은 액션으로 섞기 금지
- 별도 chevron/dropdown button을 상시 노출하기 금지
---
## 10. 구현 기준
필수 변경 파일:
- `src/widgets/space-focus-hud/ui/IntentCapsule.tsx`
- `src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx`
가능한 보조 변경:
- `src/shared/i18n/messages/space.ts`
- `src/widgets/space-focus-hud/ui/overlayStyles.ts`
구현 포인트:
- `IntentCapsule` 내부에 local expanded state 추가
- hover / focus / toggle button 기반 전환
- `showActions === false` 또는 overlay open 상태에서는 강제 collapsed
- microStep / footer action은 expanded에서만 렌더
---
## 11. 완료 기준
- idle 상태에서 상단 goal UI가 배경을 덜 가린다
- expanded 상태에서만 microStep과 완료 액션이 보인다
- recovery tray가 열릴 때 base card는 과하게 커져 있지 않다
- bright / dark scene 모두에서 읽히지만 scene이 먼저 읽힌다
- `/space`가 productivity dashboard처럼 보이지 않는다

View File

@@ -0,0 +1,626 @@
# 14. Weekly Review Reframe Spec
Last Updated: 2026-03-14
이 문서는 VibeRoom의 `Weekly Review`를 단순 통계 화면이 아니라
**다음 세션의 성공률을 높이는 행동 시스템**으로 재정의하는 상세 기획 문서다.
관련 문서:
- `../app/19_app_atmosphere_entry_spec.md`
- `../space/10_refocus_system_spec.md`
- `../space/11_away_return_recovery_spec.md`
- `../../product/12_core_loop_execution_roadmap.md`
- `../space/13_space_intent_card_collapsed_expanded_spec.md`
- `../../product_principles.md`
- `../../current_context.md`
---
## 1. 문제 정의
현재 `/stats`는 factual summary 중심으로 정리되어 있다.
좋은 점:
- 과한 해석을 줄였다
- mock insight와 가짜 코칭을 제거했다
- started / completed / carried over / focus minutes 같은 실제 수치만 남겼다
부족한 점:
- 사용자가 `그래서 다음 주에 뭘 바꾸면 되는지`를 알 수 없다
- 총 시간은 보여주지만 `왜 잘 되었는지 / 왜 무너졌는지`는 행동 수준에서 연결되지 않는다
- Pro 가치가 `review`라는 이름에 비해 아직 약하다
- 현재 구조는 여전히 `summary dashboard`에 가깝고, `behavior change surface`로는 약하다
핵심 문제는 이거다.
> 지금의 `/stats`는 지난 시간을 보여주지만, 다음 집중의 성공률을 높이지는 못한다.
---
## 2. 한 줄 정의
> Weekly Review는 지난 7일의 집중 기록을 예쁘게 보여주는 화면이 아니라, 다음 주의 첫 세션을 더 잘 시작하게 만드는 주간 정리 ritual이다.
---
## 3. 제품 목표
Weekly Review가 해야 할 일은 4개뿐이다.
1. 내가 `시작`을 잘하는 조건을 보여준다
2. 내가 `흔들린 뒤 복귀`를 잘하는 조건을 보여준다
3. 내가 `완료`까지 가는 패턴을 보여준다
4. 다음 주에 바꿀 것을 1~2개만 남긴다
하지 말아야 할 일도 분명하다.
- 예쁜 그래프 전시장 되기
- 생산성 점수 놀이
- 성격 분석처럼 보이는 과한 해석
- planner / habit tracker / life dashboard로 확장
---
## 4. 시장 신호와 포지셔닝
2026-03-14 기준 공식 포지셔닝을 보면:
- [LifeAt pricing](https://lifeat.io/pricing)는 `daily planner`, `multiple calendars`, `unlimited todos and notes`, `advanced analytics`를 함께 판다.
- [Focusmate pricing](https://www.focusmate.com/pricing/)는 무료 주 3회, 유료 무제한으로 `accountability access`를 판다.
- [Portal](https://portal.app/)은 `immersive spatial audio`와 감각 품질을 전면에 둔다.
- [Endel ADHD](https://endel.io/adhd)는 `Focus Timer`, `Task Headline`, `App Blocker`, active exercises를 ADHD 친화적 도구로 묶는다.
- [Brain.fm pricing](https://www.brain.fm/pricing)는 `science-backed music` 자체를 프리미엄 가치로 판다.
VibeRoom의 Weekly Review는 LifeAt처럼 planner analytics로 가면 안 된다.
또 Focusmate처럼 외부 accountability를 핵심으로 가도 안 된다.
VibeRoom의 review는 아래처럼 포지셔닝해야 한다.
- planner review가 아니다
- performance dashboard도 아니다
- `내가 어떤 조건에서 실제로 시작하고 복귀하는지`를 보여주는 focus quality review다
즉, review는 Pro에서 이렇게 팔아야 한다.
> 더 많은 일을 관리하는 리뷰가 아니라, 덜 흔들리고 더 빨리 다시 시작하게 해주는 리뷰
---
## 5. 사용자 정의
### Primary User
- ADHD 성향이 있거나 시작 마찰이 큰 프리랜서
- 해야 할 일은 알지만 시작과 복귀가 어렵다
- 감각 환경이 집중 품질에 영향을 준다
- 통계는 싫지 않지만, 너무 많은 정보는 오히려 회피를 만든다
### Weekly Review에서의 실제 질문
- 나는 언제 시작이 잘 되었지?
- 어떤 배경/사운드/길이에서 덜 무너졌지?
- pause 후에 잘 돌아온 편인가?
- 다음 주에는 뭘 하나만 바꾸면 될까?
---
## 6. Weekly Review 경험 원칙
### 1. Review는 지난 주를 닫고 다음 주를 여는 ritual이어야 한다
- 회고는 회고로 끝나면 안 된다
- 반드시 다음 주의 첫 세션과 연결되어야 한다
### 2. 총 시간보다 행동 전환을 우선한다
- focus minutes는 보조 지표다
- 핵심은 `start`, `recovery`, `completion`
### 3. 모든 해석은 근거가 있는 factual summary여야 한다
- “당신은 밤형 인간입니다” 같은 해석 금지
- “최근 7일 중 오전 9시~12시 시작 세션의 완료율이 가장 높았어요”처럼
raw metric에 직접 연결되는 문장만 허용
### 4. 한 화면에서 바꾸는 제안은 최대 2개만
- insight가 많아 보이는 것은 premium이 아니다
- `다음 주엔 이 두 가지만 바꿔보자`가 더 premium하다
### 5. Review는 planner가 아니라 focus optimizer여야 한다
- todo completion analytics 금지
- calendar productivity reporting 금지
- session quality와 ritual fit만 본다
### 6. Free도 충분히 가치 있어야 하고, Pro는 더 깊어야 한다
- Free는 `기본적인 self-awareness`
- Pro는 `행동 변화에 쓸 수 있는 pattern visibility`
---
## 7. 정보 구조
Weekly Review는 `/stats` 안에서 아래 5개 구역으로 재구성한다.
### Section A. Weekly Snapshot
목적:
- 이번 주를 한눈에 닫아주는 첫 문장
구성:
- title: `이번 주 집중 리듬`
- subline: `시작 9회 · 복귀 5회 · 완료 4회`
- short summary 1줄
예시:
- `이번 주에는 시작은 자주 했고, pause 뒤 복귀는 절반 정도 이어졌어요.`
- `짧은 세션보다 45분 이상 세션에서 완료율이 더 높았어요.`
규칙:
- summary는 1줄만
- 과장 금지
- 반드시 실제 수치에서 바로 읽히는 문장만 허용
### Section B. Start Quality
목적:
- 사용자가 `들어가는 힘`을 얼마나 잘 만들었는지 보여준다
노출 지표:
- started sessions
- start days
- first start consistency
- planned start vs ad-hoc start ratio
핵심 질문:
- 이번 주에 시작 자체를 자주 했는가?
- 특정 요일/시간대에서 시작이 잘 되었는가?
추천 카드:
- `시작 횟수`
- `가장 잘 시작된 시간대`
- `첫 세션 평균 시작 시각`
### Section C. Recovery Quality
목적:
- pause / away 이후 얼마나 다시 올라탔는지 보여준다
노출 지표:
- paused sessions
- returned after pause
- returned after away
- recovery rate
- avg time to recovery
핵심 질문:
- 흔들린 뒤에도 다시 돌아왔는가?
- pause와 away 중 어디서 더 많이 끊겼는가?
추천 카드:
- `복귀율`
- `pause 뒤 복귀`
- `자리 비움 뒤 복귀`
### Section D. Completion Quality
목적:
- 끝까지 간 세션과 goal closure를 보여준다
노출 지표:
- completed sessions
- completed goals
- break started after completion
- carry-over count
핵심 질문:
- 마무리까지 가는 흐름이 있었는가?
- 목표를 닫지 못하고 다음 날로 밀린 경우가 많았는가?
추천 카드:
- `완료한 블록`
- `끝까지 간 세션 비율`
- `이월된 블록`
### Section E. Ritual Fit
목적:
- 어떤 scene / sound / timer 조합이 더 잘 맞는지 보여준다
노출 원칙:
- Free는 단일 best-fit hint 1개만
- Pro는 ritual 비교까지 허용
예시:
- `Forest · 50/10에서 가장 오래 이어졌어요.`
- `Rain 계열에서는 pause 후 복귀가 더 높았어요.`
중요:
- 이것도 “추천”이지 “정답 판정”이 아니다
- 적은 샘플 수에서는 확정적 문장 금지
### Section F. Next Week Carry Forward
목적:
- review를 다음 세션 행동으로 연결
구성:
- `다음 주에 유지할 것`
- `다음 주에 바꿔볼 것`
- CTA: `이 ritual로 다음 세션 시작`
이 섹션이 없으면 review는 예쁜 요약으로 끝난다.
---
## 8. 핵심 지표 정의
### Base Metrics
- `startedSessions`
- `completedSessions`
- `completedGoals`
- `pausedSessions`
- `returnedAfterPause`
- `awayCandidates`
- `returnedAfterAway`
- `focusMinutes`
- `breakSessions`
- `carriedOverCount`
### Derived Metrics
- `startSuccessRate`
- started days / active days
- `completionRate`
- completed sessions / started sessions
- `pauseRecoveryRate`
- returned after pause / paused sessions
- `awayRecoveryRate`
- returned after away / away candidates
- `carryOverRate`
- carried over goals / created goals
- `ritualFitScore`
- completion + recovery + avg session depth를 조합한 비교용 내부 점수
중요:
- `ritualFitScore`는 내부 계산용이다
- 사용자에게 raw score를 그대로 보여주지 않는다
- 사용자에게는 `이번 주 가장 잘 맞은 조합`처럼 문장으로만 보여준다
---
## 9. 허용되는 해석과 금지되는 해석
### 허용
- `최근 7일 중 오전 시작 세션의 완료율이 가장 높았어요.`
- `25분보다 50분 세션에서 복귀율이 높았어요.`
- `Forest + Birds에서 pause 뒤 복귀가 가장 높았어요.`
### 금지
- `당신은 밤형 인간이에요.`
- `의지가 부족했어요.`
- `이번 주 생산성이 낮았어요.`
- `당신은 긴 세션에 맞지 않아요.`
원칙:
- 행동 데이터 -> 짧은 문장
- 심리 진단 -> 금지
---
## 10. UI/UX 방향
### 전체 톤
- stats dashboard가 아니라 calm review desk
- 라이트 팔레트는 유지하되, 문서성과 감정적 안정감이 있어야 한다
- 차트는 줄이고, 문장과 비교를 늘린다
### 시각 원칙
- 큰 숫자 카드 남발 금지
- 한 줄 summary와 2~3개 핵심 비교를 우선
- “이번 주 / 시작 / 복귀 / 완료 / 다음 주” 순서로 읽히게 한다
- 회고가 무거운 분석처럼 보이면 안 된다
### 좋은 흐름
1. 이번 주 한 줄 요약
2. 시작은 어땠나
3. 흔들린 뒤 돌아왔나
4. 끝까지 갔나
5. 다음 주엔 뭘 유지/변경할까
### 나쁜 흐름
1. 카드 12개
2. 차트 4개
3. 해석 7개
4. 추천 9개
이건 LifeAt식 dashboard로 읽히고, VibeRoom과 맞지 않는다.
---
## 11. Free / Pro 재정의
### Free Weekly Review
Free는 다음만 보여준다.
- 이번 주 snapshot 1개
- Start Quality 핵심 카드 1~2개
- Recovery Quality 핵심 카드 1개
- Completion Quality 핵심 카드 1개
- Next Week Carry Forward 한 줄 제안 1개
Free에서 하지 않는 것:
- multi-week trend
- ritual 비교표
- scene/sound/timer 조합 비교
- archive 기반 long-term pattern
Free 가치:
- `내가 이번 주에 어떻게 집중했는지`를 짧게 이해
- 다음 세션에 바로 적용할 한 줄 얻기
### Pro Weekly Review
Pro는 아래까지 연다.
- 4주 trend
- ritual fit comparison
- start window pattern
- recovery pattern split
- pause recovery
- away recovery
- best ritual recommendation
- carry-forward note history
- direct CTA
- `이 ritual로 다음 세션 시작`
- `이번 주 가장 잘 맞은 조합으로 시작`
Pro 가치:
- 더 깊은 분석이 아니라
- `내가 어떤 조건에서 덜 무너지는지`를 실제로 알게 한다
### BM 원칙
Review는 Pro에서 이렇게 팔아야 한다.
- “고급 통계”
- “생산성 분석”
가 아니라
- `내 집중 리듬을 더 잘 이해하게 해주는 weekly review`
- `다음 주의 시작 성공률을 높여주는 personalized reflection`
---
## 12. 사용자 플로우
### Flow A. 주간 진입
trigger:
- `/stats` 직접 진입
- `/app` teaser 클릭
- 주말/주간 종료 시점의 passive prompt
flow:
1. snapshot hero
2. start / recovery / completion
3. ritual fit
4. next week carry forward
5. next CTA
### Flow B. 세션 직후 light review teaser
trigger:
- 금주 4번째 completed session
- 또는 금주 1번째 return after pause
teaser 예시:
- `이번 주 pause 뒤 복귀가 3번 있었어요`
- `Forest 50/10에서 가장 잘 이어졌어요`
CTA:
- `주간 review 보기`
### Flow C. 다음 세션 연결
weekly review 마지막 CTA:
- `이 조합으로 다음 세션 시작`
- `/app`으로 연결하되 ritual preset을 prefill
즉 review는 읽고 끝나는 화면이 아니라 다음 entry에 연결돼야 한다.
---
## 13. 정보 설계와 컴포넌트 구조 제안
### `/stats` 1-screen IA
1. Header
2. Weekly Snapshot hero
3. Start Quality
4. Recovery Quality
5. Completion Quality
6. Ritual Fit
7. Next Week Carry Forward
### 프론트 컴포넌트 제안
- `WeeklyReviewHero`
- `ReviewMetricPair`
- `RecoverySplitCard`
- `RitualFitHighlight`
- `CarryForwardPanel`
현재의 작은 stat card 반복을 그대로 늘리는 방향은 피한다.
---
## 14. API / 데이터 계약 제안
### 새 응답 모델
`GET /api/v1/stats/weekly-review`
response shape:
- `weekRange`
- `snapshot`
- `startQuality`
- `recoveryQuality`
- `completionQuality`
- `ritualFit`
- `carryForward`
- `source`
### snapshot
- `startedSessions`
- `returnedSessions`
- `completedGoals`
- `focusMinutes`
- `summaryLine`
### startQuality
- `startedSessions`
- `activeDays`
- `bestStartWindow`
- `adHocVsPlanned`
### recoveryQuality
- `pausedSessions`
- `returnedAfterPause`
- `awayCandidates`
- `returnedAfterAway`
- `recoveryRate`
### completionQuality
- `completedSessions`
- `completedGoals`
- `carriedOverCount`
- `completionRate`
### ritualFit
- `topScene`
- `topSound`
- `topTimerPreset`
- `topComboSummary`
- `confidence`
### carryForward
- `keepDoing`
- `tryNext`
- `recommendedEntryPreset`
### write endpoint
선택 기능:
`POST /api/v1/stats/weekly-review/carry-forward`
용도:
- 다음 주 유지/변경 메모 저장
초기 v1에서는 read-only로 시작해도 된다.
---
## 15. 구현 순서
### Slice 1. 데이터 모델 재정의
- weekly-review 응답 계약 설계
- mock + API 양쪽 shape 통일
### Slice 2. `/stats` IA 재구성
- factual summary card 반복을 해체
- hero + 4 quality sections + carry-forward로 재배치
### Slice 3. copy / interpretation system
- 허용되는 summary line 규칙 정리
- 과한 해석 제거
### Slice 4. Free / Pro gating
- Free는 7일 snapshot 중심
- Pro는 4주 trend / ritual fit 확장
### Slice 5. `/app` 연결
- review teaser
- next-session start CTA 연결
---
## 16. 완료 기준
- `/stats`가 더 이상 generic dashboard처럼 보이지 않는다
- 사용자가 review를 보고 `다음 주엔 이걸 바꿔봐야겠다`를 얻는다
- review가 다음 세션 entry와 연결된다
- Free에서도 충분한 가치가 있고, Pro는 확실히 더 깊다
- Pro 가치가 `더 많은 분석`이 아니라 `더 잘 시작하고 덜 무너지는 자기 이해`로 읽힌다
---
## 17. 절대 피해야 할 방향
- planner analytics로 확장
- task completion dashboard화
- 생산성 점수화
- 심리 진단처럼 보이는 카피
- 차트와 카드 수를 premium으로 오해하는 것
- review를 `/space`보다 더 시끄러운 화면으로 만드는 것