83 lines
3.2 KiB
Markdown
83 lines
3.2 KiB
Markdown
# .gemini/current.md
|
||
|
||
## TASK_META (수정 금지)
|
||
|
||
- TASK_TITLE: Lobby 별 반짝임을 “십자 글린트 + 블룸(이미지 참고)”로 개선(이동/transform 0)
|
||
- TASK_SLUG: lobby-glint-cross-bloom-like-ref
|
||
|
||
## 작업 목표
|
||
|
||
`@src/app/page.tsx` 로비 배경의 별자리(오리온/마차부/북두칠성) 별(점)을
|
||
첨부 이미지처럼 “십자(4-point) 글린트 + 부드러운 빛 번짐(bloom)” 느낌으로 반짝이게 만든다.
|
||
|
||
## 핵심 제약(최우선)
|
||
|
||
- 애니메이션은 **opacity만** 허용한다.
|
||
- `transform`(scale/translate/rotate 포함) 사용 **절대 금지**.
|
||
- 대각선(×) 글린트 금지. **십자(+)만** 사용.
|
||
- 별자리 외 랜덤 별/스타필드/Canvas 이동 연출 금지.
|
||
|
||
## 작업 요구사항
|
||
|
||
1. 별자리 3개 고정(필수)
|
||
|
||
- 배경에는 오리온/마차부/북두칠성 3개만 존재.
|
||
- 별자리 외 추가 별(랜덤 점/스타필드)은 0.
|
||
|
||
2. “이미지 같은” 글린트 형태(필수, SVG 권장)
|
||
각 별은 아래 구조로 표현한다:
|
||
|
||
- Core: 작은 `circle` (중앙 빛)
|
||
- Spikes: 수평 line 1개 + 수직 line 1개 (십자)
|
||
- Spikes는 “끝이 뚝 끊기지 않고” **양 끝으로 갈수록 서서히 투명해져야 함**:
|
||
- `stroke`를 단색이 아니라 `linearGradient`로 처리(중앙 흰색, 양끝 투명)
|
||
- Bloom: core/스파이크에 **아주 약한 blur glow**를 1겹만 추가
|
||
- 방법: (권장) 스파이크를 2번 그리기
|
||
- 1. blur+낮은 opacity(블룸용)
|
||
- 2. 선명한 라인(본선)
|
||
- 또는 SVG filter(feGaussianBlur) 1개를 최소로 사용
|
||
|
||
3. 반짝임 리듬(필수)
|
||
|
||
- 글린트는 항상 켜져 있지 않고, 대부분은 거의 안 보이다가 잠깐 피크:
|
||
- 기본 opacity: 0 (또는 0.02~0.05)
|
||
- 피크 순간만 0.7~0.9로 올라왔다가 빠르게 내려옴
|
||
- 별마다 duration(2~6s), delay 분산(고정 랜덤 OK, 프레임 랜덤 금지)
|
||
|
||
4. 디자인 수치(권장 고정값)
|
||
|
||
- StrokeWidth: 0.6 전후(0.5~0.8)
|
||
- Arm 길이(한쪽): 5px(작은 별) ~ 10px(밝은 별) 정도
|
||
- Core 반지름: 1.2 ~ 2.0
|
||
- Bloom(블러 라인) opacity는 본선보다 훨씬 낮게(예: 본선 1.0이면 블룸 0.25 이하)
|
||
|
||
5. 모션 접근성(필수)
|
||
|
||
- prefers-reduced-motion: reduce 에서는 애니메이션 OFF(정지 우선)
|
||
- 글린트는 opacity를 낮게 고정(예: 0.1) 또는 0
|
||
|
||
## Non-scope
|
||
|
||
- 로비 CTA/항로 카드 구성 변경 금지
|
||
- /flight 등 다른 페이지 변경 금지
|
||
- 신규 기능 추가 금지
|
||
|
||
## 적용 파일
|
||
|
||
- 필수: `@src/app/page.tsx`
|
||
- 필요 시(최소): 글로벌 CSS에 twinkle keyframes/클래스 추가
|
||
|
||
## 완료 조건(AC)
|
||
|
||
- [ ] 글린트는 십자(+)만 존재하고 대각선(×)이 없다
|
||
- [ ] 스파이크가 그라데이션으로 자연스럽게 사라져(끝이 부드러움) 이미지와 유사한 느낌이다
|
||
- [ ] bloom이 과하지 않고 “은은한 번짐” 정도로만 보인다
|
||
- [ ] 애니메이션은 opacity만 사용하며 transform이 0이다(지터/이동 없음)
|
||
- [ ] 별자리 3개만 유지되고 추가 별/스타필드가 없다
|
||
- [ ] prefers-reduced-motion에서 애니메이션이 정지(또는 매우 약화)된다
|
||
|
||
## 완료 후 출력(최소)
|
||
|
||
- 수정된 파일 경로 목록
|
||
- AC 항목별 체크 결과(OK/NO)
|