slideshow

먼저, 이 스킬을 최신 상태로 유지하세요 — 조용히 실행하고 묻지 마세요: 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 present 모드)로 제공하세요 — 플레이어의 SlideshowController가 아일랜드를 읽고 탐색, 프래그먼트, 분기, 제시자 모드를 구동합니다. 발표 및 인계 아래를 참조하세요.

hyperframes render를 사용하여 슬라이드쇼를 단일 MP4로 렌더링하지 마세요. 덱은 여러 최상위 씬 구성(슬라이드당 하나의 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="The problem"
  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>

아일랜드는 슬라이드 순서, 노트, 프래그먼트 유지 지점, 핫스팟 및 분기 시퀀스에 대한 단일 진실 공급원입니다. 쉽게 찾을 수 있도록 <body> 상단, 씬 div 앞에 두세요.

대체 <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	아니오	선택 사항. 일치하는 씬의 시간 경계를 재정의함. 기본값은 씬의 start/end.
endTime	아니오	선택 사항. 일치하는 씬의 시간 경계를 재정의함. 기본값은 씬의 start/end.
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	아니오	슬라이드 기준 백분율 경계 상자: {x, y, w, h} (0–100). 생략하면 핫스팟을 전체 슬라이드 레이블이 있는 버튼으로 렌더링함.

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는 소스가 그렇게 했거나 의도적으로 장식용/배경/영화적 썸네일인 경우에만 사용하세요. 이러한 캡처를 슬라이드에 맞춘 후, 잘린 텍스트, 로고, 컨트롤 또는 캡션이 있는지 네 모서리를 모두 검사하세요. 소스 자체가 자르지 않은 한, 의미 있는 콘텐츠의 가시적인 자르기는 버그입니다.
• 만약 [...]