feat(space/app): app 진입부 및 space 몰입 환경(HUD/Tools) 프리미엄 UI 리팩토링

맥락:
- 기존 app 대시보드와 space 화면의 UI가 SaaS 툴처럼 딱딱하고 투박하여, 유저가 기꺼이 지갑을 열 만한 몰입감과 고급스러움(Premium feel)이 부족함.
- 인지적 과부하를 줄이기 위해 제안된 '첫 5분 행동(Micro-step)'이 타이머 영역에 묻혀 있어 행동 유발 효과가 미미함.

변경사항:
- app: 컨테이너 박스를 제거하고 전체 배경 화면(Immersive Background)과 Glassmorphism을 활용한 1.5 Step 진입 플로우로 전면 개편.
- space/hud: 하단의 두꺼운 타이머 패널을 초박형(Slim) 글라스 알약 형태로 축소하여 배경 씬의 개방감 확보.
- space/hud: 목표(Goal)와 첫 단계(Micro-step)를 분리하여 좌측 상단의 우아한 Floating UI로 재배치하고, 체크 완료 시 사라지는 도파민 인터랙션 추가.
- space/tools: 흩어져 있던 노트, 사운드, 설정 도구들을 우측 레일(Right-Rail)로 통합하고 팝오버 디자인을 고급화함.
- ui/contrast: 밝은 배경에서도 텍스트가 잘 보이도록 좌측 상단 비네팅(Vignette) 및 다중 텍스트 그림자(Multi-layered Shadow) 효과 적용.

검증:
- npm run build 정상 통과 확인.
- 브라우저 상에서 micro-step 완료 애니메이션 및 도구막대 팝오버 슬라이드 동작 확인.

세션-상태: app 진입부터 space 몰입까지의 코어 UX/UI 하이엔드 개편 완료.
세션-다음: 프로 요금제(PRO) 전환 유도(Paywall) 흐름 및 상세 분석 리포트(Analytics) 뷰 구현.
세션-리스크: 없음.
This commit is contained in:
2026-03-13 14:57:35 +09:00
parent 2506dd53a7
commit abdde2a8ae
36 changed files with 2120 additions and 923 deletions

View File

