splatstudio-landing-deck

splatstudio-landing-deck은(는) 무엇을 하나요?

splatstudio-landing 스킬의 자매 스킬입니다. 동일한 Atelier Zero 시각적 시스템(따뜻한 종이, Inter Tight + Playfair Display, 기울임꼴-세리프 강조, 산호색 점)을 사용하지만, 긴 스크롤 페이지 대신 수평 잡지 스타일 스와이프 덱으로 페이지 매김되어 제공됩니다.

탐색 모델은 guizang-ppt 스킬에서 의도적으로 차용했습니다. ←/→ 화살표 키, 휠 / 스와이프, 개요 그리드를 위한 ESC — 웹 슬라이드 덱을 스크롤하는 느낌이 아닌, 인쇄 잡지를 한 장씩 넘기는 느낌을 줍니다.

inputs.json + ../splatstudio-landing/styles.css
        │
        └──────────► scripts/compose.ts
                            │
                            ▼
                   <out>/index.html
                   (슬라이드 당 하나의 뷰포트, 수평 스와이프)

제공 기능

• N개의 뷰포트 크기 슬라이드가 하나의 변형된 플렉스 트랙에 수평으로 배치된 단일 독립 HTML 파일입니다.
• 키보드 탐색: ←/→ · ↑/↓ · PageUp/PageDown · Space · Home/End.
• 휠 + 터치 스와이프 (트랙패드 한 번 스치면 과도하게 넘어가지 않도록 모멘텀 가드 포함).
• 슬라이드별 크롬 스트립: 브랜드 마크, 덱 제목, 위치, 로마 숫자 연도, 실시간 슬라이드 카운터 (01 / 11).
• 산호색 진행 막대가 하단에 있으며, 진행됨에 따라 채워집니다.
• 점 표시기 스트립이 하단 근처에 있습니다. 점을 클릭하여 이동할 수 있습니다.
• ESC 개요 그리드 — 모든 슬라이드의 축소판으로, 클릭하여 이동할 수 있습니다. guizang-ppt의 개요 UX를 반영합니다.
• 자매 스킬과 동일한 16슬롯 이미지 라이브러리를 재사용합니다. 중복 자산이 없습니다.

슬라이드 유형

종류	용도
cover	시작 부분의 제목판. 2열 텍스트 + 콜라주 아트.
section	챕터 사이의 로마 숫자 구분선. 중앙 정렬, 전체 여백.
content	눈썹 + 제목 + 본문 + 글머리 기호 + 선택적 콜라주 아트.
stats	최대 4개의 큰 통계 셀 (값 · 레이블 · 하위 레이블).
quote	인용문 + 저자. 오른쪽에 선택적 초상화 콜라주.
cta	마무리 제안 + 1-2개의 버튼.
end	큰 기울임꼴 세리프 마지막 단어 + 서명 바닥글.

일반적인 11슬라이드 피치 데크:

1. cover     — 제목판, 히어로 콜라주
2. section   — "I. 문제점"
3. content   — 개요 / 선언문, 글머리 기호
4. content   — 역량, 글머리 기호
5. stats     — 4개의 숫자
6. section   — "II. 느낌"
7. content   — 방법, 글머리 기호
8. content   — 선별된 작업
9. quote     — 고객 추천사
10. cta      — 기본 + 보조 액션
11. end      — 큰 마지막 단어 + 서명

작업 흐름

1. inputs.json 작성

inputs.example.json (Open Design 피치 데크)에서 시작하세요. 브랜드 블록, 이미지 전략, 자산 경로는 자매 스킬과 동일합니다. 이미 splatstudio-landing 브리핑을 작성했다면 brand와 imagery를 그대로 복사하세요.

각 슬라이드에 대해 kind를 선택하고 schema.ts의 입력 필드를 채우세요. MixedText (산세리프 기준선 + 기울임꼴 세리프 강조 범위 + 산호색 마침표)는 자매 스킬에서 사용하는 것과 동일한 인코딩입니다. 해당 스킬의 inputs.example.json을 참조하세요.

2. (선택 사항) 이미지 생성 또는 스텁 생성

