(조잡한 효과 전면 대체 및 고급화)

이 계획서는  xslide.kr 의 프리미엄 디자인 강화를 위해 기존의 단순하거나 조잡했던 동적 배경(특히 파티클, 플라즈마, 3D 격자 등)을 해상도 독립적이며 매우 트렌디하고 세련된 벡터/그라디언트 기반 동적 배경 시스템으로 개편하기 위한 설계안입니다.

사용자 검토 요구사항

IMPORTANT

  • 조잡한 효과의 고급 대체안:
    1. particles  (파티클) ➔ "웨이브 (Liquid Wave)": 조잡한 먼지 날림 대신, 애플 스타일의 반투명하고 리퀴드한 사인파 레이어가 겹쳐 흐르는 프리미엄 연출.
    2. grid  (3D 격자) ➔ "토포 라인 (Abstract Contour Lines)": 부자연스럽고 거친 격자선 대신, 정밀 기술/디자인 슬라이드에 적합한 유려한 지형학 등고선(Topographic Wave Lines) 연출.
    3. plasma  (플라즈마) ➔ "글래스모피즘 (Glassmorphic Flow)": 색 왜곡이 심하고 거칠었던 노이즈 플라즈마 대신, 최근 가장 유행하는 흐릿한 프로스트 글래스(Frosted Glass) 카드 오브젝트가 부드러운 그라디언트 위를 유영하는 감각적인 연출.
  • 다크 & 라이트 최적화: 모든 벡터 및 CSS 요소들은 해상도에 무관하게 깨짐이 없이 선명하게 유지되며, 다양한 화면 크기에 맞춰 스케일링됩니다.
  • 동기화 보장: 에디터( editor.js ), 프레젠테이션 내보내기용 스크립트( events.js ), 공유 뷰어( viewer.html ) 전반에 걸쳐 동일한 디자인과 모션이 동일하게 실행되도록 통합합니다.

제안된 변경 사항

1. 에디터 UI 및 레이블 변경

[MODIFY] 

  • data-bg-dynamic="particles" 의 레이블을 **"파티클"**에서 **"웨이브"**로 변경하고, 아이콘을  ph-sparkle 에서  ph-wave-sine 으로 수정합니다.
  • data-bg-dynamic="grid" 의 레이블을 **"3D 격자"**에서 **"토포 라인"**으로 변경하고, 아이콘을  ph-grid-nine 에서  ph-activity 로 수정합니다.
  • data-bg-dynamic="plasma" 의 레이블을 **"플라즈마"**에서 **"글래스"**로 변경하고, 아이콘을  ph-waves 에서  ph-square-half 로 수정합니다.
  • 세부 옵션 패널의 텍스트 레이블 역시 테마에 어울리도록 수정합니다 (예: "격자 선 색상" ➔ "라인 색상", "입자색" ➔ "웨이브 색상" 등).

2. 프리미엄 동적 배경 프리셋 상세 설계

①  aurora  (오로라)

  • 디자인: macOS/Siri 스타일의 고급스러운 모핑 그라디언트 메쉬.
  • 구현: 3개의 거대한 블러 원형 레이어( blur(120px) )를 배치하고, 각각 독자적인 느린 타원 궤도로 부드럽게 순환시킵니다.

②  particles  (웨이브 / Wave)

  • 디자인: 애플 테크 프레젠테이션 스타일의 반투명하고 리퀴드한 3중 사인파(Sine Wave) 레이어의 흐름.
  • 구현: Canvas API를 활용해 위상과 파장 주기가 다른 3개의 물결선을 그리고 겹쳐 흐르게 만듭니다.

③  grid  (토포 라인 / Topo Lines)

  • 디자인: 첨단 테크 및 기획 발표에 최적화된 물리학 등고선/지형선 연출.
  • 구현: Canvas를 사용하여 유기적으로 굽이치는 4~5줄의 추상 등고선 라인을 렌더링하고 위상을 매우 느리게 변화시킵니다.

④  liquid  (리퀴드 / 모핑 블롭)

  • 디자인: 젤리나 물방울처럼 부드럽게 유기적으로 결합하고 떨어지는 모핑 액체.
  • 구현: CSS  border-radius  키프레임 애니메이션과  mix-blend-mode: screen 을 조합해 다채로운 색감의 물방울들이 흐느적거리는 느낌을 연출합니다.

⑤  breathing  (숨쉬기 / 스튜디오 조명)

  • 디자인: 고급 스튜디오 조명 느낌의 중앙 하이라이트 펄스.
  • 구현: 중앙의 소프트 방사형 그라디언트 광량이 깊고 차분한 호흡 템포에 맞춰 크기와 불투명도가 스케일링됩니다.

⑥  shifting  (시프팅 / 코스믹 그라디언트)

  • 디자인: 은은한 새벽하늘을 형상화한 다중 리니어 그라디언트의 부드러운 순환.
  • 구현:  background-size: 400% 400%  그라디언트를 대각선 방향으로 미세하게 슬라이딩하여 무한 순환시킵니다.

⑦  plasma  (글래스 / Glassmorphic Flow)

  • 디자인: 흐릿한 파스텔 배경 위에 투명한 프로스트 글래스(반투명 유리) 패널들이 떠다니는 세련된 트렌디 연출.
  • 구현: 파스텔톤 백드롭 그라디언트를 바탕에 깔고, 흰색 미세 테두리와 흐림 필터( backdrop-filter: blur(20px) ), 그림자를 가진 라운드 패널 3~4개를 3D 레이어화하여 공간감 있게 유영시킵니다.

⑧  spotlight  (스포트라이트)

  • 디자인: 조명이 천천히 움직이며 캔버스를 훑는 무대 효과.
  • 구현: GSAP을 활용하여 스포트라이트 중심점을 8자 무한 궤적( figure-8 ) 형태로 정밀하게 회전/이동시킵니다.

3. 파일별 변경 계획

[MODIFY] 

  • 동적 배경 관련 레이블과 아이콘 클래스를 교체합니다.

[MODIFY] 

  • window.applyDynamicBackground  함수 내부의 분기를 전면 리팩토링합니다.

[MODIFY] 

  • 뷰어의  renderDynamicBackground  및  initParticles ,  initGrid  함수를 에디터 사양과 동일한 수준으로 업그레이드 및 동기화합니다.

[MODIFY] 

  • HTML 내보내기 템플릿 코드의  initDynamicBGs  내 드로잉 루틴 및 태그 빌더를 신규 사양으로 변경합니다.

검증 계획

  • 에디터 내 동적 배경 옵션을 번갈아 선택하며 실시간 썸네일과 에디터 화면에 끊김 없이 고화질 렌더링이 이루어지는지 검사합니다.
  • 슬라이드 뷰어 및 HTML 저장 파일에서 등고선(Grid), 웨이브(Particles), 글래스모피즘(Plasma) 등의 연출이 정상 동작하는지 검증합니다.