feat(core-loop): /app 진입과 /space 복구 흐름 구현
This commit is contained in:
468
docs/10_refocus_system_spec.md
Normal file
468
docs/10_refocus_system_spec.md
Normal file
@@ -0,0 +1,468 @@
|
||||
# 10. Refocus System Spec
|
||||
|
||||
Last Updated: 2026-03-14
|
||||
|
||||
이 문서는 VibeRoom의 `Refocus System`을 제품 대표 경험으로 설계하기 위한 상세 기준 문서다.
|
||||
|
||||
관련 상위 문서:
|
||||
|
||||
- `../../product_principles.md`
|
||||
- `../../current_context.md`
|
||||
- `09_app_entry_detailed_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
|
||||
|
||||
### 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에서 나온다
|
||||
Reference in New Issue
Block a user