hushroom/.cli/tasks/0007-flight-starfield-diagonal-from-center.md

.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)