corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
acfa8f4f48ef111bc29196a4d4ad2cf5d9517f32
viberoom-web/docs/19_app_atmosphere_entry_spec.md

10 KiB
Raw Blame History

19. /app Atmosphere Entry Spec

Last Updated: 2026-03-16

이 문서는 /app을 goal + duration + atmosphere 중심의 premium focus entry surface로 재설계하기 위한 기준 문서다.

관련 문서:

  • ../../product_principles.md
  • ../../current_context.md
  • 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이 실제 세션 길이로 반영된다
Reference in New Issue View Git Blame Copy Permalink