@@ -7,9 +7,9 @@ export const space = {
},
setup: {
panelAriaLabel: '집중 시작 패널',
eyebrow: 'Ritual',
title: '이번 한 조각을 정하고 시작해요.',
description: '목표를 정한 뒤 HUD의 시작 버튼으로 실제 세션을 시작해요.',
eyebrow: 'Execution Setup',
title: '이번 세션만 가볍게 맞추고 들어가요.',
description: '목표, 배경, 타이머, 사운드만 정하고 바로 실행 화면으로 들어갑니다.',
resumeTitle: '지난 한 조각 이어서',
startFresh: '새로 시작',
resumePrepare: '이어서 준비',
@@ -17,7 +17,7 @@ export const space = {
timerLabel: '타이머',
soundLabel: '사운드',
readyHint: '목표를 적으면 시작할 수 있어요.',
openFocusScreen: '집중 화면 열기',
openFocusScreen: '실행 화면 열기',
},
timerHud: {
actions: [
@@ -45,29 +45,30 @@ export const space = {
description: '너무 크게 잡지 말고, 바로 다음 한 조각만.',
closeAriaLabel: '닫기',
restButton: '잠깐 쉬기',
confirmButton: '바로 다음 조각 시작',
confirmButton: '다음 목표로 바로 시작',
confirmPending: '시작 중…',
},
controlCenter: {
sectionTitles: {
background: 'Background',
time: 'Time',
sound: 'Sound',
packs: 'Packs',
packs: 'Session OS',
},
packsDescription: '확장/개인화',
packsDescription: 'plan · ritual · review',
recommendation: (soundLabel: string, timerLabel: string) => `추천: ${soundLabel} · ${timerLabel}`,
recommendationHint: '추천 조합은 참고 정보로만 제공돼요.',
autoHideTitle: '컨트롤 자동 숨김',
autoHideDescription: '입력이 없으면 잠시 후 패널을 닫아요.',
autoHideAriaLabel: '컨트롤 자동 숨김',
sideSheetSubtitle: '배경 · 타이머 · 사운드 그 자리에서 바꿔요.',
sideSheetSubtitle: '배경 · 타이머 · 사운드와 Session OS 진입점을 그 자리에서 바꿔요.',
quickControlsTitle: 'Quick Controls',
},
toolsDock: {
notesButton: 'Notes',
popoverCloseAria: '팝오버 닫기',
planPro: 'PRO',
planNormal: 'Normal',
planNormal: 'FREE',
inboxSaved: '인박스에 저장됨',
undo: '실행취소',
inboxSaveUndone: '저장 취소됨',
@@ -76,21 +77,21 @@ export const space = {
emptyToClear: '비울 항목이 없어요.',
clearedAll: '모두 비워짐',
restored: '복원했어요.',
normalPlanInfo: 'NORMAL 플랜 사용 중 · 잠금 항목에서만 업그레이드할 수 있어요.',
proFeatureLocked: (source: string) => `${source}은(는) PRO 기능이에요.`,
normalPlanInfo: 'FREE 플랜 사용 중 · Calm Session OS PRO에서 다중 큐와 주간 리뷰가 열려요.',
proFeatureLocked: (source: string) => `${source}은(는) Calm Session OS PRO 기능이에요.`,
proFeaturePending: (label: string) => `${label} 준비 중(더미)`,
purchaseMock: '결제(더미)',
purchaseMock: 'PRO 전환됨',
manageSubscriptionMock: '구독 관리(더미)',
restorePurchaseMock: '구매 복원(더미)',
featureLabels: {
scenePacks: 'Scene Packs',
soundPacks: 'Sound Packs',
profiles: 'Profiles',
dailyPlan: 'Daily Focus Plan',
rituals: 'Rituals',
weeklyReview: 'Weekly Review',
},
utilityPanelTitle: {
'control-center': 'Quick Controls',
inbox: '인박스',
paywall: 'PRO',
paywall: 'Calm Session OS PRO',
'manage-plan': '플랜 관리',
},
},
@@ -141,13 +142,13 @@ export const space = {
openQuickControlsTitle: 'Quick Controls',
},
paywall: {
points: ['프리미엄 Scene Packs', '확장 Sound Packs', '프로필 저장 / 불러오기'],
title: 'PRO에서 더 많은 공간과 사운드를 열어둘 수 있어요.',
description: '잠금 항목을 누른 순간에만 열리는 더미 결제 시트입니다.',
points: ['오늘의 집중 큐를 여러 개 운영', 'ritual/template를 무제한 저장', '주간 리뷰와 조용한 accountability 열기'],
title: 'PRO 더 많이 꾸미는 플랜이 아니라, 더 잘 이어가는 플랜이에요.',
description: 'Daily plan, rituals, weekly review를 한 흐름으로 여는 더미 결제 시트입니다.',
later: '나중에',
startPro: 'PRO 시작하기',
manageTitle: 'PRO 관리',
manageDescription: '결제/복원은 더미 동작이며 실제 연동은 하지 않아요.',
manageTitle: 'Calm Session OS PRO 관리',
manageDescription: '결제/복원은 더미 동작이지만 유료 가치는 plan · ritual · review 흐름에 맞춰 정리했습니다.',
openSubscription: '구독 관리 열기',
restorePurchase: '구매 복원',
},
@@ -173,7 +174,7 @@ export const space = {
restartFailed: '현재 페이즈를 다시 시작하지 못했어요.',
restarted: '현재 페이즈를 처음부터 다시 시작했어요.',
goalCompleteSyncFailed: '현재 세션 완료를 서버에 반영하지 못했어요.',
nextGoalReady: '다음 한 조각 준비 완료 · 시작 버튼을 눌러 이어가요.',
nextGoalStarted: '다음 한 조각을 바로 시작했어요.',
selectionPreferenceSaveFailed: '배경/사운드 기본 설정을 저장하지 못했어요.',
selectionSessionSyncFailed: '현재 세션의 배경/사운드 선택을 동기화하지 못했어요.',
},