88 lines
3.8 KiB
Markdown
88 lines
3.8 KiB
Markdown
# .gemini/current.md
|
||
|
||
## TASK_META (수정 금지)
|
||
|
||
- TASK_TITLE: Flight 스타필드 방향 수정(중심→4모서리 대각) + 중심부 자연화 + 별 개수 축소
|
||
- TASK_SLUG: flight-starfield-diagonal-from-center
|
||
|
||
## 현재 문제(관찰)
|
||
|
||
- 현재 flight 배경 별들이 “위→아래”처럼 흐르는 느낌이 강함(좌상→좌하, 우상→우하).
|
||
- 실제 유영/전진 느낌은 “중심(시선)에서 바깥으로 퍼져나가며 모서리로 흘러가는” 형태가 필요.
|
||
- 중심을 점 1개로 두면 어색하고 인공적으로 보임.
|
||
- 별(스트릭) 개수가 너무 많아 산만함.
|
||
|
||
## 작업 목표
|
||
|
||
`@src/app/flight/page.tsx`의 배경 스타필드를 다음처럼 변경한다:
|
||
|
||
1. 별 이동 방향을 **중심부 → 화면 4개 모서리(대각선) 방향**으로 재구성한다.
|
||
2. 중심부(소실점)가 어색하지 않도록 “영역”으로 자연스럽게 처리한다.
|
||
3. 별(스트릭) 수를 줄여 과밀/산만함을 해소한다.
|
||
4. 타이머/버튼 등 기존 UI는 그대로 유지하고 방해하지 않는다.
|
||
|
||
## 작업 요구사항
|
||
|
||
### 1) 이동 방향(필수)
|
||
|
||
- 별은 화면 중심(또는 중심 근처 영역)에서 생성/등장한 뒤,
|
||
**NE / NW / SE / SW 네 방향(모서리 대각선)**으로 흘러가야 한다.
|
||
- “위에서 아래로 떨어지는” 인상(수직 낙하/편향)은 금지.
|
||
- 구현 가이드(권장):
|
||
- 각 별에 quadrant(NE/NW/SE/SW) 할당
|
||
- 중심 벡터(해당 모서리 방향) + 작은 각도 노이즈(±5~15도)로 자연스러운 퍼짐
|
||
- 속도는 랜덤 티어(느림/중간/빠름)로 분산
|
||
|
||
### 2) 중심부 처리(필수)
|
||
|
||
- 중심이 “점 1개”처럼 보이지 않게 해야 한다.
|
||
- 구현 방식 중 택1(권장 순):
|
||
1. 별 생성 위치를 중심 ‘반경 r(예: 20~60px)’ 안에서 랜덤 분포(중심 영역)
|
||
2. 중심부에 아주 약한 그라데이션/베일(예: 작은 타원형 glow)을 깔아 소실점을 완화
|
||
- 중심부가 과하게 밝아져 UI를 방해하면 안 됨(은은하게).
|
||
|
||
### 3) 별(스트릭) 밀도/개수 축소(필수)
|
||
|
||
- 별이 “너무 많다” 문제 해결:
|
||
- 기본 별 개수를 현재 대비 **명확히 감소** (권장: 40~90개 범위)
|
||
- 동시에 화면 전체가 텅 비지 않게 “티어+리사이클”로 유지
|
||
- 별 크기/밝기/길이도 분산하되 과한 번쩍임 금지.
|
||
|
||
### 4) 성능 및 구현 방식(권장)
|
||
|
||
- Canvas 사용 중이면 Canvas 유지(권장). DOM 요소 다량 생성은 지양.
|
||
- requestAnimationFrame 루프는 유지하되,
|
||
- 불필요한 재생성/과도한 오브젝트 수 금지
|
||
- 리사이클(화면 밖으로 나가면 중심 근처로 재스폰)
|
||
- 배경 레이어는 `pointer-events: none` 유지.
|
||
|
||
### 5) 모션 접근성(필수)
|
||
|
||
- `prefers-reduced-motion: reduce`에서는:
|
||
- 별 이동을 정지하거나(정지 우선) 속도를 크게 낮춘다.
|
||
- 배경이 정지해도 UI 사용에 문제 없게.
|
||
|
||
## Non-scope
|
||
|
||
- 타이머 로직/버튼 동작/항해실 UI 요소 추가 금지(기능 유지).
|
||
- 다른 페이지 수정 금지(필요 시 공통 스타일만 최소 변경 허용).
|
||
- 신규 기능 추가 금지.
|
||
|
||
## 적용 파일
|
||
|
||
- 필수: `@src/app/flight/page.tsx`
|
||
- (허용) 필요 시 최소한의 스타일 파일(모션 접근성/배경 레이어 관련)
|
||
|
||
## 완료 조건(AC)
|
||
|
||
- [ ] 별 흐름이 “중심부 → 4모서리 대각선 방향”으로 명확히 보인다(수직 낙하 인상 없음)
|
||
- [ ] 중심부가 점 1개처럼 어색하지 않고 자연스럽다(영역/베일 처리)
|
||
- [ ] 별(스트릭) 수가 눈에 띄게 줄어 산만함이 감소했다
|
||
- [ ] UI(타이머/버튼/라벨) 가독성/클릭이 방해받지 않는다(pointer-events none)
|
||
- [ ] prefers-reduced-motion에서 이동이 정지 또는 크게 약화된다
|
||
|
||
## 완료 후 출력(최소)
|
||
|
||
- 수정된 파일 경로 목록
|
||
- AC 항목별 체크 결과(OK/NO)
|