이 계획은 텍스트 인라인 포맷팅(글자 단위 스타일링), 새로운 GSAP 애니메이션 프리셋 추가, 그리고 GSAP 기반의 동적 배경화면 구현을 위한 구체적인 단계를 설명합니다.

사용자의 검토가 필요한 사항

IMPORTANT

현재 텍스트 편집은 우측 속성 패널의  <textarea> 에 의존하고 있습니다. 인라인  contenteditable  리치 텍스트 편집으로 전환하면 사용자가 캔버스 위에서 직접 텍스트를 편집하게 됩니다. 텍스트를 드래그하여 범위를 지정할 때 나타나는 **플로팅 텍스트 툴바(Floating Toolbar)**를 추가하여 개별 글자/단어 단위로 폰트, 크기, 굵기, 색상을 지정할 수 있도록 구현할 계획입니다. 이에 동의하시나요?

제안하는 변경 사항

1. 인라인 텍스트 편집 및 포맷팅

기존의 통짜 텍스트 편집을 인라인  contenteditable  방식으로 대체하고,  document.execCommand 를 활용해 글자 단위 스타일링을 가능하게 합니다.

[MODIFY] index.html

  • 숨겨진 플로팅 텍스트 툴바(폰트 종류, 크기, 볼드, 이탤릭, 색상 선택기) UI 추가.
  • 플로팅 툴바를 위한 CSS 스타일 추가.

[MODIFY] assets/js/modules/editor.js

  • dblclick  이벤트 리스너에서 사이드 패널 입력창으로 포커스를 옮기는 대신,  .text-element-inner 에 직접  contenteditable="true"  속성을 부여하고 포커스 처리.
  • blur  (포커스 잃음) 이벤트 발생 시, 수정된  innerHTML 을  obj.text  모델에 다시 저장.
  • selectionchange  이벤트를 감지하여 텍스트 범위 지정 시 플로팅 툴바가 알맞은 위치에 나타나도록 로직 구현.

[MODIFY] assets/js/modules/events.js

  • 플로팅 툴바의 버튼들에  document.execCommand('fontName', ...) ,  document.execCommand('foreColor', ...)  등을 실행하는 이벤트 리스너 추가.

2. 새로운 GSAP 애니메이션 효과

요소들에 생동감을 더할 새로운 GSAP 애니메이션 프리셋을 추가합니다.

[MODIFY] index.html

  • 애니메이션 프리셋  <select id="anim-preset"> 에 새로운 옵션 추가:
    • wave-in  (텍스트가 바다 파도처럼 등장)
    • 3d-flip-reveal  (X축 회전하며 3D 플립 등장)
    • elastic-drop  (위에서 탄성 있게 떨어짐)
    • neon-trace  (테두리가 불 켜지듯 그려짐)
    • morph-scale  (찌그러진 상태에서 부드럽게 팽창)
    • cinema-reveal  (검은 마스크가 양쪽에서 열리며 등장)
    • shockwave  (주변에 파문이 퍼지듯 등장)
    • particle-burst  (파티클이 폭발하며 등장)

[MODIFY] assets/js/modules/animations.js

  • playElementGSAP ,  buildFullTimeline ,  renderPresentationSlide  함수에 새 프리셋들을 위한 GSAP 로직 추가.
  • 예시:  wave-in 은 텍스트를  span 으로 분해하여 사인(Sine) 함수 형태의 stagger를 적용하고,  3d-flip-reveal 은  transformPerspective 와  rotationX/Y 를 조합하여 진짜 3D 공간감을 연출.

3. GSAP 동적 그라데이션 배경

기존 CSS 애니메이션 기반의  aurora  배경을 GSAP 애니메이션으로 다시 작성하여 부드러운 성능과 실시간 제어(속도/색상 즉각 반영)를 가능하게 합니다. 또한 새로운 GSAP 동적 배경을 추가합니다.

[MODIFY] index.html

  • 동적 배경  <select> 에 새로운 옵션 추가 (Liquid Gradient, Breathing Glow, Shifting Hue, Plasma Wave, Spotlight).
  • 인스펙터(속성 패널)에 이 새로운 배경들을 위한 상세 컨트롤 UI 추가.

[MODIFY] assets/js/modules/editor.js

  • applyDynamicBackground  함수에서  aurora  효과를 CSS 키프레임 대신  gsap.to() 를 사용하도록 변경.
  • 새로 추가되는 배경(Liquid Gradient 등)의 GSAP 트위닝 로직 구현.
  • 배경이 바뀔 때 기존 애니메이션이 메모리에 남지 않도록  gsap.killTweensOf(bgWrap)  처리.

[MODIFY] assets/js/modules/events.js

  • 사용자가 속성 패널에서 배경 설정(속도, 색상 등)을 변경할 때 GSAP 트윈에 실시간으로 반영되도록 바인딩 업데이트.

검증 계획

수동 검증

  • 텍스트 스타일링: 캔버스에서 텍스트를 더블클릭하고 특정 단어를 드래그한 뒤, 플로팅 툴바에서 볼드 처리와 색상을 변경해봅니다. 편집을 종료했을 때 개별 글자의 스타일이 유지되는지 확인합니다.
  • 애니메이션: 텍스트 요소에  wave-in 과  3d-flip-reveal 을 적용하고 "애니메이션 재생" 버튼을 눌러 GSAP 타임라인이 문제없이 실행되는지 확인합니다.
  • 배경화면: 슬라이드 배경을  aurora (GSAP 버전),  Liquid Gradient  등으로 변경해 봅니다. 속성 패널에서 속도와 색상을 변경했을 때 끊김(flickering) 없이 즉각적으로 반영되는지 확인합니다.