4.5 KiB
4.5 KiB
.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겹) 추가(과하지 않게)
- 중심 원이 버튼/노드처럼 큼 → 코어는 더 작게, 대신 은은한 글로우/하이라이트
- 전체가 균일해 도식 느낌 → 별마다 강약(크기/스파이크 길이/피크 빈도) 분산
작업 요구사항
1) 스파이크 그라데이션(필수)
- 각 별의 십자 스파이크(수평/수직)는 단색 stroke가 아니라 다음 형태로 구현:
- 중앙(코어 근처)은 밝게
- 양 끝으로 갈수록 투명(0)으로 페이드아웃
- 구현 방식(권장): SVG
linearGradient- 수평: x1=0% → x2=100% (중앙이 밝고 양끝 투명)
- 수직: y1=0% → y2=100% (중앙이 밝고 양끝 투명)
2) 블룸(빛 번짐) 1겹 추가(필수)
- 스파이크를 2겹으로 그린다:
- 블룸 레이어: 더 굵고(strokeWidth +0.6~1.2), opacity 낮게(<= 0.25), 약한 blur(가능하면)
- 본선 레이어: 얇고 선명(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)