프론트엔드트러블슈팅

17MB 인트로 영상 기본 OFF + 영상 껴도 예쁜 파스텔 배경 폴백 — POP-SPOT v2.4

김동현
··2분 읽기

17MB 영상이 무거우니 기본 OFF + 우상단 토글. 영상 꺼도 예쁜 파스텔 배경 폴백 (라이트: 아이보리+파스텔 orb / 다크: 회보라색). 로고 클릭이 인트로 다시 띄우던 문제 수정.

인트로 영상이 무거워 모바일에서 버볍거린다 / 로고 눌르면 인트로가 또 뜨서 두 번 들어가야함 / 작전회의실에 뒤로가기 없음 / 마지막 섹션 빨간 배경이 눈 아프 / 디자인이 딱딱함. 다섯 건을 한 번에 정리.

이 글에서 다루는 것

  • 17MB mp4 를 기본 OFF 로 내림 + 우상단 재생 토글 으로 사용자가 손으로 켜고 끄도록
  • 영상 껴도 예쁜 파스텔 배경 (PastelBackground) + 거대 POP·SPOT 글자 (GiantWordmark)
  • 메인 로고 클릭 시 인트로 우회 — 메인 윤지
  • 작전회의실 뒤로가기 (IconButton) 추가
  • 인트로 마지막 섹션의 핫핑크 풀배경 → 양쪽 모서리 부드러운 광채로
  • 무엇이 바뀌었나

    항목v2.3v2.4
    배경 영상자동 다운로드 (모바일 버볍거림)기본 OFF, 우상단 토글로 직접 제어
    영상 OFF 배경까만 배경만 (비어있음)라이트: 아이보리+파스텔 orb 6 / 다크: 회보라색 배경 + 어두운 orb. 거대 POP·SPOT 글자
    다크 모드 색거의 완전 검정 (차가움)진한 보라-회색 톤 (따뜻함)
    메인 로고 클릭인트로 다시 떠서 두 번 들어가야 함메인 그대로 유지
    작전회의실뒤로가기 버튼 없음좌상단 원형 ← 버튼 추가
    인트로 마지막 섹션핫핑크 풀배경 (눈 아픔)양쪽 모서리 핑·앤버 부드러운 빛 효과

    왜 이렇게 했음

    영상 기본 OFF — 모바일 사용자 이 장만 방문하고 떠나는 패턴이 많고, 17MB 는 일회용 콘텐츠치고는 양이 크다. "입테 보고 싶은 사용자만 켜도록" 이 더 건강하다고 판단. 영상을 끌 때 대체되는 배경이 "까만 화면" 이면 어이없으니 그 자리에 PastelBackground 를 둘도록 함.

    메인 로고 우회 — 메인에서 좌상단 로고를 눌렀을 때 "다시 메인 상단으로" 가 자연스러운 기대인데, 코드가 router.push('/') 로 되어 있어 middleware 에서 다시 인트로로 리다이렉트했음. 메인에서 로고를 눌렀을 때는 이미 메인 이므로 entered=1 을 유지해 더 이동이 안 일어나게 함.

    핫핑크 풀배경 제거 — 인트로 마지막 섹션의 수면 파키쁜 배경이 읽기 어렵고 장시간 보면 눈이 아픔. 양쪽 구석에 핑·앤버 소프트라이트만 두면 존재감은 유지하면서 눈 피로는 안 온다.


    코드로는 어떻게 (필요한 부분만)

    typescript
    // 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>
      );
    }

    영상 토글.

    typescript
    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 글자 로고를 눌러도 메인에 그대로 있고, 작전회의실 (한 틭에서)의 좌상단 ← 버튼으로 메인으로 돌아올 수 있다.


    관련 글

  • 이전 — v2.1~v2.3, 자동 인트로 실패담
  • 다음 — v2.5, v2.0의 게스트 기능이 어느 화면에도 안 붙어 있던 사고
  • 공유

    댓글