스킬 자체의 표현으로
WebGL 히어로 배경, 발표자 뷰, 청중 화면 동기화, 발표자 노트, 챕터 구분 페이지, 큰 숫자 데이터 페이지, 이미지 그리드를 갖춘 단일 자립형 HTML 파일로 가로 스와이프 웹페이지 덱을 생성합니다. 서로 배타적인 두 가지 비주얼 방향이 있습니다: A, Electronic Magazine x E-ink(세리프 제목, 유동적 배경, 따뜻한 색조)와 B, Swiss International Style(전체 산세리프, 12열 그리드, 그리드 도트 배경, IKB, 레몬 옐로, 레몬 그린, 세이프티 오렌지 중 하나의 고대비 강조색).
스타일 B의 본문 페이지는 data-layout으로 태그된 22개의 등록된 레이아웃(S01-S22) 중 하나를 사용해야 합니다. 슬라이드 도구 없이 한 번에 완성된 덱을 만들고 싶은, 강연·론칭·데모 데이를 준비하는 디자이너와 개발자를 위한 것입니다.
산출물
- CSS, WebGL 셰이더, 페이징 JS, 발표자 모드가 이미 연결된 하나의 자립형 문서로 제공되는, 가로로 페이지가 넘어가는 단일 파일 HTML 덱입니다.
- 슬라이드의 data-slide-id 값과 동일한 순서로 생성되는 SPEAKER_NOTES 레코드로, 목적, 발화 내용, 전환, 선택적 스테이징 필드를 담고 있습니다.
- 이후 반복 작업의 토대가 되도록 덱 옆에 마크다운 파일로 저장되는 개요입니다.
작동 방식
- 01먼저 업스트림에 업데이트가 있는지 확인합니다
스킬은 저장소를 가져와 HEAD가 업스트림보다 얼마나 뒤처져 있는지 계산한 후, 무엇이든 가져오기 전에 사용자에게 묻습니다.
- 02작성 전에 일곱 가지 질문에 대해 합의합니다
스타일 A 또는 B를 먼저 정하고, 이어서 대상 청중과 상황, 소요 시간, 소스 자료, 이미지나 스크린샷, 테마 팔레트, 그리고 반드시 지켜야 할 제약 사항을 정합니다.
- 03선택한 템플릿을 복사합니다
스타일 A는 assets/template.html, 스타일 B는 assets/template-swiss.html을 덱 위치로 복사하고, 그와 나란히 images 폴더를 생성합니다.
- 04클래스 이름을 사전 점검합니다
슬라이드 마크업을 작성하기 전에 템플릿의 스타일 블록을 읽고, 사용하는 각 클래스가 그곳에 정의되어 있는지 확인합니다.
- 05레이아웃 선택 전에 테마 흐름을 계획합니다
레이아웃을 고르기 전에 모든 페이지의 테마 클래스(hero dark, hero light, light, dark)를 작성하고 정렬합니다.
- 06체크리스트로 스스로 점검합니다
생성 후 references/checklist.md을 열어 항목별로 하나씩 확인하고, 이어서 검증기와 브라우저 미리보기를 실행합니다.