SSGOI LogoSSGOI
GitHub 저장소

슬라이드 전환

동일 레벨 콘텐츠 간 수평 슬라이드 전환

슬라이드 전환

슬라이드 전환은 페이지가 좌우로 슬라이드하며 전환되는 효과로, 동일한 레벨의 형제 콘텐츠 간 이동 시 사용됩니다. 탭 네비게이션이나 스텝 기반 UI에서 자연스러운 수평 이동 경험을 제공합니다.

데모

Loading demo...

UX 원칙

언제 사용하나요?

슬라이드 전환은 수평적 콘텐츠 탐색(Horizontal Navigation) 시 사용됩니다.

콘텐츠 관계별 적합성

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

주요 사용 케이스

  • 탭 네비게이션: 탭 UI의 콘텐츠 전환
  • 이미지 갤러리: 이미지 간 스와이프 전환
  • 설정 화면: 카테고리 간 수평 이동
  • 온보딩 스텝: 단계별 진행 화면

왜 이렇게 동작하나요?

  1. 수평 제스처와 일치: 모바일의 좌우 스와이프와 자연스럽게 연결
  2. 탭 메타포: 실제 탭처럼 옆으로 넘기는 직관적 경험
  3. 진행 방향 인지: 앞으로/뒤로 가는 방향을 시각적으로 표현

모션 디자인

LEFT 방향 (다음으로):
나가는 화면: 왼쪽으로 밀려남 (현재 콘텐츠가 왼쪽으로)
들어오는 화면: 오른쪽에서 들어옴 (다음 콘텐츠가 등장)

RIGHT 방향 (이전으로):
나가는 화면: 오른쪽으로 밀려남 (현재 콘텐츠가 오른쪽으로)
들어오는 화면: 왼쪽에서 들어옴 (이전 콘텐츠가 복귀)

기본 사용법

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

const config = {
  defaultTransition: slide()
};

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

실전 활용 예시

1. 탭 네비게이션

탭 UI에서 콘텐츠 전환:

const config = {
  transitions: [
    {
      from: '/tabs/home',
      to: '/tabs/profile',
      transition: slide({ direction: 'left' }),
      symmetric: true  // 뒤로가기 시 자동으로 right
    },
    {
      from: '/tabs/profile',
      to: '/tabs/settings',
      transition: slide({ direction: 'left' }),
      symmetric: true
    }
  ]
};

2. 이미지 갤러리

이미지 간 스와이프 전환:

const config = {
  transitions: [
    {
      from: '/gallery/photo-*',
      to: '/gallery/photo-*',
      transition: slide({ 
        direction: 'left',
        spring: { stiffness: 300, damping: 30 }
      })
    }
  ]
};

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

탭 순서에 따라 방향 자동 결정:

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

const config = {
  transitions: [
    {
      from: "/nav/left",
      to: "/nav/right",
      transition: slide({ direction: "left" })
    },
    {
      from: "/nav/right",
      to: "/nav/left",
      transition: slide({ direction: "right" })
    }
  ],
  middleware: createMiddleware(tabOrder)
};

성능 최적화

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

접근성

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

모범 사례

✅ DO

  • 탭 네비게이션이나 스텝 UI에 사용
  • 이미지 갤러리의 좌우 넘김에 적용
  • 설정 화면의 카테고리 간 이동에 활용
  • symmetric 옵션으로 양방향 일관성 유지
  • 모바일의 자연스러운 스와이프 제스처와 연결

❌ DON'T

  • 관련 없는 섹션 간 이동에 사용하지 마세요 (페이드 사용)
  • 계층 구조 탐색에 사용하지 마세요 (드릴이나 히어로 사용)
  • 상하 스크롤과 혼용하지 마세요 (일관성 유지)
  • 너무 많은 탭(5개 이상)에 사용하지 마세요