콘텐츠 관계	적합성	설명
관련 없는 콘텐츠	❌	독립적인 섹션은 페이드 사용 권장
형제 관계	✅	동일 레벨의 순차적 콘텐츠에 최적
계층 관계	❌	부모-자식 구조는 히어로나 핀터레스트 사용 권장

주요 사용 케이스

챕터 네비게이션: 문서나 가이드의 섹션 간 이동
온보딩 플로우: 단계별 튜토리얼이나 설정 과정
타임라인: 시간 순서대로 배열된 콘텐츠
스토리텔링: 이야기 형식의 순차적 콘텐츠

왜 이렇게 동작하나요?

자연스러운 읽기 흐름: 위에서 아래로 읽는 자연스러운 패턴과 일치
스크롤 제스처와 일관성: 사용자가 익숙한 스크롤 동작의 연장선
순서 인지: 콘텐츠의 앞뒤 관계를 직관적으로 이해

모션 디자인

UP 방향 (다음으로):
나가는 화면: 위로 밀려 올라감 (이전 콘텐츠가 위로)
들어오는 화면: 아래에서 올라옴 (다음 콘텐츠가 등장)

DOWN 방향 (이전으로):
나가는 화면: 아래로 내려감 (현재 콘텐츠가 아래로)
들어오는 화면: 위에서 내려옴 (이전 콘텐츠가 복귀)

기본 사용법

import { Ssgoi } from '@ssgoi/react';
import { scroll } from '@ssgoi/react/view-transitions';

const config = {
  defaultTransition: scroll()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* 앱 내용 */}
    </Ssgoi>
  );
}

실전 활용 예시

1. 문서 네비게이션

챕터나 섹션 간 이동:

const config = {
  transitions: [
    {
      from: '/docs/intro',
      to: '/docs/getting-started',
      transition: scroll({ direction: 'up' }),
      symmetric: true  // 뒤로가기 시 자동으로 down
    },
    {
      from: '/docs/getting-started',
      to: '/docs/api',
      transition: scroll({ direction: 'up' }),
      symmetric: true
    }
  ]
};

2. 온보딩 플로우

단계별 튜토리얼:

const config = {
  transitions: [
    {
      from: '/onboarding/step-*',
      to: '/onboarding/step-*',
      transition: scroll({ 
        direction: 'up',
        spring: { stiffness: 300, damping: 30 }
      })
    }
  ]
};

3. 미들웨어를 통한 동적 방향

네비게이션 순서에 따라 방향 자동 결정:

const createMiddleware = (routes) => {
  return (from, to) => {
    const fromIndex = routes.indexOf(from);
    const toIndex = routes.indexOf(to);
    
    if (fromIndex < toIndex) {
      return { from: "/nav/prev", to: "/nav/next" };
    } else {
      return { from: "/nav/next", to: "/nav/prev" };
    }
  };
};

const config = {
  transitions: [
    {
      from: "/nav/prev",
      to: "/nav/next",
      transition: scroll({ direction: "up" })
    },
    {
      from: "/nav/next",
      to: "/nav/prev",
      transition: scroll({ direction: "down" })
    }
  ],
  middleware: createMiddleware(routeOrder)
};

성능 최적화

transform: translateY()만 사용하여 GPU 가속 활용
레이아웃 재계산 없이 부드러운 60fps 유지
스크롤 위치 자동 보존으로 추가 계산 불필요

접근성

prefers-reduced-motion 설정 시 전환 비활성화
키보드 네비게이션 완벽 지원
스크린 리더에서 계층 구조 올바르게 전달

모범 사례

✅ DO

문서나 가이드의 순차적 섹션 이동에 사용
온보딩이나 튜토리얼 단계에 적용
타임라인 기반 콘텐츠에 활용
symmetric 옵션으로 양방향 일관성 유지
모바일의 자연스러운 스크롤 제스처와 연결

❌ DON'T

관련 없는 섹션 간 이동에 사용하지 마세요 (페이드 사용)
계층 구조 탐색에 사용하지 마세요 (히어로나 핀터레스트 사용)
좌우 스와이프와 혼용하지 마세요 (일관성 유지)