필름 전환

콘텐츠 간 컨텍스트 변경을 위한 시네마틱 전환 효과

필름 전환

필름 전환은 서로 관련이 없거나 거리가 먼 콘텐츠 간 이동 시 사용되는 시네마틱 전환 패턴입니다. 페이드와 유사하게 완전히 새로운 영역으로 진입한다는 것을 전달하지만, 보다 특별한 시각적 경험을 제공합니다.

데모

UX 원칙

언제 사용하나요?

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

콘텐츠 관계별 적합성

콘텐츠 관계	적합성	설명
관련 없는 콘텐츠	✅	완전히 독립적인 섹션 간 이동 (홈 → 설정)
형제 관계	❌	동일 레벨의 콘텐츠는 스크롤 사용 권장
계층 관계	❌	부모-자식 구조는 히어로와 같은 확장 전환 사용 권장

주요 사용 케이스

최상위 네비게이션: 하단 탭이나 사이드바 메뉴에서 섹션 간 이동
컨텍스트 전환: 서로 연결점이 없는 화면 간 전환
새로운 작업 시작: 완전히 다른 작업 흐름으로 진입
특별한 순간 연출: 중요한 화면 전환 시 시각적 강조가 필요한 경우

왜 이렇게 동작하나요?

깔끔한 구분: 페이드처럼 이전 화면과 새 화면 간의 명확한 경계를 만듭니다
시각적 흥미: 단순한 페이드보다 더 역동적인 전환으로 사용자의 주목을 끕니다
프리미엄 경험: 특별한 전환 효과로 앱의 완성도와 품질을 높입니다

모션 디자인

필름 전환은 영화 필름이 프로젝터를 통과하는 메커니즘에서 영감을 받았습니다.

나가는 화면의 움직임
현재 화면이 축소되면서 위로 올라갑니다. 마치 필름 프레임이 프로젝터 렌즈를 지나 위로 이동하는 것처럼, 화면이 작아지며 시야에서 멀어지는 느낌을 줍니다. 이 과정에서 페이지 주변에 검은 여백이 드러나며 프레임의 경계가 명확해집니다.

프레임 간격의 연출
두 화면 사이에는 짧은 순간 간격이 노출됩니다. 이는 실제 필름 스트립에서 프레임과 프레임 사이의 검은 간격을 표현한 것으로, 한 장면이 끝나고 다음 장면이 시작된다는 것을 시각적으로 전달합니다.

들어오는 화면의 등장
새로운 화면은 아래쪽에서 작은 크기로 나타나 위로 올라오며 점진적으로 확대됩니다. 필름 프레임이 프로젝터 렌즈 앞에 도달하면서 스크린 크기에 맞게 확대 투사되는 과정을 연상시킵니다. 최종적으로 화면에 완벽하게 포커싱되며 전환이 완료됩니다.

이러한 시퀀스는 아날로그 영화의 낭만적인 감성과 함께, 사용자에게 "새로운 장면으로 넘어간다"는 명확한 시각적 메타포를 제공합니다.

기본 사용법

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

const config = {
  defaultTransition: film()
};

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

실전 활용 예시

1. 탭 네비게이션

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

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

접근성

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

모범 사례

✅ DO

최상위 네비게이션에 기본으로 사용
콘텐츠가 완전히 바뀔 때 사용
특별한 브랜드 경험이 필요할 때 사용

❌ DON'T

관련 콘텐츠 간 이동에는 사용하지 마세요 (슬라이드나 스크롤 사용)
너무 복잡한 애니메이션은 피하세요 (사용자가 어지러움을 느낌)
부분적인 UI 변경에는 사용하지 마세요