IROUL
회원가입로그인
뒤로가기
랜딩·캠페인

스크롤 스토리텔링 기반 프론트엔드 구현

메인 섹션의 스크롤 진행률을 단계(step)로 매핑해 타이틀/배경/딤드 전환을 제어하고, 인터랙티브 카드(hover/click)와 양방향 마퀴 스트립으로 화면 리듬을 구성했습니다. PC-first 반응형 기준에서 데스크톱 중심의 강한 비주얼 연출과 모바일 대응을 함께 설계한 것이 핵심입니다.

Tailwind CSSResizeObserverrequestAnimationFrame
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

  1. 구조 설계

    • 페이지를 MainSection, BannerSection, BrandStory, WithSparkplus, FaqSection로 분리해 유지보수 가능한 섹션 구조를 먼저 잡았습니다.

  2. 스크롤 스토리텔링 구현

    • 메인 비주얼은 섹션 높이를 런웨이로 확장하고, 스크롤 진행률을 계산해 step 상태로 변환했습니다.

    • step 전환 시 박스 확장, 라운드 해제, 딤드 오버레이, 타이틀 등장 타이밍을 순차 제어해 한 장면씩 전개되도록 설계했습니다.

  3. 레이아웃 안정화

    • ResizeObserver로 타이틀 높이를 측정해 오프셋을 계산하고, 서로 다른 화면 크기에서도 텍스트 위치가 깨지지 않게 보정했습니다.

    • requestAnimationFrame 기반 스크롤 핸들링으로 불필요한 연산을 줄였습니다.

  4. 인터랙션 설계

    • 핵심 개선 포인트 카드는 데스크톱에서는 hover, 모바일에서는 click/keyboard(Enter/Space)로 동작하도록 분기해 접근성과 사용성을 함께 확보했습니다.

  5. 브랜드 무드 강화

    • 마퀴 로고 스트립은 정방향/역방향을 조합해 시각적 흐름을 만들고, 전용 CSS 애니메이션으로 랜딩 페이지 특유의 무드를 강조했습니다.

  6. 반응형/운영 관점 마무리

    • 프로젝트의 PC-first 브레이크포인트 기준에 맞춰 클래스 우선순위를 정리하고, 컴포넌트 단위로 분리해 추후 실제 콘텐츠 연결 및 확장에 유리한 구조로 마무리했습니다.

소스 코드

· 데모 페이지에서 자동 추출
import MainSection from "./-components/-MainSection";
import BannerSection from "./-components/-BannerSection";
import BrandStory from "./-components/-BrandStory";
import WithSparkplus from "./-components/-Withsparkplus";
import FaqSection from "./-components/-FaqSection";
import "./sparkplus-landing.css";

export default function LandingSparkplusPage() {
  return (
    <div data-demo-embed-fixed="">
      <MainSection />
      <BannerSection />
      <BrandStory />
      <WithSparkplus />
      <FaqSection />
    </div>
  );
}
209조회수

댓글