웹진의 본질적인 특성(가로폭 고정, 세로로 길게 스크롤되는 단일 페이지)에 맞추어 에디터의 구조를 재편하고, 사용성을 높이기 위해 불필요한 UI를 제거하며 필요한 애니메이션 기능을 가볍게 복구합니다.

User Review Required

IMPORTANT

애니메이션 구현 방식 확인
이전에는 GSAP이라는 무거운 라이브러리를 사용해 애니메이션(타임라인 등)을 구현했으나, 이번에는 GSAP 없이 바닐라 자바스크립트(Vanilla JS)와 CSS Transition을 활용하여 스크롤 시 화면에 나타나는(Scroll Reveal) 형태의 가벼운 '상하좌우 슬라이드/페이드인' 애니메이션으로 대체하려고 합니다. 이렇게 진행해도 괜찮으신가요?

Proposed Changes

views/admin/_webzine_editor_core.php

1. 에디터 캔버스 구조 변경 (단일 페이지화)

  • 최근 추가했던 '슬라이드(페이지) 추가/삭제/이전/다음' 네비게이션 UI를 상단 바에서 제거합니다.
  • pages 배열 대신 단일 캔버스의 HTML 데이터를 저장하는 방식으로 되돌리거나, pages 배열을 사용하되 UI상에서는 단일 페이지만 편집하도록 고정합니다.
  • 캔버스 너비는 webzine_canvas_width 설정값을 우선적으로 반영하여 에디터 뷰에 적용합니다. (세로 높이는 콘텐츠에 따라 늘어나도록 하거나, 에디터 영역 내에서 스크롤되도록 처리)

2. 상단 및 좌측 툴바 다이어트

  • 상단 툴바: '요소삭제' 버튼 삭제(Delete 키로 대체됨), '전체저장' 버튼 삭제(우측 상단의 기본 저장 버튼 및 자동저장 사용). Undo/Redo 버튼은 좌측에 배치하고 PC/Mobile 화면 모드 버튼은 우측에 유지합니다.
  • 좌측 툴바: '배경' 요소 추가 버튼을 삭제합니다. (배경색이 필요한 경우 도형을 추가하여 설정하도록 유도)

3. 속성 패널 다이어트 및 애니메이션 복구

  • 우측 속성 패널에서 '배경' 탭/패널을 완전히 삭제합니다.
  • 삭제했던 '애니메이션' 탭을 다시 추가합니다.
  • GSAP 없이 CSS 클래스 기반으로 요소의 나타남(Fade In, Slide Up/Down/Left/Right)을 설정할 수 있도록, 애니메이션 종류, 재생 시간(Duration), 딜레이(Delay)를 설정하는 UI를 부활시킵니다.
  • 뷰어(프론트엔드)에서 스크롤을 내릴 때 해당 요소가 화면에 나타나면 CSS 기반으로 애니메이션이 재생되도록 (Intersection Observer 활용) 구현합니다.

4. JavaScript 오류 수정

  • 에디터 내 변수 중복 선언(Identifier 'canvas' has already been declared) 오류를 수정합니다. (Scope 문제 해결)
  • Unexpected end of input 구문 오류를 찾아 수정합니다.

templates/default_light/webzine/view.php

  • 프론트엔드 뷰어에서도 다중 슬라이드(Swiper.js) 방식을 제거하고, 단일 페이지 안에서 가로폭을 맞춘 상태로 세로 스크롤이 되도록 구조를 단순화합니다.
  • 스크롤 시 요소들이 지정된 애니메이션 속성에 맞추어 등장하도록 가벼운 JS(Intersection Observer) 스크립트를 추가합니다.

Verification Plan

Manual Verification

  • 에디터 진입 시 JavaScript 오류가 발생하지 않는지 확인합니다.
  • 불필요한 슬라이드 탭 및 버튼들이 사라지고, 캔버스가 지정된 가로폭을 유지하며 세로로 자유롭게 늘어나는지 확인합니다.
  • 우측 애니메이션 탭에서 속성을 설정한 뒤, 저장 후 사용자 화면(프론트)에서 스크롤을 내릴 때 요소가 정상적으로 나타나는지 확인합니다.