모바일 뷰어 기능 고도화 작업 완료

모바일 뷰어(viewer.html) 환경에서도 프리젠테이션(에디터) 모드와 동일한 화려한 시각 효과가 적용되도록 업데이트

주요 변경 사항 요약

1. 객체 애니메이션 (GSAP Animations) 적용

• 문제 해결: 뷰어에서 잘못된 속성(animation 대신 animPreset)을 참조하여 애니메이션이 동작하지 않던 버그 수정
• 고급 애니메이션 추가: 기존 에디터에만 존재하던 텍스트 애니메이션 효과(typewriter, text-scramble, text-explode, count-up)의 GSAP 로직을 뷰어의 runAnimations() 함수에 모두 포팅하여 정상 작동하도록 구현

2. 슬라이드 장면 전환 효과 (Scene Transitions)

• 전환 엔진 탑재: 단순한 CSS 스와이프 슬라이드 효과 대신, slide.transition.effect 데이터를 기반으로 GSAP 트랜지션이 적용되도록 뷰어의 goTo() 함수를 전면 재작성
• 지원 효과: crossfade, slide-left, slide-right, slide-up, curtain, zoom-blur, cube 등 에디터에서 설정한 모든 고급 화면 전환 효과를 뷰어에서도 부드럽게 적용

3. 동적 배경 (Dynamic Backgrounds) 수정

• 변수 맵핑 수정: renderDynamicBackground와 입자 생성 로직(initParticles, initGrid)에서 참조하는 매개변수 이름이 데이터베이스 속성(예: auroraColor1 → auroraC1, particleDensity → partDens)과 일치하지 않아 배경이 그려지지 않던 문제 수정
• 이제 오로라(Aurora), 파티클(Particles), 격자(Grid) 동적 배경이 정상적으로 표시

4. HTML 내보내기 템플릿 통합 반영

• 유튜브 상호작용: 내보내기 된 파일에서도 pointer-events: auto 속성을 적용해 유튜브 영상 시청이 가능하게 수정
• 모든 애니메이션 및 전환 효과: typewriter, text-scramble 등의 최신 텍스트 애니메이션과 GSAP 장면 전환 로직이 모두 HTML 파일 내 <script>로 추출되어 브라우저에서 동일한 애니메이션 효과 적용
• 동적 배경 캔버스: 뷰어와 똑같이 오로라 및 파티클을 렌더링하는 캔버스 엔진 코드가 추출 HTML에 탑재

5. MP4 영상 내보내기 렌더러(Puppeteer) 동기화

• 글로벌 타임라인 스크러빙: MP4를 생성할 때 각 프레임마다 시간을 수동으로 감는(Scrub) 로직이 기존에는 slide-0 타임라인에만 국한되어 있었으나, 이를 gsap.globalTimeline으로 확장하여 슬라이드 간 장면 전환(Transitions) 효과까지 완벽하게 영상 프레임에 녹화되도록 수정
• 타이머의 GSAP화: setInterval (텍스트 타이핑/스크램블 애니메이션)이나 setTimeout (장면 전환 이후 처리)과 같은 브라우저 네이티브 타이머는 MP4 렌더링 시 프레임 캡처 속도와 엇나가는 현상을 gsap.delayedCall 및 gsap.to(dummy)로 교체하여 프레임과 애니메이션이 0.1초 단위까지 100% 동기화(Sync) 되도록 개선