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

선택한 사이트 템플릿의 비주얼 스타일(색상, 글꼴, 레이아웃 느낌)을 그대로 유지하면서, 사용자가 입력한 긴 텍스트(블로그 글, 스크립트 등)를 지정한 슬라이드 장수만큼 요약/디자인하고 인포그래픽과 실사 이미지를 자동으로 배치하는 AI 슬라이드 생성 기술 구현 계획서입니다.

1. 기술적 타당성 및 방식 검토 (Feasibility)

A. 구현 방식

1. 템플릿 스타일 추출: 사용자가 선택한 템플릿의 첫 슬라이드 또는 전체 슬라이드 JSON(slides_json) 구조를 프롬프트에 컨텍스트로 제공합니다.
2. 프롬프트 엔지니어링: Gemini에게 템플릿의 색상(bgColor, bgGradient), 텍스트 속성(font, fontSize, fontWeight, fontColor), 그리고 카드나 선 등 장식용 도형(shape) 배치를 모방하여 입력 텍스트를 요약하고 xSlide JSON 스키마 구조로 쪼개어 생성하도록 지시합니다.
3. 인포그래픽 및 이미지 자동 추가:
   • 인포그래픽: 3~5장마다 단순히 텍스트만 있는 장이 아닌, 도형(원, 사각형, 선)을 조합한 다이어그램(타임라인, 3단 비교 카드 등)을 생성하도록 프롬프트에 구조 지침을 줍니다.
   • 실사 이미지: 텍스트의 맥락에 어울리는 스톡 이미지 키워드를 Gemini가 도출하게 한 뒤, Unsplash Source URL(https://images.unsplash.com/photo-...)이나 xSlide의 스택을 이용하여 실사 이미지를 image 타입 객체로 자동 배치합니다.
4. GSAP 애니메이션 주입: 생성된 각 요소에 fade-in, draw-line-right 등의 애니메이션 속성(data-anim, animDuration 등)을 부여하여 역동적인 결과물이 나오도록 합니다.

B. 사용자 경험(UX) 흐름

1. 템플릿 상세 페이지 (xslide_site):
   • [내 슬라이드 적용] 버튼을 누르면 "일반 적용"과 "AI 적용"을 선택하는 모던하고 미려한 팝업 모달이 뜹니다.
   • 일반 적용: 기존 방식과 동일하게 /index.html?applyTemplate={id}로 이동합니다.
   • AI 적용: /index.html?applyTemplate={id}&aiMode=true로 리다이렉트합니다.
2. 에디터 로딩 시 (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회 생성 기준)

3. open_questions

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. 수동 검증

1. 분기 모달 테스트: xslide_site 템플릿 뷰 페이지에서 버튼 클릭 시 분기창이 알맞게 뜨는지 확인.
2. 일반 적용 테스트: 일반 적용을 눌러 기존 데이터가 손상 없이 에디터에 프로젝트로 정상 연동 및 저장되는지 확인.
3. AI 생성 모달 및 유효성: AI 적용 선택 후 index.html로 리다이렉트되어 AI 설정창이 바로 나타나는지 확인.
4. AI 생성 실행 및 API: 5장, 10장, 20장 단위로 슬라이드를 생성해보고, Gemini가 에러 없이 정확한 구조의 xSlide JSON을 반환하는지 테스트.
5. 디자인 및 이미지 연동 검증: 실사 이미지와 인포그래픽(도형 배치)이 3~5장 주기로 어그러짐 없이 디자인에 포함되는지 에디터 화면에서 눈으로 직접 확인.