이 계획서는  xslide.kr 의 GSAP 애니메이션 엔진을 개편하여 기존의 단순하거나 부자연스러웠던 연출을 부드럽고 유기적이며 현대적인 프리미엄 모션 그래픽 효과로 교체하기 위한 설계안입니다.

사용자 검토 요구사항

NOTE

에디터 내부 개별 요소 미리보기, 슬라이드 전체 미리보기, 그리고 프레젠테이션 내보내기 템플릿 전체에 걸쳐 총 15개 이상의 애니메이션 프리셋을 대폭 개선합니다. 모든 효과는 GSAP 타임라인과 완벽하게 통합되어 탐색(Seek), 일시정지, 역재생이 부드럽게 작동합니다.

제안된 변경 사항

다음 세 가지 파일에 새 애니메이션 프리셋을 동기화하여 적용합니다:

  1. 에디터 컴포넌트: 
  2. 프레젠테이션 컴포넌트:  (내보내기용 코드 내 삽입 템플릿)
  3. 뷰어 컴포넌트:  (슬라이드 뷰어 페이지)

프리미엄 애니메이션 프리셋 상세 설계

각 파일의 모션 효과들을 다음과 같이 대대적으로 재작성합니다:

1.  zoom-in  (확대하며 나타나기)

  • 기존: 단순히 크기( scale )를 0.1에서 1로 키우며 페이드인.
  • 개선: 카메라 포커스가 맞춰지는 듯한 고급스러운 느낌을 줍니다. 크기 시작 값을  0.3 으로 설정하고 약간의 회전( rotation: -4 ), 블러 필터( filter: blur(10px) -> blur(0px) )를 추가한 뒤, 부드러운  back.out(1.4)  감속 효과로 안착시킵니다.

2.  bounce-in  (바운스 효과)

  • 기존: 단순한  back.out(2.5)  감속 기반의 크기 바운스.
  • 개선: 물리적으로 통통 튀는 생동감 있는 바운스. 크기를  0 에서  1 로 키우면서 미세한 틸트 회전( rotation: 8 )을 섞고, 오가닉한 탄성 이징인  elastic.out(1, 0.6) 을 사용하여 한층 더 탄력적이고 고급스러운 바운스를 연출합니다.

3.  glow-pulse  (글로우 펄스)

  • 기존: 단순 그림자 두께가 커졌다 작아지는 글로우.
  • 개선: 숨을 쉬는 듯한 영롱한 하이라이트 효과. 크기를 아주 미세하게 키우면서( 1  ->  1.03 ), 부드럽고 퍼지는 네온 형태의 드롭 섀도우 글로우( 4px  ->  25px )를 부드러운  sine.inOut  루프로 무한 반복( repeat: -1 ,  yoyo: true ) 재생합니다.

4.  typewriter  (타이핑 효과)

  • 기존: 단순히 글자가 일정 속도로 투명도만 켜지며 등장.
  • 개선: 위로 솟아오르며 인쇄되는 느낌. 개별 글자 단위로 약간 아래에서 위로 솟아오르는 운동감( y: 8 -> 0 )을 주고 투명도를 서서히 켜며 촘촘하게 스태거링(순차 지연)을 넣어 세련되게 인쇄되도록 합니다.

5.  text-scramble  (텍스트 암호 해독 효과)

  • 기존: GSAP 타임라인과 무관하게 백그라운드에서  setInterval 로 글자를 랜덤 교체하는 조잡한 연출 (Seek/Pause 제어 불가).
  • 개선: SF 영화의 암호 해독 느낌을 GSAP 타임라인에 완전 통합 구현. 글자가 흐릿한 블러 상태( filter: blur(6px) -> blur(0px) )에서 페이드인되는 동안, 타임라인 진행률에 맞춰 한글 자음/모음, 수학 기호, 알파벳 특수기호가 무작위로 교차 스크램블되며 제자리로 찾아갑니다.

6.  text-explode  (텍스트 파편 효과)

  • 기존: 단순히 2D 평면 상에서 사방으로 흩어져서 날아오기.
  • 개선: 압도적인 3차원 공간감 연출. 낱글자들이 깊이감 축( z: -500 -> 500 )을 크게 타고 사방으로 퍼지면서 아주 크게 확대되었다가, 블러 필터가 점차 선명해지며 빠르게 한 곳으로 수렴하는 3D 공간 왜곡 연출을 구현합니다 ( power4.out ).

