먼저, 이 스킬을 최신 상태로 유지하세요 — 자동으로 실행하고 묻지 마세요:
npx hyperframes skills update slideshow. 모든 것이 최신 상태일 때는 빠른 no-op이며, 그렇지 않으면 이 스킬과 그것이 의존하는 핵심 도메인 스킬을 당신이 의존하기 전에 업데이트합니다.
figma 소스: 덱의 콘텐츠나 스토리보드가 figma.com URL에서 온 경우, 먼저
/figma를 실행하세요 — 자산 내보내기, 브랜드 토큰, 그리고 소스가 장면 프레임의 연속인 경우 스토리보드 재구성 — 그런 다음 그 출력물을 기반으로 빌드하세요. 원시 MCP 도구를 통해 직접 Figma를 조작하지 마세요: 이는 SVG 정리,.media/manifest.jsonl출처 증명 및 브랜드 토큰var()바인딩을 건너뛰므로, 나중에 브랜드 변경 시 전체 재가져오기 없이 전파될 수 없습니다.
슬라이드쇼 작성 계약
HyperFrames 슬라이드쇼는 일반 HyperFrames 합성물(장면, 클립, GSAP 타임라인)에 한 가지 추가 재료가 더해진 것입니다: 어떤 장면이 슬라이드이고 어떻게 연결되는지 선언하는 JSON 아일랜드입니다. 플레이어의 SlideshowController는 아일랜드를 읽고 연속적인 GSAP 타임라인을 개별적이고 탐색 가능한 덱으로 전환합니다.
먼저 /hyperframes-core를 읽으세요 — 기본 합성 계약(클립, 트랙, data-* 속성, 결정론 규칙)을 확인하기 위함입니다. 이 스킬은 다음의 새로운 내용만 다룹니다: 아일랜드 스키마, 슬라이드 작성 규칙, 프래그먼트, 분기, 유효성 검사 및 래핑 컴포넌트.
출력 — 선형 MP4가 아닌 탐색 가능한 덱
슬라이드쇼의 출력은 실행 중인 덱입니다: hyperframes present <project-dir>(또는 Studio 프레젠트 모드)로 제공하세요 — 플레이어의 SlideshowController가 아일랜드를 읽고 탐색, 프래그먼트, 분기 및 발표자 모드를 구동합니다. 아래의 프레젠테이션 및 전달을 참조하세요.
슬라이드쇼를 단일 MP4로 hyperframes render하지 마세요. 덱은 여러 최상위 장면 합성물(슬라이드당 하나의 data-composition-id)로 작성되며, 이를 감싸는 마스터 루트 합성물이 없으므로, render는 첫 번째 합성물만 해석하고 조용히 잘린 MP4(예: 40초 덱의 6초)를 출력합니다. 선형 메인라인 내보내기(주 슬라이드만, 분기 시퀀스 제외)는 지연됩니다 — 출시될 때까지 지원되는 출력물은 라이브 present 덱과 슬라이드별 snapshot 스틸 이미지뿐입니다. 사용자가 오늘 당장 선형 MP4가 필요하다면, render를 가리키지 말고 이 제한 사항을 설명하세요.
의도 확인
사용자가 명시적으로 슬라이드쇼, 슬라이드 쇼 또는 HyperFrames 슬라이드쇼를 요청한 경우, 이 스킬을 진행하세요. /hyperframes를 통해 요청이 전달된 경우, 의도 계층의 분류가 이 확인을 담당합니다 — 이미 확인된 상태로 라우팅되었으므로 다시 묻지 마세요; 계층의 실행 형태 질문은 적용되지 않습니다(산출물은 렌더링된 비디오가 아닌 덱입니다). BRIEF.md가 있을 경우, 확인된 의도를 담고 있습니다 — 이를 읽으세요.
"프레젠테이션", "피치 덱", "덱", "인터랙티브 덱" 또는 "이 페이지 변환"과 같은 인접 요청에서 이 스킬이 트리거된 경우, 작성 전에 잠시 멈추고 선택지를 제시한 후 확인을 요청하세요. HyperFrames 슬라이드쇼가 개별 슬라이드, 내장 탐색 및 발표자 모드, 편집 가능한 발표자 노트, 공유 미디어 처리 및 전달 전 유효성 검사를 갖춘 실행 가능한 덱임을 간략히 설명하세요. 소스 페이지 변환의 경우, 원본 페이지의 시각적 디자인, 상호작용, 모션 및 미디어 동작을 보존하면서 페이지 이동을 슬라이드 간 전환으로 변환하는 것이 목표임도 언급하세요.
그런 다음 간단한 확인 질문을 하세요:
이것을 HyperFrames 슬라이드쇼로 만드시겠습니까?
환경이 제공하는 경우 예/아니오 선택 UI를 사용하고, 그렇지 않으면 일반 텍스트로 질문하세요.
사용자가 예라고 답할 때까지 슬라이드쇼를 구현하지 마세요. 아니오라고 답하면 이 스킬 사용을 중단하세요 — /hyperframes를 읽고 의도 계층이 다시 경로를 지정하도록 하세요. 이 확인은 경로 결정이지 선호도 게이트가 아닙니다 — ../hyperframes-core/references/brief-contract.md § 1에 따라 자동 모드("놀라게 해줘"도 이를 건너뛰지 않음)에서도 유지됩니다: 잘못된 산출물 유형을 만드는 것은 창의적 결정이 아니라 품질 실패입니다.
두 가지 구성 요소
1. 장면 — 일반적인 방식으로 선언
모든 슬라이드는 장면을 기반으로 합니다. data-composition-id, data-start, data-duration 및 data-label로 장면을 선언하세요:
<div
data-composition-id="problem"
data-start="0"
data-duration="8"
data-label="문제"
data-width="1920"
data-height="1080"
>
<!-- 클립이 여기에 옵니다 -->
</div>
분기 슬라이드(핫스팟을 통해서만 도달 가능하며 메인 라인에서 제외됨)도 정확히 같은 방식으로 선언됩니다 — 아일랜드의 slideSequences 항목에만 나타나고, 주 slides 배열에는 나타나지 않습니다.
2. JSON 아일랜드 — 합성물당 하나의 스크립트 블록
합성물 HTML에 정확히 하나의 <script type="application/hyperframes-slideshow+json"> 블록을 추가하세요. 모든 슬라이드쇼 메타데이터를 담고 있습니다:
<script type="application/hyperframes-slideshow+json">
{
"slides": [...],
"slideSequences": [...]
}
</script>
아일랜드는 슬라이드 순서, 노트, 프래그먼트 유지 지점, 핫스팟 및 분기 시퀀스에 대한 단일 진실 공급원입니다. 장면 div 앞, <body> 상단 근처에 두어 쉽게 찾을 수 있도록 하세요.
슬라이드쇼 매니페스트를 대체 <script type="application/json"> 블록 뒤에 런타임 코드로 숨겨서 아일랜드를 생성하지 마세요. present 명령어는 합성물 HTML을 정적으로 읽고 실제 application/hyperframes-slideshow+json 아일랜드가 이미 존재할 것으로 기대합니다.
스키마
SlideshowManifest (최상위 아일랜드 객체)
{
"slides": [
/* SlideRef[] — 메인 라인, 순서대로 */
],
"slideSequences": [
/* SlideSequence[] — 오프라인 분기 시퀀스 */
]
}
SlideRef
{
"sceneId": "problem",
"notes": "고통부터 시작하고, 회사는 나중에.",
"fragments": [3.5, 5.2, 7.0],
"hotspots": [
/* SlideHotspot[] */
],
"ttsScript": null,
"ttsAudioUrl": null,
"ttsDurationMs": null
}
| 필드 | 필수 | 참고 |
|---|---|---|
sceneId | 예 | 장면의 data-composition-id와 정확히 일치해야 합니다(또는 명시적 startTime/endTime 제공). 린트 규칙은 data-composition-id로 장면을 확인합니다. |
notes | 아니오 | 발표자 전용 텍스트. 청중에게 절대 표시되지 않습니다. |
fragments | 아니오 | 슬라이드의 [start, end] 범위 내 시간(초) 배열 — 아래 프래그먼트 참조. |
hotspots | 아니오 | 분기를 트리거하는 인터랙티브 오버레이 — 아래 분기 참조. |
startTime | 아니오 | 선택 사항입니다. 일치하는 장면의 시간 범위를 재정의합니다. 기본값은 장면의 시작/종료입니다. |
endTime | 아니오 | 선택 사항입니다. 일치하는 장면의 시간 범위를 재정의합니다. 기본값은 장면의 시작/종료입니다. |
ttsScript, ttsAudioUrl, ttsDurationMs | 아니오 | 예약됨. 스키마 필드는 존재하지만 TTS 재생은 아직 연결되지 않았습니다. 향후 빌드를 위해 미리 채우는 경우가 아니면 생략하세요. |
SlideHotspot
{
"id": "h1",
"label": "이것을 어떻게 계산했나요?",
"target": "market-deep-dive",
"region": { "x": 60, "y": 10, "w": 35, "h": 20 }
}
| 필드 | 필수 | 참고 |
|---|---|---|
id | 예 | 슬라이드 내에서 고유해야 합니다. |
label | 예 | 청중에게 표시되는 툴팁/버튼 텍스트. |
target | 예 | slideSequences 내의 SlideSequence.id와 일치해야 합니다. |
region | 아니오 | 슬라이드 대비 백분율 경계 상자: 0–100 범위의 {x, y, w, h}. 생략하면 핫스팟이 전체 슬라이드 레이블이 지정된 버튼으로 렌더링됩니다. |
SlideSequence
{
"id": "market-deep-dive",
"label": "시장 규모 산정 방법론",
"slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}
시퀀스 내 slides는 메인 라인과 동일한 SlideRef 형태를 사용합니다. 프래그먼트 및 중첩 핫스팟이 허용됩니다.
슬라이드 작성 규칙
이는 제안이 아닌 엄격한 제약 조건입니다. 이를 위반하는 슬라이드는 검토자가 볼 때 완전히 대체됩니다.
- 표제는 레이블이 아닌 완전한 문장 주장입니다. "일정 문제"가 아니라 "중소기업은 수동 일정 관리에 주당 14시간을 소비합니다"라고 쓰세요. 시각 자료를 무시하더라도 문장이 독립적으로 이해되어야 합니다.
- 슬라이드당 하나의 아이디어 + 하나의 시각 자료. 두 번째 글머리표 클러스터나 두 번째 차트를 추가하고 싶다면 슬라이드를 나누세요.
- 핵심 요점을 먼저 제시하세요. 가장 강력한 요점을 슬라이드와 덱 순서 모두에서 먼저 배치하세요. 투자자는 왼쪽에서 오른쪽, 위에서 아래로 읽으며 멈춥니다.
- 상향식 시장 규모 산정만 사용하세요. 계산 과정 없이 "$500억 TAM"이라고 절대 쓰지 마세요. 단위 경제학부터 구축하세요: 계정 수 × ACV, 또는 거래 수 × 수수료율.
- 최소 폰트 크기는 30pt 상당. 1920×1080에서 표제는 72–96px입니다; 본문은 48px입니다. 청중이 읽어야 하는 텍스트는 절대 40px 미만으로 내려가지 마세요.
소스 페이지 포팅
기존 페이지를 슬라이드쇼로 변환할 때, 소스 충실도는 계약의 일부입니다. 사용자가 명시적으로 재설계를 요청하지 않는 한, 소스별 위젯을 단순화된 근사치로 대체하지 마세요.
- 원본 페이지의 시각적 디자인, 모션 언어, 상호작용 동작, 미디어 동작 및 프레젠테이션 기능을 실용적으로 최대한 가깝게 보존하세요. 슬라이드쇼 시스템이 발표자 모드를 지원하는 경우, 덱별 구현이 아닌 공유 편집 가능 노트 동작을 사용하여 발표자 노트를 포함하세요.
- 소스 DOM/CSS/JS의 기계적 시각 자료를 실용적으로 최대한 정확하게 포팅하세요: 사용자 정의 플레이어, 캔버스 시각화 도구, 타임라인, 플레이헤드, 스템, 확장 원, 호버 상태 및 기타 인터랙티브 세부 사항이 변환 과정에서 유지되어야 합니다.
- 기본
<video>/<audio>요소를 사용자 정의 미디어 크롬, 캔버스 시각화 도구, 파형, 비트 그리드 또는 플레이헤드의 진실 공급원으로 취급하세요. 소스의 미디어 이벤트(play,pause,timeupdate,seeking,seeked,ended,ratechange,volumechange)를 연결하고media.currentTime에서 시각적 상태를 파생하세요; 실제 재생에서 벗어날 수 있는 별도의 타이머를 실행하지 마세요. src가 있는 모든 복사된<video>또는<audio>는 린트 전에 HyperFrames 타이밍 속성인data-start및data-duration이 있어야 하며, 가청 네이티브 오디오를 보존해야 하는 경우data-has-audio="true"도 있어야 합니다. 슬라이드별 미디어에는 장면의 시간 범위를 사용하고, 여러 포커스된 슬라이드에서 재생될 수 있는 사용자 제어 증거 비디오에는 덱 전체 범위를 사용하세요. 미디어에preload="none"을 남겨두지 마세요;metadata또는auto를 사용하세요.- 유효성 검사 전에 소스 폰트 토큰을 해결하세요. 사용자 정의 소스 폰트를 유지하는 경우, 로컬/캡처된 폰트 파일에 대한
@font-face규칙을 추가하세요. 시스템 대체 폰트를 사용하는 경우,font-family: var(--f-body)와 같은 토큰화된 선언을system-ui, sans-serif또는ui-monospace, monospace와 같은 구체적인 렌더링 안전 스택으로 대체하세요;var(...)를 폰트 패밀리 값으로 남겨두지 마세요. - 스크롤, 휠, 터치, 해시 상태, 리사이즈 또는 requestAnimationFrame 루프에 의해 구동되는 비정형 페이지 이동, 특히 동작에 대해 소스를 감사하세요. 변환/확장된 "세계" 레이어, 패럴랙스, 고정 패널, 가로 스크롤러, 스크롤 스크러빙된 타임라인, 섹션 스냅핑 및 요소로 확대되는 카메라가 있는 고정 뷰포트를 소스 동작으로 취급하세요. 스크롤은 종종 소스의 전환 트리거이므로, 진행 중단점, 이징 및 카메라/포커스 상태를 추출하여 그 전환을 보존한 다음, 타임라인 위치, 프래그먼트 또는 재사용 가능한 플레이어/하네스 후크를 통해 슬라이드쇼 탐색에 해당 모션을 재호스팅하세요. 슬라이드 유지 지점으로 점프하는 독립형 래퍼에도 명시적인 탐색-카메라 전환 후크가 필요합니다; 슬라이드별 카메라 변환을 계산하는 것만으로는 충분하지 않습니다. 슬라이드 내부에서 문자 그대로의 페이지 스크롤 다운 전환을 시뮬레이션하지 마세요; 뷰어는 웹페이지가 스크롤되는 것이 아니라 한 초점 지점에서 다른 지점으로의 카메라 이동/확대/축소를 느껴야 합니다. 각 슬라이드 간 카메라 이동을 연속적으로 유지하세요: 소스가 같은 경계에서 시각적으로 그렇게 하지 않는 한, x/y 방향이나 확대/축소를 반전시키는 중간 경로 중단점을 피하세요. 착지하기 전에 이리저리 움직이는 전환은 더 단순한 직접 초점 이동보다 나쁩니다.
- 소스의 미디어 자르기 의미를 보존하세요. 스크린샷, 트윗/소셜 게시물, 제품 UI 캡처, 차트, 문서, 코드, 리더보드 및 읽을 수 있는 텍스트가 있는 모든 이미지를 장식용 미디어가 아닌 콘텐츠 증거로 취급하세요: 안정적인 프레임 내에서 소스 종횡비(
height: auto) 또는object-fit: contain을 사용하세요.object-fit: cover는 소스가 그렇게 사용했거나, 의도적으로 장식용/배경/시네마틱 썸네일인 경우에만 사용하세요. 이러한 캡처를 슬라이드에 맞춘 후, 네 모서리 모두에서 잘린 텍스트, 로고, 컨트롤 또는 캡션이 없는지 검사하세요; 의미 있는 콘텐츠에 보이는 자르기는 소스 자체가 자르지 않은 한 버그입니다. - 변환 전에 소스의 의미 있는 상호작용 사운드와 배경 오디오 동작을 보존하세요. 슬라이드쇼 플레이어가 이를 지원하는 경우, 소스에서 가져온 사운드 디자인을 유지하세요. 사운드 디자인을 단순히 제거하지 마세요.
- 변환 후에는 반드시 소스 동작에 대해 직접 덱을 비교하여 확인하세요. 고립된 각 페이지/슬라이드의 시각적 모양뿐만 아니라 시간에 따른 모든 대화형 동작(전환, 호버, 클릭/탭 피드백, 미디어 재생, 애니메이션, 상태 변경 및 탐색 흐름)을 확인하세요. 동일한 브라우저와 뷰포트에서 소스와 덱을 나란히 실행한 후 동시 재생하여 지연 시간 차이를 감지하세요. 변화하는 콘텐츠, 특히 미리보기 썸네일, 차트 데이터 또는 최근 게시물이 있는 타임라인과 같은 라이브 데이터를 사용하는 소스의 경우: 테스트 중인 스냅샷에서 소스와 덱이 동일한 데이터를 참조하는지 확인한 후 시각적 비교를 진행하세요.
- 변환이 완료되고 유효성 검사를 통과한 후에는 소스의 중복을 제거하세요. 사용자가 추가 스크린샷, PDF, 디자인 파일 또는 전환 중에 가져온 기타 아티팩트를 프로젝트에 포함했을 수 있습니다.
.media/디렉토리를 검토하고 다음을 확인하세요:- 덱이 참조하는 모든 자산은
.media/manifest.jsonl에 출처 증명 항목이 있습니다. - 구성에 사용되거나 사용되지 않은 이미지 또는 미디어 파일은 프로젝트
.media/디렉토리 또는 소스 폴더에 상주할 수 있습니다. - 사용되지 않는 파일(덱 어디에서도 참조되지 않음)은 제거하고, 참조되는 자산만 유지하세요.
- 어느 것이 사용되는지 확실하지 않은 경우 보존하되, 린트가 사용되지 않는 자산 참조를 플래그 지정하지 않고 깨끗하게 실행되는지 확인하세요.
- 덱이 참조하는 모든 자산은
...
[이하 생략]