feat(app): atmosphere entry shell 1차 구현
This commit is contained in:
@@ -4,13 +4,18 @@ Last Updated: 2026-03-16
|
||||
|
||||
이 문서는 `/app`을 **`goal + duration + atmosphere` 중심의 premium focus entry surface**로 재설계하기 위한 기준 문서다.
|
||||
|
||||
현재 상태:
|
||||
|
||||
- `Slice 1` no-session shell 구현 완료
|
||||
- `Custom Duration Contract`와 `Weekly Review Dock Reposition`은 다음 slice로 남아 있음
|
||||
|
||||
관련 문서:
|
||||
|
||||
- `../../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`
|
||||
- `../../../../../product_principles.md`
|
||||
- `../../../../../current_context.md`
|
||||
- `../../stats/current/14_weekly_review_reframe_spec.md`
|
||||
- `../../../flows/current/15_app_stats_entry_flow_spec.md`
|
||||
- `../../../flows/current/18_paused_session_reentry_spec.md`
|
||||
|
||||
---
|
||||
|
||||
@@ -175,6 +180,9 @@ Last Updated: 2026-03-16
|
||||
- 최대 180분
|
||||
- helper:
|
||||
- `이 목표를 끝내는 데 걸릴 것 같은 시간을 적어요.`
|
||||
- quick duration suggestion은 허용한다.
|
||||
- 예: `25`, `45`, `70`, `90`
|
||||
- 단, planner처럼 보이지 않도록 아주 조용한 assistive chip이어야 한다
|
||||
|
||||
### C. Atmosphere Grid
|
||||
|
||||
@@ -189,6 +197,8 @@ Last Updated: 2026-03-16
|
||||
- 카드명
|
||||
- sound label
|
||||
- 1줄 description
|
||||
- selected state
|
||||
- hover / focus state
|
||||
|
||||
예시:
|
||||
|
||||
@@ -209,7 +219,14 @@ Last Updated: 2026-03-16
|
||||
- 이유:
|
||||
- goal + duration + atmosphere가 모두 한 번에 묶여 entry action으로 읽힌다
|
||||
|
||||
### E. Weekly Review Entry
|
||||
### E. Selection Rules
|
||||
|
||||
- no-session 상태에서는 atmosphere 1개가 기본 선택된 상태로 시작한다
|
||||
- review handoff로 들어온 경우에는 handoff preset과 가장 가까운 atmosphere를 preselect한다
|
||||
- 사용자가 duration을 직접 수정하기 전까지는 선택된 atmosphere의 기본 duration suggestion을 보여줄 수 있다
|
||||
- 사용자가 duration을 직접 수정한 뒤에는 atmosphere를 바꿔도 duration 값을 덮어쓰지 않는다
|
||||
|
||||
### F. Weekly Review Entry
|
||||
|
||||
이건 main stage 바깥의 quiet secondary placement로 둔다.
|
||||
|
||||
@@ -319,6 +336,65 @@ Last Updated: 2026-03-16
|
||||
|
||||
---
|
||||
|
||||
## 9. Visual Direction
|
||||
|
||||
### Primary Stage
|
||||
|
||||
- no-session `/app`의 주인공은 하나의 넓은 start stage다
|
||||
- 이 stage 안에서:
|
||||
- goal
|
||||
- duration
|
||||
- primary CTA
|
||||
가 먼저 읽혀야 한다
|
||||
- stage는 glassmorphism을 쓰더라도 dashboard 카드처럼 보이면 안 된다
|
||||
- typography와 spacing으로 premium하게 보여야 한다
|
||||
|
||||
### Atmosphere Grid
|
||||
|
||||
- 아래 grid는 decoration이 아니라 실제 선택 surface다
|
||||
- card는 서로 다른 장면으로 충분히 구분돼야 한다
|
||||
- selected state는:
|
||||
- 두꺼운 outline보다 얇은 light ring
|
||||
- 미세한 scale
|
||||
- title/sound contrast 상승
|
||||
정도로 표현하는 편이 맞다
|
||||
|
||||
### Review Dock
|
||||
|
||||
- review는 top-right quiet dock 또는 stage 바깥의 조용한 secondary panel로 둔다
|
||||
- 절대 main CTA와 같은 무게가 되면 안 된다
|
||||
- “이번 주 review”는 읽히되, goal 입력을 방해하면 실패다
|
||||
|
||||
---
|
||||
|
||||
## 10. Slice 1 구현 원칙
|
||||
|
||||
이번 구현 slice는 `/app`의 **no-session shell**을 먼저 바꾸는 단계다.
|
||||
|
||||
포함:
|
||||
|
||||
- goal input
|
||||
- duration input
|
||||
- 12개 atmosphere grid
|
||||
- selected atmosphere 기반 background 반영
|
||||
- quiet review dock의 기본 위치
|
||||
|
||||
제외:
|
||||
|
||||
- paused resume gate 재설계
|
||||
- `/stats` IA 변경
|
||||
- server custom duration contract
|
||||
|
||||
### Slice 1 임시 계약
|
||||
|
||||
- 사용자는 분 단위 duration을 입력한다
|
||||
- 하지만 server contract가 아직 preset 기반이면, 이번 slice에서는 **입력 시간에 가장 가까운 기존 focus preset**으로 임시 매핑한다
|
||||
- 이 임시 매핑은 다음 slice(`Custom Duration Contract`)에서 실제 duration 연동으로 대체한다
|
||||
- UI에는 이 상태가 과장 없이 드러나야 한다
|
||||
- 예: `지금은 가장 가까운 기본 리듬으로 먼저 들어가요.`
|
||||
|
||||
---
|
||||
|
||||
## 9. UI 방향
|
||||
|
||||
### 톤
|
||||
|
||||
Reference in New Issue
Block a user