107 lines
4.5 KiB
Markdown
107 lines
4.5 KiB
Markdown
# .gemini/current.md
|
||
|
||
## TASK_META (수정 금지)
|
||
|
||
- TASK_TITLE: Lobby 별(노드) UI를 “빛나는 별”로 개선(그라데이션 스파이크 + 블룸 + 강약) — 이동 없음
|
||
- TASK_SLUG: lobby-star-glint-gradient-bloom-fix
|
||
|
||
## 작업 목표
|
||
|
||
현재 로비 배경 별자리 결과물이 “UI 노드/플러스 아이콘”처럼 보이는 문제를 해결하고,
|
||
레퍼런스처럼 **중앙이 밝고, 십자 스파이크가 끝으로 갈수록 사라지는** “빛나는 별” 느낌으로 개선한다.
|
||
추가로 별마다 강약을 줘서 도식 느낌을 줄인다.
|
||
|
||
## 핵심 제약(최우선)
|
||
|
||
- 애니메이션은 **opacity만** 허용한다.
|
||
- `transform`(scale/translate/rotate 포함) 사용 절대 금지.
|
||
- 십자(+)만 사용(대각선 × 금지).
|
||
- 별자리 외 랜덤 별/스타필드/Canvas 이동 연출 금지.
|
||
- 별(점) 위치는 절대 변하지 않아야 한다.
|
||
|
||
## 개선 포인트(반드시 반영)
|
||
|
||
1. 스파이크가 “딱 끊기는 선”처럼 보임 → **그라데이션 스트로크**로 끝이 서서히 사라지게
|
||
2. 빛 번짐이 없음 → **블룸(1겹)** 추가(과하지 않게)
|
||
3. 중심 원이 버튼/노드처럼 큼 → **코어는 더 작게**, 대신 은은한 글로우/하이라이트
|
||
4. 전체가 균일해 도식 느낌 → 별마다 **강약(크기/스파이크 길이/피크 빈도)** 분산
|
||
|
||
## 작업 요구사항
|
||
|
||
### 1) 스파이크 그라데이션(필수)
|
||
|
||
- 각 별의 십자 스파이크(수평/수직)는 단색 stroke가 아니라 다음 형태로 구현:
|
||
- 중앙(코어 근처)은 밝게
|
||
- 양 끝으로 갈수록 투명(0)으로 페이드아웃
|
||
- 구현 방식(권장): SVG `linearGradient`
|
||
- 수평: x1=0% → x2=100% (중앙이 밝고 양끝 투명)
|
||
- 수직: y1=0% → y2=100% (중앙이 밝고 양끝 투명)
|
||
|
||
### 2) 블룸(빛 번짐) 1겹 추가(필수)
|
||
|
||
- 스파이크를 2겹으로 그린다:
|
||
1. **블룸 레이어**: 더 굵고(strokeWidth +0.6~1.2), opacity 낮게(<= 0.25), 약한 blur(가능하면)
|
||
2. **본선 레이어**: 얇고 선명(strokeWidth 0.5~0.8), opacity는 피크에서만 올라가게
|
||
- blur는 성능을 위해 최소:
|
||
- 가능하면 SVG filter(feGaussianBlur) 1개만 사용하거나,
|
||
- filter 없이도 “굵고 투명한 1겹”만으로 블룸 느낌을 만들 수 있음(우선 이쪽 권장)
|
||
|
||
### 3) 코어(중심 원) 개선(필수)
|
||
|
||
- 중심 원을 “큰 단색 원”에서 “작은 밝은 코어 + 은은한 글로우”로 변경:
|
||
- 코어 circle r: 1.2~1.8
|
||
- 글로우 circle(선택): r을 더 크게(2.8~4.0) 하고 opacity 매우 낮게(<= 0.12)
|
||
- 코어는 항상 보이되, 살짝만(0.8~1.0) opacity 변화는 허용
|
||
|
||
### 4) 반짝임 리듬(필수, opacity only)
|
||
|
||
- 스파이크는 기본 opacity 거의 0(또는 0.02~0.05)로 유지하다가,
|
||
**짧게 피크를 찍는 형태**로 반짝이게 한다.
|
||
- 권장 keyframe(예시 개념):
|
||
- 0%, 35%, 100%: 0
|
||
- 50%: 0.85
|
||
- 60%: 0.1
|
||
- 별마다 duration(2~6초), delay 분산(렌더 시 고정)
|
||
|
||
### 5) 별별 강약 분산(필수)
|
||
|
||
- 모든 별이 같은 크기/스파이크 길이면 도식처럼 보이므로,
|
||
별마다 아래 중 2개 이상을 분산 적용:
|
||
- 코어 r (예: 1.2~1.9)
|
||
- 스파이크 arm 길이(예: 5~11)
|
||
- 스파이크 피크 opacity(예: 0.6~0.9)
|
||
- duration/delay
|
||
- 단, 과하게 다양하면 산만하니 “2~3단계 티어”로만 나눠도 됨(작은 별/중간 별/밝은 별)
|
||
|
||
### 6) 모션 접근성(필수)
|
||
|
||
- prefers-reduced-motion: reduce 에서는:
|
||
- 애니메이션 OFF(정지 우선)
|
||
- 스파이크는 아주 낮은 opacity(<= 0.08) 또는 0
|
||
|
||
## Non-scope
|
||
|
||
- 로비 CTA/항로 카드 구성 변경 금지
|
||
- /flight 등 다른 페이지 변경 금지
|
||
- 신규 기능 추가 금지
|
||
|
||
## 적용 파일
|
||
|
||
- 필수: `@src/app/page.tsx`
|
||
- 필요 시(최소): 글로벌 CSS에 keyframes/유틸리티 클래스 추가
|
||
|
||
## 완료 조건(AC)
|
||
|
||
- [ ] 스파이크가 그라데이션으로 자연스럽게 사라져 “플러스 아이콘” 느낌이 줄었다
|
||
- [ ] 블룸(은은한 번짐)으로 ‘빛’ 느낌이 생겼다(과하지 않음)
|
||
- [ ] 코어가 버튼처럼 크지 않고, 작은 밝은 점 + 은은한 글로우로 보인다
|
||
- [ ] 별마다 강약이 달라 도식 느낌이 줄었다
|
||
- [ ] 애니메이션은 opacity만 사용하며 transform이 0이다(이동/지터 없음)
|
||
- [ ] 별자리 외 추가 별/스타필드가 없다
|
||
- [ ] prefers-reduced-motion에서 애니메이션이 정지(또는 매우 약화)된다
|
||
|
||
## 완료 후 출력(최소)
|
||
|
||
- 수정된 파일 경로 목록
|
||
- AC 항목별 체크 결과(OK/NO)
|