Section Demo

스크롤이 선을 그어 내려가는 타임라인

섹션이 viewport에 머무는 동안 가운데 그라데이션 라인이 진행도에 비례해 차오르고, 좌우 카드가 시차로 reveal됩니다. 아래 스크롤로 효과를 확인해 보세요.

Process

어떻게 일하는가

시작부터 배포 이후까지, 다섯 단계로 흐름을 이어갑니다.

  1. Step 01문제를 정의합니다

    Discover

    사용자, 도메인, 비즈니스 컨텍스트를 함께 파악합니다. 무엇을 만들지보다, 왜 만드는지를 먼저 이해합니다.

  2. Step 02구조를 그립니다

    Design

    컴포넌트 경계, 상태 흐름, 데이터 모델을 설계합니다. 손이 빠른 구현보다 다시 읽었을 때 명확한 코드를 지향합니다.

  3. Step 03AI와 함께 구현합니다

    Build

    AI 도구로 보일러플레이트를 빠르게, 핵심 로직과 인터랙션은 직접. 검증과 책임은 사람이 맡습니다.

  4. Step 04디테일을 다듬습니다

    Polish

    마이크로 인터랙션, 접근성, 성능. 마지막 5%를 채우는 시간이 첫 95%만큼 중요하다고 믿습니다.

  5. Step 05배포하고 배웁니다

    Ship & Learn

    릴리즈 후 실제 데이터를 보고, 다음 사이클의 가설을 세웁니다. 만든 것이 끝이 아니라 시작입니다.

구성 요소

타임라인을 만드는 핵심 부품.

  • useScrollProgress (enter-exit)

    섹션이 viewport에 진입하기 시작하는 순간부터 빠져나갈 때까지를 0~1 progress로 매핑. 라인 채우기·등장 효과 모두 같은 progress에서 파생됩니다.

  • Center line fill

    회색 트랙 위에 그라데이션 라인을 절대 배치하고 height를 mapRange(progress, 0.1, 0.8, 0, 100)% 로 변경. transition으로 부드럽게 차오릅니다.

  • useStaggerReveal

    [data-reveal]이 붙은 li를 컨테이너 진입 시 setTimeout 시차로 순차 reveal. scroll-reveal-blur 클래스가 blur→clear 전환을 담당.

  • Zigzag layout

    데스크탑은 좌/우 교대(grid-cols-2 + i % 2), 모바일은 좌측 라인 단일 컬럼으로 폴백. dot은 라인 위에 절대 배치.

재사용

app/main/_components/ProcessTimelineSection.tsx를 그대로 import. STEPS 배열만 props화하면 채용·온보딩·릴리즈 프로세스 등 어떤 단계형 콘텐츠에도 그대로 활용 가능합니다.