xSlide 개발실 - xSlide - 신개념 프리미엄 슬라이드 매니저

로그인 회원가입

xSlide 개발실

[xSlide] 도형 테두리 버그 수정 및 이미지 오버레이 기능 추가

도형 속성창에서 테두리 그라데이션 선택 시 입력 영역이 위로 튀는 버그를 수정하고, 이미지 속성에 사용자가 요청한 '오버레이(단색/그라데이션)' 기능을 구현하기 위한 계획입니다. User Review Required IMPORTANT 이미지 오버레이 기능은 CSS의 다중 배경(Multiple Backgrounds) 기능인 linear-gradient(rgba, rgba), url(...) 방식을 사용하여 기존 이미지 위에 색상 필터(단색/그라데이션)를 입히는 방식으로 렌더링됩니다. 이 방식은 퍼포먼스에 영향을 주지 않으면서 투명도 및 각도 조절을 완벽하게 지원합니다. Open Questions 이미지 오버레이가 설정된 경우 기존의 혼합 모드(Blend Mode)는 오버레이된 최종 이미지와 배경 사이에 적용됩니다. 이 동작 방식이 의도와 부합하나요? Proposed Changes 1. 도형 테두리(Stroke) UI 버그 수정 [MODIFY] inspector.js shapeStrokeType이 'gradient'로 변경될 때 rowShapeStroke 컨테이너 전체를 숨기던 코드를 수정합니다. 선 두께(shape-stroke-width) 입력란은 남겨두고 색상 선택란(shape-stroke-color)만 숨기도록 분리 처리하여, UI 요소가 튀어오르거나 선 두께 설정을 할 수 없게 되는 버그를 해결합니다. 2. 이미지 속성창 '오버레이' 패널 추가 [MODIFY] index.html 이미지 속성 영역에 image-overlay-type (없음/단색/그라데이션) 셀렉트를 추가합니다. 단색 선택 시: 색상 및 투명도 슬라이더가 포함된 패널 추가 그라데이션 선택 시: 시작 색상(투명도 포함), 끝 색상(투명도 포함), 방향 각도 슬라이더가 포함된 패널 추가 [MODIFY] dom.js 새로 추가된 HTML 요소들의 ID를 캐싱하여 DOM 객체에 바인딩합니다. [MODIFY] inspector.js 객체 선택 시 오버레이 관련 속성(타입, 색상, 투명도, 각도 등)을 패널 UI에 동기화하는 로직을 추가합니다. 패널 내의 입력값 변경 시 객체 데이터(selectedObject)를 업데이트하고 캔버스를 다시 그리는 이벤트 리스너를 추가합니다. 3. 오버레이 렌더링 엔진 구현 [MODIFY] editor.js [MODIFY] auth.js generateObjectInnerHtml의 image 타입 처리 부분에서 imageOverlayType을 확인합니다. 단색인 경우 linear-gradient의 시작/끝 색상을 동일하게 설정하고, 그라데이션인 경우 설정된 각도 및 rgba 값에 맞추어 background-image 속성에 적용합니다. 4. 언어팩 업데이트 [MODIFY] ko.js 및 기타 언어팩(en, ja, zh, es) inspector 객체 내에 "image_overlay": "오버레이" 등 새롭게 추가된 UI 라벨에 대한 다국어 번역을 추가합니다. Verification Plan Manual Verification 도형 선택 후 테두리를 그라데이션으로 변경할 때 테두리 두께 설정 항목이 사라지지 않고 UI가 튀지 않는지 확인합니다. 이미지를 삽입하고 속성 창에서 오버레이를 '단색'으로 변경한 후 투명도를 조절하여 캔버스 렌더링이 즉시 반영되는지 확인합니다. 오버레이를 '그라데이션'으로 변경하고 시작/끝 색상 및 투명도, 각도를 조절하여 그라데이션 필터가 정확하게 반영되는지 확인합니다. 언어를 변경하여 오버레이 텍스트가 정상적으로 번역되는지 확인합니다.

구현 계획서 - 다국어(i18n) 최종화 및 스페인어 추가

이 계획서는 스페인어 지원을 추가하고, 기존 한국어, 영어, 일본어, 중국어 및 스페인어 전반에 걸쳐 번역되지 않은 UI 요소(속성 패널, 상단 버튼, 알림 메시지 등)의 다국어 처리를 최종 완료하기 위한 상세 설계안입니다. 사용자 검토 필요 사항 IMPORTANT 새로운 스페인어 언어팩 파일인 es.js가 생성됩니다. index.html, viewer.html, auth.html 파일이 업데이트되어 언어 선택기에 스페인어가 추가되고, 스페인어 팩을 로드하도록 수정됩니다. 헤더, 사이드바 속성, 단축키 모달 및 다이얼로그 내 번역되지 않은 하드코딩 텍스트가 data-i18n 속성을 사용하거나 JS를 통해 동적으로 번역되도록 구조를 개선합니다. 변경 제안 사항 다국어 엔진 및 언어팩(Language Packs) [MODIFY] index.js 지원 언어 목록(supported)에 'es'를 추가합니다. 브라우저 언어 감지 로직에 스페인어(es) 감지를 추가합니다. <optgroup> 태그의 label 속성 등 일반 텍스트가 아닌 속성 번역을 지원하기 위해 applyDOM 함수에 data-i18n-label 속성 처리 로직을 추가합니다. [NEW] es.js 스페인어 번역 전체를 담당할 언어팩 파일을 생성합니다. (인증, 프로젝트, 에디터, 툴바, 속성 패널, 슬라이드, 장면 전환, 뷰어, 토스트, 에러 메시지 등 전체 번역 포함) [MODIFY] ko.js 속성 설정 값, 상단 버튼, 알림/토스트 메시지, 단축키 안내, 장면 전환 효과명 등 누락된 모든 다국어 키-값 쌍을 보강합니다. [MODIFY] en.js 추가된 모든 다국어 키에 대응하는 영어 번역을 보강합니다. [MODIFY] ja.js 추가된 모든 다국어 키에 대응하는 일본어 번역을 보강합니다. [MODIFY] zh.js 추가된 모든 다국어 키에 대응하는 중국어 간체 번역을 보강합니다. 웹 페이지 (HTML) [MODIFY] index.html <head> 스크립트 로드 블록에 es.js를 추가합니다. 에디터 상단 언어 선택 드롭다운에 스페인어 옵션(<option value="es">Español</option>)을 추가합니다. 가져오기, 내보내기, 단축키 등 하드코딩된 헤더 버튼에 data-i18n 속성을 적용합니다. 우측 속성 패널의 모든 라벨, 탭, 입력 폼 설명, 선택 드롭다운 옵션에 data-i18n 및 data-i18n-label 속성을 적용합니다. 슬라이드 가져오기, 내보내기, AI 마법사, 단축키 안내, 장면 전환 효과 설정, 템플릿 등록 모달 내 모든 텍스트에 다국어 속성을 추가합니다. [MODIFY] viewer.html <head> 블록에 es.js 스크립트 로드를 추가합니다. 뷰어 하단 언어 선택기에 스페인어 옵션을 추가합니다. 뷰어 제어 툴바 버튼의 툴팁, 타이틀, 알림 메시지를 다국어 처리합니다. [MODIFY] auth.html <head> 블록에 es.js 스크립트 로드를 추가합니다. 로그인/가입 화면 우측 상단 언어 선택기에 스페인어 옵션을 추가합니다. 로그인 및 회원가입 폼 라벨, 플레이스홀더, 가입 완료 안내, 관리자 대시보드(사용자 목록, 가입 승인 등)의 테이블 헤더 및 설명글에 data-i18n을 적용합니다. 스크립트 파일 (JS Modules) [MODIFY] app.js 로딩 단계 진행 메시지 및 AI 생성 실패 등 하드코딩된 alert/toast 메시지를 window.t() 동적 번역으로 대체합니다. [MODIFY] auth.js 프로젝트 비어있음 문구, 승인 완료/승인 거절 알림, 로딩 중 토스트 메시지를 window.t() 동적 번역으로 대체합니다. [MODIFY] events.js 복제/삭제 확인 프롬프트, 비디오 렌더링 상황 안내, 공유 링크 생성 및 복사 완료 알림을 window.t() 동적 번역으로 대체합니다. [MODIFY] inspector.js 이미지 업로드 실패, 이전 배경 없음 알림, 차트 데이터 붙여넣기 힌트 등을 window.t() 동적 번역으로 대체합니다. [MODIFY] table_editor.js 표 편집기에서 행/열 삭제 시의 유효성 검사 alert 메시지를 window.t() 동적 번역으로 대체합니다. [MODIFY] template_export.js 템플릿 내보내기 시 제목 필수 입력 안내, 성공 및 실패 알림을 window.t() 동적 번역으로 대체합니다. 검증 계획 수동 검증 브라우저에서 서비스에 접속합니다. 아래 화면들의 언어 선택 드롭다운에서 스페인어(Español)를 선택합니다. 로그인 / 프로젝트 관리 화면 (auth.html) 메인 에디터 화면 (index.html) 프레젠테이션 뷰어 화면 (viewer.html) 모든 버튼, 속성 패널 탭/옵션, 단축키 안내창, 모달 팝업의 텍스트가 자연스러운 스페인어로 번역되어 출력되는지 확인합니다. 한국어, 영어, 일본어, 중국어도 누락 없이 기존 번역과 신규 다국어 요소가 잘 출력되는지 교차 확인합니다. 슬라이드 복제/삭제, 내보내기 등 다이얼로그나 토스트 팝업 동작을 유도하여 팝업 텍스트가 설정된 언어로 바르게 표시되는지 검증합니다.

블로그글 15장 슬라이드 제작 프롬프트

기존 블로그 글을 제시하면 15장 분량의 영상용 슬라이드로 재구성합니다.강력한 후킹포인트의 표지와 13장의 본문, 1장의 결론으로 구성합니다.제시한 블로그 글을 중심으로 필요시 검색을 통해 내용을 보완하여 슬라이드 장 수를 채웁니다. [표지]# OpenAI GPT-4o 이미지 생성의 명과 암## 디자이너 없이 몇 초 만에 완성하는 슬라이드 [페이지]# 이미지 대중화 시대의 도래## GPT-4o 네이티브 이미지 생성- 2025년 3월, OpenAI의 획기적인 네이티브 이미지 모델 공개- 디자이너의 손길 없이 초 단위로 비주얼 마케팅 에셋 확보 가능## 보편화가 가져온 숨겨진 진실- 모두가 고품질 비주얼을 제작함에 따라 개별 디자인 차별화가 소멸- 오히려 템플릿 복제와 획일화로 인한 브랜딩 피로도 상승> 기술이 쉬워질수록 비주얼의 퀄리티보다 메시지의 기획력이 차별성을 가릅니다. 형식으로 페이지 별로 # 타이틀 1개, ## 소타이틀 2개, 소제목별 - 불릿 구분 내용 2~3줄, 특별히 페이지별 강조문구가 있을 경우 >로 표시하고, 페이지 구분은 --- 로 작성합니다. 블로그 글을 그대로 영상으로 제작하기 때문에 내용과 순서를 지켜 슬라이드 내용을 작성합니다.위 형식의 md 파일로 다운로드 받을 수 있게 합니다.

