현재 xslide 모듈(GSAP 애니메이션 기반)을 웹진 에디터에 그대로 가져와 사용하면서 구조가 복잡해지고 무거워진 상태입니다. 웹진의 본질(상하좌우 자연스러운 페이지 전환과 콘텐츠 전달)에 집중하기 위해 다음과 같이 구조를 전면 개편할 것을 제안합니다.
1. 렌더링 엔진 변경 (GSAP 제거 -> Swiper.js 도입)
- 제거: 무겁고 복잡한 타임라인 애니메이션을 위한
GSAP라이브러리를 제거합니다. - 도입: 모바일 터치 스와이프와 상하좌우 부드러운 전환(Slide, Fade 등)에 최적화된 Swiper.js를 웹진/매거진의 코어 뷰어 엔진으로 사용합니다.
2. 웹진 섹션/블록 JSON 데이터 구조 확정
복잡한 애니메이션 속성을 덜어내고, "페이지(Section) 단위"의 직관적인 JSON 구조를 설계합니다.
json
{
"canvasWidth": 1000,
"pages": [
{
"id": "page_1",
"background": {
"type": "color", // color, image, gradient
"value": "#ffffff"
},
"transition": "vertical", // vertical, horizontal, fade
"elements": [
{
"id": "elem_1",
"type": "text", // text, image, shape, button, video
"content": "<h1>웹진 타이틀</h1>",
"position": { "x": 100, "y": 200, "width": 800, "height": 100 },
"style": {
"fontFamily": "Pretendard",
"fontSize": 48,
"color": "#333333",
"textAlign": "center"
}
}
]
}
]
}
3. 에디터 UI/UX 단순화 (webzine_editor.php)
- 애니메이션 탭 삭제: 우측 속성 패널에서 타임라인, 애니메이션 설정 탭을 완전히 제거합니다.
- 페이지(슬라이드) 관리 강화: 하단이나 좌측에 '페이지 썸네일 리스트'를 두고, 슬라이드(페이지) 단위로 추가/삭제/순서변경(Sortable)을 직관적으로 할 수 있게 만듭니다.
- 프레임 캔버스: 요소의 드래그 앤 드롭, 리사이징 기능은 유지하되, 저장 시 위 JSON 구조로 깔끔하게 떨어지도록 파서 로직을 다시 작성합니다.
4. editor_xzine.php 의 iframe 방식 제거
게시판에서 웹진 형태의 글을 작성할 때 사용되는 editor_xzine.php가 무거운 public/xslide/index.html을 iframe으로 불러오고 있습니다.
- 개선: iframe을 제거하고,
webzine_editor.php에서 구축한 가벼운 순수 JS 기반의 에디터 모듈을 컴포넌트화하여 직접 삽입합니다. 이렇게 하면 사이트 전체의 톤앤매너가 일치하고 데이터 연동(PostMessage 대신 직접 폼 서밋)이 훨씬 안정적입니다.
5. 향후 매거진(Magazine) 뷰어 확장에 대비
웹진(단일 이슈)과 매거진(여러 이슈의 모음) 뷰어 모두 동일한 JSON을 파싱하여 Swiper.js 로 렌더링하도록 Viewer 클래스를 분리하여 개발합니다. 이는 추후 독자적인 뷰어 페이지(/viewer?id=3)를 구축할 때 코드 재사용성을 극대화합니다.
User Review Required
IMPORTANT
이 작업은 webzine_editor.php 의 2,900줄이 넘는 코드를 크게 다이어트하고 로직을 재작성하는 대규모 리팩토링입니다.
- 애니메이션(요소가 날아오거나 페이드인 되는 등) 기능을 완전히 배제하고 페이지 전환(스와이프)만 지원하는 것에 동의하시나요?
- 제안된 JSON 구조와 개발 방향에 수정하고 싶은 부분이 있으신지 확인 부탁드립니다.
댓글 0