7.  wave-in  (웨이브 효과)

  • 기존: 단순 Y축 오프셋 기반의 지연 등장.
  • 개선: 유려한 리퀴드 웨이브. 글자들이 부드러운 회전각( rotation: 15 ), 스케일 축소에서 시작하여 스태거를 타고 파도처럼 넘실거리며 빠르게 치고 올라와 안착합니다 ( back.out(1.5) ).

8.  elastic-drop  (탄력적 낙하)

  • 기존: 위에서 아래로 그냥 떨어지는 밋밋한 탄성 이징.
  • 개선: 디즈니 애니메이션 스타일의 물리 법칙 적용. 개별 요소가 빠른 속도로 낙하한 뒤 지면에 닿는 순간 납작해졌다가( scaleY: 0.6, scaleX: 1.3 ), 다시 위로 튕기며 길게 늘어난 후 본래 형태로 쫀득하게 복원되는 스쿼시 앤 스트레치(Squish and Stretch) 리듬을 적용합니다.

9.  neon-trace  (네온 깜빡임 등장)

  • 기존: 단순 테두리 그림자 페이드인.
  • 개선: 실제 가스관 네온사인이 켜지듯 지직거리며 켜지는 효과. 네온 테두리 광량과 오파시티가 초반에 짧고 불규칙하게 깜빡거린(Flicker) 후, 마지막에 부드럽게 완전 방전 상태로 빛을 가득 뿜어냅니다.

10.  morph-scale  (젤리 모핑 효과)

  • 기존: 좌우 크기 짜부러뜨리기.
  • 개선: 탱글탱글한 실리콘 젤리 느낌. 머리카락처럼 얇고 길게 늘어난 형태에서 가로로 펑 퍼졌다가, 다시 탄성에 의해 바운싱하며 제 형태를 잡는 젤리 모핑 효과를 3단계 GSAP 키프레임 체인으로 구현합니다.

11.  cinema-reveal  (시네마틱 오픈)

  • 기존: 단순 클립패스 마스킹.
  • 개선: 영화 스크린 래핑. 영화관의 검은색 화면 바가 위아래로 겉치며 넓어지는 느낌( clipPath  가로 마스크 확장)에 맞추어 화면 전체가 아주 서서히 줌아웃되는 광각 카메라 연출을 결합합니다.

12.  shockwave  (충격파 효과)

  • 기존: 단순한 원형 링 확대 및 소멸.
  • 개선: 벡터 충격파. 프레임의 실제 형태(둥근 사각형, 원 등)의 모서리 반경( border-radius )을 완벽하게 계승하는 네온 글로우 링이 외곽으로 투명하게 터져 나가며 번쩍이고 사라집니다.

13.  particle-burst  (파티클 불꽃 폭발)

  • 기존: 단순 사방 파편 튀기기.
  • 개선: 불꽃놀이 밤하늘 중력 연출. 요소가 생성되는 중심점에서 글로우 효과를 머금은 파티클들이 방사형으로 사방으로 힘차게 뿜어져 나갔다가, 중력 가속도를 받아 포물선을 그리며 아래로 흩뿌려지고 페이드아웃됩니다.

14.  count-up  (숫자 카운트 업)

  • 기존: 0부터 대상 숫자까지 단순 증가.
  • 개선: 피날레 임팩트. 숫자가 긴장감 있게 올라간 뒤 최종 목표 값에 도달하는 순간 쿵 하고 작게 펄스 충격 바운스( scale  1.08 -> 1)를 주어 도달감을 극대화합니다.

검증 계획

수동 검증

  1. 에디터 페이지를 열고 임의의 텍스트, 도형, 이미지 개체를 추가합니다.
  2. 애니메이션 프리셋 설정 창에서 Scramble, Typewriter, Elastic Drop, Morph Scale, Neon Trace 등의 모션을 선택합니다.
  3. 개별 요소 모션 재생(미리보기) 및 타임라인 전체 슬라이드 재생을 클릭하여 튀는 프레임 현상 없이 고품질 모션이 표현되는지 확인합니다.
  4. 프레젠테이션 모드 및 내보내기 결과물에서도 일관되게 고품질 재생이 되는지 교차 검증합니다.