Hyperframes Slide

HyperFrames Slide Deck

역할

이 스킬은 1920×1080 HyperFrames 슬라이드덱의 상위 조립 스킬이다.

• 덱 전체 구조, 슬라이드 타입 선택, data-skill 값, 타임라인 흐름을 총괄한다.
• 개별 슬라이드의 HTML/CSS/GSAP 세부 구현은 하위 hyperframes-slide-work-* 스킬이 소스 오브 트루스다.
• hyperframes-overview는 정적 리뷰 페이지 생성기일 뿐이다. 슬라이드 타입과 레이아웃 판단은 이 스킬에서 먼저 결정한다.
• 인스타/SNS 카드뉴스는 이 스킬 대상이 아니다. 카드뉴스는 hyperframes-card-news를 사용한다.

하위 슬라이드 스킬 구조

슬라이드를 만들거나 수정할 때는 아래 표에서 타입을 고르고, 해당 하위 스킬을 함께 적용한다.

임의 타입을 만들지 않는다. 새 타입이 필요하면 먼저 hyperframes-slide-work-<type> 하위 스킬을 만들고 이 표에 등록한다.

기본 캔버스와 공통 규칙

• 캔버스: 1920×1080, 16:9.
• 루트: <div id="root" data-composition-id="main" data-start="0" data-duration="..." data-width="1920" data-height="1080">.
• 각 visible slide는 class="scene clip"을 포함하고 data-start, data-duration, data-track-index를 가진다.
• 슬라이드 duration 기본값은 6초. 읽을 양이 많으면 7~8초까지 늘린다.
• 기본 폰트는 Paperlogy 우선:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/subsets/Paperlogy-dynamic-subset.css">
  

  html, body { font-family: "Paperlogy", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; }
  

• GSAP timeline은 반드시 paused로 만들고 window.__timelines["main"]에 등록한다.
• deterministic logic만 사용한다. Date.now(), Math.random(), runtime fetch 금지.

작업 순서

1. 요청 의도 분류

   • 16:9 발표/설명 슬라이드면 이 스킬을 사용한다.
   • 인스타그램/SNS 카드뉴스면 hyperframes-card-news로 전환한다.
   • 오버뷰만 요청해도 슬라이드 타입 판단은 이 스킬 기준으로 한다.

2. 슬라이드 타입 선택

   • 메시지 목적에 맞춰 위 표의 data-skill 중 하나를 고른다.
   • 선택한 타입의 하위 hyperframes-slide-work-* 스킬을 읽고 구조·CSS·GSAP 패턴을 따른다.

3. index.html 수정

   • 새 슬라이드는 id="s-N" 규칙을 쓴다.
   • data-start는 이전 슬라이드 종료 시각에 맞춘다.
   • 루트 data-duration을 전체 길이에 맞춰 갱신한다.
   • 하위 스킬의 GSAP 엔트런스 패턴을 timeline에 추가한다.

4. overview.html 동기화

   • 사용자가 오버뷰를 보고 있거나 슬라이드 내용을 리뷰해야 하면 hyperframes-overview와 hyperframes-overview-edit를 함께 사용한다.
   • 같은 슬라이드를 정적 DOM으로 추가하고 data-slide="N" + data-skill="<type>"를 붙인다.
   • 오버뷰의 총 슬라이드 수, 풋터 N / total, 좌측 썸네일 동기화 구조를 갱신한다.

5. 검증

   • HTML composition을 수정했다면 npx hyperframes lint topics/<주제>를 실행한다.
   • 오류는 반드시 수정한다. 경고도 seek/visibility 관련이면 렌더 전에 해결한다.
   • 영상 렌더는 프로젝트 규칙상 사용자가 명시적으로 요청했을 때만 실행한다.

타입 선택 기준

• 제목 하나가 메시지의 전부다 → title
• 핵심 요점을 텍스트로 정리한다 → title-bullets
• 대표 이미지/스크린샷이 중심이다 → title-image
• 키워드 묶음으로 압축한다 → title-tags
• 시각 자료와 설명이 동시에 필요하다 → split
• 숫자 자체가 메시지다 → stat
• 3단계 이상 순서가 있다 → steps
• 여러 선택지나 항목을 나란히 비교한다 → compare
• 이전 상태와 이후 상태의 변화가 핵심이다 → evolution-flow
• 한 문장을 오래 남기고 싶다 → quote
• 어린이집/유치원 학부모 안내 톤이다 → kindergarten-notice

hyperframes-overview와의 관계

hyperframes-overview는 다음만 담당한다.

• index.html의 슬라이드를 정적 리뷰용 overview.html로 변환
• 좌측 썸네일, 우측 디테일, Aim, Edit UI 제공
• live/static 서빙 흐름 제공

슬라이드 타입 표, 하위 스킬 선택, data-skill 허용 목록은 이 hyperframes-slide 스킬이 담당한다. overview를 만들거나 갱신할 때도 이 스킬의 타입 결정을 먼저 따른다.