3.8 KiB
3.8 KiB
.cli/current.md
TASK_META (수정 금지)
- TASK_TITLE: Lobby 별 반짝임을 “빛 번짐(십자/팔각 글린트)”으로 구현(이동 없음)
- TASK_SLUG: lobby-glint-twinkle-opacity-only
작업 목표
@src/app/page.tsx 로비 배경의 별자리(오리온/마차부/북두칠성)에서,
별(점)이 단순 점멸이 아니라 **십자(4-point) 또는 팔각(8-point) 형태의 빛 번짐(glint)**으로 반짝이도록 개선한다.
단, 어떠한 이동/드리프트/패럴럭스도 발생하면 안 된다.
전제(현재 상태)
- 배경 별자리는 3개(오리온/마차부/북두칠성)만 유지한다.
- 기존에 랜덤 별(스타필드) 생성 코드가 있다면 이번 작업에서 제거 대상이다(별자리 외 별 0).
작업 요구사항
- 글린트(빛 번짐) 형태 구현(필수)
- 각 별은 아래 구성 요소로 표현한다(권장: SVG):
- 핵심 별:
circle - 글린트:
line2개(십자) 또는 4개(팔각 = 십자+대각선)
- 핵심 별:
- 글린트는 “항상 보이는 선”이 아니라, 반짝일 때만 opacity가 올라왔다 내려가야 한다.
- 핵심 별(circle)도 약한 opacity 변화는 가능하나, 주역은 글린트가 되어야 한다.
- 애니메이션은 opacity만(최우선)
- 아래는 전부 금지(존재하면 제거):
transform전부(translate/scale/rotate 포함)transition-transform- position 이동(left/top/x/y 변화)
- Canvas 스타필드 / requestAnimationFrame 기반 이동
- 배경 드리프트/패럴럭스/스크롤링
- 반짝임 애니메이션은 opacity만 변화하도록 구현한다.
- (선택) circle의 opacity는 0.65
1.0 범위, 글린트는 00.85 범위 권장.
- 별별 랜덤 타이밍 분산(필수)
- 별마다 애니메이션 타이밍이 약간씩 다르게 보이도록:
- duration: 2~6초 범위 분산
- delay: 별마다 분산
- 랜덤은 “렌더 시 고정”이어야 한다(매 프레임 바뀌는 랜덤 금지).
- 모션 접근성(필수)
prefers-reduced-motion: reduce환경에서는:- 애니메이션을 끄거나(정지 우선) 아주 약하게
- 글린트는 opacity를 매우 낮게 고정(예: 0.1~0.2)
- 별자리 3개 고정 & 추가 별 금지(필수)
- 배경 별자리는 오리온/마차부/북두칠성 3개만 존재해야 한다.
- 별자리 외 추가 별(랜덤 점/스타필드)은 생성되지 않아야 한다.
구현 가이드(권장 방향)
page.tsx내 별자리 SVG 렌더링에서 “Star” 컴포넌트를 만들고, 별 좌표(cx,cy)마다circle + glint lines를 렌더링한다.- CSS는 Tailwind
@layer utilities또는 모듈 CSS로 작성하되, keyframes에는 opacity만 포함한다. - 글린트 선은
strokeLinecap="round"를 사용하고 너무 굵지 않게(0.6~1.0) 유지한다. - 필요하다면
feGaussianBlur기반의 아주 약한 glow 필터를 추가할 수 있으나, 성능/가독성에 영향이 없도록 최소화한다(선택).
Non-scope
- 로비의 CTA/항로 카드 구성 변경 금지(이번 작업은 배경 별 반짝임 연출 품질 개선)
- /flight 등 다른 페이지 변경 금지
- 신규 기능 추가 금지
적용 파일
- 필수:
@src/app/page.tsx - 필요 시(최소 변경): 글로벌 CSS(유틸리티 keyframes 추가가 필요한 경우만)
완료 조건(AC)
- 글린트(십자/팔각) 형태의 빛 번짐이 별(점)에서 실제로 보인다
- 별자리 관련 어떤 요소에도 transform/translate/scale/rotate가 적용되지 않는다(opactiy only)
- 별자리 외 랜덤 별(스타필드)이 생성되지 않는다(추가 별 0)
- 별마다 반짝임 타이밍이 다르게 느껴진다(duration/delay 분산)
- prefers-reduced-motion에서 애니메이션이 정지 또는 매우 약화된다
완료 후 출력(최소)
- 수정된 파일 경로 목록
- AC 항목별 체크 결과(OK/NO)