Gemini Canvas로 PPT 없이 발표자료 만들기
HTML 슬라이드 실무 가이드

목표: 자료를 넣자마자 슬라이드를 만들지 말고, 먼저 원문·숫자·핵심 메시지를 고정한다.

너는 B2B 제안서와 보고서 자료를 정리하는 전략 문서 편집자다.

아래 원천 자료를 바탕으로 발표자료 제작 전에 필요한 정보를 정리해줘.

자료 목적: [회사소개서 / 제안서 / 내부 보고서 / IR 자료]
청중: [대표이사 / 실무팀 / 고객사 의사결정자 / 투자자]
발표 시간: [10분 / 20분 / 30분]
최종 형식: Gemini Canvas에서 만들 HTML 슬라이드

반드시 지킬 조건:
1. 원문에 없는 사실은 추가하지 말 것
2. 숫자, 회사명, 제품명, 날짜, 금액은 절대 임의 수정하지 말 것
3. 불확실한 내용은 “추가 확인”로 표시할 것
4. 과장 표현은 줄이고, 의사결정자가 이해하기 쉬운 표현으로 바꿀 것

출력 형식:
- 핵심 메시지 5개
- 반드시 포함해야 할 숫자·고유명사
- 슬라이드에 넣기 좋은 표/차트 후보
- 빠지면 안 되는 리스크 또는 한계
- 확인이 필요한 항목

원천 자료:
[여기에 자료 붙여넣기]

목표: 디자인보다 먼저 “각 장이 무슨 말을 하는지”를 확정한다.

위에서 정리한 내용을 바탕으로 발표용 HTML 슬라이드 목차를 설계해줘.

조건:
1. 전체 [8~12]페이지로 구성
2. 각 페이지는 하나의 핵심 메시지만 담을 것
3. 표지와 마지막 페이지를 포함할 것
4. 청중이 의사결정을 내릴 수 있도록 문제 → 근거 → 제안 → 실행 순서로 구성할 것
5. 각 페이지마다 추천 시각화 유형을 함께 제안할 것

출력 형식:
| 페이지 | 제목 | 핵심 메시지 | 들어갈 내용 | 추천 시각화 | 주의할 점 |

추가로 마지막에 아래도 정리해줘.
- 발표 흐름이 약한 부분
- 더 필요한 자료
- 삭제해도 되는 내용
- 청중이 질문할 가능성이 높은 지점

목표: “슬라이드 이미지”가 아니라 수정 가능한 HTML 코드로 만들게 한다.

이제 아래 목차와 페이지별 내용을 바탕으로 발표용 HTML 슬라이드를 작성해줘.

중요: 일반 슬라이드 요약본이 아니라, 실행 가능한 단일 HTML 파일 코드로 작성해야 한다.

제작 조건:
1. 16:9 발표용 화면에 맞출 것
2. HTML, CSS, JavaScript를 하나의 파일 안에 포함할 것
3. 각 페이지는 section.slide 단위로 분리할 것
4. 페이지별로 제목, 한 줄 결론, 본문, 표/카드/타임라인/비교표 중 적절한 요소를 넣을 것
5. 키보드 방향키로 이전/다음 이동 가능하게 할 것
6. 화면 왼쪽 클릭은 이전 장, 오른쪽 클릭은 다음 장으로 이동하게 할 것
7. PDF 출력 시 각 슬라이드가 한 페이지씩 나오도록 page-break를 적용할 것
8. 모바일 열람 시에도 내용이 깨지지 않게 반응형 CSS를 넣을 것

디자인 톤:
- 차분한 B2B 보고서 스타일
- 배경은 밝은 아이보리 또는 화이트
- 본문은 짙은 남색/검정 계열
- 강조색은 1~2개만 사용
- 과한 애니메이션, 네온, 장식 효과 금지

