그래픽 슬라이드 데크은(는) 무엇을 하나요?
브리핑, 내용 노트 또는 기존 파일을 기반으로 전문적으로 디자인된 HTML 슬라이드 데크를 생성합니다. 출력은 단일 자체 포함 HTML 파일이며, 별도의 빌드 도구 없이 모든 브라우저에서 열 수 있습니다.
중요 규칙 -- 절대 예외 없음:
- 모든 슬라이드는 반드시 100vh 이내에 맞아야 합니다. 슬라이드 내 스크롤은 허용되지 않습니다. 콘텐츠가 넘칠 경우 두 개의 슬라이드로 분할합니다.
- 모든 글꼴 크기와 간격은 반드시
clamp()를 사용해야 합니다. 크기가 조정되는 요소에 고정 px/rem을 절대 사용하지 마십시오. - 단일 자체 포함 HTML: 모든 CSS/JS는 인라인으로 포함합니다. 글꼴 CDN 링크를 제외하고 외부 종속성은 없습니다.
- HTML을 채팅에 덤프하지 마십시오. 파일로 저장하고 요약만 표시합니다.
- 일반적인 AI 쓰레기 미학을 사용하지 마십시오.
references/style-presets.md의 사용 금지 목록을 확인하십시오.
1단계: 브리핑 수집
시작하려면 세 가지가 필요합니다. 메시지에 세 가지가 모두 있으면 2단계로 건너뜁니다.
누락된 항목이 있으면 정확히 다음과 같이 질문합니다:
"시작하려면 세 가지가 필요합니다:
- 목적 -- 이 데크는 무엇을 위한 것인가요? (투자자 피치 / 영업 콜 / 컨퍼런스 발표 / 내부 프레젠테이션 / 온보딩 / 기타)
- 대상 -- 누가 볼 것인가요? (투자자, 잠재 고객, 팀, 경영진, 컨퍼런스 참석자, LinkedIn)
- 주제 또는 콘텐츠 -- 노트, URL, 간단한 설명을 붙여넣거나 파일을 업로드해 주세요"
계속 진행하기 전에 세 가지 모두를 기다립니다.
2단계: 전체 정보 수집
모든 질문을 하나의 메시지로 묶어 카테고리별로 그룹화하여 질문합니다. 사용자는 건너뛸 수 있으며 기본값이 적용됩니다.
"시작하기 전에 몇 가지 질문이 있습니다:
콘텐츠
- 핵심 메시지 -- 관객이 자리를 떠난 후 기억해야 할 한 문장
- 슬라이드 수 -- 짧음(5-10) / 중간(10-20) / 김(20+)?
- 콘텐츠 출처 -- 모든 콘텐츠 준비됨 / 대략적인 노트(제가 구조화하겠습니다) / 주제만 있음(제가 초안을 작성하겠습니다)?
- 기존 에셋 -- 포함할 이미지, 스크린샷 또는 로고가 있나요? (예 + 경로 / 아니요)
디자인 5. 스타일 -- midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "옵션 보여주기" 6. 화면 비율 -- 16:9 (1920×1080, 기본값) / 1:1 (1080×1080, LinkedIn) 7. 인라인 편집 -- 내보내기 후 브라우저에서 텍스트를 편집할 수 있나요? (예 / 아니요)
출력 8. 출력 형식 -- HTML만 / HTML + PDF / HTML + PDF + URL 배포 9. 데크 이름 -- 파일/폴더 이름 지정을 위한 슬러그 (예: "q2-investor-pitch"); 건너뛰면 제가 생성합니다"
건너뛴 경우 기본값:
| 질문 | 기본값 |
|---|---|
| 핵심 메시지 | 목적 + 주제에서 파생 |
| 슬라이드 수 | 12 |
| 콘텐츠 출처 | 주제만 있음 |
| 기존 에셋 | 없음 |
| 스타일 | clean-slate |
| 화면 비율 | 16:9 |
| 인라인 편집 | 아니요 |
| 출력 형식 | HTML + PDF |
| 데크 이름 | 주제 슬러그에서 파생 |
스타일이 "옵션 보여주기"인 경우:
데크 목적에 맞는 3가지 다른 스타일 프리셋 각각에 대해 단일 슬라이드 HTML 미리보기를 3개 생성합니다. .claude-design/previews/style-a.html, style-b.html, style-c.html에 저장합니다. 각각을 엽니다: open .claude-design/previews/style-a.html 등. 3단계 전에 사용자가 선택하도록 요청합니다.
2.5단계: 내부 디자인 방향 (사용자에게 표시되지 않음)
2단계 답변에서 3단계 전에 다음을 결정합니다:
시각적 특성 (스타일에서 파생되거나, 지정되지 않은 경우 추론):
- midnight-editorial 또는 magazine-red →
dark-editorial - clean-slate 또는 product-minimal →
light-minimal - matt-gray →
neutral-professional - brutalist →
bold-expressive - mint-pixel-corporate 또는 soft-cloud →
fresh-corporate - 스타일 미지정: 투자자 피치 → midnight-editorial; 영업 → clean-slate; 컨퍼런스 → brutalist 또는 midnight-editorial; 내부 → matt-gray
하나의 놓칠 수 없는 슬라이드 -- 3단계 전에 식별:
- 투자자 피치 → stat-highlight (트랙션/지표 슬라이드)
- 영업 데크 → stat-highlight (ROI/결과 슬라이드)
- 컨퍼런스 발표 → quote-callout 또는 stat-highlight (핵심 인사이트)
- 내부 프레젠테이션 → closing-cta (의사 결정/권장 슬라이드)
레이아웃 선택 편향 -- 3단계에서 우선 순위를 지정하기 위해 이 데크 유형에 가장 관련성 높은 2-3개의 레이아웃을 기록합니다.
디자인 방향에 대해 사용자에게 절대 묻지 마십시오. 답변에서 완전히 파생하십시오.
3단계: 구조 설계
계획을 세우기 전에 references/layout-library.md를 읽으십시오.
전체 슬라이드 순서를 계획합니다. 각 슬라이드에 references/layout-library.md의 13가지 레이아웃 유형 중 하나를 할당합니다.
데크 유형 → 일반적인 구조:
투자자 피치 (12 슬라이드):
- [title-hero] 회사 + 태그라인
- [section-divider] 문제
- [text-full] 문제 세부 사항
- [text-left-image-right] 솔루션 개요
- [image-full] 제품 스크린샷
- [stat-highlight] 트랙션 -- 놓칠 수 없는 슬라이드
- [comparison-table] 경쟁사 대비
- [timeline] 로드맵
- [text-full] 팀
- [stat-highlight] 시장 규모
- [text-left-image-right] 비즈니스 모델
- [closing-cta] 투자 요청
영업 데크 (8-10 슬라이드):
- [title-hero]
- [quote-callout] 잠재 고객의 문제점
- [text-left-image-right] 솔루션
- [image-grid] 제품 스크린샷
- [stat-highlight] ROI/결과 -- 놓칠 수 없음
- [comparison-table] 대안 대비
- [text-full] 구현 / 다음 단계
- [closing-cta]
컨퍼런스 발표 (15-20 슬라이드): title-hero → section-divider → text-full 슬라이드 → image-full → stat-highlight 또는 quote-callout (놓칠 수 없음) → timeline → closing-cta
내부 프레젠테이션 (8-12 슬라이드): title-hero → text-full (맥락) → stat-highlight (현재 상태) → two-column-text (옵션) → comparison-table → text-full (권장 사항) → closing-cta (의사 결정 -- 놓칠 수 없음)
제안된 구조를 [레이아웃-유형]을 대괄호로 묶어 번호 목록으로 출력합니다. 예시:
제안된 구조 (12 슬라이드, midnight-editorial 스타일):
1. [title-hero] DataPulse -- 5분 만에 revenue 결정
2. [section-divider] 문제
...
12. [closing-cta] 투자 요청 + [email protected]
이 구조가 적합한가요, 아니면 슬라이드를 조정해야 할까요?
4단계 전에 확인을 기다립니다.
4단계: 콘텐츠 초안
순서대로 슬라이드별 사본을 작성합니다. 일반 텍스트만 -- 아직 HTML은 없습니다.
레이아웃별 사본 규칙:
title-hero: 헤드라인 (최대 6단어) + 부제목 (1문장) + 선택적 필 배지 텍스트section-divider: 2-4단어 섹션 레이블만text-full: 제목 (최대 5단어) + 4-6개 글머리 기호 또는 2개 단락 (동일 슬라이드에 둘 다 절대 안 됨)text-left-image-right/image-left-text-right: 제목 + 3-4개 글머리 기호 +[IMAGE: 설명]two-column-text: 2개 열 제목 + 각각 최대 3개 글머리 기호image-full:[IMAGE: 설명]+ 선택적 캡션 (최대 10단어)image-grid: 최대 6개의[IMAGE: 설명]자리 표시자와 짧은 캡션stat-highlight: 2-4개의 지표를NUMBER | 레이블형식으로 작성 (예:3× | 더 빠른 마감). 본문 사본은 없음.quote-callout: 인용문 (최대 30단어) + 출처 (이름, 직함)comparison-table: 열 헤더 (최대 3개) + 4-6개 행 레이블 + 셀 내용 (각각 1-3단어)timeline: 3-6개 이정표 (레이블 + 날짜 + 1줄 설명)closing-cta: 헤드라인 (최대 5단어) + CTA 액션 텍스트 + 연락처 정보 (이메일 + URL -- 둘 다 필수)
금지 단어 (모든 사본에서 예외 없음): "강력한", "매끄러운", "게임 체인저", "활용하다", "혁신적인", "혁명적인", "변환하다", "최첨단", "견고한", "잠금 해제", "확장 가능한" (형용사로 사용 시).
사본 철학: 구문은 괜찮습니다. 숫자는 형용사보다 낫습니다. 모든 단어는 그 자리를 차지할 가치가 있습니다.
5단계: HTML 생성
HTML을 생성하기 전에 모든 것을 읽으십시오:
이 기술의 참고 자료:
references/design-system.mdreferences/layout-library.mdreferences/style-presets.mdreferences/animation-guide.md
frontend-slides 교차 참조 (이 정확한 파일들을 읽으십시오):
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css--<style>블록 안에 전체 내용을 그대로 포함/Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md-- SlidePresentation 클래스, 키보드 탐색, 인라인 편집 시스템/Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md-- 등장 애니메이션, 배경 효과, 인터랙티브 효과
생성 규칙:
- 단일 자체 포함 HTML. 모든 CSS와 JS는 인라인. 글꼴 CDN
<link>가 유일한 외부 참조입니다. <style>블록 안에viewport-base.css의 전체 내용을 그대로 포함하십시오. 요약하거나 줄이지 마십시오.- 글꼴은 Google Fonts 또는 Fontshare에서만 사용합니다. 글꼴 선택은
references/style-presets.md에서 선택한 프리셋에서 가져옵니다. html-template.md의 SlidePresentation 클래스를 사용합니다. 전체 키보드 탐색 (화살표, 스페이스, Page Up/Down), 터치/스와이프, 진행률 표시줄 및 탐색 점을 구현합니다. 탐색 점을 만들기 전에navDotsContainer.innerHTML = ""를 반드시 실행하십시오.- 인라인 편집이 선택된 경우:
html-template.md의 전체 인라인 편집 시스템을 구현하고exportFile()함수를 포함합니다.exportFile()함수는outerHTML을 캡처하기 전에contenteditable,body.edit-active,.active/.show클래스를 반드시 제거해야 합니다. - 화면 비율:
- 16:9 (기본값): 슬라이드는
width: 100vw; height: 100vh - 1:1 (LinkedIn):
--slide-height: min(100vh, 100vw)CSS 사용자 정의 속성을 추가하고.slide에 사용합니다.
- 16:9 (기본값): 슬라이드는
- 모든 슬라이드 섹션은 반드시
class="slide"를 사용해야 합니다. export-pdf.sh의 슬라이드 감지에 필요합니다. - 각 슬라이드 앞에 주석을 추가합니다:
/* === SLIDE N: LAYOUT-TYPE === */ - 2.5단계의 하나의 놓칠 수 없는 슬라이드에 최대 시각적 가중치를 적용합니다. 가장 큰 타이포그래피, 가장 많은 애니메이션, 스타일 프리셋의 시그니처 요소를 최대 강도로 적용합니다. 다른 모든 슬라이드는 구성적으로 더 조용합니다.
- 이미지가 제공되지 않은 경우 → CSS 생성 시각 자료(그라디언트 메시, 기하학적 도형,
animation-patterns.md의 격자 패턴)를 사용합니다. 이는 대체 경로가 아닌 일급 경로입니다.
타이포그래피 규율:
- 통계 숫자:
clamp(3.5rem, 12vw, 9rem)-- 슬라이드의 3분의 1을 채우는 지표는 권위 있어 보입니다. - 히어로 헤드라인: 최소
clamp(2.5rem, 8vw, 6rem). 안전을 위해 크기를 줄이지 마십시오. - 사용자가 보는 모든 요소에 고정 px/rem을 절대 사용하지 마십시오. 모든 것을
clamp()처리하십시오.
viewport-base.css의 CSS 주의 사항: CSS에 -clamp(), -min(), -max()를 직접 작성하지 마십시오. calc(-1 * clamp(...))로 감싸십시오.
6단계: 자체 QA
모든 항목을 확인합니다. 모든 실패를 수정합니다. 건너뛰지 마십시오.
뷰포트 및 렌더링:
- 모든
.slide에height:100vh; height:100dvh; overflow:hidden이 있는가? - 모든 글꼴 크기와 간격이
clamp()를 사용하는가? -- 크기 조정 요소에 고정 px가 없는가? - 1280×720 뷰포트에서 슬라이드가 넘치지 않는가? (
layout-library.md의 밀도 한계 확인) - 이미지가
max-height: min(50vh, 400px)를 사용하는가? - 700px, 600px, 500px 뷰포트 높이에 대한 중단점이 있는가? (viewport-base.css에서)
-
prefers-reduced-motion미디어 쿼리가 있는가? - CSS에
-clamp(),-min(),-max()가 없는가? (음수가 필요한 경우calc(-1 * ...)로 감쌈)
구조:
- 슬라이드 수가 3단계 계획과 일치하는가?
- 모든 슬라이드가
class="slide"를 사용하는가? - 각 레이아웃 유형이
references/layout-library.md에 따라 올바르게 구현되었는가? - 키보드 탐색, 터치, 진행률 표시줄, 탐색 점이 있는 SlidePresentation 클래스가 있는가?
- 탐색 점을 만들기 전에
navDotsContainer.innerHTML = ""를 실행했는가? - 인라인 편집이 선택된 경우:
exportFile()이outerHTML을 캡처하기 전에 편집 상태를 제거하는가?
디자인 품질:
- 하나의 놓칠 수 없는 슬라이드가 시각적으로 지배적인가? -- 동등한 가중치의 슬라이드 사이에 묻히지 않았는가?
- 타이포그래피 계층 구조가 명확한가? 표시 >> 제목 >> 본문 (수준 간 최소 2:1 크기 비율)
- 스타일 프리셋 토큰이 일관되게 적용되었는가? (색상,
references/style-presets.md의 글꼴) - 슬롭 패턴이 없는가? (
references/style-presets.md의 사용 금지 목록 확인)
콘텐츠:
- 모든 슬라이드 사본에 금지 단어가 없는가?
- title-hero 헤드라인이 6단어 이하인가?
- stat-highlight에 숫자와 경쟁하는 본문 사본이 없는가?
- closing-cta에 구체적인 액션 + 연락처 정보가 있는가? (단순히 "감사합니다"가 아님)
확인에 실패한 경우: 인라인으로 수정한 다음, 진행하기 전에 정신적으로 체크리스트를 다시 실행합니다.
7단계: 출력
먼저 기본 HTML을 저장합니다:
mkdir -p deck/[name]-slides
deck/[name]-slides/index.html에 씁니다.
열기: open deck/[name]-slides/index.html
슬라이드별 HTML 파일 (항상 생성):
기본 HTML에서 각 <section class="slide">를 추출합니다. 각각에 대해 최소 HTML 셸로 감싸 독립형 파일을 만듭니다:
- 기본 HTML의 전체
<style>블록 (그대로 복사) - 최소 HTML 셸에 감싼 개별
<section class="slide"> - SlidePresentation JS 없음 (정적 슬라이드별 보기, 탐색 불필요)
deck/[name]-slides/slide-001.html, slide-002.html 등에 씁니다. (3자리 숫자로 0 채움).
PDF가 요청된 경우:
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
deck/[name]-slides/index.html \
deck/[name].pdf
참고: 첫 번째 실행 시 Playwright가 자동으로 설치됩니다. (~30-60초). 사용자에게 알립니다.
배포가 요청된 경우:
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
deck/[name]-slides/
정리: 2단계에서 스타일 미리보기 파일이 생성된 경우 .claude-design/previews/를 삭제합니다.
8단계: 요약 (채팅에 HTML 없음)
채팅에 표시:
## 슬라이드 데크: [데크 이름]
날짜: [오늘] | 스타일: [스타일] | 슬라이드: [N] | 화면 비율: [16:9 또는 1:1]
목적: [목적] | 대상: [대상]
---
### 파일
기본: deck/[name]-slides/index.html
슬라이드별: deck/[name]-slides/slide-001.html → slide-0NN.html
PDF: deck/[name].pdf [생성된 경우]
라이브 URL: [url] [배포된 경우]
---
### 탐색
화살표 키 / 스페이스 / Page Up/Down -- 슬라이드 이동
탐색 점 클릭 -- 모든 슬라이드로 이동
터치 / 스와이프 -- 모바일에서 작동
---
### 사용자 정의
파일 상단의 :root CSS 변수를 편집하여 색상 변경
@import 글꼴 URL을 교체하여 타이포그래피 변경
요소에서 .reveal 클래스를 제거하여 등장 애니메이션 비활성화
---
### 데크 체크리스트
- [ ] [IMAGE: 설명] 자리 표시자를 실제 이미지로 교체
- [ ] [N]번 슬라이드의 지표/인용문(놓칠 수 없는 슬라이드) 정확성 확인
- [ ] 대상 디스플레이 크기([1920×1080 또는 1080×1080])에서 테스트
- [ ] 라이브 프레젠테이션 시: 전체 화면에서 키보드 탐색 테스트