마크다운 기반 로컬 슬라이드 생성 개선 및 AI 요소 제거 계획

템플릿 상세 보기 페이지에서 제공하는 "AI 자동 생성 적용" 기능에서 외부 AI API(Claude 등) 호출을 완전히 제거하고, 에디터에 구현된 고성능 클라이언트 사이드 마크다운 파싱 및 스타일 매핑 엔진을 활용하여 즉시 프로젝트를 생성하도록 개선합니다. 사용자 검토 요구 사항 IMPORTANT 주요 변경 사항 및 개선점 AI 관련 입력 제거: 기존 템플릿 뷰 페이지의 AI 생성 모달 내 "생성할 슬라이드 장 수", "AI 모델", "Claude API Key" 입력창을 완전히 삭제합니다. 마크다운 파일 첨부 기능 추가: 템플릿 뷰 페이지의 AI 생성 모달에 .md 또는 .txt 마크다운 파일을 끌어다 놓거나 선택하여 업로드할 수 있는 파일 첨부 기능을 제공합니다. 안내 문구 수정: 모달 설명 및 플레이스홀더 텍스트를 "블로그 글, 책 내용, 보고서 등으로 가공된 마크다운 파일을 붙여넣기 하거나 첨부하세요."로 수정합니다. 로컬 파싱 연동: "슬라이드 생성 시작" 클릭 시 외부 AI를 호출하지 않고, 입력된 텍스트를 sessionStorage에 임시 저장한 후 에디터(app.js)로 리다이렉트합니다. 에디터가 이를 감지하여 로컬에서 즉시 템플릿 테마 스타일을 매핑하고 프로젝트를 생성 및 로드합니다. Proposed Changes 1. 템플릿 뷰 페이지 UI 및 리다이렉트 로직 수정 기존의 Claude AI API 호출 모달을 간소화하고, 마크다운 파일 입력 및 리다이렉트 처리 로직을 적용합니다. [MODIFY] templates/dark_blue/templates/view.php 모달 내 #aiSlideCount (슬라이드 장 수), #aiModelSelect (AI 모델), #aiApiKey (API Key) 입력을 제거합니다. 파일 업로드 제어용 <input type="file" id="aiFileInput" accept=".md,.txt"> 및 "파일 선택" 버튼을 추가합니다. 모달 헤더 및 설명 문구를 마크다운 가이드로 변경합니다. startAiGenerate() 함수를 수정하여: 텍스트 입력창 또는 파일에서 읽은 마크다운 본문을 읽어와 유효성 검사 수행. 마크다운 원본을 sessionStorage.setItem('xslide_import_markdown', sourceText)로 저장. 에디터 경로인 getEditorUrl() + '?applyTemplate=' + templateId + '&aiMode=true&importSource=session'로 즉시 리다이렉트합니다. 파일 선택(handleAiFileChange) 및 삭제(removeAiFile) 헬퍼 함수를 추가합니다. [MODIFY] templates/default_light/templates/view.php dark_blue 테마와 동일한 모달 UI 변경 및 startAiGenerate(), 파일 업로드 헬퍼 스크립트를 업데이트합니다. [MODIFY] views/templates/view.php 예비/기본 뷰 템플릿 파일에도 동일하게 UI 수정 및 리다이렉트 로직을 적용하여 동기화합니다. 2. 에디터 로컬 파싱 및 매핑 연동 [MODIFY] assets/js/app.js init() 함수 내 applyTemplate && aiMode === 'true' 조건 처리 부분을 확장합니다. importSource === 'session'인 경우 sessionStorage에서 xslide_import_markdown 값을 읽어옵니다. 본문 텍스트 창 #ai-generate-text에 값을 대입하고 sessionStorage 임시 키를 삭제한 뒤, #btn-start-ai-generate를 클릭하여 기존 로컬 파싱/저장 파이프라인을 자동 트리거합니다. [MODIFY] index.html 스크립트 캐싱 방지를 위해 app.js 버전을 app.js?v=1.0.17로 업데이트합니다. Verification Plan 수동 검증 템플릿 뷰 페이지 모달 확인: http://localhost/xslide_site/board/templates/view/273 페이지에 접속 후 내 슬라이드 적용 -> AI 자동 생성 적용을 차례대로 클릭하여 팝업창을 띄웁니다. UI 요소 변경 검증: 팝업창에서 슬라이드 장 수 조절 드롭다운 및 Claude API Key 입력 부분이 보이지 않고, 마크다운 붙여넣기 창과 파일 업로드 버튼만 정상 노출되는지 확인합니다. 텍스트 복사/붙여넣기 및 리다이렉트 검증: 테스트용 마크다운 파일 내용(표지 + --- + 본문)을 붙여넣고 슬라이드 생성 시작을 누릅니다. 파일 첨부 검증: .md 마크다운 파일을 첨부하여 텍스트 창에 채워진 후 생성 시작을 누릅니다. 에디터 자동 생성 및 이동 검증: 에디터로 리다이렉트된 직후, 로딩 화면의 프로그레스 바가 올라가며 로컬 매핑을 완료하고 정상적으로 슬라이드 편집창이 로드되는지 확인합니다.

xSlide 고기능 강의 레코딩 및 PIP 스튜디오 사양서

