Files
viberoom-web/docs/10_refocus_system_spec.md

10 KiB

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에서 가져올 것

  • 배경이 주인공이고 인터페이스는 조용히 뒤로 물러나야 한다
  • 감각 품질 자체가 제품 가치가 된다
  • “아름답다”가 장식이 아니라 사용 지속 이유가 된다

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에서 나온다