이 스킬은 자체 이미지 생성기 또는 플레이스홀더 스크립트를 제공하지 않습니다. splatstudio-landing의 16슬롯 라이브러리를 공유합니다. 이미지를 재생성하거나 스텁을 만들려면:

# gpt-image-2 (fal.ai)를 통해 생성
FAL_KEY=... npx tsx ../splatstudio-landing/scripts/imagegen.ts ../splatstudio-landing/inputs.example.json --out=../splatstudio-landing/assets/

# 또는 종이 질감 SVG 플레이스홀더
npx tsx ../splatstudio-landing/scripts/placeholder.ts ../splatstudio-landing/assets/

덱의 inputs.imagery.assets_path를 해당 PNG 파일이 있는 위치로 설정하세요. (예시 기본값: ../splatstudio-landing/assets/)

3. 덱 컴포즈

npx tsx scripts/compose.ts inputs.json out/index.html

컴포저는 inputs.json을 읽고, 표준 Atelier Zero 스타일시트를 ../splatstudio-landing/styles.css에서 불러오고, 덱 특화 규칙(수평 플렉스 트랙, 슬라이드 레이아웃, HUD, 점 탐색, ESC 개요, 키보드/휠/터치 핸들러)을 적층하여 단일 독립 HTML 파일을 작성합니다.

4. 자체 점검

• 새 브라우저 탭에서 HTML을 엽니다. 슬라이드 1(커버)이 오른쪽 상단 크롬 스트립에 01 / N이 표시되어야 합니다.
• → (또는 Space, 또는 아래로 스크롤)를 누릅니다. 뷰포트 하나만큼 오른쪽으로 부드럽게 이동합니다. 점 탐색이 진행되고 산호색 진행 막대가 한 칸 앞으로 이동합니다.
• End를 누릅니다. 마지막 슬라이드로 이동합니다.
• Home을 누릅니다. 슬라이드 1로 돌아갑니다.
• Esc를 누릅니다. 축소된 섬네일이 있는 개요 그리드가 나타납니다. 타일을 클릭하면 이동하고 개요가 사라집니다.
• 1080px 및 640px로 크기를 조정합니다. 커버/콘텐츠 슬라이드가 단일 열로 축소됩니다. 점 탐색은 여전히 작동합니다. 크롬 스트립이 축소됩니다.
• prefers-reduced-motion: reduce (DevTools → Rendering): 페이지 전환이 빠르고 멀미를 유발하지 않습니다.
• Lighthouse: 대비 AA, font-display 스왑, 레이아웃 이동 없음.

경계 조건

• 자매 스킬의 스타일시트를 재사용합니다. 컴포저는 컴파일 시간에 ../splatstudio-landing/styles.css를 읽습니다. 여기서 중복 복사본을 유지하지 마십시오. Atelier Zero 토큰이 변경되면 자매 스킬에서 한 번만 수정하세요.
• 자매 스킬의 이미지 라이브러리를 재사용합니다. 다시 프롬프트하거나 다시 렌더링할 필요가 없습니다. 동일한 16개의 판이 두 표면 모두에 작동합니다.
• 슬라이드를 단일 뷰포트로 유지합니다. 슬라이드 내용이 1280×800에서 100vh × 100vw에 맞지 않으면 넘치거나 비좁게 느껴집니다. 내용을 줄이거나 두 개의 슬라이드로 나누세요.
• 수직 스크롤 스냅으로 전환하지 마십시오. 수평 스와이프 자세가 이 스킬을 잡지 스프레드처럼 느끼게 만듭니다. 수직 스크롤러는 긴 랜딩 페이지에 불과할 것입니다.
• 라우터를 추가하지 마십시오. 이는 단일 파일 아티팩트입니다. 다중 페이지 덱은 범위를 벗어납니다. 여러 덱 경험을 제공하려면 각 덱을 개별적으로 렌더링하고 부모 인덱스에서 링크하세요.

참고

• splatstudio-landing — 랜딩 페이지 자매 스킬.
• guizang-ppt — 이 스킬이 차용한 잡지 덱 탐색 패턴.
• design-systems/atelier-zero/DESIGN.md — 토큰 명세.