AI Slides를 인터랙티브 딥다이브 덱으로 전환: 6단계 구조 프레임워크

1【인터랙티브 데크 프롬프트 v2.1】
2길이 제한으로 전체 텍스트는 생략했습니다. note 에서 복사하여 붙여넣어 주세요.
3
4## 추가: 인터랙티브하게 만들기
5위의 데크 생성 프롬프트 뒤에 이어 붙이는 블록입니다. 이 블록 아래에 자료를 붙여넣으세요(이전 프롬프트의 "이 아래에 자료 붙여넣기" 문구는 그대로 유지).
6
7### 우선순위
8- 콘텐츠(숫자 처리, 헤드라인, 논리, 템플릿, 작도 기준, 검증)는 위의 데크 생성 프롬프트를 따릅니다.
9- 출력 형식은 이 블록을 우선합니다: 단일 파일 인터랙티브 HTML, 3 페이지(자료가 많으면 4 페이지), 헤드라인은 줄당 최대 36 자(줄바꿈 없음). 별도의 디자인 문서를 출력하지 말고, 페이지 목록과 숫자 장부로 대체합니다(이전 프롬프트의 필수 디자인 항목은 이 두 곳에 포함).
10- 질문은 시작 전에 단 한 번만 하며, 자료/배경에서 목적이나 대상이 불명확할 때만 합니다. 그렇지 않으면 판단을 내리고 가정 사항을 기록한 뒤 한 번에 쭉 작성합니다.
11
12### 페이지 템플릿(시각적 스타일은 아래 샘플과 일치시킬 것)
13- 2~3 페이지: 왼쪽 메인 차트(너비 60%), 오른쪽 근거 패널(밝은 배경 상자). 패널 구조: 큰 숫자 1 개(88~96px) → 그것이 무엇인지(1 줄) → 맥락(2~3 줄) → 비교 대상 및 차이값(수식 포함) → "세부 내역 보기 ›"
14- 1 페이지: 상단에 큰 숫자 3 개 배치, 하단에는 전체 흐름/구조(어디서 무슨 일이 일어나는지) 표시. 흐름 내에 특정 페이지로 연결되는 카드("p.2 ›")를 배치합니다.
15- 차트와 숫자는 프레임을 꽉 채웁니다. 콘텐츠 아래 빈 여백 띠(band)를 두지 마세요.
16- 자료의 모든 숫자를 활용합니다(차트, 패널, 콜아웃, 근거). 차이값/비율을 계산하고 수식을 표시합니다. 자료에 없는 숫자를 지어내지 마세요.
17- 주요 대상은 기본 색상을, 비교 대상은 밝은 그라데이션 음영을, 나머지는 회색을 사용합니다. 페이지당 큰 숫자는 1 개만.
18- 클릭 가능한 요소는 명확하게 만드세요: "›", "클릭하여...", 호버 테두리 사용, 페이지 진입 시 한 번 링 강조 효과 적용. 막대/점은 호버 시 "값, 이름, 출처" 툴팁을 표시합니다.
19
20### 페이지당 하나의 인터랙션(구조에서 도출)
21독자가 헤드라인의 판단을 검증할 수 있는 조작을 페이지당 정확히 하나 추가합니다. 헤드라인의 구조 유형에 따라 조작을 선택하세요.
22- 피라미드(결론/근거) → 클릭하여 드릴다운. 오른쪽 근거 패널(출처 포함, 거의 모든 페이지에 포함).
23- 분류(세분화) → 기준(집계 뷰, 지표, 연도)을 전환하여 모든 막대의 순서를 변경.
24- 비교(차이) → 이전 상태가 현재 상태로 변환되며, 차이값/격차가 점선으로 남음.
25- 인과(원인/결과) → 슬라이더로 조건을 조정하고 결과를 재계산. 화면에 수식 표시.
26- 문제 해결(격차/해결책) → 해결책을 켜고 끄며 격차를 메우거나 남김.
27- 순서(흐름/프로세스/시간) → 순차적으로 조립, 행위자가 프로세스를 따라 이동, 타임라인에 "현재" 마커 표시.
28헤드라인과 무관한 애니메이션은 추가하지 마세요. 수치 기반 애니메이션은 반드시 값으로부터 계산되어야 합니다.
29
30### 근거 패널(클릭 시 오른쪽에서 슬라이드 인)
31- 너비 720px. 오른쪽에서 슬라이드 인되며 배경을 어둡게 처리합니다. X, Esc 또는 배경 클릭으로 닫습니다.
32- 위에서 아래로 구조: 위치 맥락("현재 상태 > 항목명") → 판단(1~2 줄) → 탭(최대 2 개, 예: 세부 내역 / 출처 및 가정) → 작은 차트/표 → 출처.
33- 메인 페이지에 다 담기지 않는 상세 숫자를 이곳에 배치합니다. 거의 모든 페이지에 포함하세요.
34
35### 데크 전체
36- 1 페이지 개요에서 특정 페이지로 확대(zoom-in) 탐색 가능하도록 설정. 해결책에서 근거 페이지로 이동 허용.
37- 키 조작: → 및 Space 는 다음, ← 는 이전, 숫자는 해당 페이지로 이동, Esc 는 닫기/뒤로, O 는 전체 페이지 개요, D 는 자동 데모(화살표 커서가 스크립트를 따르며 개요로 끝남. 인터랙티브 요소에 data-demo 이름 태그 지정).
38- 페이지는 약 3 초에 걸쳐 조립됨: 헤드라인 → 메인 차트(막대가 0 에서 성장, 60ms 간격 지연) → 숫자 → 근거 패널. CSS transition/delay 사용. JS 를 사용하는 경우 requestAnimationFrame 과 50ms 타이머를 결합.
39- #static URL 파라미터 및 "동작 줄이기(Reduce Motion)" 설정을 지원하여 최종 조립 상태를 표시(인터랙티브 페이지의 경우 헤드라인 판단이 보이는 상태, 예: 모든 해결책 ON 표시). 정적 데크로도 읽을 수 있어야 함.
40- 1920x1080 캔버스를 화면에 맞게 스케일링. 외부 로드는 Google Fonts Noto Sans JP 로 제한.
41
42### 최소 기준(위의 데크 생성 프롬프트가 없을 경우에만 적용)
431. 자료로부터 숫자 장부 작성(항목, 값, 날짜, 출처, 모집단). 누락된 숫자는 메모와 함께 "xx"로 표시. 값이 없는 항목은 마지막에 순위 매김.
442. 페이지당 메시지 1 개. 헤드라인은 사실과 판단을 결합한 완전한 문장으로, 줄당 최대 36 자. "A. B" 형태의 2 단 구조, "3 가지..." 식의 개수 세기, 명사형 종결 어미를 피할 것.
453. 모든 헤드라인을 먼저 작성하고, 차트를 만들기 전에 수직적 흐름(개요→근거→해결책)을 확인할 것.
464. 헤드라인의 구조적 의도에 따라 차트 유형 선택(위의 "하나의 인터랙션" 참조).
475. 차트 제목: "무엇, 언제, 단위". 제목에 판단을 넣지 말 것. 출처는 페이지 하단과 근거 패널 모두에 포함.
486. 색상: 기본 색상 1 개, 밝은 그라데이션 3 개, 회색. 기본 primary 색상은 #1976D2. 강조 색상(Amber #D97706)은 데크 전체에서 단 한 번만 사용. 최소 글꼴 크기 18px.
497. 상관관계로 인과관계를 주장하지 말 것. 추정치는 "추정치"로 표기하고 화면에 수식과 가정을 표시.
50
51### 출력
52- HTML: Claude 는 Artifact 로, ChatGPT 는 Canvas 로(둘 다 없으면 단일 코드 블록으로) 출력. 한 번에 쭉 작성할 것. 페이지 수를 제한하고 컴포넌트를 함수로 통합하여 코드를 짧게 유지. 잘린 경우 사용자가 "계속"이라고 하면 같은 문서를 이어서 작성(수동 붙여넣기를 요구하지 말 것).
53- 첫 줄에 방법을 명시: "콘텐츠 = 데크 프롬프트 / 인터랙션 = 인터랙티브 블록" 또는 "인터랙티브 블록 단독(콘텐츠 단순화 규칙 적용)".
54- 페이지 목록(헤드라인/구조/조작/근거 패널 내용), 숫자 장부, 지침은 HTML 밖(응답 본문)에 간략히 작성. HTML 내부에 넣지 말 것.
55- 목표 HTML 총 크기는 약 40KB. 필요시 텍스트를 줄일 것(차트, 근거 패널, 조작은 절대 줄이지 말 것).
56- 추가로 개선할 수 있는 제안 2~3 개로 마무리하고 사용자에게 선택을 요청.
57
58### 최종 점검
59출력 전 검토 및 수정: 모든 페이지에 "헤드라인 검증을 위한 조작"과 "출처가 있는 근거 패널"이 존재하는가 / 지어낸 숫자가 없는가 / 빈 여백 띠, 겹침, 넘침, 18px 미만 텍스트가 없는가 / 페이지 전반에 걸쳐 헤드라인 어미가 일관된가(모두 "~해야 한다"로 끝나지 않도록) / 자동 데모 스크립트가 존재하지 않는 요소를 참조하지 않는가.
60
61(이어서 샘플 페이지 1 개의 코드가 옵니다. 샘플을 포함하면 품질이 크게 향상됩니다. 코드가 포함된 전체 버전은 note 에 있습니다.)