본 문서는 강사가 별도의 복잡한 강의 녹화/판서 툴을 사용하지 않고, 오직 xSlide 강의 모드 하나만으로 웹캠 PIP 제어, 고품질 마이크 믹싱, 실시간 화면 레코딩 및 마커 데이터 기반 파이널컷 편집 연동까지 완결하는 시스템 설계서입니다. 1. 웹캠 PIP (Picture-in-Picture) 스튜디오 설계 강의 모드 진입 시 슬라이드 화면 위에 오버레이되는 웹캠 화면을 강사가 자유자재로 컨트롤할 수 있어야 강의 가독성이 극대화됩니다. ┌──────────────────────────────────────────────────────────────┐ │ [ xSlide Lecture Viewer (16:9) ] │ │ │ │ ┌───────────────────────┐ │ │ │ 슬라이드 본문 콘텐츠 │ │ │ │ (텍스트, 차트, GSAP) │ │ │ └───────────────────────┘ │ │ │ │ [웹캠 PIP] ◄── 드래그 이동 가능 │ │ ┌──────────┐ │ │ │ (강사) │ │ │ │ │ ◄── 더블클릭: 형태 전환 │ │ │ │ (원형 <-> 사각형) │ │ └──────────┘ │ └──────────────────────────────────────────────────────────────┘ 💡 구현 기능 명세 자유로운 이동 및 리사이즈 (Draggable & Resizable): pointer-events: auto가 적용된 독립형 PIP 레이어를 설계하여 마우스나 터치 드래그로 슬라이드 내 원하는 곳 어디로든 끊김 없이 이동하게 합니다. 우측 하단 모서리를 드래그하여 웹캠 화면 크기를 10%에서 40%까지 자유롭게 조절하게 만듭니다. PIP 스타일 퀵 토글 (더블 클릭 및 단축키): 원형(Circle) 모드: 슬라이드 본문을 가리지 않고 얼굴 위주로 보여줄 때 사용 (border-radius: 50%). 사각형(16:9) 모드: 강사의 제스처나 상반신을 넓게 보여줄 때 사용 (aspect-ratio: 16/9). 단축키 지원: 강의 중 C 키를 누르면 카메라 온/오프, W 키를 누르면 PIP 형태(원/사각형)를 실시간 전환합니다. 크로마키(Green Screen) 백그라운드 모드: 강사 뒤쪽 배경이 녹색/청색 스크린인 경우, WebGL(또는 간단한 CSS blend-mode/Canvas filter)을 사용해 크리에이터 모드처럼 배경을 지우고 투명한 강사 실루엣만 슬라이드 위에 떠 있도록 처리합니다. 2. 브라우저 Native 기반 고품질 강의 레코딩 시스템 외부 녹화 툴(OBS, 파이널컷 등)이 익숙하지 않은 초보 강사들을 위한 xSlide 브라우저 자체 원클릭 MP4/WebM 녹화 솔루션입니다. [웹캠 비디오 트랙] ─────────┐ ├─► [Canvas + WebRTC Capture] ──► [MediaRecorder] ──► [MP4/WebM 파일] [슬라이드 캔버스 + 판서] ────┘ ▲ │ (AudioContext로 믹싱) [마이크(강사)] + [시스템 소리] ──────────┘ 💡 기술 아키텍처 및 구현 방식 화면 캡처 API (getDisplayMedia): 강의 시작 버튼을 누르면 브라우저 Native 캡처 프롬프트를 띄워 현재 xSlide 강의 탭을 선택하도록 유도합니다. 이렇게 캡처된 MediaStream은 해상도 손실 없이 깨끗한 벡터 해상도를 60fps로 기록합니다. 듀얼 오디오 하이브리드 믹싱: 마이크를 통한 강사의 음성 스트림(getUserMedia)과 슬라이드 안에 내장된 동영상/효과음 등 시스템 오디오 스트림을 브라우저의 AudioContext API를 이용해 하나의 마스터 오디오 트랙으로 합쳐서 인코딩합니다. 소리가 밀리거나 어느 한쪽이 작게 녹음되는 오류를 방지합니다. 실시간 레코더 (MediaRecorder): 믹싱된 비디오 트랙과 오디오 트랙을 MediaRecorder API에 주입하여 클라이언트 브라우저 단에서 고속 압축합니다. 강의 종료 버튼을 누르면 다운로드 다이얼로그가 뜨며, 로컬 컴퓨터에 즉시 MP4/WebM 파일로 저장되므로 서버의 저장 공간이나 트래픽 부하가 전혀 발생하지 않습니다. 3. 프로 강사를 위한 외부 편집기(Final Cut, OBS) 연동 아키텍처 강의 퀄리티를 최상으로 높여 유튜브나 유료 강의 플랫폼에 배포하려는 프로 강사들을 위해, xSlide 하나로 리소스를 만들고 파이널컷에서 최종 컷 편집을 끝내는 고품질 연동 아키텍처입니다. 💡 파이널컷(Final Cut Pro) 및 Premiere Pro 컷 편집 지원 워크플로우 [xSlide 강의 녹화 완료] │ ├───► 고화질 영상 파일 (웹캠 PIP 제외한 '순수 슬라이드+판서' 영상) - (Track A) ├───► 웹캠 전용 고화질 영상 파일 (슬라이드 제외한 '순수 강사 얼굴' 영상) - (Track B) └───► 챕터 마커 데이터 XML (각 슬라이드별 전환 타임스탬프 기록) - (Metadata) │ ▼ [Final Cut Pro / Premiere Pro 가져오기] (XML 로드 시 타임라인 위에 두 트랙이 완벽히 싱크를 맞춰 정렬되며, 슬라이드가 넘어간 위치마다 마커/컷분할 포인트가 자동으로 생성되어 1분 만에 편집 완결!) 더블 트랙 분리 레코딩 (Dual Track Recording) 모드: 녹화 시 화면상에서는 웹캠 PIP를 보며 강사가 편하게 말하지만, 녹화 파일은 **"슬라이드 화면 트랙(Audio 포함)"**과 "강사 카메라 풀화면 트랙" 두 개의 개별 MP4 파일로 분리하여 내보내는 모드를 옵션으로 제공합니다. 이렇게 하면 파이널컷에서 슬라이드 크기와 강사 얼굴 크기를 편집할 때 화질 저하가 전혀 없고, 자막 처리나 화면 배치를 마음대로 편집할 수 있어 다른 툴이 필요 없어집니다. FCPXML / SRT 자막 및 마커 파일 자동 추출: 강의 도중 슬라이드 페이지를 넘길 때마다 xSlide 시스템은 그 시각의 정확한 타임스탬프를 기록합니다. 녹화가 끝나면 영상 파일과 함께 **chapter_markers.fcpxml (파이널컷용 마커 파일)**을 같이 제공합니다. 이 XML 파일을 파이널컷에 드래그하면, 타임라인 상에 슬라이드가 바뀐 지점마다 마커(Marker)가 자동으로 표시되어 강사가 컷 편집 지점을 쉽게 찾고 잘라낼 수 있습니다. 크로마키 전용 배경 전환: 강사 얼굴을 파이널컷에서 투명하게 얹고 싶을 때를 대비해, xSlide 내에서 웹캠 영역의 배경을 단색 그린스크린(#00FF00)으로 강제 채워주는 기능을 제공하여 비전문가도 스튜디오급 합성을 할 수 있게 돕습니다.

xSlide 초고속·고품질 AI 생성 파이프라인 제안서

목표: "50장 생성에 1분 이내 완료" 및 "디자인이 깨지지 않는 완벽한 템플릿 매핑" 1. 기존 AI 생성의 한계와 비효율성 분석 현재 구현 방식(api/ai_generate_template.php)은 모든 좌표(x, y, w, h)와 스타일링 속성(폰트, 컬러, 정렬, GSAP 애니메이션 값)을 AI가 직접 연산하고 생성하도록 되어 있습니다. [원문 텍스트] ──► [Gemini LLM] ──► [모든 좌표 + 스타일 + 애니메이션 + 텍스트 포함 slides_json] (타임아웃!) 🔴 문제점 AI 연산의 병목 및 타임아웃: 장당 수십 개의 CSS 스타일 속성과 위치값을 포함하는 대량의 JSON 데이터를 생성해야 하므로, 10장만 넘어가도 API 출력 토큰 수 한계로 타임아웃이 발생합니다. 디자인 품질의 한계 (Hallucination): LLM은 수학적 좌표 계산에 약합니다. 텍스트가 템플릿 상자 밖으로 넘치거나, 레이아웃이 겹치고, 어설픈 인포그래픽을 억지로 그리려다 디자인이 완전히 깨지는 현상이 발생합니다. 극심한 토큰 낭비: 템플릿에 고정되어 있는 메타데이터와 애니메이션 설정까지 매번 재생성하므로 비용과 트래픽이 낭비됩니다. 2. 해결 방안: "콘텐츠 데이터 - 에디터 템플릿 바인딩" 모델 AI는 오직 **"슬라이드의 논리적 본문 구조(Content)"**만 채우고, 스타일, 좌표, 애니메이션 기본값은 **"에디터 내부의 템플릿 엔진"**이 채워 넣는 구조로 완전히 이원화합니다. [원문 텍스트] ──► [Gemini (최소 정보만 생성)] ──► [초경량 Content JSON] │ ▼ (에디터가 기본 템플릿 프리셋과 결합) [최종 완성 slides_json] 1) AI가 생성하는 초경량 JSON 스키마 (예시) AI는 좌표나 애니메이션 설정을 일절 계산하지 않고, 슬라이드 레이아웃의 성격(Preset ID)과 그에 대응하는 본문 텍스트만 깔끔하게 생성합니다. 이미지 생성이나 인포그래픽 그리기를 철저히 배제합니다. json [ { "slide_index": 1, "layout_preset": "COVER_TITLE", "contents": { "title": "클라우드 서비스 도입 전략", "subtitle": "비용 절감과 인프라 효율화를 위한 실행 로드맵" } }, { "slide_index": 2, "layout_preset": "TWO_COLUMN_LIST", "contents": { "section_title": "도입 배경 및 현재 직면한 과제", "left_col_title": "1. 온프레미스의 한계", "left_col_body": "트래픽 급증 시 서버 다운 빈번, 하드웨어 유지비 연 2억 발생.", "right_col_title": "2. 기술 부채 누적", "right_col_body": "레거시 시스템 마이그레이션 지연으로 신기술 도입 불가." } } ] 2) 에디터 템플릿 엔진(Client-side)의 기본값 병합(Data Binding) 과정 프론트엔드에서 AI 결과물을 받으면, 템플릿 데이터베이스에서 해당하는 layout_preset ID의 오리지널 스타일 정의를 불러옵니다. layout_preset: "TWO_COLUMN_LIST"에 해당하는 원본 오브젝트(예: 좌측 텍스트박스, 우측 텍스트박스, 배경 테마 등)를 생성합니다. 각 오브젝트의 좌표(x, y, w, h), 폰트(font, fontColor, fontSize), 애니메이션(data-anim, animDelay) 속성은 **선택된 템플릿의 완성도 높은 기본값(Default)**을 그대로 상속받습니다. 텍스트 필드의 내용만 AI가 전달해 준 데이터(contents.left_col_body 등)로 갈아 끼웁니다. 3. "50장 생성 1분 이내 완료"를 위한 비동기 병렬 파이프라인 (Map-Reduce) 50장 분량의 긴 글을 요약 및 구조화할 때 발생하는 지연을 극복하기 위해, **서버 백엔드에서 AI API 호출을 여러 개로 쪼개어 병렬로 동시 실행(Multi-Threading/Concurrency)**합니다. [50장 분량 원문] │ ▼ (Step 1: Planner LLM 호출 — 1회, 5초 소요) [전체 목차 & 슬라이드 50장의 Layout ID 설계서 확보] │ ├─► [Worker 1] (1~10번 슬라이드 본문 생성) ──► 비동기 병렬 API 호출 (10초) ├─► [Worker 2] (11~20번 슬라이드 본문 생성) ──► 비동기 병렬 API 호출 (10초) ├─► [Worker 3] (21~30번 슬라이드 본문 생성) ──► 비동기 병렬 API 호출 (10초) ├─► [Worker 4] (31~40번 슬라이드 본문 생성) ──► 비동기 병렬 API 호출 (10초) └─► [Worker 5] (41~50번 슬라이드 본문 생성) ──► 비동기 병렬 API 호출 (10초) │ ▼ (Step 3: Assembler — 0.5초 소요) [각 슬라이드 본문 병합 및 에디터 템플릿 바인딩] ──► 50장 전체 프로젝트 저장 (총 15~20초 소요!) 💡 파이프라인 아키텍처 상세 Step 1 (Planner): 입력 텍스트를 고속 분석하여, 50개 슬라이드의 전체적인 흐름(아웃라인)과 각 슬라이드에 어울리는 레이아웃 프리셋 이름(layout_preset)만 1차로 기획합니다. 이 단계는 응답 텍스트량이 매우 적으므로 3~5초 이내에 완료됩니다. Step 2 (Parallel Workers): 1차로 설계된 50개 슬라이드 목록을 바탕으로, 10장씩 5개 묶음(배치)으로 쪼갭니다. PHP의 curl_multi_init 또는 Node.js의 Promise.all 등을 사용하여 Gemini API에 5개의 요청을 동시에(비동기 병렬) 전달합니다. 각 워크플로우는 좌표나 스타일 데이터를 완전히 배제한 본문 텍스트 요약 구조만 뽑아내기 때문에, 10장을 생성하는 시간이 8~10초를 넘지 않습니다. 병렬로 실행되므로 50장 전체를 요약하는 시간 역시 약 10초 내외로 수렴합니다. Step 3 (Assembler): 각각 돌아온 5개 워커의 JSON 결과물(총 50장)을 하나의 배열로 머지하고, 에디터에 전달하여 템플릿 디자인 기본값과 조립합니다. 4. 기대 효과 타임아웃 100% 극복: 전송/수신하는 텍스트 용량이 1/10 이하로 축소되어 Gemini API 응답속도가 획기적으로 개선되며, 50장을 돌려도 15~20초 내에 연산이 끝납니다. 완벽한 디자인 정렬 보장: 복잡한 인포그래픽을 LLM이 상상해서 어설프게 그리도록 방치하지 않고, 에디터에서 정교하게 레이아웃 매핑 처리를 하므로 50장 전체 슬라이드의 디자인 품질이 흐트러짐 없이 유지됩니다. 비용 절감: 불필요한 토큰 수 소모가 90% 이상 절감되어 AI 호출 비용이 획기적으로 줄어듭니다.

xSlide 4대 핵심 개선사항 및 기술적 해결 방안

