docs(docs): 문서를 화면과 용도별 폴더로 재구성
This commit is contained in:
61
docs/screens/app/08_app_reframe_strategy.md
Normal file
61
docs/screens/app/08_app_reframe_strategy.md
Normal 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 코칭과 프리미엄 환경을 위해 기꺼이 지갑을 열게 될 것입니다.
|
||||
437
docs/screens/app/15_app_stats_entry_flow_spec.md
Normal file
437
docs/screens/app/15_app_stats_entry_flow_spec.md
Normal 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 회고처럼 보이게 만드는 것
|
||||
460
docs/screens/app/18_paused_session_reentry_spec.md
Normal file
460
docs/screens/app/18_paused_session_reentry_spec.md
Normal 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가 되려면
|
||||
`멈춤`, `쉬기`, `복귀`, `새 시작`을 같은 것으로 취급하면 안 된다.
|
||||
|
||||
가장 중요한 원칙은 이거다.
|
||||
|
||||
> 이미 실행 중인 것은 바로 복귀시키고,
|
||||
> 의도적으로 멈춘 것은 다시 결정하게 하되,
|
||||
> 다시 하겠다고 결정한 뒤에는 한 번 더 묻지 않는다.
|
||||
445
docs/screens/app/19_app_atmosphere_entry_spec.md
Normal file
445
docs/screens/app/19_app_atmosphere_entry_spec.md
Normal 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이 실제 세션 길이로 반영된다
|
||||
487
docs/screens/space/10_refocus_system_spec.md
Normal file
487
docs/screens/space/10_refocus_system_spec.md
Normal 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에서 나온다
|
||||
441
docs/screens/space/11_away_return_recovery_spec.md
Normal file
441
docs/screens/space/11_away_return_recovery_spec.md
Normal 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는 “실패”가 아니라 “복귀가 필요한 순간”으로 다룰 것
|
||||
@@ -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처럼 보이지 않는다
|
||||
626
docs/screens/stats/14_weekly_review_reframe_spec.md
Normal file
626
docs/screens/stats/14_weekly_review_reframe_spec.md
Normal 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`보다 더 시끄러운 화면으로 만드는 것
|
||||
Reference in New Issue
Block a user