맥락:
- /space 진입 경험이 설정 패널처럼 보여 몰입형 라운지 톤이 약했습니다.
- 목표 입력 후 시작 전환 동선을 더 빠르고 일관되게 만들 필요가 있었습니다.
변경사항:
- 도크 아이콘을 이모지에서 단일 라인 SVG 세트로 통일해 시각 언어 일관성을 맞췄습니다.
- Setup Drawer 밀도를 낮추고(타이포/테두리/칩 크기) 3-step 리추얼 흐름을 더 간결하게 정리했습니다.
- 목표 입력 필드 자동 포커스를 추가해 진입 즉시 타이핑이 가능하도록 했습니다.
- 시작 버튼을 form submit으로 연결해 Enter 입력과 버튼 클릭이 동일하게 동작하도록 변경했습니다.
- SpaceSideSheet에 300ms 닫힘 전환(오버레이/시트 opacity+translate) 애니메이션을 적용했습니다.
- Focus 진입 토스트 카피를 목표 중심 문구로 바꾸고 Setup 선택지를 최소 개수로 제한했습니다.
- 배경에 미세 stage-pan/light-drift 키프레임을 추가해 정적인 평면감을 줄였습니다.
검증:
- npx tsc --noEmit
- npm run build
세션-상태: /space에서 목표 입력 후 10초 내 Focus 전환 가능한 리추얼 흐름이 정리되었습니다.
세션-다음: 실제 브라우저에서 애니메이션 강도와 드로어 밀도 체감 QA를 진행합니다.
세션-리스크: 저사양 환경에서 배경 미세 모션이 과하게 느껴질 수 있어 추후 reduce-motion 강화를 검토할 수 있습니다.
맥락:
- /space 첫 화면이 그라데이션 안내 화면처럼 보이며 공간 서비스의 무대감이 약했습니다.
- Setup 안내 카드/상단 크롬/도크 존재감이 커서 몰입형 인상(Portal/LifeAt 톤)을 해치고 있었습니다.
변경사항:
- 배경을 실제 공간 프리뷰 이미지 우선 렌더로 전환하고, 실패 시 그라데이션 fallback만 남기도록 조정했습니다.
- 배경 오버레이를 과한 비네팅 대신 단일 규칙(얕은 읽기용 필터 + 고정 그레인)으로 정리했습니다.
- Setup 상태의 중앙 안내 카드를 제거하고, 진입 시 Setup Drawer 자동 오픈 흐름만 남겼습니다.
- Setup Drawer 헤더 안내 문구를 1줄로 축약하고 섹션을 3단(Space/Goal/Sound) 번호 체계로 고정했습니다.
- Setup 상태에서는 Drawer 닫기를 막아 설명 박스 없이도 자연스러운 입력 흐름을 유지했습니다.
- 상단 크롬을 최소화하고 Focus 상태의 Setup 열기 버튼을 약한 보조 액션으로 낮췄습니다.
- 오른쪽 도크 레일의 폭/간격/아이콘 박스를 정돈하고 Focus 기본 opacity를 낮춰 몰입 방해를 줄였습니다.
검증:
- npx tsc --noEmit
- npm run build
세션-상태: /space 첫 진입이 장면+드로어 중심으로 정리되어 설명 없이도 시작 흐름이 읽힙니다.
세션-다음: 필요 시 Setup Drawer 내부 타이포 스케일과 칩 밀도를 추가 미세 조정합니다.
세션-리스크: 외부 이미지 소스 품질 편차에 따라 장면 밝기 체감이 달라질 수 있습니다.