xSlide가 글로벌 초일류 솔루션으로 도약하기 위해 제기해주신 4가지 페인 포인트(템플릿 공급, AI 생성 한계, 온라인 강의 기능, 협업 아키텍처)에 대한 구체적이고 실현 가능한 기술 아키텍처 및 해결 전략을 제안합니다. 1. 템플릿 다량 등록 및 수작업 제작 효율화 방안 많은 디자인 템플릿을 수작업으로 올리는 것은 불가피하지만, 그 제작 속도를 10배 이상 끌어올리는 파이프라인을 구축해야 합니다. [디자이너] 피그마(Figma) 디자인 │ ▼ (Figma Plugin / CLI) [자동 파싱] HTML/CSS 및 절대 좌표 추출 │ ▼ (Parser Engine) [xSlide 포맷] slides_json 자동 변환 및 데이터베이스 적재 💡 실현 전략 Figma to xSlide 플러그인 개발 (추천): 디자이너가 코딩이나 에디터 수작업 없이 피그마에서 컴포넌트를 설계하면, 플러그인이 피그마의 레이아웃 트리와 스타일 속성을 읽어 xSlide의 slides_json 포맷으로 즉시 변환해 주는 스크립트를 제작합니다. 이를 통해 디자이너 1명이 하루에 수십~수백 개의 템플릿 레이아웃 프리셋을 등록할 수 있게 됩니다. JSON-based DSL(선언적 템플릿) CLI 구축: 템플릿의 핵심 구성 요소(색상 테마, 레이아웃 그리드, GSAP 프리셋 종류)를 텍스트 설정 파일로 지정하면, 다양한 가로/세로/모바일 비율로 템플릿 배리에이션이 자동 컴파일 및 자동 등록되는 빌드 시스템을 운용합니다. 크라우드소싱 템플릿 마켓플레이스 빌딩: 초기에 모든 템플릿을 자체 제작하는 것은 한계가 있습니다. 크리에이터 생태계를 구축하여 외부 디자이너들이 템플릿을 제작해 등록하고, 판매 수익의 일부를 쉐어받는 오픈 마켓플레이스 형태로 전환합니다. 2. AI 대량 생성(20장) 속도 단축 및 품질 고도화 방안 긴 텍스트(블로그, 스크립트 등)를 바탕으로 20장의 슬라이드를 만드는 프로세스의 핵심 문제는 **"대용량 연산의 병목"**과 **"디자인 스타일링의 붕괴"**입니다. 이를 해결하기 위해 비동기 3단계 분할 및 템플릿 매핑 아키텍처를 제안합니다. [원문 텍스트] (블로그, 영상 스크립트 등) │ ▼ (Phase 1: Planner LLM) [목차 및 구조 기획] (슬라이드 20장의 뼈대 + Layout ID 매핑 결정) │ ├───► [슬라이드 1~5 워커] ──► 병렬 LLM 호출 (Gemini Batch API) ├───► [슬라이드 6~10 워커] ──► 병렬 LLM 호출 ├───► [슬라이드 11~15 워커] ──► 병렬 LLM 호출 └───► [슬라이드 16~20 워커] ──► 병렬 LLM 호출 │ ▼ (Phase 3: Assembler Engine) [JSON 머지 및 테마 스타일 일괄 적용] ──► xSlide 결과물 완성 💡 실현 전략 Map-Reduce 방식의 비동기 병렬 LLM 파이프라인: Phase 1 (Planner): 입력 텍스트를 바탕으로 20장의 슬라이드로 분할할 전체 아웃라인을 짭니다. 이때 각 슬라이드는 어떤 성격(예: "3단 비교", "핵심 강조", "차트와 설명")을 가질지 Layout ID만 결정합니다. (빠른 응답) Phase 2 (Parallel Worker): 20개의 슬라이드 기획안이 나오면, Gemini API 병렬 비동기 호출을 통해 20개 워커가 동시에 각각의 슬라이드 본문 텍스트 및 이미지 생성 쿼리를 수행합니다. (순차 대기 시간 제거, 총 생성 시간 10초 이내로 단축 가능) Phase 3 (Assembler): 병렬 완성된 콘텐츠와 Phase 1에서 설정된 Layout ID, 일괄 스타일 가이드를 조합하여 최종 slides_json을 합칩니다. LLM의 스타일 직접 연산 배제 (프리셋 매핑): LLM에게 요소의 위치(x, y, w, h)나 인라인 스타일 CSS를 생성하게 하면 퀄리티가 심하게 망가집니다. LLM은 오직 **"콘텐츠 데이터(텍스트 본문, 이미지 프롬프트, 강조 문구)"**와 **"검증된 디자인 프리셋 ID"**만 결정하고, 렌더링 엔진이 해당 프리셋 레이아웃에 콘텐츠를 바인딩하게 분리해야 합니다. 3. 에듀테크향 강의 도구(웹캠 PIP, 녹음) 고도화 방안 단순히 전체 화면을 무겁게 MP4 비디오 파일로 실시간 인코딩하여 저장하는 방식은 브라우저 리소스를 고갈시킵니다. "이벤트 녹화(Timeline Event Logging)" 방식과 브라우저 Native API를 제안합니다. 💡 실현 전략 벡터/이벤트 기반 재생 및 가벼운 오디오 녹음 (추천): 이벤트 로그 기록: 강의 녹화 버튼을 누르면, 강사의 목소리 마이크 입력(audio.mp3/webm)만 녹음하고 강사가 화면에 그리는 판서 좌표, 마우스 커서 움직임, 페이지 전환 이벤트를 타임스탬프와 함께 초경량 JSON 형태(recording_event.json)로 저장합니다. 클라이언트 Replay: 다른 학생이 강의를 시청할 때, 무거운 비디오 대신 가벼운 오디오 파일을 재생하며 타임라인에 맞춰 펜 드로잉과 마우스 커서 움직임이 캔버스 상에 실시간으로 재생(Replay)되게 만듭니다. 화질 손상이 전혀 없고 용량은 동영상의 1/100 수준입니다. 브라우저 Native MediaRecorder & WebRTC 활용: 별도의 앱 설치 없이 HTML5 <video> 요소와 웹캠 스트림(navigator.mediaDevices.getUserMedia)을 가져와 xSlide 에디터 화면 우측 하단에 PIP(Picture-in-Picture) 서클 형태로 합성해 보여줍니다. 강의 녹화 시 오디오 마이크 음성과 웹캠 동영상 스트림을 MediaRecorder API를 이용해 클라이언트 브라우저 단에서 직접 머지하여 로컬 WebM/MP4로 캡처 다운로드할 수 있게 제공합니다. 4. 다중 사용자 및 B2B 실시간 협업 아키텍처 설계 동시 편집 시 발생하는 데이터 덮어쓰기(Race Condition)를 해결하고 피그마나 구글 Docs처럼 작동하기 위한 단계별 아키텍처입니다. [xSlide Client A] ──────┐ (Yjs/CRDT 데이터 동기화) ▼ [xSlide Client B] ──► [WebSocket Gateway] ──► [Central Redis / Node.js] ▲ [xSlide Client C] ──────┘ 💡 실현 전략 Phase 1: 블록 레벨 세션 락(Block-Level Session Lock) — 빠른 구현 구현 난이도가 높은 실시간 편집의 현실적 대안입니다. 특정 사용자가 3번 슬라이드를 수정하기 시작하면, WebSocket을 통해 다른 협업 유저들에게 해당 슬라이드가 잠금(Locked by User A) 처리되었음을 실시간 통보하고 편집 창을 막아줍니다. 사용자 A가 다른 슬라이드로 이동하거나 창을 닫으면 잠금이 해제됩니다. 데이터 충돌을 원천 차단하면서 비교적 가볍게 구현이 가능합니다. Phase 2: Yjs (CRDT) 기반 실시간 동시 편집 — 고도화 단계 Yjs는 피그마나 노션처럼 다중 사용자의 편집 충돌을 알고리즘적으로 자동 해결해 주는 분산 데이터 구조(Conflict-free Replicated Data Type) 라이브러리입니다. slides_json 데이터를 Yjs 프레임워크 문서 모델로 래핑하여 변경 사항만 WebSocket 게이트웨이로 브로드캐스트합니다. 사용자들의 실시간 커서 위치(cursor_x, cursor_y)와 선택 중인 요소 ID도 함께 동기화하여 시각적인 협업 만족도를 최대로 끌어올립니다.

xSlide 글로벌 런칭 전략 및 비즈니스 모델 보고서

