17MB 인트로 영상 기본 OFF + 영상 껴도 예쁜 파스텔 배경 폴백 — POP-SPOT v2.4
17MB 영상이 무거우니 기본 OFF + 우상단 토글. 영상 꺼도 예쁜 파스텔 배경 폴백 (라이트: 아이보리+파스텔 orb / 다크: 회보라색). 로고 클릭이 인트로 다시 띄우던 문제 수정.
인트로 영상이 무거워 모바일에서 버볍거린다 / 로고 눌르면 인트로가 또 뜨서 두 번 들어가야함 / 작전회의실에 뒤로가기 없음 / 마지막 섹션 빨간 배경이 눈 아프 / 디자인이 딱딱함. 다섯 건을 한 번에 정리.
이 글에서 다루는 것
무엇이 바뀌었나
| 항목 | v2.3 | v2.4 |
|---|---|---|
| 배경 영상 | 자동 다운로드 (모바일 버볍거림) | 기본 OFF, 우상단 토글로 직접 제어 |
| 영상 OFF 배경 | 까만 배경만 (비어있음) | 라이트: 아이보리+파스텔 orb 6 / 다크: 회보라색 배경 + 어두운 orb. 거대 POP·SPOT 글자 |
| 다크 모드 색 | 거의 완전 검정 (차가움) | 진한 보라-회색 톤 (따뜻함) |
| 메인 로고 클릭 | 인트로 다시 떠서 두 번 들어가야 함 | 메인 그대로 유지 |
| 작전회의실 | 뒤로가기 버튼 없음 | 좌상단 원형 ← 버튼 추가 |
| 인트로 마지막 섹션 | 핫핑크 풀배경 (눈 아픔) | 양쪽 모서리 핑·앤버 부드러운 빛 효과 |
왜 이렇게 했음
영상 기본 OFF — 모바일 사용자 이 장만 방문하고 떠나는 패턴이 많고, 17MB 는 일회용 콘텐츠치고는 양이 크다. "입테 보고 싶은 사용자만 켜도록" 이 더 건강하다고 판단. 영상을 끌 때 대체되는 배경이 "까만 화면" 이면 어이없으니 그 자리에 PastelBackground 를 둘도록 함.
메인 로고 우회 — 메인에서 좌상단 로고를 눌렀을 때 "다시 메인 상단으로" 가 자연스러운 기대인데, 코드가 router.push('/') 로 되어 있어 middleware 에서 다시 인트로로 리다이렉트했음. 메인에서 로고를 눌렀을 때는 이미 메인 이므로 entered=1 을 유지해 더 이동이 안 일어나게 함.
핫핑크 풀배경 제거 — 인트로 마지막 섹션의 수면 파키쁜 배경이 읽기 어렵고 장시간 보면 눈이 아픔. 양쪽 구석에 핑·앤버 소프트라이트만 두면 존재감은 유지하면서 눈 피로는 안 온다.
코드로는 어떻게 (필요한 부분만)
// PastelBackground — 양쪽 테마 올롬라운드
export function PastelBackground() {
return (
<>
<div className="absolute inset-0 -z-10 bg-amber-50 dark:bg-[#1a1820]" />
<div className="absolute top-[10%] -left-40 w-[600px] h-[600px]
rounded-full bg-pink-300/30 dark:bg-pink-500/15
blur-[120px] pointer-events-none" />
{/* ... 총 6 개 orb */}
</>
);
}
// GiantWordmark — 거대 outline POP·SPOT
export function GiantWordmark() {
return (
<h2 className="absolute select-none pointer-events-none
text-[280px] font-black tracking-tighter
text-zinc-900/[0.04] dark:text-white/[0.04]">
POP·SPOT
</h2>
);
}영상 토글.
const [videoOn, setVideoOn] = useState(false); // 기본 OFF
<button onClick={() => setVideoOn(v => !v)} aria-pressed={videoOn}>
{videoOn ? <VolumeOff /> : <Volume />}
</button>
{videoOn
? <video src="/intro.mp4" autoPlay muted loop />
: <PastelBackground />}핵심 파일: popspot-frontend/src/app/intro/page.tsx, popspot-frontend/src/components/intro/PastelBackground.tsx (신규), popspot-frontend/src/components/intro/GiantWordmark.tsx (신규), popspot-frontend/src/components/layout/Header.tsx
직접 보는 법
인트로 페이지 우상단 소리 아이콘을 편게 눌러보면 배경 영상이 켜지고/꺼진다. 메인에서 좌상단 POP·SPOT 글자 로고를 눌러도 메인에 그대로 있고, 작전회의실 (한 틭에서)의 좌상단 ← 버튼으로 메인으로 돌아올 수 있다.