페이드 전환

콘텐츠 간 컨텍스트 변경을 위한 부드러운 전환 효과

페이드 전환

페이드 전환은 서로 관련이 없거나 거리가 먼 콘텐츠 간 이동 시 사용되는 기본적인 전환 패턴입니다. 화면이 완전히 사라진 후 새 화면이 나타나며, 사용자가 한 영역을 떠나 완전히 새로운 영역으로 진입한다는 것을 명확하게 전달합니다.

데모

UX 원칙

언제 사용하나요?

페이드 전환은 컨텍스트 변경(Context Change) 시 사용됩니다.

콘텐츠 관계별 적합성

주요 사용 케이스

• 최상위 네비게이션: 하단 탭이나 사이드바 메뉴에서 섹션 간 이동
• 컨텍스트 전환: 서로 연결점이 없는 화면 간 전환
• 새로운 작업 시작: 완전히 다른 작업 흐름으로 진입

왜 이렇게 동작하나요?

1. 깔끔한 구분: 이전 화면이 완전히 사라진 후 새 화면이 나타나 명확한 경계를 만듭니다
2. 인지 부담 감소: 갑작스러운 화면 전환보다 부드러운 페이드로 시각적 충격을 줄입니다
3. 범용성: 방향성이 없어 어떤 네비게이션 패턴에도 자연스럽게 적용됩니다

모션 디자인

나가는 화면: 100% → 0% opacity (빠른 페이드 아웃)
짧은 공백: 완전한 컨텍스트 분리
들어오는 화면: 0% → 100% opacity (부드러운 페이드 인)

이 시퀀스는 사용자에게 "이전 공간을 떠나 새로운 공간으로 진입한다"는 멘탈 모델을 제공합니다.

기본 사용법

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

const config = {
  defaultTransition: fade()
};

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

실전 활용 예시

1. 탭 네비게이션

하단 탭바나 상단 탭에서 주요 섹션 간 이동:

const config = {
  transitions: [
    {
      from: '/home',
      to: '/profile',
      transition: fade(),
      symmetric: true
    },
    {
      from: '/home',
      to: '/settings',
      transition: fade(),
      symmetric: true
    }
  ]
};

2. 빠른 전환 (즉각적인 응답)

사용자 액션에 빠르게 반응해야 할 때:

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 400,  // 빠른 전환
      damping: 35      // 부드러운 마무리
    }
  })
};

3. 우아한 전환 (프리미엄 느낌)

브랜드 경험이 중요한 페이지:

const config = {
  defaultTransition: fade({
    spring: {
      stiffness: 150,  // 느린 전환
      damping: 25      // 부드러운 감속
    }
  })
};

접근성

• prefers-reduced-motion 설정 시 자동으로 애니메이션 비활성화
• 스크린 리더는 전환 중에도 콘텐츠 변경을 올바르게 인식
• 키보드 네비게이션과 완벽하게 호환

모범 사례

✅ DO

• 최상위 네비게이션에 기본으로 사용
• 콘텐츠가 완전히 바뀔 때 사용
• 모바일 앱과 유사한 경험 제공 시

❌ DON'T

• 관련 콘텐츠 간 이동에는 사용하지 마세요 (슬라이드나 스크롤 사용)
• 너무 느린 페이드는 피하세요 (사용자가 답답함을 느낌)
• 부분적인 UI 변경에는 사용하지 마세요