본 보고서는 xSlide 가 가진 HTML5-Native 기술적 장점과 AI 기반 자동 생성 기능을 극대화하여, 글로벌 시장에 성공적으로 안착하고 아이디어를 독점적으로 보호하기 위한 종합적인 비즈니스 전략 및 실행 로드맵을 제안합니다. 1. 글로벌 시장에서의 독보적 포지셔닝 (Positioning) xSlide는 단순한 프레젠테이션 제작 툴이 아닌 **"브라우저가 곧 매체이자 플레이어인 HTML5-Native 퍼블리싱 솔루션"**입니다. 기존 강자들과의 충돌을 피하고 틈새를 메우는 차별화 구조는 다음과 같습니다. 1) 기존 솔루션들과의 비교 우위 분석 Canva & Figma: 이들은 훌륭한 디자인 툴이지만 결국 이미지(PNG/JPG)나 PDF 형태로 결과물을 내보냅니다. 반면, xSlide는 텍스트가 DOM에 살아있고, 모바일 반응형 스케일링이 작동하며, 모든 인터랙션(GSAP)이 브라우저에서 생생하게 실행되는 완전한 웹 페이지를 출력합니다. Perplexity & NotebookLM: AI를 활용해 텍스트 정보를 요약하고 슬라이드 초안을 만들어 주지만, 레이아웃의 완성도와 동적 연동성 면에서 한계가 큽니다. xSlide는 자체 구조화된 JSON 데이터(slides_json)를 통해 디자인 템플릿과 AI 비즈니스 플래닝 데이터가 완벽히 결합된 인터랙티브 슬라이드를 즉시 출력합니다. Remotion & Hyperframe: 리모션은 React 코드를 MP4 비디오로 렌더링(인코딩)하여 서빙하므로 대역폭 소모가 크고 뷰어가 마우스 클릭/호버로 슬라이드 내 요소를 제어할 수 없습니다. xSlide는 인코딩 과정 없이 실시간 브라우저 GPU 가속(GSAP)으로 구동되어 레이턴시가 제로에 수렴하며 성능 소모가 최소화됩니다. 2. 글로벌 런칭 준비사항 (Launch Checklist) 글로벌 고객에게 일관되고 훌륭한 사용자 경험(UX)을 제공하고 신뢰를 확보하기 위한 기술적/마케팅적 필수 과제입니다. 1) 기술적 준비 사항 (Technical Readiness) IMPORTANT 로컬 개발용 아키텍처에서 글로벌 스케일 서비스로의 기술적 고도화가 우선되어야 합니다. 보안 취약점 개선: 현재 노출되어 있는 config.php 등의 API 키(예: Gemini API Key) 및 DB 자격 증명을 .env로 격리하고 환경 변수로 관리해야 합니다. 사용자가 업로드하는 리소스 중 SVG 파일의 XSS(Stored XSS) 공격 벡터 차단 및 uploads/ 디렉토리의 PHP 실행 차단(.htaccess) 조치를 완료해야 합니다. 글로벌 다중 사용자 환경에서 발생할 수 있는 데이터 덮어쓰기 방지를 위한 탭 간 변경 감지(localStorage sync 등)를 구현합니다. 글로벌 네트워크 인프라 최적화 (Edge & CDN): 정적 자산(CSS, JS, 폰트 등)을 Cloudflare 또는 CloudFront CDN에 배치하여 국가별 로딩 속도를 최적화해야 합니다. 글로벌 레이턴시 문제를 방지하기 위해 fetch() 호출 시 자동 재시도 및 타임아웃 처리(AbortController)가 도입되어야 합니다. 로컬라이제이션 & 글로벌 폰트 서빙: 이미 구현되어 있는 다국어 패키지(KO, EN, JA, ZH) 외에, 아랍어(RTL)나 남미권 언어 대응을 완성합니다. 구글 폰트(Google Fonts) API 또는 로컬 CDN 연동을 고도화하여 영미권, 유럽권, 아시아권 폰트가 깨지지 않고 최적의 속도로 다운로드 및 렌더링되게 설계합니다. 2) 마케팅 및 출시 과정 (Launch Process) Closed Beta (클로즈드 베타) — 제품 다듬기: 스타트업 창업자, 비즈니스 기획자, 강사 등 핵심 타겟 오디언스 100명을 모집하여 AI 슬라이드 자동 생성 기능 및 내보내기 성능에 대한 피드백 수집. Product Hunt & AppSumo 런칭 — 글로벌 확산: Product Hunt 에 데모 비디오와 함께 글로벌 런칭을 게시하여 초기 개발자 및 얼리어답터 트래픽을 확보합니다. AppSumo 에 라이프타임 딜(LTD) 형태로 진입하여 런칭 초기 대규모 현금 흐름 확보 및 충성 고객의 대량 피드백 확보를 유도합니다. Viral Content Marketing — '결과물'을 통한 마케팅: xSlide로 만든 결과물의 하단에 Made with xSlide 워터마크와 템플릿 복제 링크를 기본 탑재합니다. 슬라이드가 웹 공유(Share URL)될 때마다 자연스럽게 신규 유저가 유입되는 그로스 루프(Growth Loop)를 형성합니다. 3. 다각화된 비즈니스 모델 (Business Models) xSlide의 고유 장점인 HTML5 동적 웹 런타임과 AI 기획/생성 능력을 연계한 수익화 모델 제안입니다. 수익 모델 구분 대상 고객 (Target) 핵심 과금 요소 (Monetization Trigger) SaaS 구독 (Freemium) 개인 기획자, 마케터, 대학생 고해상도 PDF/MP4 익스포트, 프리미엄 템플릿, 협업 기능 AI 생성 크레딧 (Pay-as-you-go) AI 슬라이드 자동 생성 사용자 Gemini AI 기반 비즈니스 기획서 자동 슬라이드 매핑 크레딧 Enterprise / SDK IT 기업, 커머스 플랫폼, 에이전시 독립 서버 배포, 디자인 에디터 모듈 임베딩 API 및 xZine 솔루션 연동 B2B 이커머스 플러그인 카페24, 쇼피파이 입점 셀러 반응형 동적 HTML5 상품 상세페이지 템플릿 및 실시간 재고 연동 모듈 🚀 차별화 수익 포인트: xZine과의 연동을 통한 B2B 확장 사양서(xzine-spec.md)에 기획된 것처럼 xSlide 에디터 코어를 공유하는 One-Page 웹진, 디지털 매거진, 모바일 상세페이지(B2B) 빌더를 하나의 생태계로 묶습니다. 정적 이미지를 길게 이어 붙이는 이커머스 상세페이지를 반응형 HTML5 템플릿으로 혁신하여 카페24, 쇼피파이(Shopify) 앱스토어에 플러그인 형태로 입점하면 강력한 월 구독 수익 모델(MRR) 확보가 가능합니다. 4. 아이디어 및 기술 보호 대책 (IP Protection) 글로벌 시장에 진입하면 거대 IT 기업이나 카피캣 스타트업의 공격적인 모방 시도가 빈번해집니다. 아이디어를 법적, 기술적으로 철저히 방어해야 합니다. 1) 기술적 방어선 구축 (Technical Obfuscation) WARNING Vanilla JS 기반의 프론트엔드 코드는 브라우저 개발자 도구(F12)를 통해 누구나 손쉽게 소스코드를 탈취해 모방할 수 있습니다. 핵심 비즈니스 로직의 백엔드(Server-side) 이관: AI 구조화 분석 알고리즘, JSON 템플릿 변환 모듈 등 독자적인 연산 로직은 브라우저(Frontend)가 아닌 PHP 또는 Node.js 서버 내부에서 실행하도록 처리하고, 프론트엔드는 결과 데이터(JSON)만 받아 렌더링하게 캡슐화합니다. JS 번들링 및 난독화 (Minification & Obfuscation): 배포용 빌드 파이프라인(예: Webpack, Vite, Terser 등)을 구성하여 배포 단계에서 프론트엔드 자바스크립트 변수명, 함수명, 클래스명을 식별 불가능한 난수로 치환하고 소스코드를 철저하게 압축합니다. 개발자 도구를 열었을 때 디버깅이나 소스 분석을 지연시키는 debugger 루프 방지 기법 등을 배포 빌드 시점에 포함시킵니다. 2) 법적 및 브랜드 방어선 구축 (IP & Legal Protection) 해외 특허(PCT) 및 미국 가출원(Provisional Patent) 신청: "JSON 구조화 데이터를 이용한 HTML5 기반 실시간 동적 슬라이드 렌더링 및 GSAP 연동 가속 방법"과 같은 구체적인 시스템 아키텍처 특허를 국내에 우선 등록하고 1년 내에 PCT(국제특허)를 신청합니다. 특히 북미 시장 진입 시 가출원 제도를 활용해 기술적 우선권(Priority Date)을 선점합니다. 글로벌 상표권(Trademark) 확보: xSlide, xZine 브랜드에 대해 미국, 일본, 중국, EU 등 타겟 국가에 상표권을 선제적으로 출원하여 이름 선점 및 브랜드 사칭 카피캣을 상표권 침해로 즉시 대응할 수 있도록 차단합니다. 클라이언트 전용 데이터 암호화: 로컬 저장 공간이나 통신 구간에서 slides_json 데이터를 평문이 아닌 경량 암호 알고리즘으로 암호화하여 통신 흐름이나 저장 데이터를 임의 복제해 재사용하는 크래커를 방어합니다.

보고서의 핵심 요약 및 제언

1. 독보적인 기술적 포지셔닝 무인코딩 실시간 렌더링: Remotion이나 Hyperframe처럼 무거운 비디오 인코딩 과정을 거쳐 대역폭을 소모하는 대신, 브라우저의 GPU 가속(GSAP)을 활용해 레이턴시가 제로에 가까운 가볍고 동적인 슬라이드를 출력합니다. SEO 및 반응형 대응: Canva/Figma처럼 정적인 이미지나 PDF로 출력하는 방식과 다르게, 텍스트가 DOM에 살아있어 검색이 가능(SEO)하고 모바일 화면에 완벽히 자동 반응형 스케일링이 지원됩니다. 2. 다각화된 글로벌 비즈니스 모델 (BM) SaaS 구독 및 AI 크레딧: 기본적인 개인 및 협업 구독 외에도 AI 슬라이드 설계에 대한 API 크레딧 모델을 제공합니다. B2B 확장 (상세페이지 & xZine): xSlide의 에디터 코어를 활용하여 이커머스(쇼피파이, 카페24 등)용 반응형 HTML5 상세페이지 빌더 플러그인 시장으로 확장할 경우 매우 폭발적이고 안정적인 월 구독 수익(MRR) 창출이 가능합니다. 3. 법적·기술적 아이디어 보호 대책 프론트엔드 난독화 및 캡슐화: 바닐라 JS(Vanilla JS)는 소스 유출에 매우 취약합니다. AI 설계 및 구조화와 같은 핵심 알고리즘은 반드시 서버사이드(PHP/Node.js)로 이관하여 캡슐화하고, 프론트엔드 배포본은 난독화 도구(Webpack/Vite + Terser)를 통해 코드를 변환해야 합니다. PCT(국제특허) 및 미국 가출원: 미국 시장 런칭 전, 기술적 우선권을 빠르게 선점하기 위해 미국 가출원(Provisional Patent) 제도를 적극 활용하여 특허 포트폴리오 장벽을 구축해야 합니다. 4. ⚠️ 글로벌 출시 전 최우선 선결 과제 (보안 개선) 프로젝트 코드를 분석하는 과정에서 내부 보안 진단 문서(보안등.txt)가 발견되었습니다. 글로벌 런칭 시 코드가 공개되거나 다수의 유저가 진입하기 전에 다음 사항들을 가장 먼저 조치해야 합니다. API 키 노출 차단: api/config.php에 하드코딩된 Gemini API Key 및 DB 자격 증명을 즉시 .env 환경 변수로 분리하여 Git 등 외부 유출을 방지하십시오. SVG 파일 업로드 차단 또는 Sanitize: SVG 파일 업로드 허용은 XSS(Stored XSS) 공격에 악용될 수 있으므로, Sanitizer를 추가하거나 허용 포맷에서 일시 제외해야 합니다. 업로드 디렉토리 실행 권한 제한: uploads/ 폴더에 .htaccess 파일을 추가하여 업로드된 PHP 스크립트가 실행되지 않도록 강제하십시오. ---

xSlide 멀티 서브도메인 연동 및 쿼터 관리 아키텍처

