Create Presentation
Description
Just provide the content. AI will instantly create a beautifully designed presentation in your desired language.
Workflow
Input
VAR_1-Contents
VAR_2-Language
1. Web Presentation Generator
Model: GPT-5
Prompt:
Create the HTML + CSS + JAVASCRIPT based static presentation page. Follow the directions.
<directions>
1. 기술 스택 (Tech Stack)
HTML5: 콘텐츠 구조 정의
CSS3 (Tailwind CSS): 전체 디자인 및 레이아웃
CDN을 통해 최신 버전의 Tailwind CSS를 사용합니다.
font-family는 Google Fonts의 'Inter’를 사용합니다.
JavaScript (Vanilla JS): 슬라이드 네비게이션 및 인터랙션
lucid icon 및 chart.js: 아이콘 및 차트
mermaid: flowchart
2. 기본 HTML 구조 (Global HTML Structure)
페이지의 전체 골격은 다음과 같습니다. 이 구조를 반드시 준수해야 합니다.
메인 컨테이너 (<body>):
기본 배경색(bg-slate-900)과 텍스트 색상(text-white)을 가집니다.
슬라이드 래퍼 (<div id="pitch-deck">):
모든 슬라이드 <div>를 감싸는 컨테이너입니다.
개별 슬라이드 (<div class="slide">):
각 슬라이드는 slide 클래스를 가집니다.
고유한 id (예: id="slide1")를 부여하여 관리합니다.
현재 화면에 보이는 슬라이드는 active 클래스를 추가로 가집니다. (<div id="slide1" class="slide active">)
내부 콘텐츠는 flex, grid 등을 사용하여 중앙 정렬 또는 원하는 레이아웃으로 구성합니다.
네비게이션 및 프로그레스 바 (<div class="fixed bottom-0 ...">):
화면 하단에 고정된 컨트롤러 영역입니다.
이전/다음 버튼 (#prevBtn, #nextBtn), 슬라이드 카운터 (#slide-counter), 진행률 표시줄 (#progressBar)로 구성됩니다. 이 구조는 변경하지 않습니다.
3. 핵심 CSS 스타일 가이드 (Core CSS Style Guide)
디자인의 일관성을 유지하기 위한 핵심 스타일 요소입니다. Tailwind CSS 유틸리티 클래스를 사용합니다.
타이포그래피 (Typography):
폰트: 'Inter', sans-serif
제목: text-4xl, text-5xl, font-bold, font-black 등
본문: text-lg, text-slate-300, font-medium 등
재사용 가능한 스타일 클래스 (Reusable Style Classes):
<style> 태그 내에 정의된 커스텀 클래스를 적극 활용합니다.
.gradient-text: 텍스트에 보라-남색 그라디언트를 적용합니다.
.gradient-border: 컨테이너 테두리에 그라디언트를 적용합니다.
.glow: 슬라이드 배경에 은은한 빛 효과를 추가하는 장식 요소입니다. absolute 포지셔닝으로 배치합니다.
컴포넌트 스타일 (Component Style):
기본 카드: bg-slate-800 p-6 rounded-xl border border-slate-700
강조 카드: 위 기본 카드 스타일에 .gradient-border 클래스를 추가하거나 border-2 border-purple-400 border-dashed 등으로 변형합니다.
4. 슬라이드 레이아웃 패턴 (Slide Layout Patterns)
콘텐츠에 따라 다음 레이아웃 패턴들을 조합하여 슬라이드를 구성합니다.
타이틀 슬라이드: flex-col, justify-center, items-center, text-center를 사용하여 제목과 부제목을 중앙에 배치합니다. .glow 효과를 활용하여 시각적 임팩트를 줍니다.
그리드 카드 레이아웃: grid, grid-cols-1 md:grid-cols-2 lg:grid-cols-4, gap-8 등을 사용하여 여러 항목을 카드로 나열합니다. (예: 문제점, 팀원 소개)
프로세스/흐름도 레이아웃: flex 또는 grid를 사용하여 여러 단계를 시각적으로 연결합니다. 단계 사이에 화살표 아이콘(SVG)을 배치하여 흐름을 표현합니다.
2단 비교 레이아웃: grid grid-cols-1 md:grid-cols-2 gap-8을 사용하여 두 항목을 좌우로 비교합니다. 한쪽에는 .gradient-border를 적용하여 강조할 수 있습니다.
사분면 차트 레이아웃: grid grid-cols-2 grid-rows-2와 absolute 포지션의 축(div 또는 span)을 조합하여 2x2 매트릭스를 만듭니다. 각 사분면에 텍스트나 요소를 배치합니다.
5. 아이콘, 차트, 표, 그래프 추가 지침
라이브러리 사용시 초기화는 문서 로딩시 1회만 하도록 설계합니다.
콘텐츠에서 차트 혹은 표로 표현할 수 있는 부분은 차트와 표를 최대한 활용합니다.
차트나 표 이용시 차트나 표가 슬라이드의 고정된 크기 안에 위치하게 합니다.
mermaid flowchat 는 다음과 같이 import 합니다.
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize(
startOnLoad: true,
...
);
</script>
적용 방법:
HTML <head>에 해당 라이브러리의 CDN 스크립트를 추가합니다.
차트를 표시할 위치에 <canvas> 또는 <div> 태그를 배치합니다.
기존 <script> 블록 안에 라이브러리 문법에 맞춰 차트 생성 코드를 작성합니다. 데이터와 옵션을 설정하여 원하는 차트를 렌더링합니다.
6. 인터랙션 및 기능 (Interaction & Functionality)
페이지 하단의 <script> 태그에 포함된 JavaScript는 그대로 재사용합니다.
7. 콘텐츠 배치
콘텐츠가 슬라이드의 고정된 크기 바깥으로 overflow 되거나 Scroll 이 생기지 않게 합니다.
작동 원리:
페이지 로드 시 모든 .slide 요소를 가져옵니다.
currentSlide 변수로 현재 슬라이드 인덱스를 추적합니다.
updateSlide() 함수가 호출되면:
모든 슬라이드에서 active 클래스를 제거합니다.
currentSlide 인덱스에 해당하는 슬라이드에만 active 클래스를 추가하여 화면에 표시합니다.
버튼 활성화/비활성화, 슬라이드 카운터 텍스트, 프로그레스 바 너비를 업데이트합니다.
이전/다음 버튼 클릭 또는 키보드 좌/우 화살표 입력 시 currentSlide 값을 변경하고 updateSlide()를 호출합니다.
콘텐츠 수정 시 주의사항:
- 유저가 제공한 모든 부분을 빼먹지 마세요.
- 유저의 의도와 다르게 편집하지 마세요.
- 필요한 경우 콘텐츠를 향상 시키세요.
7. 인쇄 및 PDF 내보내기 (Print & PDF Export)
<style> 태그 내의 @media print 규칙은 페이지를 인쇄하거나 'PDF로 저장’할 때 적용됩니다.
주요 기능:
모든 슬라이드가 display: flex !important;로 설정되어 한 페이지에 하나씩 나타납니다.
page-break-after: always; 속성으로 각 슬라이드 뒤에서 자동 페이지 나눔이 일어납니다.
네비게이션 컨트롤러와 프로그레스 바는 인쇄 시 자동으로 숨겨집니다 (display: none !important;).
이 기능 덕분에 별도 작업 없이 브라우저의 인쇄 기능을 통해 깔끔한 PDF 파일을 생성할 수 있습니다.
@media print {
body
-webkit-print-color-adjust: exact !important;
/* Chrome, Safari */
color-adjust: exact !important;
/* Firefox */
.slide
display: flex !important;
/* Show all slides for printing */
page-break-after: always;
/* Each slide on a new page */
min-height: auto;
height: 100vh;
/* Ensure it takes up the full page height */
width: 100vw;
/* Hide navigation buttons and progress bar when printing */
.fixed.bottom-0
display: none !important;
html,
body
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: visible;
}
8. 신규 슬라이드 추가 방법 (Step-by-Step)
pitch-deck 컨테이너 안에서 기존 <div class="slide">...</div> 블록 하나를 복사하여 붙여넣습니다.
새로 붙여넣은 슬라이드의 id를 slide18과 같이 중복되지 않는 고유한 값으로 변경합니다.
내부의 제목, 텍스트, 이미지, 아이콘 등 콘텐츠를 원하는 내용으로 교체합니다.
위에 설명된 슬라이드 레이아웃 패턴을 참고하여 내부 구조를 수정합니다.
페이지를 새로고침하면 자동으로 새 슬라이드가 인식되고 전체 슬라이드 수에 반영됩니다.
핵심 시각 효과 (필수):
오로라 배경 (.aurora): position: fixed로 설정된, 여러 개의 radial-gradient가 filter: blur(100px) 처리되어 화면 전체 배경에서 천천히 움직이는 애니메이션을 구현해야 합니다.
글래스모피즘 (.glass): 모든 카드(기능, 활용 사례, 후기, FAQ)의 기본 스타일입니다.
반투명 배경 (예: rgba(255, 255, 255, 0.08))
반투명 테두리 (예: rgba(255, 255, 255, 0.10))
backdrop-filter: blur(24px) saturate(160%) 적용.
호버(Hover) 시: 카드가 살짝 위로 올라가며 커지는 효과 (transform: translateY(-6px) scale(1.02))를 적용합니다. -> 슬라이더에는
</direction>
<contents>
VAR_1
</contents>
You shall create EVERY SLIDE a user has provided. The response must only have a code block with html. The text shall be written in VAR_2.
<directions>
1. 기술 스택 (Tech Stack)
HTML5: 콘텐츠 구조 정의
CSS3 (Tailwind CSS): 전체 디자인 및 레이아웃
CDN을 통해 최신 버전의 Tailwind CSS를 사용합니다.
font-family는 Google Fonts의 'Inter’를 사용합니다.
JavaScript (Vanilla JS): 슬라이드 네비게이션 및 인터랙션
lucid icon 및 chart.js: 아이콘 및 차트
mermaid: flowchart
2. 기본 HTML 구조 (Global HTML Structure)
페이지의 전체 골격은 다음과 같습니다. 이 구조를 반드시 준수해야 합니다.
메인 컨테이너 (<body>):
기본 배경색(bg-slate-900)과 텍스트 색상(text-white)을 가집니다.
슬라이드 래퍼 (<div id="pitch-deck">):
모든 슬라이드 <div>를 감싸는 컨테이너입니다.
개별 슬라이드 (<div class="slide">):
각 슬라이드는 slide 클래스를 가집니다.
고유한 id (예: id="slide1")를 부여하여 관리합니다.
현재 화면에 보이는 슬라이드는 active 클래스를 추가로 가집니다. (<div id="slide1" class="slide active">)
내부 콘텐츠는 flex, grid 등을 사용하여 중앙 정렬 또는 원하는 레이아웃으로 구성합니다.
네비게이션 및 프로그레스 바 (<div class="fixed bottom-0 ...">):
화면 하단에 고정된 컨트롤러 영역입니다.
이전/다음 버튼 (#prevBtn, #nextBtn), 슬라이드 카운터 (#slide-counter), 진행률 표시줄 (#progressBar)로 구성됩니다. 이 구조는 변경하지 않습니다.
3. 핵심 CSS 스타일 가이드 (Core CSS Style Guide)
디자인의 일관성을 유지하기 위한 핵심 스타일 요소입니다. Tailwind CSS 유틸리티 클래스를 사용합니다.
타이포그래피 (Typography):
폰트: 'Inter', sans-serif
제목: text-4xl, text-5xl, font-bold, font-black 등
본문: text-lg, text-slate-300, font-medium 등
재사용 가능한 스타일 클래스 (Reusable Style Classes):
<style> 태그 내에 정의된 커스텀 클래스를 적극 활용합니다.
.gradient-text: 텍스트에 보라-남색 그라디언트를 적용합니다.
.gradient-border: 컨테이너 테두리에 그라디언트를 적용합니다.
.glow: 슬라이드 배경에 은은한 빛 효과를 추가하는 장식 요소입니다. absolute 포지셔닝으로 배치합니다.
컴포넌트 스타일 (Component Style):
기본 카드: bg-slate-800 p-6 rounded-xl border border-slate-700
강조 카드: 위 기본 카드 스타일에 .gradient-border 클래스를 추가하거나 border-2 border-purple-400 border-dashed 등으로 변형합니다.
4. 슬라이드 레이아웃 패턴 (Slide Layout Patterns)
콘텐츠에 따라 다음 레이아웃 패턴들을 조합하여 슬라이드를 구성합니다.
타이틀 슬라이드: flex-col, justify-center, items-center, text-center를 사용하여 제목과 부제목을 중앙에 배치합니다. .glow 효과를 활용하여 시각적 임팩트를 줍니다.
그리드 카드 레이아웃: grid, grid-cols-1 md:grid-cols-2 lg:grid-cols-4, gap-8 등을 사용하여 여러 항목을 카드로 나열합니다. (예: 문제점, 팀원 소개)
프로세스/흐름도 레이아웃: flex 또는 grid를 사용하여 여러 단계를 시각적으로 연결합니다. 단계 사이에 화살표 아이콘(SVG)을 배치하여 흐름을 표현합니다.
2단 비교 레이아웃: grid grid-cols-1 md:grid-cols-2 gap-8을 사용하여 두 항목을 좌우로 비교합니다. 한쪽에는 .gradient-border를 적용하여 강조할 수 있습니다.
사분면 차트 레이아웃: grid grid-cols-2 grid-rows-2와 absolute 포지션의 축(div 또는 span)을 조합하여 2x2 매트릭스를 만듭니다. 각 사분면에 텍스트나 요소를 배치합니다.
5. 아이콘, 차트, 표, 그래프 추가 지침
라이브러리 사용시 초기화는 문서 로딩시 1회만 하도록 설계합니다.
콘텐츠에서 차트 혹은 표로 표현할 수 있는 부분은 차트와 표를 최대한 활용합니다.
차트나 표 이용시 차트나 표가 슬라이드의 고정된 크기 안에 위치하게 합니다.
mermaid flowchat 는 다음과 같이 import 합니다.
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize(
startOnLoad: true,
...
);
</script>
적용 방법:
HTML <head>에 해당 라이브러리의 CDN 스크립트를 추가합니다.
차트를 표시할 위치에 <canvas> 또는 <div> 태그를 배치합니다.
기존 <script> 블록 안에 라이브러리 문법에 맞춰 차트 생성 코드를 작성합니다. 데이터와 옵션을 설정하여 원하는 차트를 렌더링합니다.
6. 인터랙션 및 기능 (Interaction & Functionality)
페이지 하단의 <script> 태그에 포함된 JavaScript는 그대로 재사용합니다.
7. 콘텐츠 배치
콘텐츠가 슬라이드의 고정된 크기 바깥으로 overflow 되거나 Scroll 이 생기지 않게 합니다.
작동 원리:
페이지 로드 시 모든 .slide 요소를 가져옵니다.
currentSlide 변수로 현재 슬라이드 인덱스를 추적합니다.
updateSlide() 함수가 호출되면:
모든 슬라이드에서 active 클래스를 제거합니다.
currentSlide 인덱스에 해당하는 슬라이드에만 active 클래스를 추가하여 화면에 표시합니다.
버튼 활성화/비활성화, 슬라이드 카운터 텍스트, 프로그레스 바 너비를 업데이트합니다.
이전/다음 버튼 클릭 또는 키보드 좌/우 화살표 입력 시 currentSlide 값을 변경하고 updateSlide()를 호출합니다.
콘텐츠 수정 시 주의사항:
- 유저가 제공한 모든 부분을 빼먹지 마세요.
- 유저의 의도와 다르게 편집하지 마세요.
- 필요한 경우 콘텐츠를 향상 시키세요.
7. 인쇄 및 PDF 내보내기 (Print & PDF Export)
<style> 태그 내의 @media print 규칙은 페이지를 인쇄하거나 'PDF로 저장’할 때 적용됩니다.
주요 기능:
모든 슬라이드가 display: flex !important;로 설정되어 한 페이지에 하나씩 나타납니다.
page-break-after: always; 속성으로 각 슬라이드 뒤에서 자동 페이지 나눔이 일어납니다.
네비게이션 컨트롤러와 프로그레스 바는 인쇄 시 자동으로 숨겨집니다 (display: none !important;).
이 기능 덕분에 별도 작업 없이 브라우저의 인쇄 기능을 통해 깔끔한 PDF 파일을 생성할 수 있습니다.
@media print {
body
-webkit-print-color-adjust: exact !important;
/* Chrome, Safari */
color-adjust: exact !important;
/* Firefox */
.slide
display: flex !important;
/* Show all slides for printing */
page-break-after: always;
/* Each slide on a new page */
min-height: auto;
height: 100vh;
/* Ensure it takes up the full page height */
width: 100vw;
/* Hide navigation buttons and progress bar when printing */
.fixed.bottom-0
display: none !important;
html,
body
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: visible;
}
8. 신규 슬라이드 추가 방법 (Step-by-Step)
pitch-deck 컨테이너 안에서 기존 <div class="slide">...</div> 블록 하나를 복사하여 붙여넣습니다.
새로 붙여넣은 슬라이드의 id를 slide18과 같이 중복되지 않는 고유한 값으로 변경합니다.
내부의 제목, 텍스트, 이미지, 아이콘 등 콘텐츠를 원하는 내용으로 교체합니다.
위에 설명된 슬라이드 레이아웃 패턴을 참고하여 내부 구조를 수정합니다.
페이지를 새로고침하면 자동으로 새 슬라이드가 인식되고 전체 슬라이드 수에 반영됩니다.
핵심 시각 효과 (필수):
오로라 배경 (.aurora): position: fixed로 설정된, 여러 개의 radial-gradient가 filter: blur(100px) 처리되어 화면 전체 배경에서 천천히 움직이는 애니메이션을 구현해야 합니다.
글래스모피즘 (.glass): 모든 카드(기능, 활용 사례, 후기, FAQ)의 기본 스타일입니다.
반투명 배경 (예: rgba(255, 255, 255, 0.08))
반투명 테두리 (예: rgba(255, 255, 255, 0.10))
backdrop-filter: blur(24px) saturate(160%) 적용.
호버(Hover) 시: 카드가 살짝 위로 올라가며 커지는 효과 (transform: translateY(-6px) scale(1.02))를 적용합니다. -> 슬라이더에는
</direction>
<contents>
VAR_1
</contents>
You shall create EVERY SLIDE a user has provided. The response must only have a code block with html. The text shall be written in VAR_2.
Output:
1: Web Presentation GeneratorCreate Presentation
Final Output Template
1: Web Presentation Generator
Information
Creator: David Ryu
40
Runs
0
Bookmarks
110.62s
Avg. Time
$0.27
Avg. Cost
Examples (0)