내용 조건:
1. 제공한 원문과 숫자를 임의로 바꾸지 말 것
2. 없는 사실을 추가하지 말 것
3. 문장을 과장하지 말 것
4. 표와 카드의 내용은 짧고 명확하게 정리할 것
5. 코드 작성 전에 “반영할 페이지 구조”를 먼저 요약하고, 이어서 HTML 코드를 작성할 것

목차와 페이지별 내용:
[2단계 결과 붙여넣기]

목표: 기존 회사 자료나 선호 디자인을 반영해 수정 횟수를 줄인다.

방금 만든 HTML 슬라이드의 디자인을 아래 레퍼런스 기준에 맞춰 개선해줘.

레퍼런스 설명:
- 브랜드 톤: [신뢰감 / 기술기업 / 금융 보고서 / 스타트업 / 공공기관]
- 주요 색상: [예: #18283a, #1f5c83, #f5f1e8]
- 폰트 느낌: [차분한 산세리프 / 고급 세리프 / 시스템 기본]
- 레이아웃: [카드형 / 표 중심 / 좌우 분할 / 대시보드형]
- 피해야 할 스타일: [과한 그라데이션 / 캐주얼 아이콘 / 큰 이모지 / 네온 컬러]

수정 조건:
1. 내용은 바꾸지 말고 디자인과 레이아웃만 개선할 것
2. 각 슬라이드의 제목 위치와 여백을 통일할 것
3. 표와 카드의 간격을 일정하게 맞출 것
4. 긴 문장은 줄바꿈과 글자 크기를 조정해 넘치지 않게 할 것
5. 발표 화면과 PDF 출력 화면을 모두 고려할 것

출력:
- 변경한 디자인 원칙 요약
- 수정된 전체 HTML 코드

목표: 보기 좋은 HTML에서 끝내지 말고, 실제 발표와 PDF 저장이 되는지 보강한다.

아래 HTML 슬라이드를 실제 발표와 PDF 출력에 적합하도록 보강해줘.

보강할 기능:
1. F11 전체화면 발표를 고려한 16:9 비율 유지
2. 방향키, 스페이스바, 마우스 클릭으로 슬라이드 이동
3. 현재 페이지 번호 표시
4. 인쇄/PDF 저장 시 슬라이드별 페이지 분리
5. PDF 출력에서 배경색과 그림자가 너무 진하지 않게 조정
6. 긴 표는 글자가 넘치지 않도록 자동 줄바꿈 처리
7. 모바일에서는 세로 스크롤 카드형으로 자연스럽게 보이게 처리

검수 기준:
- 브라우저에서 첫 페이지가 화면에 꽉 차는가
- 다음/이전 이동이 되는가
- PDF로 저장했을 때 페이지가 잘리지 않는가
- 표와 카드가 슬라이드 밖으로 튀어나가지 않는가
- 코드가 하나의 HTML 파일로 저장 가능한가

아래 코드의 내용은 유지하고, 기능과 출력 안정성만 개선해줘.

HTML 코드:
[HTML 코드 붙여넣기]

목표: 예쁘게 만든 뒤 놓치기 쉬운 사실 오류, 과장, 출력 문제를 마지막으로 잡는다.

아래 HTML 발표자료를 최종 검수해줘.

검수 관점:
1. 원문에 없는 사실이 추가됐는가
2. 숫자, 날짜, 회사명, 제품명이 바뀌었는가
3. 과장되거나 단정적인 표현이 있는가
4. 페이지별 핵심 메시지가 명확한가
5. 같은 말이 반복되는 페이지가 있는가
6. 표, 카드, 타임라인이 너무 복잡하지 않은가
7. 16:9 발표와 PDF 출력에서 깨질 가능성이 있는가
8. 고객사나 외부에 보여주기 부적절한 표현이 있는가

출력 형식:
- 반드시 수정해야 할 항목
- 수정하면 더 좋아지는 항목
- 삭제해도 되는 항목
- 최종 발표 전 사람이 직접 확인해야 할 항목
- 조정된 HTML 코드

HTML 코드:
[HTML 코드 붙여넣기]