본 가이드는 xSlide의 편집기 서브도메인(예: editor.xslide.kr), 메인/템플릿 서브도메인(예: www.xslide.kr), 구독/결제 페이지 등 다중 서브도메인 환경에서 회원 세션을 하나로 동기화하고 유저별 사용량(AI 크레딧 및 프로젝트 제한)을 중앙 통제하는 설계안입니다. 1. 서브도메인 간 회원정보(인증) 연동 방안 세션이 분리된 도메인 간에 로그인 상태를 매끄럽게 유지하는 가장 간결하고 안정적인 방법은 와일드카드 공유 세션 쿠키를 활용하는 것입니다. A. 세션 쿠키 도메인 와일드카드 설정 (가장 추천) PHP의 기본 세션 쿠키는 기본적으로 접속한 정확한 도메인(예: editor.xslide.kr)에서만 유효합니다. 이를 부모 도메인(.xslide.kr) 전체로 확장하도록 PHP 공통 설정 파일(api/config.php)의 맨 위에 세팅합니다. php // api/config.php 또는 세션 시작부 if (session_status() === PHP_SESSION_NONE) { ini_set('session.cookie_domain', '.xslide.kr'); // 점(.)으로 시작하는 부모 도메인 지정 session_set_cookie_params([ 'lifetime' => 86400 * 7, // 7일 유지 'path' => '/', 'domain' => '.xslide.kr', // 모든 서브도메인에서 쿠키 전송 허용 'secure' => (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off'), 'httponly' => true, 'samesite' => 'Lax', ]); session_start(); } 동작 원리: 사용자가 www.xslide.kr에서 로그인하면 세션 ID가 담긴 쿠키가 .xslide.kr 범위로 발행됩니다. 이후 사용자가 에디터인 editor.xslide.kr로 이동하면 브라우저가 동일한 세션 ID 쿠키를 자동으로 전송하므로 별도의 로그인 처리 없이 즉시 로그인 상태가 공유됩니다. 전제 조건: 두 서비스가 물리적으로 동일한 서버(또는 세션 스토리지 파일/Redis 서버를 공유하는 서버 환경)에 호스팅되고 있어야 합니다. XAMPP 로컬 환경에서는 동일 디렉토리/동일 DB를 사용하므로 이 방법으로 즉시 100% 동작합니다. 2. 쿼터(Quota) 및 사용량 관리 데이터베이스 설계 사용자의 요금제 등급, 프로젝트 보유 한도, 그리고 AI 크레딧 사용량을 통제하기 위해 users 테이블에 아래 필드들을 추가하거나 user_quotas 테이블을 신설하여 연동합니다. 데이터베이스 필드 확장 (users 테이블 기준) sql ALTER TABLE users ADD COLUMN subscription_tier ENUM('free', 'pro', 'business') NOT NULL DEFAULT 'free', ADD COLUMN credit_balance INT NOT NULL DEFAULT 40, -- 초기 가입시 무료 40크레딧 부여 ADD COLUMN max_project_limit INT NOT NULL DEFAULT 3, -- Free는 최대 3개 프로젝트 ADD COLUMN billing_cycle_anchor TIMESTAMP NULL; -- 크레딧 리셋 주기 확인용 결제일 3. AI 크레딧 차감 및 사용량 제어 비즈니스 로직 사용자가 AI 생성을 시도할 때 백엔드 API(api/ai_generate_template.php)에서 쿼터를 검증하고 차감하는 실무 시퀀스입니다. A. AI 생성 API 내 쿼터 확인 및 차감 의사코드 (Pseudo-code) php // api/ai_generate_template.php $user = requireLogin(); $db = getDB(); // 1. 요청 분석 및 예상 소모 크레딧 계산 $requestedSlides = (int)($_POST['slide_count'] ?? 10); $aiModel = $_POST['ai_model'] === 'pro' ? 'pro' : 'flash'; $neededCredits = ($aiModel === 'pro') ? ($requestedSlides * 5) : ($requestedSlides * 1); // 2. 트랜잭션 시작 (Race Condition 방지) $db->begin_transaction(); try { // 사용자의 현재 크레딧 잔액 확인 (배타적 잠금 적용) $stmt = $db->prepare("SELECT credit_balance, subscription_tier FROM users WHERE id = ? FOR UPDATE"); $stmt->bind_param("s", $user['id']); $stmt->execute(); $userData = $stmt->get_result()->fetch_assoc(); $stmt->close(); if (!$userData) { throw new Exception("사용자를 찾을 수 없습니다."); } // 크레딧 부족 시 에러 반환 if ($userData['credit_balance'] < $neededCredits) { respondError("크레딧이 부족합니다. 현재 잔액: " . $userData['credit_balance'] . " (요청 필요: " . $neededCredits . ")", 402); } // 3. Gemini AI 생성 호출 및 결과 처리 (가정) $generatedSlidesJson = callGeminiAPI($aiModel, $requestedSlides, $sourceText); // 4. 호출 성공 시 크레딧 원자적 차감 $updateStmt = $db->prepare("UPDATE users SET credit_balance = credit_balance - ? WHERE id = ?"); $updateStmt->bind_param("is", $neededCredits, $user['id']); $updateStmt->execute(); $updateStmt->close(); // 5. 신규 프로젝트 인서트 처리 $projectId = insertNewProjectFromAi($user['id'], $generatedSlidesJson); $db->commit(); respond(['ok' => true, 'projectId' => $projectId]); } catch (Exception $e) { $db->rollback(); respondError("생성 실패: " . $e->getMessage(), 500); } 4. 결제 플랫폼(Lemon Squeezy / Stripe) 웹훅 연동 사용자가 구독료를 결제하거나 해지할 때, 쿼터 정보를 실시간 갱신하기 위해 결제사 웹훅(Webhook)을 연동해야 합니다. 최초 구독 결제 성공 시 (subscription_created): 결제사 웹훅 신호를 받아 결제 정보에 기재된 유저 이메일/ID를 매핑합니다. subscription_tier를 'pro'로 승격하고, credit_balance에 300 크레딧을 즉시 가산하며, max_project_limit을 무제한(예: 9999)으로 늘려 줍니다. 구독 주기 갱신 시 (subscription_payment_success): 다음 달 구독 결제가 성공하면, 기존 크레딧 잔액을 300 크레딧으로 리필(또는 기존 크레딧에 누적 합산)해 줍니다. 구독 취소/만료 시 (subscription_expired / subscription_cancelled): 유저의 요금제를 다시 'free'로 변경합니다. max_project_limit을 다시 3개로 하향 조정합니다. (기존 프로젝트를 강제 삭제하지는 않고, 3개 초과 시 새 프로젝트 생성만 차단하도록 유도하는 것이 정석입니다.)

xSlide 글로벌 결제 솔루션 도입 가이드

글로벌 SaaS 서비스를 운영할 때 가장 중요하게 고려해야 할 결제 솔루션(PG / MoR) 비교 및 도입 가이드입니다. 1. 글로벌 결제 솔루션의 두 가지 핵심 흐름 글로벌 결제는 성격에 따라 크게 **직접 PG 연동 방식(Stripe)**과 **결제/세무 대행 MoR 방식(Lemon Squeezy, Paddle)**으로 나뉩니다. A. Stripe (직접 결제 대행 - PG) 전 세계 개발자들이 사용하는 사실상의 표준 글로벌 결제 엔진입니다. 장점: 수수료가 저렴함 (약 2.9% + $0.30), 개발 문서 및 구독 관리 기능(Stripe Billing)이 세계 최고 수준으로 구축되어 있어 에디터 UI와의 유기적 통합이 매우 뛰어남. 단점: **세금 신고 의무가 전적으로 운영사(본인)**에게 있습니다. 글로벌 고객들이 결제할 때 발생하는 각 국가별 부가세(VAT, GST 등) 및 디지털 서비스세를 운영자가 직접 계산하여 해당 국가 세무 관청에 신고/납부해야 하므로, 초기 1인/소규모 스타트업에게는 세무 리스크가 매우 큽니다. 가입 시 필수 사항: 한국 법인 또는 개인사업자 등록증, 해외 결제가 가능한 은행 계좌. (한국 주소로 Stripe 계정 개설이 지원됩니다.) B. Lemon Squeezy & Paddle (결제 및 세무 판매 대행 - MoR) 최근 글로벌 1인 SaaS 개발자들 사이에서 폭발적으로 성장한 MoR(Merchant of Record) 방식입니다. 장점: 결제 솔루션 업체가 법적 "판매자"가 되어 결제를 처리하기 때문에, 전 세계 국가의 세금(부가세, 디지털 서비스세) 계산 및 신고/납부를 업체 측에서 100% 대행해 줍니다. 운영사는 매달 정산금(Payout)만 한 번에 외화로 송금받아 한국 국세청에 수출 실적(영세율) 신고만 하면 되므로 세무 리스크가 0%에 가깝습니다. 단점: 수수료가 Stripe보다 비쌉니다. (보통 5% + $0.50 내외) 추천: 세무 인력이 부족한 초기 단계에서는 수수료를 조금 더 내더라도 Lemon Squeezy나 Paddle을 사용하는 것이 훨씬 안전하고 편리합니다. 2. 결제 솔루션 비교 요약 비교 항목 Stripe (PG) Lemon Squeezy (MoR) Paddle (MoR) 적합한 단계 글로벌 세무 관리가 가능한 법인/팀 1인 개발자, 소규모 스타트업 (최강 추천) 중소기업 규모의 스타트업 표준 수수료 2.9% + $0.30 5.0% + $0.50 4.9% + $0.50 글로벌 세금 신고 운영사 직접 처리 (국가별 신고) Lemon Squeezy가 전적으로 대행 Paddle이 전적으로 대행 구독 관리 기능 매우 강력함 (Stripe Billing) 간편하고 직관적인 구독 화면 제공 무난한 구독 모델 지원 한국 가입 지원 가능 (한국 법인/개인) 가능 (여권/사업자등록증 인증) 가능 (심사가 다소 까다로움) 3. 대표적인 가입 및 심사 절차 1단계: 가입 신청 및 이메일 인증 각 서비스 웹사이트(Stripe, Lemon Squeezy 등)에 접속하여 회원가입을 완료합니다. 2단계: 비즈니스 프로필 작성 (KYC 심사) 필수 서류: 대표자 신분증(여권 권장), 사업자등록증 영문본(개인인 경우 영문 주민등록등본도 요구될 수 있음), 정산받을 은행 계좌 정보. 웹사이트 심사 요건 (중요): 심사역이 결제 시스템을 승인하기 전에 실제 운영 중인 사이트를 방문하여 검토합니다. 반드시 아래 항목들이 준비되어 있어야 탈락하지 않습니다. 실제 동작하는 에디터/서비스 화면 (로그인 및 사용이 가능해야 함) 이용 약관(Terms of Service) 및 개인정보처리방침(Privacy Policy) 페이지 (반드시 영문 포함) 환불 정책(Refund Policy) 및 회사 연락처(Contact Us) 정보가 푸터에 명확히 표기될 것. 3단계: 통합 개발 및 테스트 각 솔루션에서 제공하는 Sandbox(테스트 모드) API Key를 사용하여 가상의 구독 결제 흐름을 구현하고 검증합니다. 4단계: 승인 및 Live 결제 활성화 비즈니스 심사가 통과되면 Live API Key로 전환하고 실제 글로벌 신용카드 결제를 받기 시작합니다. 4. 한국 창업자들을 위한 실무 권장 로드맵 Phase 1 (초기 런칭 ~ 매출 2천만 원 이하): Lemon Squeezy를 연동합니다. 세금 신고 및 외환 복잡도를 최소화하여 온전히 서비스 개발 및 AI 마케팅에만 집중할 수 있습니다. Phase 2 (매출 확장기 - 월 수천만 원 이상): 글로벌 결제 규모가 커지면 수수료 차이(약 2.1%)가 크게 와닿기 시작합니다. 이때 글로벌 세무 회계 솔루션(예: Anrok 등)을 연동하고 결제 수단을 Stripe로 마이그레이션하여 수수료 비용을 절감하는 전략이 정석입니다.

