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

@@ -1,9 +1,9 @@
export const core = {
appName: 'VibeRoom',
metadata: {
title: 'VibeRoom - 당신만의 편안한 몰입 공간',
title: 'VibeRoom - 조용한 집중을 위한 Calm Session OS',
description:
'프리랜서와 온전한 집중이 필요한 분들을 위한 따뜻하고 구조화된 온라인 코워킹 스페이스. 작업 타이머, 세션 관리, 그리고 느슨한 연대를 통해 당신의 리듬을 찾아보세요.',
'프리랜서와 창작자를 위한 조용한 집중 운영체제. 오늘의 큐, ritual, 주간 리뷰를 통해 더 빨리 시작하고 더 잘 이어가세요.',
},
common: {
close: '닫기',
@@ -28,76 +28,77 @@ export const core = {
startFree: '무료로 시작하기',
},
hero: {
titleLead: '함께하는 조용한 몰입,',
titleLead: '조용한 집중을 위한,',
titleAccent: 'VibeRoom',
description:
'집중하기 어려운 순간, 당신을 다그치지 않는 편안한 공간으로 들어오세요. 구조화된 코워킹 세션과 느슨한 연대가 당신의 페이스를 되찾아 줍니다.',
primaryCta: '나만의 공간 만들기',
'예쁜 공간보다 중요한 건 오늘 무엇을 할지 고르고, 무너진 뒤에도 다시 돌아오는 흐름입니다. 오늘의 집중 큐, ritual, 주간 리뷰를 한 화면에서 시작하세요.',
primaryCta: '오늘의 집중 열기',
secondaryCta: '더 알아보기',
timerPreview: '45:00 남음',
},
features: {
title: '당신을 위한 다정한 몰입 장치',
description: '단순한 타이머가 아닙니다. 무리하지 않고 오래 지속할 수 있는 환경을 제공합니다.',
title: '더 잘 이어가기 위한 집중 장치',
description: '타이머만 주는 대신, 시작과 복귀를 돕는 운영 흐름을 제공합니다.',
items: [
{
icon: '⏳',
title: '구조화된 세션 타이머',
title: 'Daily Focus Plan',
description:
'부담 없이 시작할 수 있는 짧은 몰입과 확실한 휴식. 당신만의 작업 리듬을 부드럽게 설정하고 관리하세요.',
'오늘 해야 할 일을 블록 단위로 쪼개고, 세션 시작 전에 이번 한 조각을 고르게 만듭니다.',
},
{
icon: '🌱',
title: '다정한 연대와 코워킹',
icon: '🪷',
title: 'Rituals / Templates',
description:
'화면 너머 누군가와 함께하는 바디 더블링 효과. 감시가 아닌, 조용하지만 강력한 동기를 서로 나누어보세요.',
'scene, sound, timer, 알림 강도를 반복 가능한 시작 방식으로 저장해 지치기 전에 바로 진입할 수 있습니다.',
},
{
icon: '🛋️',
title: '나만의 심미적 공간',
icon: '🛋️',
title: 'Weekly Review',
description:
'비 오는 다락방, 햇살 드는 카페. 백색소음과 함께 내가 가장 편안함을 느끼는 가상 공간을 꾸미고 머무르세요.',
'총 집중 시간보다 시작 성공률, 완료율, 중단 후 복귀 패턴을 먼저 보여줘 다음 주의 리듬을 정리합니다.',
},
],
},
pricing: {
title: '나에게 맞는 공간 선택하기',
description: '개인의 가벼운 집중부터 프리랜서의 완벽한 워크스페이스까지.',
title: '집중을 이어가는 방식에 맞는 플랜',
description: 'Free는 기본 시작을, Pro는 Calm Session OS 전체 흐름을 제공합니다.',
plans: {
starter: {
name: 'Starter',
subtitle: '가벼운 집중이 필요한 분',
name: 'Free',
subtitle: '부담 없이 바로 시작하고 싶은 분',
price: '무료',
cta: '무료로 시작하기',
features: ['기본 가상 공간 테마', '1:1 파트너 매칭 (주 3회)', '오픈 코워킹 룸 입장'],
features: ['기본 scene / sound / timer', '오늘의 집중 큐 1개', '저장 ritual 1개', '최근 7일 기본 통계'],
},
pro: {
badge: '추천',
name: 'Pro',
subtitle: '방해 없는 완벽한 몰입 환경',
subtitle: '더 빨리 시작하고 더 잘 이어가고 싶은 분',
price: '₩6,900',
priceSuffix: '/월',
cta: 'Pro 시작하기',
features: [
'프리미엄 테마 무제한',
'1:1 매칭 무제한',
'고급 집중 통계 및 리포트',
'공간 커스텀 아이템 제공',
'다중 focus queue',
'ritual/template 무제한',
'주간 review + 고급 session analytics',
'premium scene / sound packs',
'비동기 accountability 기능',
],
},
teams: {
name: 'Teams',
subtitle: '리모트 워크 기업 및 팀',
price: '₩12,000',
priceSuffix: '/인·월',
subtitle: '소규모 크리에이티브 팀용 준비 중',
price: '준비 중',
priceSuffix: '',
cta: '도입 문의하기',
features: ['Pro 플랜의 모든 기능', '프라이빗 팀 스페이스', '팀 전체 생산성 대시보드'],
features: ['Pro 기반 팀 운영 설계', '반복 check-in 운영 지원', '팀 기능은 순차 출시 예정'],
},
},
},
footer: {
description:
'프리랜서와 온전한 집중이 필요한 분들을 위한 따뜻하고 구조화된 온라인 코워킹 스페이스입니다.',
'프리랜서와 창작자를 위한 조용한 집중 운영체제입니다. 오늘의 큐, ritual, 주간 리뷰로 더 잘 이어가세요.',
productTitle: '제품',
companyTitle: '회사',
links: {