xSlide 글로벌 SaaS 구독 모델 & 요금제 제안서

본 제안서는 100% AI 슬라이드 생성 기능을 탑재한 xSlide의 글로벌 런칭 시, Gemini API 비용(원가)과 인프라 유지비를 고려하여 지속 가능하고 수익성이 극대화된 요금제 및 크레딧 시스템 구조를 설계한 문서입니다. 1. 요금제 설계의 핵심 철학: "크레딧 시스템" AI 기능의 무제한 제공은 특정 헤비 유저(Abuser)로 인한 API 요금 폭탄 위험이 매우 큽니다. 따라서 "월정액 구독권 + AI 크레딧 풀" 개념으로 요금제를 구성해야 안전하고 확장성 있는 비즈니스를 영위할 수 있습니다. 크레딧(Credit) 소비 기준안 Flash 생성 (Gemini 1.5 Flash): 슬라이드 1장당 1 크레딧 차감 (예: 20장 생성 시 20 크레딧 차감) Pro 생성 (Gemini 1.5 Pro): 슬라이드 1장당 5 크레딧 차감 (예: 20장 생성 시 100 크레딧 차감) 재생성/부분편집: 동일하게 장당 차감 또는 AI 수정 요청 시 회당 5~10 크레딧 고정 차감 2. xSlide 글로벌 구독 요금제 테이블 (SaaS Tier) 글로벌 결제 수단(Stripe 등)과 영문 지원을 가정한 월별 요금 정책안입니다. 요금제 가격 (월) 월간 제공 크레딧 AI 생성 한도 (20장 기준) 주요 기능 및 혜택 Free (체험) $0 40 크레딧 (가입시 1회 제공) Flash 기준 최대 2회 * 기본 편집 기능* Gemini 1.5 Flash 전용* 동시 활성 프로젝트 최대 3개* xSlide 워터마크 노출 Pro (개인) **12∗∗<br>(연결제시9.9/월) 300 크레딧 (매월 충전) Flash 기준 15회or Pro 기준 3회 * 워터마크 완전 제거* Gemini 1.5 Flash & Pro 선택권* 무제한 프로젝트 저장* 4K 고해상도 이미지/HTML5 파일 내보내기* 프리미엄 템플릿 사용 권한 Business (팀) **39∗∗<br>(3인포함,연결제시32/월) 1,200 크레딧 (팀 공유 풀) Flash 기준 60회or Pro 기준 12회 * Pro 요금제 혜택 전체 포함* 브랜드 디자인 설정 (회사 로고, 공식 색상 테마 고정)* 팀원 간 실시간 프로젝트 공동 편집 및 공유* 우선 고객 지원 및 API 속도 제한 우대 ➕ 크레딧 추가 충전 상품 (Add-on) 월 구독 크레딧을 조기 소진한 열성 유저들을 위한 추가 구매 옵션입니다. Light Pack: $4.99 (150 크레딧 충전) Heavy Pack: $9.99 (400 크레딧 충전) 3. 손익 시뮬레이션 및 마진 분석 (Pro 요금제 기준) 가장 가입 비중이 높을 것으로 예상되는 Pro 요금제($12, 한화 약 16,000원) 가입자의 행동 패턴에 따른 마진 시뮬레이션입니다. A. 평균적인 사용 패턴 (Flash 80% + Pro 20% 혼용) AI 소비량: 월간 300 크레딧 소진 (Flash로 200장 생성 + Pro로 20장 생성) API 원가 계산: Gemini 1.5 Flash (200장 분량): 10회 생성 × 5.2원 = 52원 Gemini 1.5 Pro (20장 분량): 1회 생성 × 84.5원 = 84.5원 이미지 및 번역 서브 API 비용: 약 100원 서버 호스팅 및 스토리지 할당 비용: 약 300원 총 소요 원가: 약 536.5원 ($0.40) 비즈니스 마진: 95.5% ($11.60 수익) B. 극단적인 헤비 유저 (Pro 100% 사용 패턴) AI 소비량: 월간 300 크레딧 전체를 Gemini 1.5 Pro 생성에 소모 (총 60장 생성, 20장짜리 슬라이드 3회 생성) API 원가 계산: Gemini 1.5 Pro (60장 분량): 3회 생성 × 84.5원 = 253.5원 이미지/기타 API 및 서버 비용: 약 400원 총 소요 원가: 약 653.5원 ($0.49) 비즈니스 마진: 94.5% ($11.51 수익) 4. 글로벌 런칭 시 추가 권장 기능 개인 API 키(BYOK - Bring Your Own Key) 옵션 제공: 유저가 본인의 Gemini API Key를 직접 설정에 입력하여 쓰는 유저에게는 월 구독료를 5 7로 파격적으로 할인해 주는 요금제 구성을 도입합니다. 이 경우 운영사는 API 요금 부담이 전혀 없으며, 순수 구독료 마진이 100%가 됩니다. 무료 등급 가입 유도 장치: Free 요금제는 "AI 생성이 가능하다"는 강력한 유입 요소를 가지므로 초기 바이럴에 매우 유리합니다. 다만 가입 시에만 40크레딧을 주고, 그 이후에는 무료 충전 없이 구독으로 유도하거나 친구 초대 시 20크레딧 추가 적립 등 Referral 마케팅을 적용하면 마케팅 비용 없이 글로벌 유저를 확장할 수 있습니다.

AI 템플릿 생성 기능 구현 계획 (Normal vs AI 적용)

선택한 사이트 템플릿의 비주얼 스타일(색상, 글꼴, 레이아웃 느낌)을 그대로 유지하면서, 사용자가 입력한 긴 텍스트(블로그 글, 스크립트 등)를 지정한 슬라이드 장수만큼 요약/디자인하고 인포그래픽과 실사 이미지를 자동으로 배치하는 AI 슬라이드 생성 기술 구현 계획서입니다. 1. 기술적 타당성 및 방식 검토 (Feasibility) A. 구현 방식 템플릿 스타일 추출: 사용자가 선택한 템플릿의 첫 슬라이드 또는 전체 슬라이드 JSON(slides_json) 구조를 프롬프트에 컨텍스트로 제공합니다. 프롬프트 엔지니어링: Gemini에게 템플릿의 색상(bgColor, bgGradient), 텍스트 속성(font, fontSize, fontWeight, fontColor), 그리고 카드나 선 등 장식용 도형(shape) 배치를 모방하여 입력 텍스트를 요약하고 xSlide JSON 스키마 구조로 쪼개어 생성하도록 지시합니다. 인포그래픽 및 이미지 자동 추가: 인포그래픽: 3~5장마다 단순히 텍스트만 있는 장이 아닌, 도형(원, 사각형, 선)을 조합한 다이어그램(타임라인, 3단 비교 카드 등)을 생성하도록 프롬프트에 구조 지침을 줍니다. 실사 이미지: 텍스트의 맥락에 어울리는 스톡 이미지 키워드를 Gemini가 도출하게 한 뒤, Unsplash Source URL(https://images.unsplash.com/photo-...)이나 xSlide의 스택을 이용하여 실사 이미지를 image 타입 객체로 자동 배치합니다. GSAP 애니메이션 주입: 생성된 각 요소에 fade-in, draw-line-right 등의 애니메이션 속성(data-anim, animDuration 등)을 부여하여 역동적인 결과물이 나오도록 합니다. B. 사용자 경험(UX) 흐름 템플릿 상세 페이지 (xslide_site): [내 슬라이드 적용] 버튼을 누르면 "일반 적용"과 "AI 적용"을 선택하는 모던하고 미려한 팝업 모달이 뜹니다. 일반 적용: 기존 방식과 동일하게 /index.html?applyTemplate={id}로 이동합니다. AI 적용: /index.html?applyTemplate={id}&aiMode=true로 리다이렉트합니다. 에디터 로딩 시 (xslide.kr): aiMode=true 파라미터를 감지하면 즉시 "AI 슬라이드 생성 설정" 모달을 에디터의 아름다운 테마에 맞춰 화면 중앙에 띄웁니다. 입력폼 구성: 원본 텍스트 자료 입력창 (textarea - 블로그 글, 영상스크립트, 책 내용 등) 원하는 슬라이드 장 수 (number input - 3~25장 권장) Gemini API Key 입력창 (선택 사항 - 입력하지 않으면 서버의 .env에 등록된 마스터 키 사용) [AI 슬라이드 생성]을 클릭하면 **화려한 로딩 인디케이터(진행률 퍼센트, AI가 분석 중이라는 텍스트 애니메이션)**가 출력되며 api/ai_generate_template.php를 호출합니다. 완료되면 모달이 닫히고 새로 생성된 프로젝트 페이지(/index.html?projectId={new_id})로 전환됩니다. 2. Gemini API 비용 계산 (20장 생성 기준) 20장 분량의 슬라이드 JSON 데이터를 한 번 생성할 때 예상되는 토큰 수와 요금을 산출합니다. (공식 Google AI Studio API 요금 기준) A. 예상 토큰 수 (Token Estimate) 입력 토큰 (Input Tokens): 약 10,000 ~ 12,000 토큰 시스템 프롬프트 및 JSON 포맷 스키마 제약 사항: 약 2,000 토큰 선택한 템플릿 디자인 JSON 데이터: 약 4,000 ~ 6,000 토큰 사용자가 입력한 텍스트 원본 (약 3,000~5,000자 내외): 약 2,000 ~ 4,000 토큰 출력 토큰 (Output Tokens): 약 8,000 ~ 10,000 토큰 20장 분량의 xSlide 요소가 포함된 복합 JSON 배열 데이터 (1장당 약 1.5KB 내외, 총 30KB 내외) B. 모델별 소요 비용 비교 (1회 생성 기준) 모델명 입력 요금 (1M 토큰당) 출력 요금 (1M 토큰당) 20장 생성 시 예상 요금 (원) 특징 및 권장사항 Gemini 1.5 Flash $0.075 $0.30 약 5.2원 ($0.0039) 빠른 속도(10초 내외), 극단적으로 저렴한 요금 Gemini 1.5 Pro $1.25 $5.00 약 84.5원 ($0.0625) 레이아웃 복잡도 및 텍스트 요약 완성도 우수, 정교한 구조 준수 TIP Google AI Studio의 Free Tier(무료 등급) API 키를 사용하면 분당 요청 횟수(RPM 15) 내에서 **0원(무료)**으로 테스트 및 실무 서비스 연동이 가능합니다. 3. open_questions IMPORTANT 인포그래픽 구성의 완성도: AI가 슬라이드 내에 도형 좌표를 수학적으로 계산하여 타임라인(가로선 + 3~4개 점과 텍스트)을 직접 그리도록 프롬프트로 유도할 것입니다. 다이어그램의 레이아웃 종류(3단 비교 카드, 순서도, 요약 테이블 등) 중 더 중점적으로 다루고 싶은 시각적 패턴이 있으신가요? 실사 이미지 테마: AI가 생성할 장의 핵심 영문 키워드를 추출하여 Unsplash 스톡 라이브러리(https://images.unsplash.com/photo-...)에서 동적으로 가져오게 할 예정입니다. 특정 카테고리(예: 비즈니스, 자연, 테크놀로지)로 기본 필터를 적용할까요? 4. 제안 변경 사항 (Proposed Changes) [Template Site] [MODIFY] view.php "내 슬라이드 적용" 버튼 클릭 시 바로 리다이렉트하지 않고, 일반 적용 / AI 적용을 묻는 미려한 분기 선택 팝업창을 띄우도록 JS 코드 추가. AI 적용 선택 시 /index.html?applyTemplate=258&aiMode=true 경로로 이동 처리. [Editor App] [MODIFY] auth.js routeUser 실행 시 URL에 aiMode=true가 붙어 있으면 템플릿 자동 프로젝트 생성(handleAppliedTemplate)을 수행하지 않고, 에디터 화면에 진입한 다음 AI 생성 팝업을 트리거하도록 라우팅 우회 로직 추가. [MODIFY] index.html 에디터와 어울리는 모던한 AI 생성 모달 마크업(Glassmorphism 스타일, 텍스트 입력창, 장수 슬라이더, API Key 입력창, 그라디언트 로딩바) 및 스타일시트 추가. 모달 내 [생성 시작] 클릭 시 호출될 클라이언트 측 이벤트 핸들러 바인딩. [NEW] ai_generate_template.php 프론트엔드로부터 template_id, source_text, slide_count, user_api_key를 POST로 받는 API 작성. 데이터베이스에서 해당 template_id의 slides_json 및 캔버스 크기 정보를 쿼리. Gemini API를 호출할 수 있도록 시스템 프롬프트 조립 및 curl 요청 전송. 반환된 JSON 구조를 검증 및 클렌징(XSS 방지)한 뒤, projects 테이블에 새 프로젝트로 인서트(id 생성). 생성된 projectId를 응답으로 반환. 5. 검증 계획 (Verification Plan) A. 수동 검증 분기 모달 테스트: xslide_site 템플릿 뷰 페이지에서 버튼 클릭 시 분기창이 알맞게 뜨는지 확인. 일반 적용 테스트: 일반 적용을 눌러 기존 데이터가 손상 없이 에디터에 프로젝트로 정상 연동 및 저장되는지 확인. AI 생성 모달 및 유효성: AI 적용 선택 후 index.html로 리다이렉트되어 AI 설정창이 바로 나타나는지 확인. AI 생성 실행 및 API: 5장, 10장, 20장 단위로 슬라이드를 생성해보고, Gemini가 에러 없이 정확한 구조의 xSlide JSON을 반환하는지 테스트. 디자인 및 이미지 연동 검증: 실사 이미지와 인포그래픽(도형 배치)이 3~5장 주기로 어그러짐 없이 디자인에 포함되는지 에디터 화면에서 눈으로 직접 확인.

템플릿 내보내기 및 템플릿 관리 게시판 연동 구현 계획

슬라이드 에디터(lab.xslide.kr)와 메인 사이트(xslide.kr) 간의 템플릿 연동 기능을 구현하기 위한 계획입니다. User Review Required IMPORTANT 슬라이드 템플릿 데이터를 저장할 때, 각 장의 슬라이드 데이터(애니메이션 포함) 및 썸네일 정보가 상당히 클 수 있습니다. 이를 효율적으로 저장하기 위해 slide_templates라는 새로운 DB 테이블을 추가하고, 상세 정보는 JSON 형태로 저장할 계획입니다. https://xslide.kr/board/templates 경로 요청을 기존 PostController 게시판 로직이 아닌 새로운 SlideTemplateController로 연결하여 템플릿 전용 UI를 구현하겠습니다. Proposed Changes [Database 변경] 새로운 슬라이드 템플릿용 테이블(slide_templates)과 찜하기 기능용 테이블(slide_template_likes)을 생성합니다. slide_templates: 템플릿 기본 정보(제목, 설명, 카테고리, Color Style, Screen Mode) 및 슬라이드 전체 데이터(JSON) 보관 slide_template_likes: 사용자별 찜하기 데이터 저장용 [Frontend - 슬라이드 에디터 (lab.xslide.kr / htdocs)] [MODIFY] index.html 우측 상단 메뉴(btn-export-html 옆)에 "템플릿 내보내기" 버튼 추가 (최고관리자만 노출되도록 기존 JS 활용). 템플릿 내보내기 클릭 시 뜨는 모달(Modal) HTML 팝업 마크업 추가. 카테고리(Select), 제목(Input), Color Style(Checkbox 다중선택), Screen Mode(Select/Radio), 설명(Textarea). [NEW] assets/js/template_export.js (또는 기존 메인 스크립트 파일 내 작성) 모달 열기/닫기 처리 및 폼 제출 이벤트 바인딩. 에디터 상의 현재 슬라이드 상태(JSON 형태의 데이터 및 각 장의 썸네일)를 추출하여 xslide.kr의 새로운 API 엔드포인트(api/templates/export)로 POST 전송. 전송 성공 시 템플릿 등록 완료 알림 추가. [Backend - 메인 사이트 (xslide.kr)] [MODIFY] public/index.php 라우터 로직에 아래 엔드포인트 추가: api/templates/export : 에디터에서 전송된 템플릿 저장 (POST) board/templates : 템플릿 목록 페이지 board/templates/view/(\d+) : 템플릿 상세 페이지 api/templates/like : 찜하기 처리 API [NEW] src/Controllers/SlideTemplateController.php export(): 모달에서 넘겨받은 데이터(카테고리, 메타정보, 슬라이드 데이터)를 DB에 삽입. index(): 카테고리, Color Style, Screen Mode에 따른 검색/필터링을 포함하여 템플릿 목록 렌더링. view($id): 템플릿 상세 정보 및 슬라이드 뷰어 렌더링. 찜하기 기능 및 '내 슬라이드 적용' 액션 제공. toggleLike(): 사용자의 찜하기 설정/해제 처리. [NEW] src/Models/SlideTemplate.php DB의 slide_templates와 slide_template_likes 테이블 접근을 위한 모델 클래스. 목록 가져오기, 저장, 필터링 로직 포함. [NEW] views/templates/list.php (경로는 설정에 맞게 변경) /board/templates 진입 시 보여질 템플릿 목록 마크업. 검색 필터 (Color Style, Screen Mode) UI 제공. 썸네일 목록 렌더링. [NEW] views/templates/view.php 선택된 템플릿의 상세 페이지. 상단에 메인 슬라이드 뷰어 (가로모드 100%, 세로/정사각형 정비율), 애니메이션 적용 프리뷰. 하단에 가로 스크롤형 썸네일 리스트, 클릭 시 상단 메인 뷰어 갱신. "내 슬라이드 적용", "찜하기" 버튼 추가 및 동작 JS 구현. 내 슬라이드 적용 시 lab.xslide.kr로 템플릿 ID와 함께 리다이렉트(window.open 또는 location.href). Verification Plan Manual Verification lab.xslide.kr 편집기에서 최고관리자로 로그인된 상태인지 확인하고 우측 상단 "템플릿 내보내기" 버튼이 보이는지 확인. 버튼 클릭 시 모달이 제대로 뜨고 폼 입력 후 전송이 성공적으로 이루어지는지(Network 탭 확인) 테스트. xslide.kr/board/templates 접속 시 방금 등록한 템플릿이 필터와 함께 리스트에 노출되는지 확인. 상세 보기 페이지에서 썸네일 클릭 시 슬라이드가 잘 변경되고 비율이 정상적으로 유지되는지(가로/세로) 확인. "내 슬라이드 적용" 버튼 클릭 시 Confirm 창 후 에디터로 리다이렉트 되는지 확인. "찜하기" 버튼 클릭 시 정상적으로 DB에 반영되는지 확인.

AI HTML 파일을 가져올 때 기본값 적용

AI HTML 가져오기 기능 사용 시 기본값 적용 수정된 내용: 글꼴: Pretendard로 기본 설정 굵기: # 타이틀은 Black 900, ## 서브타이틀은 Bold 700, ### 내용과 일반 텍스트는 Medium 500으로 적용 폰트 사이즈/색상: 기존 설정 그대로 유지(각각 72, 48, 32). 정렬: 좌측 정렬(align: 'left') 및 수직 가운데 정렬(verticalAlign: 'center')을 적용 자간: 0으로 설정했으며, 행간은 편집기 기본값인 1.2로 지정 텍스트 외곽선: 너비를 0으로 설정 그림자: 없음(shadow: 'none')으로 지정 자막상자 및 투명도: 패딩과 라운드 곡률을 각각 0으로 하고, 가장 중요한 자막상자 불투명도 또한 0으로 지정 수정된 사항은 assets/js/modules/events.js 파일 내 마크다운 파서 모듈(parseMarkdownToSlideModel)에 반영 추가로 AI HTML 가져오기 (마크다운 임포트) events.js 파일에서 parseMarkdownToSlideModel 함수를 수정하여, 가져온 텍스트 레이어들이 캔버스 하단(Y축 1080px 기준)을 넘어서 생성되지 않도록 설정. 텍스트 요소가 너무 많아지더라도 밖으로 밀리지 않고 캔버스 하단 영역 안에 겹쳐서 배치되도록 제한 일반 프레임 드래그 시 캔버스 이탈 방지 editor.js 파일 내 드래그 제어 로직(mouseMove 이벤트)을 수정하여, 마우스로 요소를 드래그할 때 1920x1080 캔버스 밖으로 좌표가 벗어나지 않도록 강제로 구속(Bound)하는 로직을 추가.

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

모바일 뷰어(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) 되도록 개선 TIP 이제 에디터의 내보내기 -> HTML / MP4 다운로드를 통해 생성되는 결과물은 뷰어에서 보셨던 완전히 동일한 동적이고 화려한 효과(애니메이션, 장면 전환, 배경 등)를 완벽하게 담게 됨!

1 2

0

웹장이 1:1 상담톡